[항해 플러스 프론트엔드 3기] 1주차 회고록

1주차 과제

• 기본과제 PASS 🙂
• 심화과제 PASS 🙁

발제 목표

• DOM API와 javascript의 다양한 문법 혹은 기능들에 대해 얼마나 많이 깊게 이해하고 있는가
• 프레임워크에 의존적이지 않는 개발자가 되자!⭐️⭐️
• React가 만들어진 근간을 파악하기
• 문제를 찾아서 정의하고 해결하기

1주차 계획

☑️ 월/화/목 8시반-10시 과제하기
☑️ 목요일 멘토링 시간에 궁금한 점 화요일에 사전노트 작성하기
☑️ 출퇴근에 공부하기(SPA 지식뭉치 공부하기, JS 강의 3주차 완강하기)
☑️ 관심있는 멘토링 청강해보기
☑️ 공부는 다 못하더라도 과제는 끝내보기
☑️ 회고록 작성하기

어려웠던 점

• Class형 vs 함수형 선택
  • 팩토리 패턴?
• 테스트 코드 읽는법
• Router
  • historyAPI로 라우팅 구성하는 방법
  • URL 직접 입력 또는 새로고침 화면 렌더링 대응하기
• DOMcontentLoaded event
• 함수형 컴포넌트에서 innerHTML을 활용했을 때, event binding 시점
• 리팩토링 하는법

배운점

• 실무에서 테스트코드 작성하는 때
  • 만들어진 코드를 리팩토링할때, 수정을했는데 정상동작하던게 잘안될때 방지하고자 테스트코드를 작성(처음부터 작성하진 않음)
• 리팩토링 및 패턴 도입할때
  • 일단 만들고, 리팩토링하기
  • 그래야 내가 만든 근거가 있음(어떤점이 좋아졌는지 설명가능)
    asis)개선되기전의 문제가 있는 모습 ->tobe)개선 후에 좋아진모습
• 이상적인 폴더구조: 커뮤니케이션에 대한 비용을 없애주는 구조
• 좋은 코드란 : 읽기좋게 만든 코드
  • 이 코드를 처음 보는사람이 코드만 보고서도 이해할수있게 짜는 것
• 개발전 과정
  • 1. 문제 발견
  • 2. 무슨 문제인지 명확히 파악 (TODO)
  • 3. 주석으로 논리적인 흐름을 그려놓고 코딩하기
• 에러 처리
  • 실무에서는 센트리 활용
  • 최상위 layer에서 Error boundary를 만들어서 센트리로 보낸다

회고

• 테스트코드를 읽지않고 바로 구현에 들어가서 테스트를 진행했을때 많이 헤맸었다
  • 다음주차부터는 테스트코드를 읽어보고 과제를 시작해봐야겠다
• 이번주차에서는 팀원들이 모각코시간에 과제공유보다는 각자 코딩하는 시간을 많이가져서, 다음주차에는 공유하는 시간을 더 많이 가지면 좋을 것 같다
  • 전 기수 학습메이트님이 말씀해주신 것: 과제 내용이 똑같더라도 다같이 모여서 공유하는 시간을 가지는 것이 더 소중하다👍👍
• 비록 평일에 과제하느라 다크서클을 얻었지만(?) 일주일동안 과제하면서, 멘토링, 발제 QnA를 통해 단기간에 많은 기술 지식을 얻었다 :)
  • 다음주차부턴 일요일에 많이 해두어야겠다..!
• 기본과제 테스트 코드 모두 통과 후에 심화과제 구현하고 심화과제 테스트코드를 통과했는데 다시 기본과제 테스트를 통과하지못했다..! 원인은 처음부터 구현을 잘못한것이었는데 지금 테스트 코드가 느슨한 편이라고 하셨다!
  • 테스크코드를 인식하고 코드를 짜도 잘못구현할수도 있으니 한번더 확인해보기
• SPA 지식뭉치 더 참고해서 해볼걸..!
• 다시 코드 짜보기!
  • react router 참고해서 router 다시짜보기
  • 에러 활용 --> 에러 전파 catch 다시짜보기!
  • router, state 가 변했을때 observer 짜보기