React 설치하기

2023. 9. 17. 23:53·2023-02 몰입형 SW 정규 교육/9월 프로젝트
728x90

React를 설치하기 위해 먼저 Node.js를 설치해야 합니다.

Node.js 설치 방법 및 버전 확인 방법은 아래 링크를 통해 확인해주세요!

 

Node.js 설치하기 (18.17.1)

제가 사용할 Node.js 버전은 18.17.1 LTS 입니다. 먼저 아래 사이트에 접속한 후 https://nodejs.org/ko/blog/release/v18.17.1 Node v18.17.1 (LTS) | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or

zero-talk.tistory.com

 

 

 

React를 설치하는 방법은 ① 원하는 폴더명으로 React 초기 파일 생성하기 ② 원하는 폴더 안에서 React 개발 환경 세팅하기 두 가지 방법이 있습니다.

 

저는 이미 프로젝트 폴더를 생성해두었기 때문에 1번 방법을 쓰겠습니다.

 

 

이런, npm 버전 업데이트를 하라네요. 친절하게 명령어까지 알려줍니다.

 

해당 명령어를 입력하여 npm 버전 업데이트를 해줍니다.

 

$ npm install -g npm@10.1.0

 

 

 

npm 업데이트 완료 후 아래 명령어를 입력하면 react 개발환경에 필요한 파일들이 자동으로 생성됩니다.

참고로 파일 이름에 대문자가 있으면 생성되지 않습니다.

그래서 저도 M5untain이 아닌 m5untain으로 프로젝트를 생성했어요.

 

$ npx create-react-app 파일이름

 

react 개발에 필요한 파일 생성

 

 

 

아래와 같은 문구가 뜨면 설치가 완료된 것을 확인할 수 있습니다.

 

 

맨 아래에 보면 파란 글씨로 npm start가 써있네요.

이건 react 프로젝트를 웹 브라우저에서 확인하기 위한 실행 명령어입니다.

 

$ npm start

 

 

 

아래와 같은 문구가 뜨면 react 프로젝트가 잘 실행됐다는 의미입니다.

 

 

npm start 명령어로 실행된 웹 프라우저 창을 통해 react 프로젝트가 제대로 실행된 것을 확인할 수 있습니다.

 

 

명령어로 npm start를 종료하려면 터미널 창에서 Ctrl + C를 누르면 종료됩니다!

 

 

 

create-react-app 공식 문서

 

Getting Started | Create React App

Create React App is an officially supported way to create single-page React

create-react-app.dev

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'2023-02 몰입형 SW 정규 교육 > 9월 프로젝트' 카테고리의 다른 글

[Spring Boot] vs code에서 REST API 생성하기  (0) 2023.09.27
React 프로젝트에 MongoDB 연결하기  (0) 2023.09.19
[MongoDB] 커넥션 생성하기  (0) 2023.09.18
MongoDB 설치하기  (0) 2023.09.18
Node.js 설치하기 (18.17.1 LTS)  (0) 2023.09.17
'2023-02 몰입형 SW 정규 교육/9월 프로젝트' 카테고리의 다른 글
  • React 프로젝트에 MongoDB 연결하기
  • [MongoDB] 커넥션 생성하기
  • MongoDB 설치하기
  • Node.js 설치하기 (18.17.1 LTS)
gxxg
gxxg
함께 일하고 싶은 개발자를 꿈꾸는 예비개발자의 공부 기록
  • gxxg
    공공
    gxxg
  • 전체
    오늘
    어제
    • 분류 전체보기 (138)
      • ☁️ 구름 x 카카오 Deep Dive 풀스택 (7)
        • html, css (1)
        • Java (3)
        • 스프링 MVC (0)
      • 💻 코딩테스트 (89)
        • 백준 (2)
        • programmers (87)
      • SQLD (1)
      • Language (3)
        • Java (2)
        • JavaScript (1)
      • Style Sheet (0)
        • CSS (0)
        • SCSS & SASS (0)
      • DBMS (2)
        • Oracle (2)
        • MySQL (0)
        • postgresql (0)
        • 데이터베이스 기초 이론 (0)
      • React (0)
      • SpringBoot (0)
      • JSP (2)
      • 알고리즘 (0)
      • 2023-02 몰입형 SW 정규 교육 (24)
        • 9월 프로젝트 (8)
      • 벽돌깨기 (4)
      • Etc (4)
  • 블로그 메뉴

    • 홈
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    티스토리챌린지
    톰캣
    CSS
    eclipse
    프로그래머스
    코테
    프로젝트 구조
    junit 테스트
    코딩테스트
    구현체
    programmers
    HTML
    java
    0단계
    자바
    2단계
    springboot
    이클립스
    3단계
    자바스크립트
    LV3
    JSP
    오블완
    Lv2
    javascript
    POST
    회원 관리 시스템
    spring
    Lv0
    DFS
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
gxxg
React 설치하기
상단으로

티스토리툴바