Library 설치 및 적용 방법

node / react install and setting

98kg 2023. 10. 10. 12:14

node 설치 / react 설정 / react 패키지 생성 / yarn 생성 


우선 node.js 를 install 받아준다 아래는 링크입니다.

https://nodejs.org/ko

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

react install 순서


1. Node를 install 한다 (LTS 18.X....) : 

만약 19 이상을 install 하게 되면, 관련 Open Lib 가 실행 안 될 가능성 매우 높음.

2. install 완료 후 우리가 생성한 워크스페이스 폴더로 CMD를 이용해서 이동합니다.

3. 의존성과, 이에 따른 필수 모듈을 해당 워크스페이스에 install 해야 하는데, 

이때 사용되는게 node package manager와 yarn 입니다.

4. 두 개 모두 선택적으로 사용하지만 yarn 이 좀 더 편하다


5, npx 명령어를 이용해서 node 프로젝트를 초기화 할게요.

6. 위 workspace 경로에서 다음처럼 입력합니다. npm init

7. 이후 나오는 메세지는 모두 enter로 기본 값 설정 후 node project 초기화를 완료한다.

7. 1 반드시 완료 후, 해당 폴더에 의존성 관리 파일인 pagckage.json이 생성되었는지 확인합니다.

8. 이번엔 yarn 패키지 매니저를 install 할게요. npm install -g yarn 이라고 입력합니다.

9. yarn 입력

10. 만약 yarn 설치 시 명령어를 찾을 수 없다고 나오면 다음처럼 수행합니다.

11. 윈도우에서 powerShell 관리자 권한으로 열기 

12. get-help Set-ExecutionPolicy 입력 후 실행합니다. --> 완료 후 Y 입력

13. Set-ExecutionPolicy RemoteSigned 입력 후 실행합니다. -> 완료 후 Y 입력 끝

14. 모두 완료되면 React App 을 생성합니다.

14.1 명령어 : \React work 에서, npx create-react-app 리액트앱Name (띄어쓰기 불가)
 -->npx create-react-app todo-react-app  후 y   

해피해킹 나오면 끝
/// vs코드에서 open in browser 설치

15. 리액트 앱이 잘 생성되었으면, terminal 의 경로를 리액트 앱으로 변경 후 

다음처럼 입력해서 클라이언트 서버를 start 해준다.

15.1.  npm start or yarn start : 이후 브라우저가 열리고 3000번 포트에서
리액트 앱이 랜더링 될 것입니다.