시작
React는 2013년 여름 Facebook에 의해 오픈 소스로 공개된 프로젝트입니다.
수 년 전 부터 React를 배워보고 싶었고, "모던 자바스크립트 개발자"가 되고 싶었지만, 바쁘다는 이유와 개발이 본업이 아니라는 핑계로 "구식 개발"을 이어 왔습니다.
그러던 올해 가을, 우연한 기회로 React를 다시 접하게 되었고, 보지 못했던 세계에 발을 들이게 되었습니다.
어려움
React를 배우는 일은 쉽지 않았습니다. 처음 React를 접했을 때 느꼈던(코딩을 시작하기도 전에) 어려움을 정리해보면 아래와 같았습니다.
- React는 프론트앤드 쓰는건데 컴파일이 왜 필요하지?
- webpack는 뭐고 babel은 뭐지? 설정은 어떻게 해야하지?
- Node.js 는 왜 사용해야 하지?
- React를 npm을 이용해 "설치" 해야 한다고?
물론, Facebook이 개발한 create-react-app을 이용하면 위와 같은 고민 없이 아래 명령어 만으로도 React앱을 개발할 준비를 끝낼 수 있습니다.
create-react-app hello-world
하지만, create-react-app에만 의존하기에는 상당히 찝찝한 기분이 들었고, React를 배우면서 그 동안 놓쳤던 모던 웹 개발 트랜드를 따라가보자는 마음이 들어, create-react-app은 사용하지 않기로 결정하였습니다.
이 연재글 역시 create-react-app은 사용하지 않습니다. 그러나 예제를 진행하면서 create-react-app과 유사한 환경을 직접 구현합니다. 이렇게 구현된 환경은 package.json 파일과 설정 파일만 보관해 두면 언제든지 복제하여 프로젝트를 만들 수 있습니다. 이와 같이 React를 개발하기 위한 구조를 잡아놓은 프로젝트를 React skeleton 이라고 부르며, create-react-app 이외에도 수많은 skeleton project가 있습니다.
준비사항
이 글을 읽기 위해서는 아래와 같은 요구사항이 필요합니다.
- HTML, CSS에 대한 기본 지식
- Javascript 문법
- 프론트앤드와 백앤드에 대한 이해
이 글은 아래와 같은 사람들에게 유용합니다.
- React를 이용하여 프론트앤드 웹 개발을 해보고 싶지만, 어디서부터 시작해야할지 막막한 사람
- 기존의 프론트앤드 개발에는 능숙하지만, 모던 웹 개발(React 포함)을 접해본 적이 없는 사람
다루는 내용
이 글에서는 아래와 같은 내용을 다룹니다. 물론 모든 주제를 같은 비중으로 다루지 않으며(당연히 React에 대한 내용이 큰 비중을 차지합니다.) 순서는 변경될 수 있습니다.
- 자바스크립트 전처리기 babel
- 모듈화 도구 webpack
- ECMAScript6 (== ES6 == ES2015)
- React
- Immutable.js
- Redux
- React Router
- Server side rendering
이 글에서는 아래와 같은 내용을 다루지 않습니다.
- HTML, CSS에 대한 기초적인 지식
- Javascript 기본 문법
- Javascript ESLint (하지만 모든 코드는 Airbnb Javascript Style Guide을 준수합니다.)
- CSS 전처리기
- create-react-app
감사의 글
먼저 Web Framework에 대한 선입견을 없애는 데 많은 도움을 주신 동료 개발자 김모군에게 감사합니다. 이 분이 없었더라면 십 년 전 프로그래밍을 시작하지도 않았을 것이고, 십 년이 지난 지금 새로운 배움의 의지를 가질 수 없었을 것입니다.
Velog를 개발해 주시고 React에 대한 글을 작성해 주신 Velopert 개발자님께 감사드립니다. 처음에 React를 배울 때 정말 많은 도움이 되었습니다. 만약 이 글의 연재가 부득이하게 중간에 끊기게 된다면 위 글을 참고하시는걸 강력 추천 드립니다.
