한빛출판네트워크

만약에 싱글 페이지 애플리케이션을 만들어 본 적이 없다면, 리액트를 하기 위해 더 나은 스킬을 갖춰야 할 겁니다. 리액트는 라이브러리로 정말 많은 기능들을 제공합니다. 예를 들어 더 명확한 데이터의 흐름으로 디버깅을 훨씬 쉬운 그런 컴포넌트를 만들어 공유할 수 있고,  많은 경우에 자바스크립트로 프로그래밍 하는 것만으로도 일을 끝낼 수 있게 해줍니다.

지난해에  저는 리액트와 리덕스로 개발을 해왔고, 파트타임으로 코딩 부트캠프에서 일을 하며 사람들이 리액트와 리덕스를 배울 수 있도록 도왔습니다.  사람들이 오래된 튜토리얼과 블로그 게시글, 자바스크립트 개발 환경과 씨름하고 있는 것을 보면서,  사람들이 리액트를 배우려 하기 전에 알면 좋을 것들의 리스트를 만들게 되었습니다. 아래의 리스트는 꽤나 부담으로 느껴질 수 있지만, 그 개념들과 기술들에 한번 익숙해지기 시작하면, 훨씬 쉽고 재미있게 첫 번째 리액트 앱을 만들 수 있게 될 겁니다. 

1. 다른 사람들의 코드를 읽기

리액트는 매우 빠르게 변화하고 그에 따라 많은 블로그 포스트와 튜토리얼이 금방 시간이 지나 더 이상 쓸 수 없는 것들이 될 수도 있습니다. 이러한 빠른 변화로 인해  리액트에 입문자들이 몇 가지 안내사항들을 따라 하고 있을 때 좌절감을 느끼게되고 에러나 그보다 더 심한 무언가에 마주하면서 조용히 이유를 알지 못한 체, 자신의 코드가 실패해가는 모습을 보게됩니다.

코드 저장소에 가게 되었을 때, 두 개의 폴더가 당신의 최고의 우군이 될 것입니다. 

• 예제
• 테스트들

만약에 당신이 저장소를 복제해, 예제를 실행했을 때 코드가 동작하지 않는다면, 이는 그 저장소를 관리하는 사람에게 이를 알릴만한 사항이 됩니다.  하지만 친절해야 한다는 것을 명심하셔야 합니다. 이 사람들은 돈을 받고 일하는 것이 아닙니다!  명확하게 에러 메시지를 나열하고, 그 에러를 어떻게 얻게 되었는 지 , 그리고 만약에 문서에 제안할 사항이 있다면 연필이나 책 이모티콘을 넣어서 표시해주세요, 무엇보다도 문서를 작성해 제안한다면 매우 좋습니다. ( 많은 오픈소스 관리자들이 이러한 도움에 매우 행복해합니다.)

종종 예제 폴더나, 테스트 폴더가 README 파일이나, 다른 문서보다 더 최신인 경우를 볼 수도 있습니다. 특히 테스트 폴더는 컴포넌트 라이브러리가 아닌 경우에 어떻게 라이브러리가 동작하는지 알 수 있는 매우 좋은 방법이 됩니다. 

2. 개발 환경 알기

프런트엔드 개발자라면 반드시 스스로 개발하고 있는 환경을 이해해야 합니다.

프런트엔드 개발자는 일반적인 자바스크립트와 함께  많은 종류의 도구를 사용하는 것에 크게 관심을 두게 되는데,  예를 들어, 새로운 자바스크립트 버전이 오래된 버전의 브라우저에서 동작할 수 있게, 브라우저 호환성 폴리필(Polyfill)하거나, 스타일을 자바스크립트 플러그인으로 변형하거나, SVG 파일을 움직이거나 스타일링하는 등 브라우저의 제약을 자바스크립트를 사용해 해결해나갑니다. 

오늘날 자바스크립트를 사용하기 위해, 개발자들은 webpack, rollup, gulp, browserify와 같은 도구들을 사용합니다. 또한 코드의 변화와 버전 관리를 위해서 git과 같은 도구를 사용합니다. 아래의 리스트는 삶을 조금 더 편하게 만들어 줄 주제, 도구들입니다.

• 터미널/커맨드 라인/Bash/zsh 사용법 알기
• $PATH 환경 변수 이해하기, 이것이 무엇인지, 어떤 일을 하는지 그리고 어떻게 편집하는지
• alias(명령어 별명)가 무엇인지 알고 사용법을 익혀 타이핑으로부터 벗어나기
• sudo가 무엇인지 알고 이것을 왜 사용해야 하는지 알기
• web server가 동작하는 방식에 대해 알고, localhost가 어떤 의미인지 알기

3. npm에 대해서 알고가기

NPM은 Node Package Manager를 의미합니다. npm 말고도 yarn 이란 도구를 사용해서 패키지(자바스크립트 라이브러리)를 당신의 node_modules 폴더에 추가할 수 있습니다. (어떤 도구가 사용하기 더 나은지에 대해 논란이 있지만, 둘 다 잘 동작합니다.) 따라서, 웹사이트에 가서 JS 파일을 다운로드하는 것 대신에, 커맨드 라인에서 npm을 호출해 쓰는 것으로 원하는 파일을 얻을 수 있습니다.

npm이나 yarn을 사용해 노드 모듈을 리액트 프로젝트에 설치할 때, 받을 모듈 이름을 --save라는 키워드를 커맨드에 함께 입력하는 것으로 package.json이라는 파일에 적어 둘 수 있습니다.

npm install <package-name> --save

yarn add <package-name> --save

이 방식으로 다른 사람과 프로젝트를 공유할 때, 단지 npm install이나 yarn install이라고 터미널에 입력하는 것으로 동일한 노드 모듈을 얻을 수 있습니다.

4. CSS와 함께 좋게 보이는 방법을 알기 

CSS를 아는 것은 리액트를 사용할 때 많은 도움이 됩니다. 제 경험에 의하면, 리액트를 사용해 무언가를 보기 좋게 만들 수 있거나,  또는 그러길 원하는 개발자가 말도 안 될 정도로 부족합니다. 리액트는 자바스크립트이지만, 반응형 디자인과 함께 CSS를 잘 사용하는 것은 매우 좋은 장점이 됩니다. 

말하자면, 이미 있는 컴포넌트로 많은 개발을 할 수 있지만, 당신의 디자이너나, 제품 의뢰인이 더 특정화된 맞춤 형태의 것을 원하게 되는 시점이 오게 될 겁니다. 

다른 자바스크립트 라이브러리(예를 들어 제이쿼리라던가, 제이쿼리라던가...크흠흠)는 show(),hide(), fadeIn(),그리고 fadeOut()과 같은 것으로 UI 상태를 변경할 수 있게 해주지만, 리액트에서는 .show, .hide, .disabled, .active CSS 클래스들을 사용해서 상태를 표시하는 방법을 알아야 합니다. 

마지막으로, CSS와 리액트 모두를 잘 사용하면 둘을 합쳐 커스텀 타이포그래피나, 레이아웃 컴포넌트(예를 들면, <Grid> 컴포넌트)를 만들 수 있습니다. 이를 다른 협업자가 사용하는 것을 통해서 당신의 사이트의 일관성을 유지할 수 있습니다. 스타일을 리액트를 통해 컴포넌트화하는 것은 안 좋게 쓰인 CSS로 인한 기술적 부채를 많이 줄일 수 있게 해줍니다.

5. 변화를 준비하기

React.createClass는  최신 버전에서는 더 이상 사용할 수 없습니다. (이것을 사용하려면 다른 모듈을 추가해야 합니다. ) 그리고 PropTypes라는 모듈을 추가해야만 합니다. 이런 급격한 변화는 리액트 블로그를 읽지 않을 경우 잘 모를 내용입니다. 그리고 튜토리얼을 따라 하고 있을 때, 그 튜토리얼이 더 이상 동작하지 않는 것이 되어있을 수 있습니다. 

초기에 리액트 프로젝트는 function.bind를 이벤트 연결에 사용했습니다. 하지만 새로운 버전들에서는 아마 실험적인 속성 초기화 문법을 보게 될 수 있습니다.

handleClick = () => {

    console.log('this is:', this);

}

이 구문에서 당신이 아셔야 하는 것은, ES6의 화살표 함수는 stage2에 해당하는 것으로  babel을 사용해야만 한다는 것입니다. 

결론 

아름답고, 반응형에 빠른 웹 애플리케이션을 만들기 위해선 많은 것들이 필요합니다. 커맨드 라인, npm, CSS, 바닐라 자바스크립트를 모두 아우르는 것은 매우 부담이 되는 일이 될지도 모릅니다. 그러나, 이런 것을 알고 있는 것은 단지 리액트를 배우는 것 뿐만 아니라, 강력한 개발자가 되는데 매우 도움 될 겁니다.

단지 문서를 따라가는 것을 넘어 예제 코드와 테스트 코드를 읽을 수 있는 것은, 일어나 빠르게 목표로 달려갈 수 있도록 도울 것입니다. 최신 자바스크립트의 모듈 시스템에 대해 (ES6, CommonJs) 잘 이해하고 있는 것은 다른 사람의 코드를 사용할 때 도움이 될 겁니다. 

*****

원문 : 5 things to learn before learning React
번역 : 김도형 

비전공 개발자로 시작해, 네이티브 안드로이드, IOS 등의 모바일 네이티브 개발을 하다 현재 풀스택 자바스크립트 개발자로 스타트업 트리픽에서 개발하고 있습니다. JavaScript로 하는 모든 것들에 관심이 있고 앞으로도 활동 영역을 넓혀가고 싶습니다. 패스트캠퍼스, 하루만에 등에서 강의를 하기도 하며 개발하는 것을 배우고 가르치는 것 모두를 좋아합니다.