이번 글에서는 CRA 세팅과 관련하여 Git hooks를 다룰 수 있는 husky를 다뤄볼 생각입니다. 앞서 소개한 ES Lint나 Prettier처럼, CRA 개발 환경이 아니더라도 매우 유용한 패키지입니다. Husky 간단 소개 Husky는 개발 환경에서 Git Hooks를 사용하기 쉽게 만들어 주는 도구입니다. 그럼 Git Hooks는 뭐냐고요? Git Hooks은 git을 쓰다가 특정 이벤트(commit이나 push 같은)가 일어나는 순간에 특정 스크립트가 실행되도록 도와주는 것입니다. Git으로 버전 관리를 할 때 생성되는 .git/hooks 폴더에 스크립트를 직접 넣어도 이런 Git Hooks 관리를 할 수 있습니다. 다만, .git/hooks 폴더 같은 경우에는 형

ES Lint에 이어서, 내 코드의 포맷팅을 도와주는 Prettier를 자세하게 다뤄봅니다. CRA에 포함된 ESLint와 조합되면 강력한 위력을 지닌 포맷터입니다. 코드 포맷터(Code Formatter) 코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 미리 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다. 언뜻 생각하면 저번 글에서 다루었던 린터와 비슷한 기능을 하는 것 같기도 합니다. 린터는 주로 코드 내의 에러를 검출하고 코드 문법을 강제하는 등 코드 품질을 향상시키는 것이 주요한 기능입니다. (ESLint 같은 경우에는 기본적인 포맷팅 기능도 같이 탑재되어 있습니다.) 포맷터는 indent 길이, 따옴표 종류, 한 줄 안에서 코드의 최대 길이 등 코드의 모양새를 미리 정해진 규칙에 따라 손질해주는 것입니다. 따라서 실제 코드의 오류를 잡아주거나 하지는 못합니다. ![](https://images.velog.io/ima

CRA에는 ES Lint 기능이 내장되어 있습니다. 코드의 안정성을 높히고 퀄리티를 보장해주는 유용한 도구입니다. ES Lint의 개념을 살펴보고, 사용법도 다뤄볼 생각입니다. Linter는 무엇인가 위키에서 린트를 한번 검색해보았습니다. 다음과 같은 설명이 나오는군요. > 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 린트는 쉽게 말해서, 코드의 문법 오류나 패턴에서 벗어난 코드를 지적해줍니다. 결과적으로 일관된 스타일로 코드를 작성할 수 있게 해주는 도구입니다. Lint라는 단어가 영어로 '보푸라기'를 뜻합니다. 그래서 문법이나 컨벤션에 어긋난 코드를 찾아

이번 글부터는 실제 React 프로젝트를 위해 개발 환경을 구성하는 방법을 담을 예정입니다. 저처럼 이제 막 React 개발을 입문하시는 분들에게 조금이나마 도움이 되었으면 좋겠습니다. Create React App Create React App, 줄여서* CRA*라고도 부릅니다. 이제부터는 CRA라고 통일해서 부르도록 하겠습니다. 풀네임 치는게 너무 귀찮네요... CRA는 페이스북 팀에서 오픈 소스로 만든 React 개발 환경 구축 툴입니다. React도 페이스북에서 만든 거고, 이 친구도 페이스북에서 만든거라 공식적으로 React에 지원되는 툴이라고 보시면 됩니다. React 개발을 시작할 때, React와 React DOM 설치하셨던 것 기억나시나요? CRA는 이러한 기본 패키

오늘 글에서는 저번 시간에 간략하게 배웠던 컴포넌트의 생명 주기에 대해 알아보려고 합니다. 이걸 왜 알아야 하는지, 알고 나면 어떻게 써먹을 수 있는지 찬찬히 배워보겠습니다. Component Lifecycle? 생명 주기(Lifecycle)라는 개념에 대해 들어보신 적 있나요? 저는 경영학과 출신이다 보니, 마케팅을 배우면서 제품의 생명 주기에 대해 배운 기억이 제일 먼저 떠 오릅니다. 그 외에도 다양한 분야에서 생명 주기는 자주 등장하는 개념입니다. 생명 주기는 어떠한 프로세스 내에서, 특정 타이밍에 특정 동작이 일어나는 지에 대해 설명하는 개념이라고 할 수 있습니다. 그런데 React에도 생명 주기가 있었으니... 바로 React의 핵심이라고 할 수 있는 컴포넌트가 생명 주기의 개념을 동반하고 있습니다. ![](https://images.velog.io/images/kite1993/post/17b22b2f-0e35-4442-a3ed-2e0232e4b3

자바스크립트에서 이벤트 관리를 했던 기억나시나요? React에도 당연히 이벤트를 다루는 기능이 마련되어 있습니다. 이벤트를 다룰 수 있어야 진정한 의미의 동적인 웹 개발이 가능한 만큼, React의 이벤트 핸들링에 대해 알아 보겠습니다. 이벤트 핸들링 in React React에서의 이벤트 핸들링은 자바스크립트의 그것과 비슷합니다. HTML DOM에 특정 행동을 하면, 미리 설정해 놓은 이벤트가 발생하게끔 하는 것입니다. 그리고 그 이벤트가 발생하면, 그에 맞춰서 동적으로 웹 페이지가 변경되게 될 것입니다. React 내에서 우리는 대부분의 코드를 jsx로 작성하기 때문에, jsx 내에서도 당연히 이벤트 핸들링을 할 수 있게 설계되어 있습니다. 전에 React의 특징 중 가상 DOM을

컴포넌트 때 언급했던 props와 state는 React 내에서 다양한 동적 변화를 만드는 데 아주 중요한 개념입니다. 한번 같이 파헤쳐 봅시다. 개요 (Render 함수) 지난 시간에는 컴포넌트를 만드는 방법과 컴포넌트의 사용에 대해 다루어 보았습니다. 오늘 다룰 props와 state는 컴포넌트에 데이터를 주는 방식에 따라 구분되는 개념이라는 것을 미리 알고 가면 좋습니다. 먼저 props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다. 저번에 createElement에 넣는 인자 중에 props가 있었던 것을 기억하시나요? props는 React 내에서 element가 만들어질 때 사용됩니다. 반면 state는 컴포넌트 내부에서 변경 가능한 데이터입니다. 일반적으로 React에서 흔히 언급되는 '상태'라는 개념이 바로 이 state인데, 컴포넌트의 상태에 따라 다르게 보일 수 있도록 조절 가능합니다. ![](https://imag

저번 글에서 복잡한 Element들을 만들기 위해 작성한 코드 기억 나시나요? 엉망진창인 코드를 JSX를 쓰면 훨씬 깔끔하게 작성할 수 있습니다. 컴파일과 Babel 우리는 자바스크립트 코드를 열심히 짭니다. 라이브러리도 쓰고, 저희가 파고 있는 React 같은 프레임워크도 쓰고, 새로운 문법도 쓰고... 하여튼 이렇게 짠 코드들은 사실 날 것 그대로 브라우저한테 배달되지 않습니다. 실제로 브라우저들마다 소화할 수 있는 버전의 자바스크립트가 다르기 때문입니다. 악명높은 IE는 자바스크립트가 발전하면서 생겨난 여러 신기술들을 전혀 지원하지 않습니다. 당장 저번 시간에 사용했던 화살표 함수도 IE는 못 알아 먹어요. 이럴 때 우리는 Babel을 사용합니다. Babel은 자바스크립트 용 트

저번 글에서 간단한 예시를 바탕으로 createElement와 render()를 사용해보았습니다. 이제 이를 바탕으로 React의 핵심인 컴포넌트를 만들어 볼 차례입니다. Class 컴포넌트 React에서 컴포넌트를 직접 만드는 방법은 두 가지로 나뉩니다. 바로 Class와 Function입니다. 그 중 먼저 Class에 대해 살펴보도록 하죠. 문법은 위 코드 블럭과 같습니다. 먼저 class와 식별자를 사용하여 class를 생성한 뒤, extends로 React.Component를 상속받아 class 컴포넌트를 만든다는 것을 선언합니다. 그런 뒤, render 함수와 실제로 렌더링하고 싶은 내용을 작성해줍니다. 물론 여기서 끝은 아니에요! 컴포넌트를 만들기만 하고 호출을

저번 글에서는 React라는 프레임워크의 간략한 컨셉에 대해 다루어 보았습니다. 이번에는 React 내에서 DOM과 Element를 다루는 방법을 알아보겠습니다. DOM(Document Object Model) 첫 번째 글에서, React의 큰 특징 중 하나로 Virtual DOM에 대해 설명한 적이 있습니다. 약간의 복습 느낌으로 DOM이 무엇인지에 대해 빠르게 짚고 넘어가겠습니다. HTML을 다뤄보면 많은 요소들이 존재를 하죠. 이 요소들을 논리 트리로 나타내는 것이 바로 DOM입니다. 우리는 HTML 문서를 읽는 것만으로도 Element들의 구조를 쉽게 파악하지만, 컴퓨터는 DOM을 통해 이 구조를 이해한다고 보시면 될 것 같습니다. 이번 글을 DOM에 대한 설명으로 시작한 이유는, Re

React Basic 시리즈는 React의 기초 개념들을 정리하는 시리즈입니다. 최대한 실제 코드 및 예시를 위주로 작성할 생각이고, 공식 문서의 개념도 요약해서 반영해 보려고 합니다. > 본 시리즈는 패스트 캠퍼스 "한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online"를 바탕으로 작성되었습니다. React의 시대가 도래했다 프론트엔드 개발 분야에 관심이 있으신 분이라면, React를 모르실 수가 없을 거라고 생각합니다. 보통 Angular, Vue.js와 같이 묶여 '프레임워크 3대장'이라고 흔히 불리기도 하죠. 기업들의 채용 공고는 다양한 요건을 요구하지만, 그 와중에 React는 거의 빠지지 않고 등장하는 필수 요건입니다. 뿐만 아니라, 각종 개발자 교육 관련 매체에서도 어