이 튜토리얼은 create-react-app 이라는 react에서 만든 CLI 로 구성된 모듈 방식으로 개발하는 단계입니다.

먼저 npm이라는 node package manager와 webpack 이라는 모듈번들러를 살펴보겠습니다.

그리고 git 사용법에 대해서 살펴봅니다.

CDN 링크 페이지 방식에서 npm, webpack 기반 create–react-app 과 같은 모듈 방식 개발을 하기 위해서 먼저 설치되어야 할 툴이 있다. node 는 npm 을 사용하기 위해서 반드시 먼저 설치되어야 하는 프로그램이다. 커맨드창에서 node -v 로 확인후 8.10.x 이상 노드가 설치되어있지 않다면 먼저 node 부터 설치해야 한다. 그리고, git도 필수이기 때문에 git도 설치되어있지 않다면 먼저 설치해주자.

node와 git 이 설치되었다면 아래 명령어로 모듈 방식 react 프로젝트를 생성한다. npx는 create-react-app을 global로 설치하지 않고 실행하게 해주는 유틸리티이다. create-react-app의 버전관리를 하지 않아도 된다는 장점이 있다. scoreboard는 프로젝트 이름이다.

npx create-react-app scoreboard

생성이 되었다면 해당 프로젝트로 이동후 실행해본다.

cd scoreboard
npm run start

생성된 프로젝트를 열어보자.

create-react-app 으로 생성된 프로젝트는 최신 프런트엔드 기술이 모두 반영된 결과물이라 페이지방식으로 개발하다가 이런 프로젝트를 처음하게 되면 react 보다 더 생소하게 느껴질것이다.

최신 프런트엔드 기술에 관한 아래 9가지 질문에 대해서 잘 모르겠다면 최신프런트엔드 – 모듈화와 webpack 부터 먼저 공부하여야 한다.

  1. package.json과 node_modules가 무엇이고 어떤 관계인지 알고 있다.
  2. package.json 안에 dependancy와 devDependancy가 무엇인지 알고 있다.
  3. scss 를 프로젝트에 적용할 수 있다.
  4. autoprefixer 가 무슨 역할을 하는지 알고 있다.
  5. HMR (Hot Module Replace) 개발환경이 무엇인지 알고 있다.
  6. commonJS 문법이 무엇이며 es6에서 어떻게 변화가 된건지 알고 있다.
  7. .gitignore 의 역할을 알고 있다.
  8. browserlist 가 무엇인지 알고 있다.
  9. babel이 무엇인지 알고 있다.
  10. eslint 가 무엇인지 알고 있다.

create-react-app 구조 분석

package.json 프로젝트 구조에서 가장 중요한 부분은 package.json 이다. 이 화일안에

Read more …

break into module

prerequisite + es6 import + es6 exportmigration bootstrap 모듈을 인스톨한다. [crayon-61707db082951799302158/] index.js…

Read more …

Component Communication

Unidirectional Data Flow 자기 자신의 상태를(local state) 가지는 많은 컴포넌트가

Read more …

Statistics Component

Statistics Component 화면 구성 score가 이제 local state가 아니라 lifting

Read more …

Controlled Component

UI 구성 player를 추가하는 폼을 만들자 AddPlayerForm 컴포넌트를 추가한다. stateful한

Read more …

라이프사이클 메서드 – 서버연동

+ main goal 라이프사이클은 활용방법 – 언제, 어떻게 사용하느냐 라이프

Read more …

composition and inheritance

상속과 props Containment 상속은 extends 키워드를 사용해서 부모의 모든 속성과

Read more …

highscore – composition

+ 알아야 할것 composition과 inheritance의 차이점 composition 하는 3가지 방법

Read more …

hook으로 변경

+ 알아야 할것 useState 훅과 useEffect 훅 + 실습 App.jsx …

Read more …

redux 적용

+ 알아야 할것redux, react-redux redux 의 useSelector 훅과 dispatch 훅+ 실습App…

Read more …

Comments are closed.