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

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

1. 요일별 공부 기록

❤️ 12월 9월 금요일

• 프로그래머스
  • 삼총사
    • 문제를 풀긴 했지만 내가 쓴 코드에는 같은 경우의 수가 6개가 나왔다. 그래서 나누기 6을 해 주었는데 이렇게 푸는 게 맞는 건가 싶다. ㅠㅠ
  • 두 개 뽑아서 더하기
    • set으로 중복된 숫자 제거하고 정렬해 주기
  • 2016년 ❌
  • 폰켓몬 ❌
• Deep Dive
  • 22장 this
• 4차 과제
  • hashchange 이벤트 관리
  • js 파일 정리
  • 회원 정보 관리 페이지
    • 로그인 상태일 때만 내 정보 페이지로 넘어갈 수 있게 구현
    • 이름 값, 아이디 값 api로 가지고 오기
    • 비밀번호 / 프로필 사진 넣기
    • 계좌 API 연결
• 안재원 강사님 수업
  • super(props)
  • 리액트의 불변성
  • react Hooks
    • class 형 컴포넌트에서만 쓸 수 있었던 state와 생명 주기를 함수형 컴포넌트에서도 사용 가능할 수 있게 되었다.
  • HOC: Higher-Order Component
    • 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수
  • useEffect, useState
  • tictactoe 코드 비교해서 다시 보기
    • react 자습서

🧡 12월 10일 토요일

• 프로그래머스
  • 소수 찾기
    • 에라토스테네스의 체
    • 시간 초과 안 나게 조심하자!
  • 모의고사
• 3차 과제 리뷰
• 4차 과제
  • 회원 정보 수정 api 연결
  • 계좌 api 연결

💛 12월 11일 일요일

• 프로그래머스
  • 소수 만들기
    • 소수를 만드는 건 너무 어렵다... 어려워...
  • 실패율
    • 제 코드는... 실패율이 얼마일까요... 😤
• Deep Dive
  • 23장 실행 컨텍스트
    • 자바스크립트 코드가 실행되는 순서, 판단되는 순서를 더 이해할 수 있게 되었다.
• this 강의
  • 코드종 님의 this
  • 좀 예전 영상이라 화살표 함수에 대한 이야기는 없지만 호출되었을 때 this가 결정된다는 것에 대해서 이해할 수 있었다.
• 4차 과제
  • 계좌 해지
  • 정보 수정이나 계좌 관련 수정되었을 때 페이지 전환
  • 잔오류 처리
  • 결제 로직 확인 완료!
• react tictactoe 복습
  • 오류의 원인은 return의 위치였다...!

💚 12월 12일 월요일

• 프로그래머스
  • 콜라 문제
    • 오늘도... 뚠뚠... 나는... 뚠뚠... 다른 언어 답을 보고 풀었다.
    • 근데 내가 생각한 로직은 왜 안 됐을까...
• 그룹 스터디 워크샵 자료
• 4차 과제
  • 로그인 상태가 아닐 때 userinfo 접근 못 하게 하기
  • 로그인 상태일 때는 myshop에서 계좌 잔액 보이게 하기
  • 결제 페이지 퍼블리싱
  • vertical-align: middle!!!!

💙 12월 13일 화요일

• 4차 과제
  • 결제 페이지 기능 구현하기
    • await로 정보를 불러온 값을 확인하려고 console.log를 찍을 때 영향을 받는 범위를 확인하기
• React 강의
  • 코딩 앙마 React js 강의
  • #1 강의 소개
  • #2 설치(create-react-app)
  • #3 컴포넌트, JSX
    • 컴포넌트는 대문자로 시작해야 한다
  • #4 첫 컴포넌트 만들기
    • 함수를 만들고 나서 값을 넣을 때 {} 안에 문자열이나 숫자는 가능하지만 boolean 값이나 객체 전체는 불가능하다.
    • name이라는 객체가 있다면 name.mark 이런 식으로는 가능
    • JSX는 하나의 태그만 만들 수 있기 때문에 보통 div 태그 안으로 html을 작성해 준다. <></> 이런 빈 태그도 사용은 가능하다.
    • style 속성 작성할 때 객체로 값을 줘야 한다.
  • #5 css 작성법 (module css)
    • 인라인으로 style 작성할 때 키 값을 카멜케이스로 사용해야 한다.
    • value에 숫자 값만 들어간다면 따옴표를 사용하지 않아도 된다.
    • 컴포넌트 별로 css를 만든다고 해도 다른 컴포넌트에 영향을 줄 수 있다. 그 이유는 head 태그 안에 들어가기 때문이다.
    • 컴포넌트.module.css로 파일을 만들고 import styles from '경로' 로 작성해 주어야 해당 컴포넌트에만 영향을 주는 css를 만들 수 있다.
    • 인라인으로 style={styles.선택자}로 작성.
• 프로그래머스
  • 0단계 블로그에 정리
• Deep Dive
  • 23장 실행 컨텍스트

💜 12월 14일 수요일

• 프로그래머스
  • [1치] 다트 게임 ❌
  • 로또의 최고 순위와 최저 순위
• 수강생 리뷰 회고
• 4차 과제
• React 강의
  • 코딩 앙마 React js 강의
  • #6 이벤트 처리 (Handling Events)
    • 같은 컴포넌트라도 state는 따로 관리된다.
  • #7 state, useState
    • useState() 괄호 안에는 초기 값을 넣어 준다.
• 안재원 강사님 수업
  • push.apply ≒ concat
    • push.apply는 기존에 추가해 주는 것
    • concat은 새로운 배열 생성
  • 요소에 리스트를 나열할 때 key 값을 주어 DOM에서 구분할 수 있게 해 준다.
    • index 값은 비추천
    • key 값은 unique 하기 때문에 중복이 되면 안 된다.
  • tabnine
  • npm i -D gh-pages
    • 아직 제대로 안 돼서 다시 확인해 봐야 한다....

🤎 12월 15일 목요일

12월도 반이 지나갔다니!

• 프로그래머스
  • 푸드 파이트 대회
  • 체육복 ❌
    • 답을 보면 이해가 되지만 나는 왜 저런 로직을 생각하지 못하는가.
• React 강의
  • 코딩 앙마 React js 강의
  • #8 props
    • props로 받은 값은 readonly 객체
  • #9 더미 데이터 구현, map() 반복문
  • #10 라우터 구현하기
    • 강의가 약 1년 전 자료였는데 그 사이에 react-route-dom 사용 방식이 바뀌어서 댓글을 참고하여서 코드를 작성하였다.
  • 학습 중인 github 레포
• 4차 과제
  • 구매 내역 확인하기
• 그룹 스터디 워크샵
  • 이슈로그 작성해 보기
    • 팀원간 에러 핸들링에 대한 문서화
    • 원인 > 해결 방안 > 결과를 작성해 보자
  • 장바구니 오류
    • path 값을 저장 후 if로 비교
    • 근본적인 해결을 위해 change, window가 어떻게 작동하는지 MDN 문서를 참고해 보자
    • 뮤텍스와 세미포어
      • change, window가 어떻게 작동하는지에 대한 근본적인 내용을 알기 위해서 뮤텍스라는 것을 말씀해 주셨다. 간단하게 말하자면 프로세스가 어떻게 돌아가는지에 대한 이해가 필요하다고 하신 것 같았다.
  • 프리티어, 린트
    • 프리티어는 서식에 관련된 오류
    • 린트는 구조까지 바꿔 준다 (그렇지만 정확한 내용은 잘 모르겠다.)
    • 이런 것들을 맞추다 보면 코드 스멜이 다른 사람이나 서로 맞추는 과정에서 일의 능률이 떨어질 수 있다.
    • vsc 포맷터 확인해 보기
  • 역시나 이번에도 알찼던 그룹 스터디 워크샵...! 문제점에 대해서 잘 지적해 주시고 어떻게 나아가면 좋을지 방향성을 제시해 주시는 게 너무 좋았다. 이슈 로그 꼭 작성해 볼 것.

2. 주간 회고

4차 과제를 할 때 결제 페이지에서 어떻게 구현해야 할지 막막했던 순간이 있었다. 그때 다른 팀원이 코드를 작성하기로 하여서 기다리는 동안 React 강의를 조금 들었는데 역시 다양한 정보가 머리에 들어오니 이해가 되기 시작했다. 아직은 React로 프로젝트를 만드는 것은 서툴지는 몰라도 사용 방법에 대해서 조금씩 이해가 되는 중이다. 과제나 프로젝트들을 하느라 시간이 많지는 않겠지만 그 전에 했던 다른 과제들을 리액트로 다시 만들어 보는 시간을 가졌으면 싶다. 그러면 포트폴리오를 제출할 때도 나는 이런 노력을 했고, 이런 결과가 나왔다는 것을 보일 수 있기 때문에 좋은 방법인 것 같다.
그리고 4차 과제를 진행하면서 코드 짜는 것에 정신이 팔려서 문서화에 대한 기록을 거의 남기지 않았던 것 같다. 마지막에 과제를 제출하기 위해서라도 작성해야 할 문서들이 있으며, 나중에 이 프로젝트를 리팩토링 할 때도 다시 상기하기 좋게 문서들을 정리해야 될 것 같다. 그래도 어느 정도 틀이 잡히고 정리가 되어 가는 상태인 것 같아서 기분이 좋다!
이번 주는 눈이 정말 많이 와서 그런가 춥긴 춥지만 기분이 좋은 일주일이었다. 눈을 보면서 하는 코딩... 꽤나 감성 코딩일지도. 😶‍🌫️

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