-
node / react install and settingLibrary 설치 및 적용 방법 2023. 10. 10. 12:14
node 설치 / react 설정 / react 패키지 생성 / yarn 생성
우선 node.js 를 install 받아준다 아래는 링크입니다.
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번 포트에서
리액트 앱이 랜더링 될 것입니다.'Library 설치 및 적용 방법' 카테고리의 다른 글
<Library> Lombok 설치 및 사용방법 (0) 2023.08.24