React 설치 및 프로젝트 생성

et Ji·2022년 12월 5일
0

개발환경

목록 보기
1/1
  • 기본 세팅

  • 크롬, VSCODE, git 설치

- node.js 설치 : 자바스크립트를 실행할 플랫폼

  • node 홈페이지 - LTS로 설치 후 설치 및 버전 확인
    - 터미널 창 명령어 실행
    - node -v

- 패키지 매니저 설치

  • 많은 서드파티 패키지들의 집합소 , 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"

    👉 두 가지 중 성능적으로 개선된 yarn 사용

    • npm (Node Package Manager)
    • yarn 설치하기
      • 터미널 - 명령어 실행
        • 설치 : npm install -g yarn
        • 설치 확인 : yarn -v

- VSCODE 확장 프로그램

  • Prettier - Code formatter 설치
    - 설정 - JSON으로 열기 - 우측 상단 아이콘 클릭
    - "editor.defaultFormatter":"esbenp.prettier-vscode” 추가
    - 다시 설정창으로 이동 - 검색창 format on save 입력 - format on save 체크박스 체크
    - 파일 저장할 때마다 프리티어를 적용해준다.

- 프로젝트 시작하기

  • CRA로 프로젝트 생성하기
    - CRA (Create React App) 란?
    - 리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구

1. 프로젝트 생성

              ls #현재 파일 위치

              cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 이동 
                                    # 폴더로 직접 들어가서 폴더 내에서 우클릭하여 터미널 열어도 됨.

              yarn create react-app 폴더명(프로젝트명) #프로젝트 생성!

2. 생성한 폴더로 이동
- VSCODE에서 폴더를 열어도 된다.

              cd **폴더명(프로젝트명)** # 생성한 **폴더명(프로젝트명)**

3. 프로젝트 구동 - VSCODE 터미널 창에 명령어 입력

              yarn start # 프로젝트 구동!
profile
codesign

0개의 댓글