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

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

1. 요일별 공부 기록

❤️ 1월 20일 금요일

• FIELD-PASSER
  • 신고 카테고리 나누기
    • 회원신고: 부적절한 닉네임, 거래 사기, 음란성 게시글, 도배성 게시글
    • 문의: 거래 관련, 서비스 관련, 계정 관련
• 프로그래머스
  • 짝 지어 제거하기
    • 뇌가 굳은 게 분명하다...
• 노마드 코더 리액트 Hooks
  • useEffect
  • useTitle
• 리액트 토이 프로젝트 제출
  • 리액트 개인 프로젝트 없이 바로 팀으로 작업하려니 살짝 겁도 나고 두려웠던 것 같다. 그래도 내가 할 수 있는 부분에서 최선을 다했고, 쓸 수 있는 hooks들도 써 보려고 노력했었는데 생각보다 잘 되지 않았다. 피드백 받았던 부분에서 useMemo, useCallback 등을 사용해 보라고 하셨는데 어떤 부분에서 쓰면 좋을지 고민을 해 봐야 할 것 같다. 그리고 모바일을 대응하는 UI에 대한 것도 고민해 봐야 할 듯 하다. JS만 하다 보니 CSS와 거리감이 생긴 것 같다.
• 안재원 강사님 수업

와 ! 설이다!

충격! 김당쿽! 4일이나 놀다!

🧡 1월 25일 수요일

• TEAM-NXLL
  • 드디어 리액트 프로젝트 시작! 초기 설정을 마쳤다.
• 리액트 퀵스타트 스터디
• 안재원 강사님 수업

💛 1월 26일 목요일

• FIELD-PASSER
  • UI에 대한 고민
  • 포인트 색은 #21A04D
• 리액트 퀵 스타트

1. react-snippet
   1. tsrafc, tsrafce: Arrow function
   2. tsrcc, tsrce: class
   3. tsrfc, tsrfce: function
2. 생명 주기 메서드
   1. 컴포넌트가 마운트(mounting) 될 때
      리액트 컴포넌트가 애플리케이션의 컴포넌트 트리에 추가되어 브라우저 화면에 나타날 때
      1. constructor(생성자)
         생성자는 반드시 super(props)를 호출해야 하며, 그렇지 않으면 컴포넌트에서 속성(props)을 사용할 수 없으므로 에러 발생.
         생성자는 this.state에 객체를 할당하여 컴포넌트의 상태 (state)를 초기화하기 위해 작성. 상태를 초기화할 일이 없다면 생성자를 작성하지 않아도 됨.
      2. getDerivedStateFromProps 정적 메서드
         정적 메서드이므로 반드시 static 키워드를 지정해야 하며, props와 state 인자를 받는다. props를 이용해 새로운 상태를 만들어서 리턴.
      3. render 메서드
         상태와 속성이 변경되지 않았다면 같은 결과를 리턴.
      4. componentDidMount 메서드
         컴포넌트의 마운트가 완료되고 나서 브라우저 DOM의 트리에까지 반영이 된 후 호출되는 메서드. this.setState() 메서드로 상태를 변경하고 브라우저 DOM에 출력해야 하는 초기화 작업이 필요하다면 이 생명 주기 메서드를 이용.
   2. 컴포넌트가 업데이트(updating) 될 때
      리액트 컴포넌트의 상태, 속성이 변경되어 브라우저 화면이 갱신될 때
      1. getDerivedStateFromProps 정적 메서드
      2. shouldComponentUpdate 메서드
         전달되는 인자는 새롭게 전달된 속성(nextProps), 상태(nextState)이며, 리턴 값은 불린 값. 리턴 값이 ture면 다음 단계의 생명 주기 메서드(render)가 호출.
         깊은 비교를 수행하면 많은 시스템 리소스가 사용되므로 렌더링 성능 최적화가 힘들어짐. immer 라이브러리나 전개 연산자를 이용햏 불변성을 가지는 변경 작업을 수행.
      3. getSnapshotBeforeUpdate 메서드
         실행되는 시점은 render() 메서드가 호출되어 가상 DOM으로의 쓰기 작업이 완료된 후, 브라우저 DOM에 업데이트 되기 전. componentDidUpdate() 메서드의 세 번째 인자(snapshot)로 받아낼 때 이용.
      4. componentDidUpdate 메서드
         컴포넌트가 업데이트되고 DOM을 변경하고자 할 대 사용. 현재의 속성(this.props)과 상태(this.state)를 이전 속성, 상태와 비교하여 차이가 있다면 외부 API를 요청하는 등의 작업을 수행하도록 활용.
   3. 컴포넌트가 언마운트(unmount) 될 때
      리액트 컴포넌트가 애플리케이션의 컴포넌트 트리에서 제거되어 브라우저 화면에 사라질 때
      1. componentWillUnmount 메서드
         컴포넌트가 애플리케이션의 컴포넌트 트리에서 삭제되기 직전에 실행, 주로 componentDidMount 생명 주기 메서드와 짝을 이루어 사용.
         외부 리소스에 연결한 경우에는 반드시 componentWillInmount에서 꺠끗하게 연결을 해제해야 함. 메모리 누수 (memory leak)가 발생할 수 있음.

• TEAM-NXLL
  • 관리자 페이지 컴포넌트 나누기

2. 주간 회고

설이 낀 주간이라서 공부를 많이 하지 못 하기도 했고, 최근에 바쁘다는 핑계 아닌 핑계와 아프다는 핑계들이 쌓이고 쌓여서 프로그래머스도 안 풀기 시작하니까 문제를 접근하기도 어려워진 것 같다. 백준도 도전해 보자는 생각만 하고 시작을 안 해서 미루고 있는 공부들이 엄청 많아진 기분이다. 다시 또 무엇을 공부해야 되는지, 뭘 미루고 있는지 생각을 해 보고 실천해 나가야 될 것 같다. 혼자서 하는 것보다 팀원들과 하는 것들이 많아지면서 혼자 생각하는 시간이 줄어들면서 생겨난 일들 같아서 조금 아쉽기도 하고 팀으로 하는 것들에 비중을 두지만 혼자만의 시간을 아쉽지 않게 보내는 것도 중요할 듯 하다. 그래도 팀으로 진행하면서 다양한 상황들을 만나게 되고, 그것들을 이겨나가는 방법들에 대해서도 알게 되는 것 같다. 같은 팀으로 진행하던 사람들이 다른 팀으로 가면서 다른 팀에서도 생겨나는 이슈들을 듣고 나의 것으로 만들기도 하고 있으니까. 이제 반 넘게 과정을 진행해 왔는데 진짜는 지금부터라고 생각한다! 아자작.

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