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

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

1. 요일별 공부 기록

❤ 12월 23일 금요일

• 개발 블로그 제출
• 안재원 강사님 수업
  어지간히 아팠나 보다... 기록이 없다... ㅋㅋㅋㅋ

🧡 12월 24일 토요일 ~ 12월 25일 일요일

메리 크리스마스 🎄

💛 12월 26일 월요일

• 프로그래머스
  • 크레인 인형 뽑기 게임
    어찌 저찌 열심히 풀었다! 오랜만에 내 손으로 푸니까 아주 짜릿.
• 코딩 앙마 리액트 강의
  • useEffect는 상태 값이 바뀌었을 대 동작하는 함수를 작성할 수 있다.
  • 두 번째 매개변수로 count를 주면 count가 변경될 때만 함수 호출되게 할 수 있다.
  • 최초에만 useEffect 실행하려면 빈 배열을 작성하면 된다.
  • useRef는 돔에 접근할 수 있다.
  • 페이지 넘기는 버튼, 날짜 삭제 버튼 구현해 보기
    • 페이지 넘기는 버튼은 완료
    • 날짜 삭제 버튼은 정렬을 위해서 다시 생각해 봐야 할 듯 하다.
  • GitHub Repo
• 안재원 강사님 수업
  • scrollLeft?
  • 중첩 라우팅이 가능하다
  • useLocation

💚 12월 27일 화요일

• 프로그래머스
  • 숫자 짝꿍
    • map으로 풀 수 있을 것 같았는데 안 돼서 다른 방식으로 풀었더니 틀리는 테케도 있었고 런타임 아웃 나는 테케가 너무 많았다.
    • 결국 풀이를 참고하였는데 거기는 객체를 사용하여서 키, 밸류 형태로 X를 저장해 두고 Y랑 비교해 주었다.
    • 돌고 돌아서 다시 map을 사용해서 풀어 보기로 하였는데 map에서 밸류 값을 수정하는 것에 대해서 검색하니 hashMap만 나와서 어떻게 하는지 어려워서 조금 헤매다가 결국 밸류를 수정하는 방법을 찾아냈다!
• 소플 리액트 강의
  • 재사용을 염두에 두고 코드 짜기
  • 모바일 앱: 코틀린, 스위프트 언어
  • JSX = JS + XML/HTML
  • injection attacks 방어
  • GitHub Repo

💙 12월 28일 수요일

• 프로그래머스
  • 크기가 작은 부분 문자열
• 4차 과제 수정
  • store에 넣을 수 있는 전역 변수 넣기
  • 코드 줄일 수 있는 것들 줄이기
• 소플 리액트 강의
  • 컴포넌트는 그들이 props에 관해서 pure 함수 같은 역할을 해야 한다.
  • component 이름은 대문자로, 소문자로 하면 DOM 태그로 인식한다.
• 안재원 강사님 수업
  • path에서 index를 작성하면 path 안에서 둘 다 렌더링 된다.
  • useLocation 현재 url 정보를 가지고 있다.
  • URLSearchParams

💜 12월 29일 목요일

• 프로그래머스
  • 명예의 전당 ❌
    • 문제 자체가 잘 이해가 안 된다면...
    • 예전에 수업 시간에 배웠던 윈도우 슬라이딩 방식으로 해 보려고 했는데 그렇게 하는 것이 아닌 것 같았다. 적은 수가 있어도 다른 숫자를 가지고 갔다... 어려움...
• 4차 과제 수정
  • getData.js 대공사! 관리자 페이지에 있던 api util을 가지고 와서 함수들을 정리하였다.
• 소플 리액트 강의
  • 6강 state and lifecycle
    • 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
    • state = JS 객체
    • state는 직접 수정하면 안 된다.
    • component가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다 사라진다.
      • componentDidMount, componentDidUpdate, componentWillUnmount
  • 7강 Hooks
    • function Component
      • state 사용 불가
      • LifeCycle에 따른 기능 구현 불가
    • class Component
      • 생성자에서 state를 정의
      • setState() 함수를 통해 state 업데이트
      • LifeCycle methods 제공
    • 변수 각각에 대한 set 함수가 따로 존재
    • useEffect()
      • 컴포넌트가 마운트 된 후 실행
      • 의존성 배열에 있는 변수 중 하나라도 변경되었을 때 실행
      • 의존성 배열에 빈 배열을 넣으면 마운트와 언마운트 시 한 번만 실행
      • 의존성 배열 생략 시 컴포넌트 업데이트마다 실행
      • return 이후 값은 컴포넌트 마운트가 해제되기 전에 실행
    • useCallback()
      • 값이 아닌 함수를 반환
    • useRef()
      • Ref = reference
      • 렌더링 할 때마다 항상 같은 Ref를 참고
    • callback ref
    • Hook은 무조건 최상위 레벨에서만 호출해야 한다
    • 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다
    • eslint-plugin-react-hooks
    • 커스텀 hook도 이름이 use로 시작해야 한다
  • 8강 Handling Events
• 개발 블로그 작성

2. 주간 회고

과제 끝나고 몸도 아프고 주말엔 정말 오랜만에 이틀 다 쉬었더니 이번 평일도 빨리 가는 듯한 기분이 들었다. 근데 다시 공부 시작하려니까 너무 힘들고 지치고 재미도 없고... 그것도 그거지만 전처럼 내가 직접 작업물을 만드는 것보단 이론 공부를 다시 하려고 하니까 조금 재미가 없는 것 같기도 하다. 얼른 리액트를 자바스크립트만큼 할 수 있으면 좋을 텐데. 내가 아는 방식으로 리액트를 작성하게 되면 너무 비효율적인 코드들이 나올 것이 뻔하기 때문에... 강의를 듣는 게 좋을 것 같은데 어떤 강의를 들어야 할지 잘 모르겠다. 이번 회고를 작성하고 나면 이제 2023년! 2022년에 처음으로 코딩을 배우기로 마음 먹고 시작했는데 잘하고 있는 것 같아서 아주 뿌듯하구만요. 다음 주엔 새해니까 새로운 마음으로 다시 공부 시작하기!

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