React create-react-app 설치 및 세팅

React create-react-app 설치 및 세팅

https://github.com/facebook/create-react-app#creating-an-app

npx create-react-app my-app (내가 만들 앱 이름)

cd my-app (내가 만들 앱 이름)

npm start

대부분 프로젝트가 C:\Users\사용자명\my-app(내가 만들 앱 이름)

에 설치되어 있음

cmd창에서 위치 변경하여 가능

반드시 node.js 설치 후 해야함

https://nodejs.org/ko/download/

설치할때 그냥 다음다음다음 눌르면 됨

아래 설치는 프로젝트 폴더까지 cmd창에서 진입하여 입력하면 됨

에러날때 설치

Module not found: Can't resolve 'react-lines-ellipsis' in 'C:\Users\work_test01\src'

npm install --save react-lines-ellipsis

index.js 위에 임포트 함

에러날때 script5009: 'promise'이 가 정의되지 않았습니다.

import { polyfill } from 'es6-promise'; polyfill();

그래도 안되면 둘중 하나 설치 해보기

yarn add es6-promise or npm install es6-promise

react-router-dom 설치 (리액트 라우터 v4)

아래 에러 시 설치

Module not found: Can't resolve 'react-router-dom' in 'C:\Users\user\test-app2\src'

npm install --save react-router-dom

참고 : https://velopert.com/3417

react-router 설치 (리액트 라우터 v3)

npm install --save react-router

프로젝트에서 NODE_PATH 를 사용하여 절대경로로 파일을 불러오기 위하여 환경 변수를 설정 할 때 

운영체제마다 방식이 다르므로 공통적인 방법으로 설정 할 수 있게 해주는 라이브러리

npm install --save-dev cross-env

에러 : 'cross-env'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는

배치 파일이 아닙니다.

참고 : https://velopert.com/3417

URL 쿼리를 해석해서 객체로 만들어주는 기능

npm install query-string

에러 : Module not found: Can't resolve 'query-string'

참고 : https://velopert.com/3417

웹서버를 열기 위한  웹프레임워크 Koa 

 async await 문법을 사용 가능, 에러 관리하기가 쉬움 비동기적 작업을 하다가 코드 구조가 매

우 복잡해져 버리는 콜백지옥이 생겨나지 않음.

npm install koa

참고 : https://velopert.com/3417

 js 파일 및 css 파일들을 서버에서 제공. 정적 파일들을 제공할 때 koa-static 미들웨어를 사용

npm install koa-static

참고 : https://velopert.com/3417

Eject

현재 프로젝트의 모든 설정 / 스크립트를 프로젝트로 옮겨줌.  

create-react-app 으로 프로젝트를 생성하게 되면 babel, Webpack 등 여러 모듈들이 같이 설치됩니다.

여기서 Webpack 관련 설정이 나중에 필요하기에 숨겨있는 폴더를 끄집어 낼때 사용.

config라는 폴더가 생겨남

npm run eject

참고 : https://nextus.tistory.com/21

서버용 웹팩설정은 webpack.config.prod.js 를 기반으로 만듦

차이점은, 불필요한 웹팩 플러그인을 모두 없앴고, 로더 또한, js, jsx, json 확장자를 제외한 파일들은 모

두 무시하도록 설정됩니다.

불러오는 자바스크립트 이외의 파일들은 무시하려면, ignore-loader 를 설치해야 함.

npm install --save-dev ignore-loader

참고 : https://velopert.com/3425

npm build

npm run-script build

package.json에 script > build를 호출하는거임 빌드관련하여 추가했으면 build부분을 바꾼 내용으로 쓰

면 됨

package.json

"scripts": {

    ..

    "build": "cross-env NODE_PATH=src node scripts/build.js",

    "build:server": "cross-env NODE_PATH=src node scripts/build.server.js",

    ..

  },

npm run-script build:server

axios 설치

npm install axios

Redux를 설치

npm install --save redux react-redux

비동기 액션 관리는 redux-pender 를 사용

Redux+ +redux-actions + redux-pender +axios 설치

npm install --save redux react-redux redux-actions redux-pender axios

react-router-server 에 포함된 도구들을 사용하여, 최대한 컴포넌트의 복잡도를 줄이고, 컴포넌트

쪽에서 코드를 한번 작성하고 서버쪽에서는 별도의 작업없이 그 코드를 사용하게하고, 또 리덕스와 호

흡을 잘 맞추면서 구현하기위해 설치

npm install react-router-server --save

yarn 설치

npm install -g yarn

yarn add babel-register babel-cli --dev

fetch 설치

npm install --save cross-fetch

- 설치 안하고 사용 시 'fetch'이(가) 정의되지 않았습니다. 에러 로그 뜸

끘!@#~!@#