코드리뷰
- 변경전
const App = document.querySelector('.App').App classname이 하드코딩 되어있는점
이전에도 이런 리뷰가 있었다.
특정 component의 instance를 다른 component에서 접근하는 것은 지양해야 합니다. component간 통신은 parameter로 전달 받는 특정한 값과 method에 국한되어야 합니다. 만약 마구잡이로 다른 component의 property에 접근하여 화면을 바꾼다면 나중에 application이 커졌을때 디버깅이 힘들게됩니다. 똑같지는 않지만, 재사용성을 높이기 위해서 변수로 받아서 작성해야겠다.
변경후
const App = document.querySelector($target)- 변경 전
this.data.forEach(item => {
if(!item.isCompleted){
this.count +=1
}
})
div.innerHTML = `<span>Todo:${this.count}</span>Array의 filter 함수를 이용하면 요 구문들을 간단하게 만들 수 있습니다.
위 리뷰를 보고 나서 생각이 한쪽으로 굳어서 인지 아무리 생각해도 답이 안나왔는데, 다른 전 기수분들의 리뷰를 참고해서 답을 찾을 수 있었다.
변경 후
div.innerHTML = `<span> Todo: ${this.data.filter(item=> !item.isComplted).length}</span>세션간 느낀점
세션 4일 뒤에 작성하는 후기로 많은 부분이 잊혀진 것 같지만, componenet로 나누는 부분 그리고
render와 setState를 나누어 각 부분에서는 웹페이지 그리고, 데이터를 update를 해주고 있었다.
조금 더 명확하게 역할을 나누고 세분화 시킬 수록 다른 사람들이 코드를 읽을 때도 가독성이 높아지고, 가독성이 높아질수록 App이 복잡해져도 refactoring 및 수정하기 쉬워진다.
특히 이 모든 것들을 라이브 코딩으로 진행하는 roto님을 보며, 더 많이 코드를 읽어보고 내손으로 쳐보면서 나도 실력을 키워야 겠다는 생각을 했다.
특히 localstorage 관련해서는 try~catch를 한번더 사용해서 에러를 잡는 것이 왜 필요한지 이해가 안되었는데, localsotrage promise 안에서 에러를 잡는 것 말고도, 웹에서 용량을 초과하여, Localstorage에 저장이 안되는 등의 경우에 나타 날수 있는 error 를 잡아주어야 한다.
data의 input에 대한 처리, 에러 처리 등의 중요성이 App이 복잡해지고 커질 수록 중요함을 몸소 깨닫고 있다.
더 공부해야할 부분
물론 내가 html과 css가 완벽하다고 생각은 하지 않았지만, 많은 페이지들을 그대로 구현해보는 연습을 이전에 수없이 했기때문에 구현을 하는 부분에 있어서는 실력이 괜찮다고 생각했다. 하지만 내가 과연 symentic하게 잘 작성하였고, 웹접근성들을 고려해서 만들었나에 대해서는 아니라고 할 수 있었던 것같다. 관련해서 참고 문서들을 차근차근 읽어보고, 이전 코드들에 대해서도 웹 접근성을 고려해서 다시 만들어 봐야겠다.
