안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.

블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.

1. 요일별 공부 기록

❤️ 1월 13일 금요일

• 프로그래머스
  • 이진 변환 반복하기
• 노마드 코더
  • css 모듈을 만들 때 style에 넣는 것이 아닌 className으로 넣어야 한다.
• 리액트 스터디
• 안재원 강사님 수업

🧡 1월 14일 토요일

• FIELD-PASSER
  • 레이아웃 작업
• 프로그래머스
  • 숫자의 표현
    • 숫자를 순회하면서 나머지가 0인 숫자를 카운터 해 주라는데... 왜 그게 정답인지 모르는

💛 1월 15일 일요일

• 프로그래머스
  • 피보나치 수
    • 오늘도 모르겠습니다...
• FIELD-PASSER
  • 레이아웃 작업
• 노마드 코더
  • EFFECTS
    • cleanup
      • destoryed가 뜨면 안 될 때 콘솔에 찍힌 이유는 React.strictmode 때문
  • PRACTICE MOVIE APP
• 리액트 퀵 스타트
  • 컨테이너 컴포넌트 (container component)
    컨테이너 컴포넌트는 상태와 상태 변경, 비즈니스 로직을 처리하는 연산 기능이 있으며 UI와 스타일 정보는 포함하지 않고 단순히 자식 컴포넌트를 조합하도록 작성.
  • 표현 컴포넌트 (presentational component)
    표현 컴포넌트는 부모 컴포넌트로부터 속성 (props)을 전달받아 UI를 렌더링하는 기능을 수행. 연산과 로직으로부터 UI를 분리해서 작성하므로 재사용성이 높다.
    표현 컴포넌트는 자신의 상태를 가지지 않지만 수명 주기 관리가 필요하지 않은 상태라면 표현 컴포넌트 내부에 상태를 가질 수도 있다.

  ---

  컨테이너 컴포넌트 중심으로 컴포넌트 구조를 설계하면 상태와 상태 변경 로직은 모두 컨테이너 컴포넌트에 집중된다. 컨테이너 컴포넌트에서의 상태 변경만 추적하면 그 하위 컴포넌트의 UI가 어떻게 바뀔지 예측할 수 있다.
  상태를 변경하는 함수와 메서드는 상태를 보유한 컴포넌트에서 작성되어야 한다. 자식 컴포넌트에 상태와 함께 상태를 변경하는 함수도 속성으로 전달.
  • 부모에서 자식으로의 정보 전달 방법
    속성 (props)을 이용해 정보를 전달
  • 자식에서 부모로 정보 전달 방법
    속성을 이용해 부모 컴포넌트의 함수(메서드)를 자식 컴포넌트로 전달하고 자식 컴포넌트에서 이벤트가 발생하면 해당 함수를 호출

  ---

  화면 단위 개발
  1. 화면 시안 작성
  2. 상태와 액션 도출
  3. 컴포넌트 분할과 목록 도출
     • 컴포넌트의 재사용성 고려
     • 컴포넌트 내부의 기능이 너무 복잡하지 않도록 분할. 하나의 컴포넌트가 3~4개 이상의 기능을 처리하지 않도록 분할.
     • 컴포넌트 렌더링 최적화를 고려.
  4. 컴포넌트 정의
     • 컨테이너 컴포넌트에는 상태와 상태를 변겨아는 로직만을 포함하도록 정의.
     • 표현 컴포넌트를 정의할 때는 해당 컴포넌트가 필요로 하는 속성과 이벤트 등을 정의.
  5. 컴포넌트 구현
     + 부모 컴포넌트에서 자식 컴포넌트로 진행되는 하향식으로 개발.
     immer 사용 시 주의점

  const deleteWord = (no: number) => {
    let index = wordList.findIndex(word => word.no === no)
    let newWordList = produce(wordList, draft => {
      draft.splice(index, 1)
    })
    setWordList(newWordList)
  }

  produce 두 번째 매개변수 콜백 함수의 return 값은 {} 사용해 줘야 함. 사용 안 하니 오류가 났음.

💚 1월 16일 월요일

• FIELD-PASSER
• 프로그래머스
  • 다음 큰 숫자
• 리액트 미니 프로젝트
• 안재원 강사님 수업
• 노마드 코더 실전형 리액트 Hooks
  • useInput
  • useTabs

💙 1월 17일 화요일

• TEAM-NXLL
  • 마이 쇼핑 페이지 해결
• FIELD-PASSER
  • API 자세히 작성하기
• 리액트 미니 프로젝트
  • 영상 재생 페이지

💜 1월 18일 수요일

• FIELD-PASSER
  • API 자세히 작성하기
• 리액트 미니 프로젝트
  • 영상 재생 페이지

🤎 1월 19일 목요일

• FIELD-PASSER
  • 회의에서 할 질문 정리
  • 추가 내용 더 정리해서 슬랙에 공유
• 리액트 미니 프로젝트
  • 영상 재생 페이지
  • API 연결 확인
  • CSS 수정
  • 사이드바 반응형

2. 주간 회고

이번 주는 월요일부터 계속 미니 프로젝트 진행해서 개인적으로 공부한 건 없었지만... 리액트로 프로젝트를 만들어 봐서 조금은... 성장했기를!

지금까지 19주차의 기록을 읽어 주신 여러분, 감사합니다! 김당퀔은 이만 공부하러. 🥕🥕