- 체계적인 코딩이 필요하다!
처음 만들 때 컴포넌트 구조와 데이터 흐름을 계획 후 문서화한 뒤 작업할 필요가 있다고 느꼈다.
쉬울 거라고 생각해서 그냥 바로 작업 했는데 에러가 날 때마다 어디서 난 건지 파악하지 어려웠다.
데이터의 흐름을 파악하고 어디서 함수를 호출하는지, 그리고 컴포넌트는 어떻게 연결돼있는지 잊지 않으려면 미리 계획을 세우고 기록을 하자!
- 예) 해당 컴포넌트에 어떤 initialState가 들어가는지 그리고 해당 컴포넌트에선 어떻게 가공이 되는지
- 예) 해당 컴포넌트는 어떤 기능을 하는지
- 코드리뷰를 하는 사람을 위해 문제가 필요한 부분 주석달아주기(feat. 기홍님의 조언)
- TODO: 해야 하는 일FIXME: 오작동을 일으키는 코드HACK: 좋지 않은 해결책XXX: 위험! 여기 큰 문제가 있다.
"주석에 코드에 있는 결함을 설명하라.
- 우선 순위대로 작업하자
기본 구현 후 트러블 슈팅을 제대로 하지 않은 상태에서 검색 기능 구현을 하는데 시간을 잡아먹었다. 반성하자
Problem
PostList 함수들 : 왜 클릭할 때마다 함수 호출 횟수가 증가하나?
this.route() 할 때마다 해당 페이지를 렌더링함... 근데 그러거나 말거나 한 번만 호출되야 되지 않아?
근데 만약 검색기능 만들거면 어짜피 레벨순회하니까 그냥 메소드 만드는 게 나을 지도
findPost 메소드 에러 해결 : promise 데이터를 then에서 해당 함수의 매개변수로 넘겨준 거니까 promise가 아닐 텐데? 콘솔창을 보면 아래처럼 나오는데 왜 push는 안되는 거지?
TRY
부모 post 삭제 후 자식 post가 루트가 됨
→ 노션의 경우 자식 post까지 전부 삭제됨 , 재귀로 전부 삭제되도록
→ 대신 경고문으로 자식도 삭제되는 데 괜찮냐고 묻기
div contenteditable
컴포넌트 다시 분리: App - ( Nav -(postSearchBar), PostPage -( Aside- ( postList), PostEditpage-( Editor ), MainPage, SearchPage))
검색기능 자식 POST들도 되게 완성
페이지 링크걸기