후회가 없도록

* 이 글은 인프런의 '주간 인프런 #27 - UI 디자인 툴 Top 3 비교하기' 글을 상당 부분 참고하여 제가 이해하기 쉽도록 다시 간단하게 요약 및 정리한 글입니다. 최근 프론트엔드 개발 파트로 참여하게 된 팀 프로젝트가 있는데, 해당 프로젝트에서 유일한 프론트엔드 개발자인 만큼 기본적인 UI 설계 및 구성은 내가 주도적으로 하는 것이 맞다고 판단하였다. 이전에 이어드림 교육 과정에서 중간 프로젝트로 진행했던 팀 프로젝트에서는 빠른 시간 내에 눈에 보이는 결과 먼저 만들기 위해 부리나케 UI 프레임워크나 부트스트랩을 이용했다. 지금은 비교적 여유롭고(그렇다고 매우 느긋하게 만들겠다는 것인 아니지만!) 내가 나아가려는 직무에 대해 조금 더 구색을 갖추고, 트렌드에 맞게 프로젝트를 진행해보고 싶어서 우..

화면 출력에 특화된 프론트엔드 프레임워크, 리액트 1. 기원 1) 누가 페이스북의 소프트웨어 엔지니어, Jordan Walke 2) 언제 - 2011년 페이스북의 뉴스피드에 첫 적용 - 2012년 인스타그램닷컴에 적용 - 2013년 5월 JSConf US에서 오픈 소스화 3) 어디서 페이스북 및 공동체 4) 왜 리액트를 개발한 Jordan Walke는 PHP용 컴포넌트 프레임워크인 XHP에서 영향을 받았다고 한다. 기존의 자바스크립트는 어떤 속성에 대해 값이 변경될 때, 그 속성에 해당하는 DOM과 요소를 찾은 다음 사용자가 정의한 규칙(함수, 이벤트 등)을 적용한다. 만약 이런 인터랙션이 자주 발생하고, 동적인 UI가 요구되는 상황에서는 이런 규칙이 엄청 많아질 것이고, 개발자는 그런 규칙과 DOM을 ..

기간: 2021년 11월 8일(월) ~ 2021년 12월 3일(금) (약 4주) 인원: 6명(프론트엔드 2명, 백엔드 2명, 데이터 분석 2명) 역할: 프론트엔드 담당 동기: '지피지기면 백전불태'. 적을 알고 나를 알면 백 번 싸워도 위태롭지 않다는 뜻으로, COVID-19를 알고 우리에게 끼친 영향을 알면 우리가 더 나은 가치 판단을 할 수 있을 것이라는 아이디어에서 프로젝트와 그 이름을 떠올렸습니다. 내용: 교통(서울 주요 지하철역), 문화(영화, 공연 관람), 소비(유통업체별 변화), 생활(유명 검색 포털 사이트 키워드 통계) 등에 걸친 데이터를 시각화 및 분석하여 정보를 제공하는 서비스 프로젝트입니다. 프론트엔드 메인 페이지의 두 화면은 서로 위 또는 아래 드래그 한 번만으로 매끄럽게 애니메이션..

웹 서비스 개발 및 배포를 위해선 프론트엔드(front-end)와 백엔드(back-end)가 구성이 되어야 하고, 그중 시각적이고 직관적인 부분을 담당하는 프론트엔드는 우리 눈에 보이는 웹 페이지 자체를 만드는 영역입니다. 그리고 웹 페이지를 제작하기 위해선 HTML, CSS, JS(Javascript, 자바스크립트)라는 3가지 구성요소를 이해하고, 사용할 줄 알아야 합니다. 이 글에서는 강의(스파르타코딩클럽)와 함께 제가 이해한 내용을 바탕으로 정리한 내용입니다. 우선 이 글을 요약하면 다음과 같습니다. 웹 페이지 제작에는 HTML, CSS, JS, 이렇게 3가지 도구 및 언어를 알아야 하며, 이 3가지 요소는 사람으로 비유했을 때 다음과 같은 역할을 합니다. 1. HTML: 사람 신체의 뼈, 신체 구..