React로 Isomorphic Web App 개발하기
javascript도 모르는 제가 react를 이용해 Isomorphic Web App 을 개발하는 과정을 기록하려고 합니다.
1. React, Webpack, Babel, Isomorphic, Yarn, NPM 등등 용어 설명
React를 이용해 Web App을 개발하기에 앞서 앞으로 자주 등장 하는 용어들에 대해 알아보겠습니다.
- React : Facebook 에서 만든 Front-end Javascript Library 입니다. React와 비교될만한 대표적인 Front-end 라이브러리로는 Angular, Vue 가 있습니다.
- Isomorphic : 예전에 Angular 와 React가 한창 유행할때 자주 언급되던 SPA 라는 용어가 있었습니다. Single Page Application 의 약자인데, 하나의 페이지에서 모든 변경사항을 처리하게 됩니다. 실제 페이지 이동이 일어나지 않고, 해당되는 부분의 View 데이터를 받아 render 하기 때문에 속도가 빠르다고 합니다. 여튼 SPA가 한때 유행이었다면, 요즘에는 Isomorphic 형태의 개발이 유행인 것 같습니다. Isomorphic 이라는 것은 서버와 클라이언트에서 동일한 코드를 가지고 동작 가능한 형태를 말한다고 합니다. 찾아본 결과, 이전 SPA 방식에는 많은 장점이 있지만 단점중에 서버에서 어느정도의 수준까지 렌더링을 해야하는지, SEO ( 검색엔진 최적화 ) 에 대한 적용 문제가 있었다고 합니다. 이런 문제를 해결하고자 Isomorphic 형태의 개발이 인기를 얻고 있는 것 같습니다.
- NPM, Yarn : NPM은 Node.js Package Manager의 약자로 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자입니다. npm에 등록되어 있는 수많은 패키지들을 손쉽게 설치할 수 있습니다. Yarn은 npm 보다 좀 더 진화된 패키지 매니저입니다. Facebook에서 관리하고 있으며 구글이 지원하고 있다고 알고있습니다. 앞으로 개발하면서 패키지 설치는 npm 대신 yarn을 주로 쓰게 됩니다.
- Babel : Javascript 컴파일러입니다. 브라우저들은 각각이 지원하는 자바스크립트 버전이 있습니다. 예를들어 ES 6 로 개발을 하였는데 IE가 ES 5 까지 지원한다면 ES 6 형태의 코드를 ES 5 형태로 변형시켜 줄 필요가 있습니다. 이러한 역할을 하는 것이 Babel 이라고 합니다.
2. 개발 환경 설정
IDE로는 VS CODE 또는 WebStorm 을 추천합니다. WebStorm의 경우 유료이기에 무료를 원하시는 분은 VS CODE를 사용하면 될 것 같습니다.
Node.js를 설치해야 합니다. https://nodejs.org/en/ 사이트에 접속하여 8.11.4 버전을 설치합니다.
Node.js를 설치하면 npm이 같이 설치됩니다. 명령 프롬프트를 열고 npm --version 명령어를 통해 npm의 설치를 확인합니다. 5.6.0 등과 같이 버전이 나오면 제대로 설치된 것입니다.
Yarn을 설치하도록 합니다. 명령 프롬프트에서
|
명령어를 입력하여 글로벌로 설치합니다.
마지막으로 create react app 라는 유틸리티를 설치해보겠습니다. Facebook에서 개발하였으며, React 개발을 위한 여러 라이브러리 등을 설치하고 세팅하려면 매우 복잡하고 번거로울 수 있는데 이를 해결하기 위해 Facebook에서 만든 툴을 이용해보도록 합니다.
npm install -g create-react-app |
명령어를 이용하여 설치를 합니다. 이로서 React 개발을 위한 설정은 끝났습니다.
3. 프로젝트 생성
프로젝트 생성은 다음과 같은 명령어로 생성합니다.
|
my-app이라는 프로젝트를 생성하는 명령어입니다. 프로젝트명은 원하는 이름으로 설정하면 됩니다.
my-app 폴더로 이동하게 되면 다음과 같은 구조로 파일들이 생성되어 있는 것을 확인할 수 있습니다.
해당 프로젝트 폴더 내에서 아래와 같은 명령어를 통해 웹 서버를 실행할 수 있습니다.
yarn start
브라우저가 열리면서 위와 같은 화면이 나타나면 정상적으로 설치된 것입니다. 이로서 React 개발을 위한 모든 준비가 끝났습니다.
다음 글에서 페이지를 구성하고 react에 대해 좀 더 공부해보겠습니다.
