리액트 앱 생성 방법 npm 과 yarn / VSCODE 리액트 확장 ES7, JSX emmet 사용하기

npm / yarn

로컬PC에 리액트 앱을 생성하기 위해서

npm와 yarn 두가지를 사용할 수 있습니다.

npm은 nodejs의 패키지 매니저이고

yarn은 npm 명령어로 설치합니다.

몇번 하다보면 익숙해지지만

npm이 무겁게 느껴지기 때문에

yarn을 사용하기도 합니다.

목표는 같아도 가는 길은

다를 수가 있으니까 알아두면

나쁘지 않을 것 같습니다.

npm

- 먼저 npm 입니다. Nodejs 웹사이트의

최신 버전을 설치하면 설치됩니다.

안정성을 중요시하면 LTS 버전을 선택합니다.

리액트 앱은 다음과 같이 생성합니다

리액트 웹사이트의 Quick Start 입니다.

여기서 my-app은 폴더의 이름입니다.

. 도트를 표시하면 현재 디렉토리에

리액트 파일을 생성합니다.

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

매법 타이핑 하기가 귀찮으니까

스크립트를 만들어서 사용합니다.

윈도우의 명령프롬프트에서

사용하는 bat 스크립트입니다.

파일명은 n-rc.bat 이라 하고

n-rc (파일이름) 으로 리액트를 생성합니다.

(배치파일 이름은 마음대로

정하면 되는데 짧은게 좋다)

@echo off

echo -- React App Creation --
if "%1"=="" (
    echo no file name...
    goto QUIT

) else (
    npx create-react-app %1
    cd %1
    npm start
)

:QUIT
echo script ended

yarn

yarn 의 경우 npm 명령어로 설치합니다.

npm install -g yarn

글로벌에 create-react-app을 설치합니다.

yarn global add create-react-app

yarn 은 약간 커맨드가 다릅니다.

yarn create react-app my-app
cd my-app
yarn start

npm 처럼 스크립트로 만들어

놓으면 타이핑 수고를 덜 수 있습니다.

@echo off

echo [-- React App Creation by yarn --]
if "%1"=="" (
    echo no file name...
    goto QUIT

) else (
    yarn create react-app %1
    cd %1
    yarn start
)

:QUIT
echo script ended

확실히 yarn 쪽이 가벼워서 설치속도와

제거 속도가 빠른 것 같습니다.

기본적으로 파일이 3만개가 넘게

설치되기 때문에 조금 더 빠른 yarn을

쓰면 기다리는 시간이 줄어듭니다.