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

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

1. 요일별 공부 기록

❤ 12월 2일 금요일

• 프로그래머스
  • 두 정수 사이의 합
  • 콜라츠 추측: 어려울 줄 알았는데 생각보다 쉽게 풀렸다!
  • 서울에서 김서방 찾기
  • 핸드폰 번호 가리기
  • 블로그에 0단계 정리하기
• 알고리즘 (코딩 테스트 수업)
  • blood fill
• React 권장 강의
  • Part 1 시작하며
    • 코드가 변화할 때 변화에 대한 영향 범위를 축소하여 코드를 작성하면 견고해진다.
    • getElement... 메소드를 사용하면 DOM이 HTMLCollection으로 온다. HTMLCollection은 라이브 오브젝트이다.
    • querySelectorAll 메소드를 사용하면 DOM이 nodeList로 온다.
    • MVVM / MVC / MVP
    • react는 UI를 만들기 위한 자바스크립트 라이브러리이다.
    • 플러그인 ≒ add on
    • 미들 웨어: 운영체제와 소프트웨어 사이
    • Express
    • 컴포넌트
• Deep Dive
  • 프로토타입

🧡 12월 3일 토요일

• 프로그래머스
  • 나누어 떨어지는 숫자 배열
  • 제일 작은 수 제거하기
  • 음양 더하기
  • 없는 숫자 더하기
    • 처음에는 0부터 9까지 들어 있는 배열을 만들어서 비교하려고 했는데 괜히 2중 for문을 쓰게 될 것 같아서 처음부터 for문 안에서 0부터 9가 돌게 만들고 numbers에 있는지 확인하는 식으로 로직을 만들었다.
  • 블로그에 0단계 정리하기

💛 12월 4일 일요일

• 프로그래머스
  • 가운데 글자 가져오기
  • 수박수박수박수박수박수?
  • 내적
  • 문자열 내림차순으로 배치하기
    • 문자열에서 sort() 쓸 때 split()로 쪼개 주기
  • 블로그에 0단계 정리하기
• React 권장 강의
  • 해결책 만들기
  • 객체 to DOM Render
  • Webpack과 babel 세팅
• 그룹 스터디
  • Deep Dive
• 앞으로 더 보면 좋을 React 강의
  • 코딩 앙마 리액트
  • 벨로퍼트와 함께하는 모던 리액트
  • 소플의 처음 만난 리액트

💚 12월 5일 월요일

• 프로그래머스
  • 약수의 개수와 덧셈
    • 런타임이 너무 길다...
  • 문자열 다루기 기본
  • 부족한 금액 계산하기
    • 금액이 안 부족할 때 경우도 계산
  • 행렬의 덧셈
    • 런타임이 너무 길다...
• 4차 과제
  • ㅅㅎ 님, ㅎㄹ 님과 sign-up 페이지 기능 구현
• JS 수업
  • node 환경에선 fetch를 못 씀. (npm 필요)
  • vercel 기본 함수 handler(request, response)
  • POST or body가 없다면 GET으로 사용 가능
    • 지금 보니까 어디에서 쓴다는 건지 알 수가 없네...
  • proxy 가로채다
  • 환경변수 dotenv
  • Lambda
  • JS 라이브러리
    • echarts
    • interact.js
    • sortable.js
• React 권장 강의
  • @jsx
  • 함수 컴포넌트
  • 클래스 컴포넌트
    • typeof 함수는 함수와 클래스 모두 함수로 반환한다
  • virtual DOM
    • DOM vs DOM이 아닌 객체 vs 객체를 비교함으로서 메모리 사용을 줄인다.
    • Awesome open source
  • 마법의 HOOK 원리와 제약
    • 최상위에서만 Hook을 호출해야 한다.
  • 사이드 이펙트
    • server side rendering
  • 공부 내용 github

💙 12월 6일 화요일

• 프로그래머스
  • 직사각형 별 찍기 ❌
    • 아직도 readline은 너무 어렵다. 별 찍기 공부해야지 꼭.
  • 최대공약수와 최소공배수

    function solution(n, m) {
    let gcd = (n, m) => (n % m === 0 ? m : gcd(m, n % m))
    let lcm = (n, m) => (n * m) / gcd(n, m)
    return [gcd(n, m), lcm(n, m)]
    }

    • 공식을 외워 버리자!
  • 같은 숫자는 싫어
  • 이상한 문자 만들기
    • 문제 값이 대문자로 들어올 수도 있음을 잊지 말자!
• 4차 과제
  • ㅅㅎ, ㅎㄹ님과 로그아웃 페이지 기능 구현
• 박영웅 강사님 수업
  • Type Script
  • 무한 스크롤
    • 생각보다 구현 방법이 간단했다.
    • 로딩 중일 때 애니메이션 나오는 것도!
• Deep Dive
  • 20장 strict mode
  • 21장 빌트인 객체

💜 12월 7일 수요일

• 프로그래머스
  • 3진법 뒤집기 ❌
    • 틀리긴 했지만 거의 비슷하게 풀었다!
  • 예산
  • 시저 암호 ❌
    • 로직을 생각하긴 했지만 코드로 구현하는 게 어렵(아니 귀찮...)다.
  • 최소직사각형 ❌
    • 정렬을 사용해서 제일 큰 값과 작은 값 찾기
• 4차 과제 회의
• 4차 과제
  • footer 퍼블리싱
  • merge conflict까지 완료!
• React 수업
  • 드디어 첫 수업! 알고 보니 apple store 클론 코딩 했던 존안 강사님. ㅋㅋ
  • React는 라이브러리
    • Vue, Angular은 프레임워크
  • 컴포넌트: 앱을 이루는 최소한의 단위
    • 클래스형
    • 함수형(Hooks가 나온 후로 사용하기 시작)
  • batch Update 실제 돔과 가상 돔을 비교하여 업데이트
  • tictactoe 앱 만들기

🤎 12월 8일 목요일

• 프로그래머스
  • [1차] 비밀지도
    • 코드가 너무 길긴 한데 런타임 아웃이 뜨지 않아서 다행이었다.
  • 문자열 내 마음대로 정렬하기 ❌
    • 문자열 비교한 후 return 값을 잘못 지정한 것 같다.
  • K 번째 수
  • 숫자 문자열과 영단어
  • 블로그에 0단계 정리하기
• 4차 과제
  • 과제 주의 사항 작성
  • 불필요한 파일 정리하기
  • 마이 쇼핑 페이지
    • 회원 정보 관리 페이지 퍼블리싱
• Deep Dive
  • 22장 this

2. 주간 회고

팀으로 프로젝트를 진행하니 너무 신경 쓸 게 많아졌다. 조장이 되고 나서 잘하고 싶은 마음이 더 커지기도 했고, 이것저것 컨트롤 하는 것이 조금은 벅차다는 생각이 들긴 하지만 아직까진 괜찮은 것 같다. React 공부가 시작되었는데 잘할 수 있을지 모르겠다. 그래도 강의 들은 게 있어서 첫 시간은 재미있었던 것 같다. 팀 프로젝트를 바닐라 자바스크립트로 진행하고 있어서 앞으로도 많이 고생할 것 같은 예감이 든다. 나중에 팀 프로젝트를 리액트로 리팩키징(?) 해도 재미있을 것 같다. 팀원들과 생각을 잘 조율하고 파트 배분을 잘하면 좋을 텐데 내 손 안에서 다 해결이 되었으면 하는 생각이 들어서 조금은 불안하긴 하지만 그래도 잘 이겨내겠지? 잘할 수 있을 거얏!!

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