React의 Component 에는 Life Cycle(생명주기)이 존재합니다. 라이프 사이클은 Component가 생성(Mount), 업데이트(Update), 제거(UnMount) 될 때 특정 이벤트를 호출하는 것입니다. 이러한 Life Cycle을 다루기 위해 리액트 클래스 컴포넌트는 Lifecycle Method를 사용하고, 함수형 컴포넌트는 Hook을 사용합니다. 이번 포스팅은 리액트 클래스 컴포넌트의 Lifecycle Methods에 대해 알아보겠습니다. 이번 포스팅에선 이전 포스팅에서 다룬 클래스 컴포넌트 개념과 React Hooks의 개념이 일부 사용되고 있습니다. Class Componet 생명주기 Lifecycle Methods는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서..

최근 진행한 Frontend 스터디 시간엔 React Hooks에 대한 학습을 진행하였습니다. React Hooks는 React 16.8 버전(2019년도)에 추가된 공식 라이브러리입니다. 제가 항상 강조하는 부분이지만 어떤 기술 스택을 배우기 이전에 '도입하게된 이유'를 학습하는 것은 해당 기술에 대한 다채로운 이해를 돕습니다. 따라서 이번 React Hooks 포스팅은 Hook의 도입 이전에는 어떠한 방식을 사용했고, React Hooks는 왜 도입하게 되었으며, React Hooks의 종류와 사용법에 대해 정리하였습니다. 이번 포스팅은 '이야기'의 형식을 사용하여 평소보다는 긴 호흡으로 작성하였습니다. Class Component와 Function Component 과거 React는 Class Co..

Ruby on Rails의 개발자 데이비드 하이네마이어 핸슨(이하 DHH)의 Turbo 8 is Dropping TypeScript 포스트가 최근 화제를 모으고 있습니다. 최근 Svelte 또한 프레임워크 개발 시 TypeScript를 사용하지 않는 방향으로 전환하기도 해서 더욱 눈길이 가는 소식입니다. 해당 게시물은 여태까지 왜 TypeScript를 배우고 프로젝트에 사용해야하는지에 대해 별다른 비판없이 수용하던 저에겐 상당히 충격적인 내용을 다루고 있었습니다. 기회가 된다면 원문 전체를 옮겨보고 싶지만 오늘은 해당 게시물의 중요 포인트에 대해서만 다뤄보겠습니다. Turbo 8 is dropping TypeScript 원문 내용 DHH(David Heinemeier Hansson)가 제기한 TypeSc..

React에서 개발을 진행하신 분들은 아마 한번쯤은 JS확장자와 JSX확장자를 언제 사용해야 하는가에 대한 의문이 드실 수 있습니다. 대부분의 React강의를 보면 JSX확장자를 이용하여 개발을 진행하면 된다고 하는 경우가 일반적입니다. 하지만 간혹 JS확장자로 파일을 만들고 컴파일을 진행해도 에러 문구 없이 정상적으로 컴파일이 되는 경험을 하실 수 있습니다. 그렇다면 왜 jsx확장자를 사용하여 파일을 생성하라고 권장할까요 ? js와 jsx의 차이는 무엇일까요 ? 이러한 궁금증은 Typescript를 적용하여 React프로젝트를 진행할 경우 더욱 커지게 됩니다. 대부분의 강의 및 자료에서 TS확장자와 TSX확장자를 명확히 구분하여 사용하는데, '어떠한 기준'을 바탕으로 이를 구분하는지 모르고 사용하는 경..

컴포넌트나 소스파일들을 import 해올 때에는 해당 파일의 위치를 경로를 통해 명시해야 합니다. 하지만 프로젝트의 규모가 커질수록 불러오는 path의 경로가 난잡해지기 마련입니다. 특히 새로운 파일을 생성하거나 이미지를 추가하였을 때 해당 파일이 사용되는 곳에 경로를 추가하는 작업은 끔찍한 경험 중 하나입니다.. 이 때 오늘 배울 절대 경로를 사용한다면 보다 간결하고 직관적인 방식으로 경로를 추가할 수 있습니다. 오늘은 React의 대표적인 오버라이딩 패키지인 Craco를 설치하고, 이를 이용하여 Typescript Path alias를 설정하는 방법에 대해 알아보겠습니다. Craco 소개 CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있..

프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요성을 느끼게 됩니다. 저도 최근에는 프로젝트를 시작하기 전에 필요한 폴더들을 미리 생성하고 전체적인 프레임을 설계한 이후 개발을 진행하고 있습니다. 이번 포스팅은 리액트를 사용할 때 폴더의 구조를 어떻게 잡으면 좋을지에 대해 다뤄보겠습니다. 먼저 CRA를 설치했을 때 기본적으로 설치되는 폴더 및 파일들의 역할에 대해서 간단히 살펴보겠습니다. CRA의 초기 폴더구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├── package.json ├── package-lock.json └── README.md node_modules 현재 ..

페이지를 제작하다 보면 공통 요소들이나 단일 요소를 담거나 감쌀 때 container나 wrapper를 많이 사용하게 됩니다. container와 wrapper 모두 일반적으로 '어떠한 요소들을 포함한다'는 의미를 지니고 있으며 클래스 네임으로 많이 사용되는 단어입니다. CSS 코드를 작성하면서 제가 작성한 코드를 확인해보니 두 용어를 혼용하여 사용하고 있었다는 점을 알게 되었습니다. 해당 이슈에 대해 향후 코드를 작성하거나 리뷰할 때 참고할 만한 Coding Convention이 있을까 궁금하여 자료 조사를 시작하였습니다. 클래스 네이밍을 container로 정할까, wrapper로 정할까 container와 wrapper 모두 무언가를 포함한다는 점에서 같은 의미의 단어로 사용할 수 있습니다. Rea..