이건호의 Lv 2, 페어 코드 리뷰 입니다~

많은 것을 배울 수 있었던 리뷰였습니다. 두분 모두 so GOOD!!

구조

components

  * DetailPage
        * styled.js : styling DetailPage
  * home 
        * Header
             - index.js : 제목 & 내용 & add 버튼이 있는 header section 
             - styled.js : Header styling 
        * ToDoList 
             - ToDoContainer 
                 --- Index.js : props의 title & body, 삭제하기 & 완료 & + 버튼
                 --- styled.js : ToDoContainer styling 
             - index.js : Working & Done sections 
             - styled.js : styling ToDoList

home은 Header와 ToDoList를 가지고 있으며, pages폴더의 home.js로 export되는 구조가 명확히 보이지만, DetailPage는 전 구성이 detailPages.js에 있고, styled-components를 모아놓은 파일 하나만 있는 구조가 달라 처음 읽는 사람으로서 조금 어색하였습니다.
파일명들이 index.js, styled.js으로만 설정되어 있어 어느 것의 index인지, styled인지 첫눈에 구조가 잘 들어오지 않았습니다.
styled 파일이 통일 되어 하나로 운영되었으면?하는 생각이 들었습니다.

pages

   * detailPage.js : Detailpage 구성 
   * home.js : components에서 <Header>, <ToDoList> 소환,

detailPage와 home의 구조가 달라보이는게 두 분이서 home과 detailPage를 나눠서 작업하는 방식을 선택하셨었나요??
{new Date(item.id).toLocaleDateString()} 부분에서 toLocaleDateString를 활용한 시간적용을 배울 수 있었습니다.

redux

    * config
         * configStore.js : rootReducer todosData
    * modules 
         * todosData.js :  action value들 지정 & initialState & action creator들( changeInput, AddTodo, completionTodo, removeTodo ) & exporting todosData

redux가 잘 구성되어 있고, 활용되고 있는 것이 보였습니다.
todosData.js에서의 AddTodo = Date.now를 사용한 id값 부여가 좋았습니다.

App.js : GlobalStyle 적용 & Routing

shared 폴더와 Router.js를 따로 설계하여 routing을 적용한 방식과 달리 최상위 컴포넌트인 App.js에서 적용하신 로직이 다른 방식을 배우게되는 계기였습니다.

GlobalStyle : body styling & font & background-colour & color global 환경에 적용

전체적으로

styled.js를 여러개로 각 컴포넌트마다 적용한 방식이 달랐다. 파일명도 다 같고, 각 폴더마다 있어서 처음 코드를 보는 사람으로서 구조를 보는데 했갈렸습니다.
css를 적용하는 방식이 제각각 다른 부분들이 있어 정리가 되었으면 좋겠습니다.
- ToDoList의 working & done 부분에서 todo에 적용
- ToDoContainerBox 안에 있는 div style={}
- detailPage.js에서 Styled-components와 style={{}} 혼합하여 적용
ToDoList안의 index.js의 Working & Done sections 에서 map함수에서 todo.isDone의 조건으로 filtering 해서 생성해 낸 로직이 좋습니다. good~
Shared 폴더의 Router.js file에서 route를 지정한 것이 아닌, 최상위 컴포넌트인 App.js에서 바로 적용한 로직이 달라 서로 다른 점을 배울 수 있었다.
todo post에 제각각이 고유의 id를 부여하는데 있어 Date.now를 사용한 로직이 다른점을 보였고, 생성 당시의 시간을 이용한 id값 부여에 관해 배울 수 있었습니다. Great!!
- id값을 부여하는 과정이 달라, detailPage.js에서 params.todo를 Number타입으로 바꿔 이미 Number 타입인 item.id에 맞춘 것이 눈에 보였습니다.
- uuid ( )라는 package를 사용하여 id값을 부여한 우리 페어와는 확연히 다른점이였습니다.

Rose-Rosie-Rose / todo-pair

Lv 2 과제, 페어 코드 리뷰 -이건호- #10

이건호의 Lv 2, 페어 코드 리뷰 입니다~

구조

components

pages

redux

App.js : GlobalStyle 적용 & Routing

GlobalStyle : body styling & font & background-colour & color global 환경에 적용

전체적으로