환경 구축

속공 환경 구축　-Create-React-App-

Create-React-App이란?
Create-React-App은 React를 배울 수 있는 편안한 환경이며 React에서 SPA를 만드는 가장 좋은 방법입니다.

React 툴체인

툴 체인은?
React를 환경 구축하는 도구입니다. 환경 구축은 툴 체인을 사용하는 방법이나 사용하지 않는 방법의 2가지가 있습니다.

만약 사용하지 않는 방법을 선택하면 다음을 설정하는 과정이 발생합니다.

많은 양의 파일과 구성 요소로 확장

npm을 통해 타사 라이브러리 사용

흔한 실수를 조기에 발견한다

개발 환경에서 CSS 및 JS 라이브 편집

프로덕션 용 출력 최적화

툴 체인은 시작할 때 설정이 필요하지 않습니다.

매우 고맙습니다 😎

React 공식 문서

Create-React-App에 필요한 요구 사항

node.js 10.16 이상

npm 5.6 이상

(해설)
node.js... 서버 환경에서 실행되는 Javascript
npm...Node Package Manager의 약자
JavaScript 기반 패키지를 관리하는 도구

포인트 ☝️ 위의 설치를 위해서는 homebrew, nodebrew 필요

(해설)
* Homebrew...MacOS의 퍼전 관리
* nodebrew...Node의 퍼전 관리

설치 절차

Homebrew 설치

nodebrew 설치

node 설치

노드의 환경 경로를 통한

Homebrew 설치

Homebrew
macOS 터미널 또는 Linux 쉘 프롬프트에 붙여 넣습니다.

설치 후 버전을 확인합니다.

brew -v

nodebrew 설치

포인트 ☝️ nodebrew를 설치하려면 Homebrew가 필요합니다.

brew install nodebrew

설치 종료 후

nodebrew -v

그러면 node 버전이 표시됩니다.

노드 설치

nodebrew ls remote

버전이 많이 나왔지만 안정판 버전을 설치합시다!

nodebrew install stable

설치가 끝나면 Installed seccessfully가 표시되면 성공합니다 🥰

nodebrew ls

현재 설치된 노드의 버전 목록

nodebrew ls

설치된 버전을 사용하려면

nodebrew use 16.1.0 //あくまでも一例です。使いたいバージョンに合わせてインストールしてください。

노드의 환경 경로를 통과

포인트 ☝️ 사용하는 SHELL에 따라 명령이 다르다

echo $SHELL

zsh (새로운 Mac)

bash (오래된 Mac)

zsh

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

bash

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

버전 확인

node.js 10.16 이상

npm 5.6 이상을 충족하는지 확인합시다.

node -V
npm -V

요구 사항을 충족하면 개발 환경으로 이동하여 Create-React-App을 빌드하십시오!

드디어! Create-React-App

raised_hand

npx create-react-app フォルダ名

훌륭하게 환경을 구축 할 수있었습니다


이상이 Create-React-App를 사용한 환경 구축이었습니다.
힘들다고 생각하는 사람들은 환경 구축없이 웹에서 시도 할 수있는 온라인 편집기가있는 것처럼 보입니다.

React 온라인 편집기