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

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

와! 벌써 15주! 교육 기간의 반이나 흘렀다니!

1. 요일별 공부 기록

❤ 12월 16일 금요일

• 4차 과제 회의
  • 현재 진행 상황 공유
  • 에러 핸들링 문서화
  • 과제 제출 시 내야 할 문서 추리기
  • 남은 진행 상황 공유
  • 일정 계획 짜기
    • 18일까지 최대한 각자 기능 구현 및 보충
    • 20일 저녁 전체적인 기능 브리핑 후 코드 보충할 것 정리
    • 21일 낮 브리핑에서 얻은 것들로 코드 최종 정리, 팀장인 나는 서류들 정리 및 배포 준비
• 프로그래머스
  • 완주하지 못한 선수
    • 문제를 풀어도 매번 효율성에서 실패한다. 그래서 결국 다른 사람의 풀이를 보게 된다....
• 안재원 강사님 수업
  • React.memo() 메모이징
    • 전 렌더링을 기억했다가 컴포넌트 props가 같다면 메모이징된 내용을 재사용한다
    • props 혹은 props 객체를 비교할 때 얕은 비교 (Shallow compare)을 한다.
    • 사용을 지양해야 한다
  • useCallback 함수를 메모이징
    • 자식 컴포넌트가 React.memo() 로 최적화 되어 있어야 한다.
    • 함수를 props로 내려 줄 때 사용한다.
  • useMemo
    • useCallback과 유사
  • <form></form>
    • enter 키로 정보를 전송할 수 있다.
    • 컴퓨터가 인식하기 좋다.

🧡 12월 17일 토요일

• 프로그래머스
  • 가장 가까운 같은 글자
• 4차 과제
  • 오전 10시 회의
  • 장바구니에서 받은 정보로 결제 페이지 수정
  • 에러 핸들링 및 배포 자료 정리
  • 마이쇼핑 페이지에서 취소 내역, 완료 내역 수량 불러오기
  • 결제 페이지 및 마이쇼핑 잔 오류 수정
    • ?? 연산자 사용해 봤다!

💛 12월 18일 일요일

• 4차 과제
  • 과제 readme 작성
  • 기능 제대로 되는지 확인
  • 관리자 회원 가입 및 관리자 페이지 접근 관련 기능
    • a 태그에 href로 나중에 admin 페이지를 연결해 줬더니 page not found라는 오류를 띄웠다... 결국 먼저 연결해 준 뒤, 로그인 상태를 확인하여 다시 경로를 바꾸는 방식으로 하니까 접근이 가능했다.

💚 12월 19일 월요일

• 프로그래머스
  • [카카오 인턴] 키패드 누르기 ❌
    • 그 전 위치를 기록하는 게 꽤 어려웠던 것 같다. 경우의 수를 많이 생각해야 되는 로직일수록 조금 버겁다는 생각이 든다. 로직을 오래 생각해 봐야 될 것 같다.
• 박영웅 강사님 수업
  • npm init -y 후 parcel을 사용할 때 생태계 배포용이 아니라면 main은 삭제하기
  • chatGPT 코드 작성해 주는 인공 지능
  • ES6 보단 ES2015 로 작성하기. 연도로 표기하는 게 맞는 표기법
  • ts 타입 작성 시 대문자로 시작
  • tuple type 배열 안에 타입을 정해 준다. 아이템 개수를 변경할 수 없음.
  • any 타입 쓰지 말 것
  • unkown은 any보다 조금 더 엄격한 타입
  • setting에서 ts server 다시 실행하면 오류가 고쳐짐
  • 타입 추론
  • 유니온 타입 union | 사용해서 표현
  • interface는 대체로 객체를 지칭
    • 요소 뒤에 쉼표, 세미콜론 작성하지 않아도 됨
    • interface 확장은 우선 순위가 없음. 그래서 타입이 같거나 하나만 있어야 함.
  • 타입 선언 declaration, declare
  • 인터섹션 intersection & 사용해서 표현
  • 함수에서 return 키워드 없으면 콘솔에서 undefined를 return
  • never는 직접 작성할 일이 없다
  • 타입 단언 Assertions 남발하면 안 된다
  • 타입 가드
    • as 키워드를 더 많이 쓴다
    • element 만들 때 많이 쓴다
  • 읽기 전용 속성을 쓰면 재할당이 안 된다
  • 인덱스 가능 타입, 인덱스 시그니처
    • []: 키밸류 형태
  • 함수 타입, 호출 시그니처
    • ():T
  • 타입 선언부, 구현부
  • 클래스 바디 = 중괄호 영역
  • 구현 시그니처 implements
    • extends와 비슷함, 타입을 참조하는 것
  • type alias 타입 별칭
  • JS는 동적 언어, 런타임에서 평가되어 동작
  • 타입 > 인터페이스 > 객체
    • 권장은 더 좁은 인터페이스
  • 함수 오버 로딩
    • any라고 쓰여 있지만 위에 적힌 타입만 들어올 수 있다
  • 타입 변수
  • public, protected, private
• 안재원 강사님 수업
  • React CSS 프레임 워크
    • material UI
    • React BootStrap
    • Ant Design
    • semantic UI
    • tailwind CSS 등
  • react-beautiful-dnd
    • draggableId = 문자
    • placeholder: 드래그 시 빈 공간을 만들어 자연스럽게 보이게 한다

💙 12월 20일 화요일

• 프로그래머스
  • 과일 장수 ❌
    • 런타임 에러!! 효율성을 생각해서 코드를 짜야겠다.
• 박영웅 강사님 수업
  • exModuleInterop: true 는 import 키워드만 사용해도 됨
    • false 값일 때는 * as __ 로 해야 됨
  • __.d.ts declare 타입을 선언한다.
  • triple slash delective
  • Definitely Type
  • npm info @types/패키지명
    • d.ts 파일 있는지 확인해 줌
  • typeRoots d.ts 파일 경로를 알려 줌
  • 상태 관리 패턴?
• 4차 과제
  • 배포하는 것 확인
  • 코드 정리 및 확인
  • common.scss 수정
  • 구매 내역 api 한 번만 불러오게 수정
  • 결제 페이지 promise.all? (결국 사용하지 못 했음)
  • hash 확인하기
    • 알고 보니 api가 느려서 화면 전환이 늦어진 것

💜 12월 21일 수요일

• 드디어 4차 과제 제출!!!
  + 결제 페이지 오류 최종 확인
  + 마이 쇼핑, 구매 내역 페이지 수정
  + onchange? 이벤트 리스너 안에서 이벤트 리스너를 꼭 사용해야 될까?
  + 사용하지 않고 잘 구현했다! 아주 굿
  TEAM-NXLL 4차 과제 모두 구경 오세용.
  이러고 몸이 조금 안 좋아져서 과제 제출까지만 하고 아주 푹 쉬었다. :)
  

🤎 12월 22일 목요일

• 김상헌 멘토님 특강
  • 이력서 최신화
  • 개념의 공백을 메워 주기!
  • 수료증도 한 줄의 이력이 될 수 있다. 패캠 수료하기!
  • codepen / codesandbox 사용해 보기
  • 유저 입장에서 생각해 보기
  • public 폴더는 webpack을 타지 않음
  • 리액트는 props state 변경될 때 리렌더링 된다.

2. 주간 회고

지난 주에 몸이 좋지 않아서 빠르게 블로그 제출을 하기 위해서 공부했던 것만 작성해서 제출했었는데 뒤늦게 주간 회고에 대한 기록도 남겨 본다.... TS를 제대로 사용하여서 프로젝트를 진행해 본 적이 없다 보니 TS를 사용해서 프로젝트를 진행해 보고 싶다는 생각이 들었다. 그리고 4차 과제를 제출했기 때문에 마음이 후련하기도 하고, 뒤숭숭하기도 하고. 지금은 멘토님들의 리뷰도 본 상태지만 저때까지만 해도 과제를 끝냈다는 것에 엄청 뿌듯했고 쉴 생각에 기분이 엄청 좋았었다. :) 팀원들 의견 조율하고 그 와중에 과제도 해낸 나 자신에게 잘했다고 박수!

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