18. [토이프로젝트 따라하기] "/" 방문시 동작되는 방식

간단한 토이프로젝트라서 그런지 backend 보다는 frontend가 더 복잡하다.

 

Fill 처리된곳은 frontend에서 backend 에게 데이터 요청과 관련된것만 모음

 

각 폴더를 다시 정리하면

- 스타일(styles) : 공통 스타일 저장된곳

- 스토어(Store) : 리듀서, 스토어, 액션 등

 

- 컨테이너 컴포넌트(Container Component) 

1. 어떻게 동작해야 할지를 책임진다. 
2. 내부에 Presentational Component 와 Container 컴포넌트 모두를 가질 수 있지만, 대게 전체를 감싸는 div를 제외하고 자체적인 DOM 마크업이나 스타일을 갖고 있지 않다. 
3. 데이터 및 데이터와 관련된 동작을 다른 Presentational Component 와 Container Component 에게 제공한다. 
4. Flux 의 Action 을 호출하는 작업을 Container Component 에서 작성하며, 이 Callback 들은 다른 Presentational Component 에게 넘겨준다. 
5. 주로 데이터 저장소로 활용되며 상태(state) 를 갖고 있는 경우가 많다. 
6. 직접 작성되기 보다는 HOC(Higher-Order Components) 로 부터 생성되는 경우가 많다. 
ex: UserPage, FollowersSlidebar, StoryContainer, FollowedUserList, 

 

- 프레젠테이션 컴포넌트 (Presentational Component)

1. 어떻게 보여지는 지를 책임진다. 
2. 내부에 Presentational Component 와 Container 컴포넌트 모두를 가질 수 있고, 대게 DOM 마크업 과 자체 스타일을 가진다. 
3. this.props.children 을 통해 다른 컴포넌트 를 포함 하게끔 만들 수 있다. 
4. 어플리케이션의 나머지 부분에 대해 아무런 의존성을 가지지 않는다. (예를 들면 Flux 의 Action 이나 Stroe) 즉, 단독적인 Component 가 된다. 
5. 데이터를 불러오거나 변경하는 작업은 Presentational Component 에서 작성하지 않는다. 
6. 데이터 및 데이터와 관련된 Callback 은 props 를 통해서 받는 작업만 한다. 
7. 상태(state) 는 UI 상태를 관리하기 위해서만 갖게된다. 
8. state, LifeCycle, 성능 최적화가 필요없는 경우라면 Functional Component 로 작성된다. 
ex: Page, Slidebar, Story, UserInfo, List, ..

 

 

---

backend : webpack 4 | create-react-app V2 (react 16.8.61)

frontend : webpack 4.35.3 | create-react-app V2 (react 16.8.61) | @babel/core 7.5.4 | @babel/preset-env 7.5.4 | babel-loader 8.0.6

 

버전은 대략 위와같이 적용되었고 그와 맞게 webpack.config.js 와 package.json 을 수정하였다. 자세한 내용은 앞서 작성된 포스트를 참고바란다.

 

포트는 책에 있는내용되로 4000을 작성하였으므로 4000포트를 이미 사용있다면 다른 포트로 수정해도 된다.

backend 폴더와 frontend 폴더에 각각 yarn.lock 파일이 있으니 yarn install 해서 바로 yarn start 하면된다.

 

 

DB : mongoDB (기본 포트사용)

npm : 6.9.0

yarn : 1.16.0

node : v12.4.0

테스트 환경 : windows 10, 크롬 75.0.3770.100(공식 빌드) (64비트)

 

github link : https://github.com/gusrl6394/ReactExample_1

gusrl6394/ReactExample_1

 

<Switch>

  <Route exact path="/" component={ListPage}/>

  <Route path="/page/:page" component={ListPage}/>

  <Route path="/tag/:tag/:page?" component={ListPage}/>

  <Route path="/post/:id" component={PostPage}/>

  <Route path="/editor" component={EditorPage}/>

  <Route component={NotFoundPage}/>

</Switch>

 

중에서 "/" 방문시 연관된 파일을 화살표로 연결해보았다.