script tag 페이지 방식
php, jsp, asp 같은 서버 사이드 스크립트에 jquery 를 사용하고 있다면 react를 페이지 사이에 끼워서 사용할 수 있다. 웹 페이지 전체적으로 react를 적용하는것이 아니라 페이지 부분 부분에 끼워 넣을수 있는 방식이 script tag 페이지 방식이다. script 태그로 react 모듈을 글로벌로 적용하고 특정한 DOM 노드에 react 를 적용하는 방식이다.
여기에서는 react 홈페이지의 메인 컨셉을 이해하는것이 목표다.
리액트라는 이름이 의미하는것이 무엇인지, react element가 무엇인지, JSX와 react element의 차이점이 무엇인지, 부모와 자식간의 통신은 어떻게 하는지, 컴포넌트가 무엇이고, 클래스 컴포넌트와 펑션 컴포넌트의 차이점이 무엇인지 등 리액트의 핵심 개념을 설명한다.
모듈화와 webpack
웹사이트 전체를 리액트 앱으로 개발하기 위해서 create-react-app 이라는 리액트 CLI 툴을 사용한다. create-react-app 은 webpack 기반이므로 먼저 npm 과 webpack에 대한 선행 학습이 필요하다.
webpack의 필수요소인 entry point 와 output 그리고 여러가지 module loader 에 대해서 배운다. 그리고 웹팩을 도와주는 여러가지 플러그인을 사용해본다.CommonJS 스펙과 es6 모듈 방식을 배우고 그리고, 개발의 필수품을 git에 대한 개념을 익히고 웹스톰에서 어떻게 git을 사용하는지 살펴본다.
create-react-app CLI 개발
웹사이트 전체를 리액트 앱으로 개발하기 위해서 create-react-app 이라는 리액트 CLI 툴을 사용한다
프로젝트 구조를 살펴보고, 웹팩에서 배운 부분들이 이 프로젝트에 어떻게 구현이 되었는지 살펴본다.
react hooks
리액트 16.8부터 리액트 훅이 도입되었다. 리액트 훅 이전개발방식이 old한 개발방식이라고 한다면 이후부터는 modern 개발 방식이라고 할 정도로 많은 변화가 생겼다.
앞으로 react를 개발하게 된다면 반드시 훅을 이해하고 사용해야만 할것이다.
redux
리액트와 함께 개발자들이 가장 많이 사용하는 컴포넌트 간의 통신 방식인 redux를 별도의 프로젝트로 먼저 다룬 후에 다시 프로젝트로 돌아와서 리덕스를 실제 프로젝트에 적용해간다.
상태를 관리하는 많은 방법이 있지만 그중에서 가장 많이 사용하는 redux를 살펴본다.
product 메뉴 구현 with typescript
리액트 기본 개념을 배운 후 리액트를 웹사이트 개발에 어떻게 적용할 것인지를 다루는 내용입니다.
또한, 여기서는 create-react-app을 생성시 타입스크립트를 적용하였습니다.
타입스크립트를 적용하여 props에 어떻게 적용하는지도 같이 다룹니다.
참고 사이트
+ 데모사이트 : http://scoreboard.eastflag.co.kr/
+ 수업 진행 블로그 : https://eastflag.co.kr
Git
+ 웹팩 튜토리얼
+ 리덕스 튜토리얼