REACT 1일차 (react 기본 setting)

웹 해킹은 잠시 접어두고 REACT 공부에 흥미를 느껴 공부를 시작합니다!

 

1. 노드버전 매니저로 node.js 설치하기

https://github.com/coreybutler/nvm-windows/releases

coreybutler/nvm-windows

nvm-steup.zip 파일을 다운 후 실헹

 

2.nvm을 통해 nodejs 설치

nvm install 10.10.0

 

3. NVM이 설치한 nodejs 사용 설정

nvm use 10.10.0

(+ node -v 와 npm -v를 통한 버전 확인)

 

--------------------------------------------------------------------

 

YARN과 Create-react App 설치

create-react app은 리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성헤주는 도구

 

1. yarn 설치하기

npm install -g yarn

 

2. create-react app 설치하기

yarn global add create-react-app

 

3. 리액트 앱 생성하기

create-react-app harry595 (harry595라는 이름으로 리액트 앱 생성)

 

---위의 명령어를 사용했는데 에러 발생 시 해결법---

'create-react-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

이런 에러가 뜰경우 npm install -g create-react-app을 사용 후 실행

 

4. 리액트 앱 구동하기

 

cd harry595

yarn start

 

이런 창이 떠야 정상적으로 실행돤 것

 

--------------------------------------------------------------------

 

예제에 필요한 라이브러리 미리 설치하기

 

1.package.json 수정

{
  "name": "harry595",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "0.18.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16.3": "^1.4.1",
    "moment": "^2.24.0",
    "next": "^8.1.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.1",
    "react-test-renderer": "^16.7.0",
    "react-with-styles": "^3.2.1",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-pack": "^0.1.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "selector-action": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
    "@storybook/addon-actions": "^5.2.6",
    "@storybook/addons": "^5.2.6",
    "@storybook/react": "^5.2.6",
    "aphrodite": "^2.2.3",
    "babel-loader": "^8.0.5",
    "json-server": "^0.14.2",
    "node-sass": "^4.11.0",
    "react-with-styles-interface-aphrodite": "^5.0.1",
    "redux-devtools-extension": "^2.13.8",
    "sass-loader": "^7.1.0",
    "storybook-addon-jsx": "^7.1.13"
  }
}create.js",

 

2. package.json에 적힌 라이브러리 모두 설치하기

해당 dir에서 yarn 실행

 

3.babel-loader 호환성 오류 해결하기

babel-loader버전 오류가 발생하지 않도록 루트 폴더에 npm 환경 변수 파일 제작(.env)

SKIP_PREFLIGHT_CHECK = true -> 입력 후 저장

 

--------------------------------------------------------------------

 

비쥬얼 스튜디오 코드와 플러그인 설치하기

 

1.공식 사이트에서 비쥬얼 스튜디오 코드 설치

 

2.Reactjs code snippets 플러그인 설치

extensions에서 'reactjs code snippets' 검색 후 플러그 인 다운 (2.4.0)

 

3.src폴더에 01 폴더를 만든 후 RCC.jsx 파일 생성.

편집화면에 rcc라고 입력할 시 목록을 통해 자동으로 기본 코드 생성 가능

 

4.prettier 플러그인 설치 (Prettier- Code formatter)

Prettier는 프로젝트의 코드 입력 스타일을 동일하게 유지시켜줌

 

5.플러그인 설치 후 Reload 를 통해 비쥬얼 스튜디오 코드 재실행 후 

  프로젝트 폴더에 .prettierrc 파일 생성

{
  "useTabs": false,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all",
  "semi": true,
  "single Quote": true
}

 

6.prettier로 코드 입력 스타일 적용

ctrl+shift+P를 통해 Format Document 실행

 

7.자동으로 prettier 설정 적용

setting 탭에서 firmatOnSave의 체크박스 클릭

 

--------------------------------------------------------------------

리액트 앱 수정하기

 

1.App.css 수정하기

App.css 맨 아래에 다음과 같은 코드 추가

.title{

  font-style : italic;

}

 

2.스타일 반영하기

src폴더의 App.js를 다음과 같이 수정후 저장

 

import React, { Component } from "react";

import "./App.css";

 

class App extends Component {

  render() {

    return (

      <div class Name="App">

        <h1 className="title"> 리액트 시작하기</h1>

      </div>

    );

  }

}

 

export default App;

 

3.리액트 핫 리로딩으로 변경된 화면 확인

리액트 앱을 구동시킨 상태라면 저장한 즉시 화면이 바뀐다.

이렇게 되는 이유는 create-react-app의 핫 리로딩이라는 모듈 덕분이다.