React. Part1. ch2. 02. 환경설정 (VScode 및 리액트 설치)

새로운 React 앱 만들기

- https://ko.reactjs.org/docs/create-a-new-react-app.html

 

1) vscode 설치

2) Node.js 설치 ( 로컬(컴퓨터)에서 리액트 앱이 돌아갈 수 있도록 해주는 환경 )

 - https://nodejs.org/ko/ 

 - 좌측 LTS 안정화된 버전 설치

 

 ※ Node 설치 시 npm(node package manager)도 자동 설치 (node 환경에 있는 pakage들을 관리)

    npm 설치 시 npx(node package runner)도 자동 설치 (node 환경에 있는 pakage들을 실행)

 

3) npx create-react-app my-app

 - cmd/터미널 창에서 프로젝트가 담길 폴더 생성 후 해당 폴더 안에서 

    npx create-react-app my-app 진행 

4) vscode에서 프로젝트 폴더 열기

5) cmd 창에서 (프로젝트 폴더 안으로 이동 후 cd my-app) npm start

 - 종료는 ctrl + c

 

○ emotion 라이브러리 설치

 - C:\it\react_lecture\my-app>npm i @emotion/styled @emotion/react

 

    // import react from 'react' 지워도 됨.

    // "react": "^17.0.2" : 17버전 이상 -> jsx에서는 react import 불필요

   

    // react create app 으로 생성했을 경우

    // 이걸 사용할 수 없다. /** @jsx jsx */

    // 대신 현 페이지 최상단 코드를 사용한다.(emotion 명시) 최상단 아니면 에러.

       /** @jsxImportSource @emotion/react */

       import {css} from "@emotion/react";