2019. 06. 17 이머시브 수업 4주차 - 1일(react todolist sprint review)

 

구현중 일부

- 구현순서 : 컴포넌트 설계 -> (변수네임 지정) -> create react-app 으로 환경구축 -> 코드 작성 & css

 

- Issue : 코드를 작성해가는것과 css를 같이 만지면서 진행을 했는데 그렇게 나아가다 보니

             이미 시간을 많이 쏟은 상황이었는데 fakedata로 만들어놨던게(서버를 만지지 않았고 api를 땡겨오는 상황도 아니었음)

             꼬이기 시작하더니 나중에는 다 뒤집어 엎어야 할 상황에 놓이게 되었다

             데이터가 꼬였던 이유는 초기값같은것(   ex)  [ {초기값: []}, {초기값2 : []} ]  )을 주지않고 this.state에 [], {} 이렇게만 놓고

             this.setstate로 {}를 설정하고, []에 push를 하는방식으로 하려하니 객체의 키값으로 어떤것이 들어오는지 미리 알수가 없었다

- Review : 1. 단순화 된 설계

                 2. 실력이 안되면 어느정도 기능구현 후 css 들어가기(css 시간을 너무 많이 먹음)

                 3. 기능구현 하나당 1commit 하기, 그래야 돌이킬수없는상황이 왔을때 내가 commit 찍어놨던곳으로 쉽게 돌아갈 수 있음

                 4. 나만의 컴포넌트 컨벤션을 만들어라(이름은 직관적일수록 좋다 예를 들면 todo(1층 컴포넌트) -> todoList(2층) -> todoListEntry(3층)..... 칸이 깊어질수록 entry처럼 쓸 수 있는말이 있게끔 !)

 

React ToDoList !!!! 이번에 실패했으니 solo week 때 다시 도전해볼 예정이다 

---

 

공부하고 익히고 가야하는 사항들

 

1. Data flow

• Anti pattern
• Best practice pattern
• DOM 직접수정 X
• state관리 & Rerendering이 일어나는것

 

1. 설계의 정도

• 어떻게 ? 얼만큼 하고 시작할것인가 ?

 

1. Data 구조설계

• 네스티드(중첩)이 얼마나 덜 되는지

 

1. Component 설계

• 컴포넌트를 어떻게 분리할 것인가?
• 나중엔 재사용가능한 컴포넌트를 만들어야한다(컴포넌트는 어떻게 재사용이 가능할까?)
• 컴포넌트내에서 기능별 함수를 어떻게 구현할것인가?
  - 재사용가능한 함수로 구현
• 디렉토리 구조에 대해서도 자연스레 따라오게끔 해야함
• 컴포넌트 이름 , 변수명 이름 굉장히 중요(직관적으로 해야함)
• 나만의 component 컨벤션을 만들어라 (ex) video -> videoList -> videoListEntry -> videoListLast)
  (나만의 컨벤션을 만들어라 마지막은 뭐 그걸 감싸는건 뭐 ….이런식으로)

 

1. Commit

• 커밋메세지를 어떤부분이 변경되었는지 상세하게 적어라
• Git commit 까지만 치면 vim화면이 나옴 (제일 첫줄에 큰제목을 적고, enter -> enter -> space -> " - 상세설명 ")