[ Node.js ] node.js 설치 및 설정

2024. 4. 29. 14:36[ Self-Study ]

 

nodejs = 서버용 자바스크립트

 

 

사이트 접속하여 LTS 버전의 node.js 를 다운받아 별다른 설정 없이 설치한다

https://nodejs.org/en

 

 

설치 완료 후 cmd를 켜서 아래와 같이 버전 및 설치 여부를 확인해본다

 

 

C:\Users\user1\AppData\Roaming
C:\사용자\계정명\AppData\Roaming

 

 

경로에 접속하여 npm 폴더를 직접 생성해줘야 한다.

 폴더에서 생성해줘도 되고 cmd에서 생성해줘 된다.  cmd 명령어는 아래와 같다

cd C:\Users\user1\AppData\Roaming
mkdir npm

 

 

다시 cmd로 넘어와 원하는 위치로 이동한다.

나는 react라는 폴더를 만들어 준 뒤 그 폴더 위치에 접속했다

 

npx create-react-app demo01

 

위의 명령어를 입력하여 설치를 진행한다

 

** 터미널은 하나라도 클릭되어 있으면 진행과정이 보이지 않는다. 따라서 ESC를 눌러 커서를 빼야 함!

 

 

 

설치 완료!

설치 완료

 

 

이제 실행해보자

 

 

 

npm start 를 통해 브라우저에 위와 같이 사이트가 열림을 확인할 수 있다. 

 

 


 

VSCode에 react 폴더 불러오기

 

  • node_modules - npm으로 설치한 모듈의 위치

  • public - 프로젝트에 포함될 정적 파일의 위치

  • src - 프로젝트 소스 파일의 위치

    • App.css - 메인 컴포넌트 CSS 파일

    • App.js - 메인 컴포넌트 JS 파일

    • App.test.js - 메인 컴포넌트 테스트 파일

    • index.css - index.js에서 불러오는 기초 CSS 파일

    • index.js - 프로젝트 진입점

    • reportWebVitals.js - 프로젝트 상태 확인 및 서드파티(ex : 구글 애널리틱스) 연동 파일

    • setupTests.js - 테스트를 위한 JEST 설정 파일

  • .gitignore - Git 제외 명단 작성 파일

  • package-lock.json - 프로젝트 의존성 및 버전 관리용 파일

  • package.json - 프로젝트 의존성 및 버전 관리용 파일

  • README.md - 사용 설명서

 

 

 

 

 

참고 : https://docs.sysout.co.kr/web/develop-page/js/reactjs/cra

 

 

 

728x90