!주의!
본 포스트는 작업을 하며 발생한 문제를 해결하기 위해 했던 뻘짓(?)들을 기록한 일지입니다.

React 기초

리액트의 기초를 배울 수 있는 온라인 강좌는 많습니다 udemy와 같은 개발 관련 인강 사이트도 있고, 영어 울렁증을 느끼는 사람들을 위한 국내버전인 인프런도 있습니다. 뛰어난 국내 개발자분들이 개인 블로그에 올려놓은 강좌도 많이 있고요. 저는 개인적으로 velopert님의 블로그를 추천드립니다. 좀 오래된 강좌이긴 하지만 velopert님이 인프런에 올린 리액트 강좌 도 내용이 탄탄해보입니다.

추가로 리액트를 위해서는 Javascript ES6에 익숙해져야합니다. 제가 추천드리는 강좌는 인프런 ES6 강좌인데, 유료라서 강력히 추천하기 힘드네요. 꼭 인강이 아니더라도 블로그를 잘 찾아보시면 기존의 자바스크립트에서 변경된 점을 찾아보시고 눈에 익히는게 중요하다고 생각합니다.

리액트의 기초를 익히고 나면, 이제 실무에서 사용할 또는 개인프로젝트를 진행하고 싶은 욕구가 마구마구 샘솟습니다 ㅎㅅㅎ.. 마치.. 나 리액트 배워써!!! 라고 동네방네 떠들고 다니고 싶은 심정이죠. 그런데 막상 시작하려고 보니, react-router, redux, code splitting, server side rendering… 등등 ‘리액트’를 제대로 사용하기 위해서 요구되는 ‘부가기능’ 들이 자꾸 눈에 들어옵니다. 이것도 적용하고 싶고 저것도 해보고싶고… 그래서 결국 나만의 빌드를 세팅해보기로 결심했습니다. 흐흐흐

빌드 세팅하기

빌드를 세팅하기에 앞서 먼저 내가 필요로 하는 플러그인이나 기초가 될만한 starter-kit 또는 참고할만한 블로그와 깃헙을 찾아보았습니다.

엄청난 삽질과 눈팅의 결과물로 다음과 같이 제가 원하는 (or 회사에서 요구하는) 빌드를 짤 수 있었습니다.

  1. react (^16.0)
  2. react-router (^4.0)
  3. Express
  4. code splitting
  5. react-hot-loader
  6. server side rendering
  7. webpack2
  8. babel
  9. babel-react
  10. babel-env
  11. babel-preset-0
  12. classnames
  13. sass (css-loader)
  14. ENV 설정을 통한 dev, build, test 스크립트 설정
  15. crossbrowsing for js (polyfill)
  16. react-router-server
  17. Node.js
  18. Redux
  19. 등등…

원하는 리액트 빌드를 짜보았나요? 그럼 기초부터 하나씩 시작을 하면 됩니다.

리액트의 기본, create-react-app

리액트를 처음써보거나, 뭐가뭔지 감이 안잡히거나 (저는 다 속하는군요) 싶다 하면 제일 처음 해야할일은 create-react-app 을 설치해보는것입니다. 가이드에 적힌대로만 하면? 대부분의 프로젝트에 활용할 수 있는 가장 기본적인 빌드 세팅을 갖춘 아주 좋은 스타터 킷(boilerplate)이죠.

빌드를 찾아보자

리액트 프로젝트를 시작하려고 하면 ‘나에게 맞는’ 빌드를 찾는데 시간이 많이 소요됩니다. 적합한 boilerplate를 찾더라도 플러그인들이 너무 옛날 버전인 경우가 허다합니다. 다른 사람들이 세팅한 빌드를 찾아볼 수 있는 사이트도 있습니다. React Starter Projects에서 자신이 요구하는 플러그인들을 토대로 검색을 해볼 수 있습니다.

나의 빌드

저는 express와 react-router를 사용해서 서버사이드 렌더링(SSR)이 되도록 만들고 싶었는데, 서버에 대한 지식이 부족해서인지 성공하지 못했습니다 ㅠㅠㅠ 그러던 중 우연히 다음 미디엄 글을 통해서 제가 원하는 빌드대로 SSR을 구현한 boilerplate를 찾을 수 있었습니다! ㅎㅅㅎ 위 프로젝트의 깃허브에서 해당 앱을 다운받아 설치합니다.

그리고 yarn run build를 통해 production을 진행하고, yarn start:server명령어로 3001포트에 프로덕션되어있는 파일들을 호스팅해줍니다. 서버사이드 렌더링이 제대로 구현되었는지 확인하기 위해서는 Postman을 통해서 확인할 수 있습니다. Postman에서 ‘https://localhost:3001’을 입력하고. SEND을 해보세요.

요렇게

이걸 구현하려고 1주일 정도 뻘짓을 하였습니다.. 하ㅏㅏㅏㅏ..

저는 위의 스타터킷에서 react-hot-loader, file splitting, SASS를 추가적으로 설치하였습니다. file splitting, react-hot-loader 기능은 velopert님의 튜토리얼을 통해서 구현할 수 있었습니다. (감솨합니더 벨로퍼트님) SASS의 경우 웹팩에서 제공하는 가이드 를 참고해서 구현했고요.

제가 커스터마이징한 스타터 킷은 제 깃허브 저장소에서 확인하실 수 있습니다.

포스트 내용중 문제가 있거나, 틀린 내용이 있을경우 댓글을 남겨주세요. 감사합니다!