React를 배우기 전에 알아야할 5가지

React에 도전하기 전에 스킬 세트를 향상해라

Nicole Chung 작성. 5월 24일, 2017

전에 SPA를 개발해본 경험이 없다면, 리엑트는 당신의 스킬셋을 강제로 업그레이드시켜줄 것이다. 리엑트는 라이브러리로서 많은 것을 제공한다 - 데이터 흐름이 명확한 공유가능한 컴퍼넌트를 만들 수 있다.(이 방식은 디버깅을 더욱, 더욱 쉽게 만들어준다.) 리엑트는 단지 자바스크립트만을 사용함으로서 여러번 일을 수월하게 마칠 수 있도록 도와줄 것이다.

작년 즈음, 나는 리엑트와 리덕스 앱들을 개발하며, 코딩 부트캠프에서 파트타임으로 리엑트와 리덕스를 가르치는 일을 하고 있었다. 사람들이 유효기간이 지난 강좌와 블로그 포스트들 그리고 일반적인 자바스크립트 생태계에서 곤혹을 치르고 있을 때, 나는 리엑트를 시작하기 전에 당신이 알아야할 수도 있는 자료들을 목록으로 정리하였다. 아래 목록들이 다소 불편할 수도 있지만, 여기 나열된 내용들의 개념과 기술들에 한 번 익숙해지면, 당신의 첫 번째 리엑트앱 개발은 좀 더 쉽고 재밌어질 것이다.

1. 다름 사람들의 코드를 읽어라

리엑트는 매우 빠르게 변화하는 중이므로, 유효기간이 지난 블로그 포스트들과 강의들이 많이 존재한다. 초심자로서 어떤 지시사항을 따라가다 에러를 만나거나, 아무 이유도 없이 동작하지 않는 상황을 만나면 좌절하게 될 것이다.

어떤 저장소를 방문했을 때, 아래 두개의 폴더가 당신의 친구가 되어줄 것이다.

  • examples (예제)

  • tests (테스트)

이 저장소를 로컬로 복제하여, 예제들을 실행해보고, 동작하지 않는 코드를 찾아보자. 찾았다면, 창작자에게 이슈를 남기는 것을 주저하지 말자. 대신 친절히 알려주자. 창작자들이 저장소를 유지함으로서 돈을 벌어들이는 것은 아니라는 것을 명심하자.

당신이 발견한 오류메세지들, 어떻게 발생한 것인지 등을 알기 쉽게 나열해라. 문서화를 제안하고 싶다면, 연필이나 책 emoji를 입력해 두어라 - 더 좋은 방법은 당신이 문서를 직접 만들어 보는 것이다. (많은 오픈소스 창작자들이 기꺼이 함께 도와줄 것이다.)

종종 예제나 테스트 폴더에 있는 것들이 README나 다른 문서에 있는 내용보다 더 최신인 경우가 있다. 테스트 폴더는 컴포넌트가 아닌 라이브러리들을 위한 api가 어떻게 동작하는지 볼 수 있으므로 매우 유용할 수 있다.

2. 당신의 개발환경을 이해해라.

당신의 개발환경을 이해하지 않고서 프론트앤트 개발자(또는 프론트엔드 엔지니어)가 되는 것은 불가능하다.

프론트엔드는 자바스크립트에 대단히 치중되어 있으며, 자바스크립트로 다양한 일들을 한다. - 예를 들어, 구형 브라우저에 최신 자바스크립트가 동작하도록 폴리필(개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드조각이나 플러그인을 의미)을 사용한다거나,

자바스크립트 플러그인으로 스타일을 변경한다거나, SVG에 스타일과 에니메이션 효과를 주는 일등을 한다 - 대개 자바스크립트를 이용해 브라우저의 제약을 극복하기 위한 것들 말이다.

요즘 자바스크립트를 사용하는 개발자들은, webpack, rollup, gulp 그리고 browserify를 활용한다. 또한 소스 변경사항들을 추적하기위해 git을 사용한다. 아래 당신의 삶을 편하게 만들어줄 몇 가지 스킬들을 소개한다.

  • 터미널 실행하는 방법 이해하기 / 커맨드라인 / Bash / zsh

  • $PATH 변수 이해하기 - 무엇인지, 무엇을 하는지, 어떻게 편집하는지

  • 타이핑을 적게 하기 위한 alias(별칭)란 무엇인지, 어떻게 작성하는지 이해하기

  • sudo 가 무엇이고 왜 사용(또는 사용하지 말아야)하는지

  • 웹서버와 localhost의 개념 이해하기

3. npm에 대하여 조금 알자.

NPM은 노드 패키지 관리자이다. 패키지들을 node_modules 폴더에 설치하기 위해(코드로 이루어진 자바스크립트 라이브러리)npm 이나 yarn을 사용할 수 있다.(어떤 툴을 사용하는 것이 좋은지에는 다소 논란이 있다; 둘다 동작하기 때문이다.) 어쨋든, 자바스크립트 라이브러리를 다운로드하기 위해 해당 웹사이트를 방문하는 대신, 터미널에서 커맨드 명령을 입력하는 것 만으로 npm 저장소에서 라이브러리를 다운로드할 수 있다.

당신이 리엑트 프로젝트에 node 모듈을 npm이나 yarn을 통해 설치할 때, --save 라는 플래그를 붙임으로서 package.json 이라는 파일에 기록하도록 할 수 있다.

npm install <package-name> -- save
yarn add <package-name> --save

이렇게 하면, 프로젝트를 상대방과 공유한다고 했을 때, 상대방은 npm install이나 yarn install 명령만으로 당신과 동일한 노드 모듈들을 가질 수 있게된다.

  1. CSS로 이쁘게 만드는 방법을 이해하자

CSS 이해하는 것은 리엑트와 밀접한 관계가 있다. 내 경험상, 무언가 이쁘게 만드는(또는 만들길 원하는) 리엑트 개발자는 터무니없이 적다. 리엑트는 자바스크립트지만, 반응형 디자인과 함께 CSS를 잘 하는 것은 그 자체로 전문영역이 되었다.

즉, 리엑트에 사용할 수 있는 기존 컴퍼넌트 라이브러리들은 그 정도에 불과하며, 어느 시점에는 디자이너나 제품 소유자가 좀 더 맞춤화된 것을 원할 수도 있다는 것이다.

다른 자바스크립트 라이브러리(jQuery와 같은) show(), hide(), fadeIn() 그리고 fadeOut() 등으로 UI 상태를 변경할 수 있다. 하지만 리엑트에서는 .show, .hide, .disabled,.active 그리고 .focus와 같이 CSS 클래스들을 직접 묘사하는 방식을 배워야한다.

결국 리엑트와 CSS에 능숙해졌을 때 좋은 점은, 이 둘을 결합하면 당신만의 typography와 레이아웃 컴포넌트(예를 들어, <Grid>컴포넌트와 같은)를 제작할 수 있으며, 사이트의 일관성을 유지할 수 있도록 다른 사람들도 이를 재활용할 수 있게 된다는 점이다. 리엑트를 이용해 당신의 스타일들을 컴포넌트화하면 잘못 작성된 CSS로 인한 기술적 부채를 크게 줄일 수 있다.

5. 변경할 준비를 하자

React.createClass는 최신 버젼의 리엑트에서는 더이상 사용할 수 없다.(별도 모듈로 import해야 한다.) PropTypes 또한 import 해서 사용해야 한다. 이러한 변화들은 당신이 리엑트 블로그를 읽지 않으면 알 수 없는 것들이며, 유효기간이 지난 오래된 강의들을 따라간다면, 현재는 동작하지 않을 것이다.

이전 리엑트 프로젝트에서는 function.bind를 사용하여 이벤트 핸들러를 함수에 바인딩했지만, 새로운 버젼에서는 아직 실험 단계인 initializer 문법을 볼 수 있을 것이다.

handleClick = () => {
  cosole.log('this is:', this)
}

ES6의 화살표 함수를 이용한 위 코드와 관련하여 당신이 모를 수도 있는 점이 있는데, 바로 위 형식이 아직 stage2 단계에 머무르고 있고 따라서 babel을 함께 사용해야한다는 점이다.

결론

아름답고, 반응형이고, 빠른 웹 어플리케이션을 만들기 위해서는 많은 것들이 요구된다. 커맨드라인에 대한 깊은 이해, npm, CSS 그리고 vanilla 자바스크립트 등 너무 많은 것들에 압도당할 수 있다.- 하지만 이러한 것들을 이해하는 것이 비단 리엑트를 배우는데 도움을 줄수 있을 뿐 아니라, 좀더 나은 개발자가 될 수 있도록 도움도 준다는 것이다.

예제와 테스트코드를 이해할 수 있게 되면 - 단순히 문서를 따라가는 것만이 아니라 - 빨리 일어나서 달릴 수 있도록 도와줄 것이다. 최신 자바스크립트 모듈 시스템(ES6, CommonJS)에 대한 깊은 이해를 가짐으로서 다른 사람들의 코드를 import 할 때 도움을 줄 것이다.

참고

5 things to learn before learning React

PreviousShallow Testing (Feat. Jest)NextPython

Last updated