이 튜토리얼은 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는 프로젝트 이름이다.

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

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

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-664d8ac00cb71012575801/] 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 ...