[React🌌] 리액트 공식문서 함께 읽기 📘 / 2️⃣ - 리액트를 사용하는 여러 방식 /

들어가며

이 부분을 놓치고 들어가면 안될 것 같은데 주제를 분류하다보니 이번 게시글은 길이가 좀 짧아질 것 같습니다. 중요한 내용이긴 하지만, 아마 이미 알고계시는 분들이 많을테니 그 분들은 가벼운 마음으로 보셔도 될 것 같습니다!

지난 포스팅에서는 JSX 에 대해 생각해보고, 리액트라는 게 무엇인가에 대해서 알아봤었습니다. 이제 리액트 공식문서에서는 리액트를 어떤 방법으로 이용할 수 있을지에 대해 나옵니다. 리액트를 이용하는 방법은 한 가지만 있지 않습니다.

 

 

---

 

리액트를 사용하는 방법들

 

1. CDN 방식

지난 포스팅에 나왔던 것과 같이 <script> 태그를 이용해서 서버에 있는 리액트 코드를 바로 가져오는 방식 (CDN 방식 이라고 합니다.)

 

개발용

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

 

배포용 (용량 및 성능 최적화)

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

 

cdn 방식을 이용할 경우, CORS 설정을 해줘야 한답니다.

위에 코드를 자세히 보시면 일반적인 src= 가 아니라 crossorigin src 로 되어있는 것을 볼 수 있습니다.

 

---

 

2. 툴체인 방식

솔직히 앞에 CDN 방식으로 개발하는 분은 거의 없을 것입니다. 대부분 node js 의 패키지 매니저(npm) 를 이용해 여러 파일들로 관리를 하는 툴 체인 방식을 사용합니다. React는 유명하고 규모와 사용자가 아주 크고 많은 언어인 만큼 다양한 툴 체인이 존재합니다. 공식문서에서는 그 중에서도 대표적인 몇 가지 툴 체인을 소개하고 있습니다.

하나만 사용하는 것 보다, 본인이 개발하려는 애플리케이션의 용도에 맞게 적절한 툴체인을 사용하기를 권유하고 있습니다. 결국에는 모두 리액트를 이용하는 것이기에, 새 툴체인에 적응하는데에 크게 어려울 것 같지는 않습니다! ☺

저 역시도 무조건 익숙한 next js 를 쓰는 경향이 있는데 이번에 공식문서를 읽으면서 nx 를 써보고 싶다는 마음이 드네요ㅎㅎ

 

 

---

싱글 페이지 앱 - Create-React-App

 

npx create-react-app my-app
cd my-app
npm start

아마 대부분의 초심자분들이 create-react-app 을 이용하여 리액트 개발을 접했을 것입니다. 쉽게 리액트 환경이 갖춰지므로 간단한 프로그램을 만들 때에는 최적화된 방법입니다! 저 역시도 create-react-app 으로 시작했고, 싱글 페이지 앱을 만들 때, 신경써줘야할 설정들을 한번에 모두 세팅해서 제공합니다. 

 

https://create-react-app.dev/

Create React App · Set up a modern web app by running one command.

---

 

 

SSR 이 필요한 앱 (실시간 정보가 중요한 경우) - Next js

 

어려워 보이지만, 이용해보면 정말 편하고 좋습니다. 특히 라우팅이 엄청 간편해서 파일 디렉토리에 맞게 저장만 하면 알아서 router 구현이 됩니다. 

https://nextjs.org/

Next.js by Vercel - The React Framework

 

 

---

 

 

정적 앱  - Gatsby

 

공식문서 피셜 정적 웹 사이트를 만들 때에 최고의 방법이라고 합니다. 저는 정적으로 구현할 때도 Next 에 getStaticProps 를 이용한다고 생각했는데 검색해보니 Gastby 엄청 유명하더라구요. 개인 블로그같은 데에 참 좋은 것 같고, 이미 구현된 템플릿들도 제공하는 것 같으니 참고하시면 좋을 것 같습니다.

 

https://ko.reactjs.org/docs/create-a-new-react-app.html 

새로운 React 앱 만들기 – React

 

---

 

기타

 

• Neutrino는 webpack의 장점과 React의 단순함과 미리 설정된 앱과 컴포넌트를 합친 것입니다.
• Nx는 풀스택 모노레포 개발을 위한 도구이며, React, Next.js, Express 등을 기본적으로 지원합니다.
• Parcel은 React와 함께 사용할 수 있고 빠르고 설정이 필요 없는 웹 애플리케이션 bundler입니다.
• Razzle은 서버 렌더링 프레임워크며 설정이 필요 없지만, Next.js보다 다루기 쉽습니다.

Nx 가 뭔가 끌립니다. 풀 스택 개발에 최적화되어 있고, 한 디렉토리로 api 부분이랑 프론트 화면 부분 둘다 관리가 되는 것 같더군요. 풀 스택 개발에 관심있는 분들이 참고해보시면 좋을 것 같습니다.

참고 블로그 : https://blog.nrwl.io/powering-up-react-development-with-nx-cf0a9385dbec

NX 예제 코드 : https://github.com/nrwl/nx-examples

 

 

---

 

 | 리액트 공식문서 함께 읽기 📘 | 

2020/08/24 - [컴퓨터 지식/생각해 볼만한 것] - [개발일기] 한 단계 더 도약하자 / 리액트 공식문서 함께 읽기 0️⃣ - 도입

2020/08/24 - [웹 개발/React] - [React🌌] 리액트 공식문서 함께 읽기 📘 / 1️⃣ - JSX 없이 사용하는 리액트 /

 

 | 리액트 개발 관련 🌀 | 

2020/08/17 - [웹 개발/React] - [React🌀] React로 2048 게임 만들기 ! / 1️⃣ - 기본 세팅 및 소개 / Clone Coding

2020/07/30 - [웹 개발/React] - [React🌌] React + Ant Design + TypeScript 적용하기! / antd 사용

2020/01/17 - [웹 개발/React] - [React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅

2020/07/20 - [웹 개발/React] - [React] 마우스 비밀번호 입력기🖱 / 키보드 보안 입력기 / 2차 비밀번호

 

 

* 출처 및 참고 : 리액트 공식 문서 https://ko.reactjs.org/ 

* 제가 직접 읽고 느낀 생각을 글로 쓰는 것이기에, 잘못된 내용이 있을 수 있습니다. 피드백과 지적은 언제나 환영합니다!