[React] 초기 셋팅 Nodejs, npm, yarn 이해

2023. 3. 11. 03:56·Front/React
목차
  1. React란?
  2. OS(내 컴퓨터에 설치 해야 할 것)
  3. 폴더에 설치해야 할 것

React란?

React는 javascript를 쉽고 효율적으로 사용할 수 있도록 Facebook에서 만든 도구이다

대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있다

 

OS(내 컴퓨터에 설치 해야 할 것)

1. VS code

2. VScode - Extension

3. Node.js 설치 (LTS 버전)

4. Yarn 설치 : sudo npm install -g yarn

 

폴더에 설치해야 할 것

⭐ 여기서부터는 컴퓨터에 node.js가 설치되어 있어야 한다 ⭐

 

1. 바탕화면에 폴더 만들기 (이름은 영어로!)

 

2. vscode에서 폴더 열기

 

3. 터미널은 git bash로 돼있어야 한다.

 

4. 아래 명령어를 터미널에 입력해서 설치한다.

npx create-next-app

 

 

만들고 싶은 폴더의 이름을 적어주면 된다

 

다 No 선택하기 Enter Enter

 

5. 만든 폴더로 이동한 다음에 React를 17버전으로 교체하기

cd project
yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact

 

6. pages 폴더 안에 api와 _document.js 파일 삭제하기

 

7. Emotion 설치하기

 

yarn add @emotion/react
yarn add @emotion/styled

 

8. Apollo-Client와 Graphql 설치하기

 

yarn add @apollo/client graphql

 

9. Ant-Design 설치하기

 

yarn add antd

 

10. Material-UI 설치하기

 

yarn add @material-ui/core

 

11. Axios 설치하기

 

yarn add axios
저작자표시 (새창열림)

'Front > React' 카테고리의 다른 글

[React] Edit Page 보완 - defaultValue와 myvariables  (0) 2023.03.18
[Error] cSpell Unknown word 무시하기  (0) 2023.03.16
[React] 컴포넌트(Component) 재사용  (0) 2023.03.16
[Error]  (0) 2023.03.12
[React] Component 와 State  (0) 2023.03.08
  1. React란?
  2. OS(내 컴퓨터에 설치 해야 할 것)
  3. 폴더에 설치해야 할 것
'Front/React' 카테고리의 다른 글
  • [Error] cSpell Unknown word 무시하기
  • [React] 컴포넌트(Component) 재사용
  • [Error]
  • [React] Component 와 State
soyeon26
soyeon26
  • soyeon26
    개발 일지
    soyeon26
  • 전체
    오늘
    어제
    • 분류 전체보기 (107)
      • Web (22)
        • Web (1)
        • HTTP (0)
      • Language (29)
        • Java Script (3)
        • Type Srcipt (1)
        • Java (25)
      • Front (19)
        • HTML+CSS (4)
        • React (15)
      • Back (41)
        • Spring(Springboot) (9)
        • JSP (21)
        • Database (5)
        • NestJS (6)
      • Devops (6)
        • Docker (1)
        • Git & SVN (5)
      • App (7)
        • Android (7)
      • IT 정보 (3)
  • 블로그 메뉴

    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    SQL강의 추천
    Next.js 필요성
    강의후기
    강의 후기
    Java
    자바스크립트set
    React Next.js
    Spring
    프론트엔드
    과학기술인 등록번호 발급
    인프런
    과학기술인 등록
    SSR
    csr과ssr의 차이
    과학기술인 번호 발급
    스프링부트
    React
    김영한
    Next.js
    javascript
    java의 정석
    과학기술인등록번호 조회
    csrvsssr
    springboot
    서블릿
    데이터베이스 강의
    sql강의
    중복제거
    과학기술인번호 조회
    백엔드
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
soyeon26
[React] 초기 셋팅 Nodejs, npm, yarn 이해

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.