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

4주차 과제
기본과제 pass ?🤔
심화과제 fail ?🤔

발제 목표

• 더티코드 클린코드화 하기
• React,TS 도입하여 개선하기

4주차 계획

• ✅시간이 있으면 2주차에 못한 diff 공부해보기
• eslint, prettier 공부/적용해보기 -> 5주차에 더 공부해보기!

어려웠던 점

• 어디서부터 코드를 건들여야할지 막막했다. 여러번에 걸쳐서 코드를 고쳤지만, 하면서도 이게 맞나? 하는 고민이 많이됐다
  • 발제자료를 확인하니 예시와 함께 클린코드 단계가 있어 보면서 고쳐보았다
• 심화과제할때 기존환경에서 React, typescript 환경설정이 생각보다 어려웠다..! pnpm도 처음써봐서 설정 잡는데 생각보다 시간이 걸렸다
  • 기존환경을 유지하면서 새로운 환경셋팅하는것이 생각보다 복잡했다

배운점

• 클린코드
  • 의미 있는 이름 사용
  • 함수를 작고 단일 책임을 가지도록 만들기
  • 중복 코드 제거
  • 주석 대신 자체 설명적인 코드 작성
  • 일관된 포맷팅 유지
  • 복잡한 조건문 단순화
  • 적절한 추상화 수준 유지
• Non-null 단언 연산자: ! 연산자
  const root = createRoot(document.getElementById('app')!);
• 리팩토링 과정(테오코치님)
  • 1) prettier 적용 하여 포맷팅 일관되게 적용
    • 엔터추가(분리하기)
    • 주석추가(view, 계산, 행동 등)
    • var -> let
    • function -> arrow
    • 문자열 -> 템플릿
  • 2) 변수명과 함수명 명확이 역할 나타내며 일관된 네이밍 규칙 적용
    • let -> const
    • for문 -> forEach -> find, map, reduce
    • render(DOM 처리)와 calc(비즈니스 로직) 분리
  • 3) state를 이용한 계산로직과 렌더링 로직을 분리
    • state를 만들고 render를 분리해서 동작할 수 있게
    • 가급적 전역변수를 제거하고 로컬 변수로 활용한 방안
    • let을 통한 데이터 변경을 최소화해서 const x = getX() 와 같이 한번에 받을 수 있도록
  • 4) typescript 적용

회고

• 기본과제를 하고 심화과제를 하면서 React를 적용하니까 어떻게 파일을 쪼개고 관심분리를 해야할지 감이왔다..
• 5주차 발제 내용을 들으면서 내마음대로 리팩토링을 하지말고 점진적으로 코드를 개선해나가야겠다고 생각이 들었다!
  • 함수 이름을 한글로 적는 게 신기했다 그런방법도 있었구나! 오히려 영어로 변환하면서 더 읽기어려워질바에는 한글로 함수명이나 변수명을 짓는게 나은것같다