Front-End(Web)/React - 프레임워크(React, Next)

[React] 공식문서 학습(문서) : 설치

ttaeng_99 2021. 4. 23. 16:18
반응형

🧐 서론

최근 다른 글에서 언급했듯이, 기술면접을 몇 차례 거치면서 React의 기본적인 개념이 많이 부족하다는 점을 뼈저리게 느꼈다.

특히, 이러한 부분들은 React 공식문서에 잘 설명되어 있었기 때문에 진작 Docs 숙독을 선행하지 않은 점이 아쉽게 느껴졌다.

 

그렇기에 이 공식문서 학습 시리즈는 개념정리보다는 나의 자습노트의 형태가 될 것 같다.

다만, 공식문서의 순서를 따르면서 글을 정리할 것이기에, 일종의 Docs 가이드 라인을 만든다는 생각으로 정리해보겠다.

💙 설치

- 시작하기

"React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리" 라는 명료한 소개로 Docs가 시작된다.

공식문서, 블로그, 플레이그라운드(CodePen 등) 에 대한 소스안내가 주로 이루어지고 있었다.

 

특히, 공식문서에서 개념학습을 위한 "문서" 와, 구현숙달을 위한 "자습서" 두 카테고리를 각각의 형태로 권장했다.

나는 기왕 Docs 숙독을 시작한 김에, 문서의 주요 개념부터 다시금 훑으면서 정리해나갈 예정이다.

 

 

- 웹 사이트에 React 추가하기

러프한 HTML 파일에 <script> 설정을 통해 React 컴포넌트 및 JSX를 기존 웹사이트에 추가하는 예제들이 소개되어있다.

React를 처음 접한다면 한번즘 클론해볼 가치가 있으나, 일반적인 React 개발법과는 괴리가 있으므로 스캐닝 정도로 넘겨도 무방하겠다.

 

 

- 새로운 React 앱 만들기

위 경우는 툴체인이 필요없는 간단한 구현경우이나, 우리는 React 자체 프로젝트를 진행하는 경우가 더 많기에 지금부터가 본론이겠다!

  • React를 배우고 있거나, 새로운 SPA(Single Page Application)를 만들려면 Create React App
  • SSR(Server Side Rendering) Node.js 웹사이트를 만들려면 Next.js
  • 고정적인 콘텐츠 지향적 웹사이트를 만든다면 Gatsby
  • 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합한다면 더 유연한 툴체인

 

1) Create React App

Create React App(이하 CRA)은 리액트를 숙달하는 가장 간편한 환경이다. 기본적인 툴들을 같이 패키징해주기 때문에, 초기세팅의 단계가 정말 간소화될 수 있다.

npx create-react-app .			// 현재폴더 세팅
npx create-react-app folder-name 	// folder-name 폴더에 세팅

위 명령어로 실행 가능하며, Node 10.16 이상, npm 5.6 이상의 버전이 필요하다. (npx는 npm 5.2+ 버전 패키지 실행도구)

 

CRA는 프런트앤드 빌드 파이프라인만 생성해주며, Babel, Webpack 등 build 툴들을 설치해주면서도 설정 없이 동작이 가능하다.

 

2) Next.js

최근 빠른 초기 렌더링, SEO(검색엔진 최적화) 등 목적으로 SSR이 다시금 대두화되고 있다.

여기에 적절한 React 기반 스태틱 서버 렌더링 프레임워크가 Next.js 다. 스타일링과 라우팅 장점이 있다는 설명과, 정식 가이드 링크가 안내되어있다.

 

3) Gatsby

정적 웹사이트를 React로 만드는 최고의 방법이라고 한다. 미리 HTML, CSS를 렌더링하며 로드를 빠르게 해준다고 한다.

 

4) 더 유연한 툴체인(숙련자 추천)

  • Neutrino 라는 webpack의 장점과 React의 단순함, 미리 설정된 앱과 컴포넌트를 합침
  • Nx는 풀스택 모노레포 개발을 위한 도구로, React + Next.js + Express 풀스택 툴을 지원
  • Parcel은 React와 함께 사용하며, 빠르고 설정이 불필요한 웹 어플리케이션 번들러이다. (Webpack과 유사한 역할)
  • Razzle은 서버 렌더링 프레임워크로, 설정이 필요없어 Next.js 보다 다루기 쉬움.

 

- CDN 링크

React, ReactDOM을 npx 설치가 아닌 CDN 링크를 통해서도 사용할 수 있다는 소개내용이다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

여기서, crossorigin 속성을 넣는 이유는 다른 출처(CDN 제공 URI - 로컬 3000포트) 간 통신으로 인한 CORS 이슈 해결을 위해서다.

 

* CDN(Content Delivery Network, 콘텐츠 전송 네트워크)

콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템이다.

높은 사용성과 효율성으로 사용자에게 컨텐츠를 전달하는 장점이 있으며, 오늘날 컨텐츠의 상당수(웹, 미디어, 어플리케이션 등)가 해당된다.

카카오맵 API 등 API 사용을 위해 HTML 헤더에 <script> 태그를 첨부하는 형태가 일종의 CDN이라고 할 수 있겠다.

 

 

- 배포 채널

React의 배포 채널에 대한 안내이다. 통상 우리가 사용하는 건 Latest 채널이며, 이외 베타버전과 같은 채널들이 존재한다는 내용이다.

  • Latest : npm에서 설치하는 버전. 모든 사용자용 공식 어플리케이션. 실제로 배포되는 안정적인 버전이다.
  • Next : React 저장소 master branch를 추적하는 pre-release 채널. 다음 Latest 가 될 버전이라고 생각하면 된다.
  • Experimental : React 저장소 master branch 추척. 추가기능 플래그가 켜져 있어, 실험적인 채널이므로 변경사항이 많고 불안정함.

설치 섹션은 전반적인 세팅 방법들에 대해 알려주고 있다. 물론, 기본적으로 쓰는 CRA와 Latest 등은 고정적이긴 하다.

하지만 이러한 설정들의 동일선상에 다른 종류들이 있다는 점을 짚고 넘어갈 수 있었다.

 

앞으로는 좀 더 개발에 연관된 기술적인 내용들이 기술될 것으로 보인다!

 

[출처] React 공식문서(번역본) : ko.reactjs.org/docs/release-channels.html

반응형