(2.4) 2.3에 이어서 진행하는 implementing React_ 서버 최신화 자동화(watch option) 입니다.
(24) package.json 에 코드 추가
- 이번 작업은 매우 간단합니다. (그런데 왜 페이지를 2.4 까지 끌고 왔나요???)
- 너무 길어서 작성하다가 잠시 앉느라고 흐름이 끊겼어요... 모션데스크의 단점입니다 여러분!
자 어쨌든 package.json 에 간단히 --watch코드를 추가해 줍니다. 다음과 같이요.
서버 실행
$ npm run dev- 그리고 Header 파일의 UI에 수정사항을 적용해 주면 (--watch에 의해) 자동으로 갱신됩니다.
(25) 대시보드 만들어주기
- 이제 Header는 완성했으니 그 아래에 lead 를 추가하는 Component를 만들어 봅니다.
- 그리고 모든 lead 리스트를 볼 수 있는 ui를 추가해 줍니다.
- 우리는 redux, react router를 사용할 것 입니다.
(26) /src/components/leads 폴더 만들고 내부에 파일 생성 및 작성하기
- 새로 생성한 leads 폴더 내에 Dashboard.js, Form.js, Leads.js 를 생성합니다.
1. Dashboard.js : 동일 폴더 내의 나머지 두 js파일(Form.js, Leads.js)을 관리합니다.
2. Form.js : lead를 생성하는데 쓰입니다.
3. Leads.js : lead 들의 리스트 역할 입니다.
(27) /src/components/leads/Form.js 작성 // class-based component
[redux] - generate Code: rce
<h1>Add Lead Form</h1>위의 코드를 <div></div>내에 추가해 줍니다.
(28) /src/components/leads/Leads.js 작성 // class-based component
[redux] - generate Code: rce
<h1>Leads List</h1>위의 코드를 <div></div>내에 추가해 줍니다.
(29) /src/components/leads/Dashboard.js 작성 // functional component
[redux] - generate Code: rcf
다음과 같이 generate 된 코드를 수정합니다.
(30) App.js 수정
- Dashboard 를 추가해 줍니다.
- 저장을 하고 브라우저 상에서 새로고침으로 바로 확인해 봅니다.
결과
이번 장은 여기까지 입니다. 이로써 Implementing React 를 끝마쳤습니다.
다음 장부턴 Functionality 를 추가해 주기 위해 Redux를 본격적으로 사용해 볼 것 입니다.
앞으로의 스텝들은 대략적으로 다음과 같습니다.
- Redux store 추가
- route reducer들 만들기
-- 에러
-- 메세지(react alert)(pop-up error message)(서버사이드 또는 클라이언트 사이드에서 만든 메세지가 뜨도록 하는 것)
이상입니다. 잠시 밥먹고 와야겠네요!
Stay tuned for the next episode of Web development by the English teacher JOHNNYCLUB!!!
