[WIL] 추석 연휴 방학 주간 회고

📝 이번 주에 하고자 했던 것

• [과제] CSS 클론코딩(유튜브, 자유 선택) 과제
• [Javascript] 미니 프로젝트 7번까지 완성 및 미니 프로젝트 배포
• [프로젝트] 노션 클론코딩 프로젝트 리팩토링 후 배포
• [알고리즘] 그래프, DFS & BFS 개념 강의 듣고 이해하기
• [강의] Vue 강의 듣기
• [번외 강의] 피그마 지식나눔 강의 듣기
• [번외 강의] 도커 강의 듣기
• [복습] 코딩테스트 실습 못한 거 하기
• [복습] 그동안 못 들은 강의 듣기
• [복습] 제대로 이해 못한 강의 복습하기
• [JS 개념] 실행 컨텍스트 이해
• [코드 리뷰] 다른 수강생 PR과 코드 리뷰 읽기
• [코드 리뷰] Todo app 과제, 노션 클론코딩 과제 코드, 미니 프로젝트 코드 리뷰하기
• [TIL] 조금이라도 새로 배운 내용은 매일 매일 정리하기

 

---

🎯 이번 주에 완료한 것

• 한 것
  • Javascript 미니 프로젝트 과제 완성 및 프로젝트 모아놓은 SPA 배포 [링크]
  • 6주차 과제 코드 리뷰
  • 도커 강의 듣기
  • Udemy JavaScript로 상태 관리 app 만들기 강의 듣기
  • 패캠 Github 메인 페이지 마크업 클론코딩 강의 듣기
  • 유튜브 메인 페이지 CSS 클론 코딩

 

• 아쉬웠던 것
  • 우선순위 분배를 잘못해서 과제 못 끝냄...
  • 강의 너무 밀린 것...
  • 코드 리뷰 또 안 한 것...
  • TIL 안 쓴 것...

 

---

📚 다음 주에 할 것

• [강의] 밀리지 않고 강의 제때 제때 듣기
• [과제] CSS 클론코딩(유튜브, 자유 선택) 과제 끝내기
• [과제] Vue 과제
• [Javascript] 미니 프로젝트 스터디
• [CS 기초] 스터디 발표하기
• [알고리즘] 그래프, DFS & BFS 개념 강의 듣고 이해하기
• [복습] Vanilla JS 강의
• [번외 강의] 피그마 지식나눔 강의 다시듣기
• [JS 개념] 실행 컨텍스트 이해
• [코드 리뷰] CSS 과제 코드 리뷰하기
• [TIL] 조금이라도 새로 배운 내용은 매일 매일 정리하기

 

---

🎇 Reflection

• Javascript 미니 프로젝트
  
  • 이게 내 연휴를 앗아간 주범이다. 미니 프로젝트 스터디 마감이 추석 연휴 주간인 줄 사실 모르고 있었다. 월요일부터 CSS 과제를 시작해서 호기롭게 이틀만에(;;) 끝내겠다는 생각하고 있었는데, 고향에 내려간 김에 광주에 있는 프롱이분이랑 정모하면서 미니 프로젝트 스터디 마감이 화요일까지라는 사실을 알게 됐다. 시작할 때만 하더라도 금방 끝내고 과제를 시작할 생각이었는데... 프롱이분이 ESlint 설정을 공유해주셔서 그걸 적용해서 리팩토링하려다 그만... ESlint로 삽질 좀 하고... 전부터 미니 프로젝트를 한 곳에 모아서 배포하고 하고 싶었어서 디렉토리 구조 설계(?)하는 걸로 삽질 좀 하고... 이러다 감이 잘 안 와서 전에 결제해뒀던 Udemy 강의도 봤다...
  • 이미지 슬라이드를 unsplash api에서 이미지를 랜덤하게 받아와서 만드는 것으로도 삽질을 했다. 처음에 다음 슬라이드로 넘기는 함수를 실행하기 위해 전체 슬라이드의 개수를 document.querySelector(".slide").length 대충 이런 식으로 계산하는데 이게 document.querySelector(".slide")가 만들어지기 실행돼서... 하.. 이것을 해결하려다 포기하기 직전까지 갔는데 setTimeout(() => showSlides(slideIndex), 0); 이런 식으로 webAPI를 걸어줘서 슬라이드를 렌더링하는 작업이 끝나고 showSlides() 함수가 실행될 수 있게끔 헀더니 되긴 됐다. 근데 SPA에 연결하니까 또 문제가 있어서 이 부분을 this.init() 안에 넣고 SPA에 연결할 때 init()를 실행하게 하니 또 되긴 됐다... 정말 많은 것을 배우긴 했는데... 목요일까진가 이것만 작업했다... 그래도 배포하니까 뿌듯하긴 했다. vercel로 했는데 진짜 라우팅 설정해주는 파일 넣고 버튼 한 번 누르는 정도로 배포가 돼서 신기했다.

 

• 멘토님께서 다른 팀원분께 남긴 코드 리뷰에 좋은 내용이 있어 정리함
  
  • EOL과 EOF
    • github에서 파일의 마지막 줄에 개행을 안해주면 ⛔와 같은 아이콘을 띄우는데, 이것을 EOL이라고도 하고 EOF라고도 한다고 이해하고 있었다. 하지만 멘토님께서 EOL(End Of Line)은 line의 끝을 알리는 문자, EOF(End Of File)는 file의 끝을 알리는 문자라는 의미로 다른 개념이라고 알려주셨다. 리눅스에서는 LF, 맥에서는 CR, 윈도우에서는 CR+LF와 같은 문자를 통해 줄바꿈을 인식하는데, 이게 EOL이라고 한다. 반면에 입력 스트림으로 파일을 읽다가 파일의 끝에 도달하면 마지막으로 읽는 문자가 EOF인 건데, 이 EOF를 통해 파일을 다 읽었다는 판단을 하는 거라고. ⛔ 아이콘을 띄우는 것은 EOF는 EOL로 끝내라는 권고사항(POSIX Standard에 정의되어 있음) 때문이다. C에서 문자열을 메모리에 할당할 때, 문자열의 끝을 추적하기 위해 NULL 종단 문자를 붙이는 것과 비슷한 거라고 친절하게 설명해주셨다!
  • 객체 값 비교하기
    • 객체는 참조형 자료형이기 때문에 원시형 자료형처럼 단순히 === 연산자로 비교할 수 없다.
    • JSON.stringify()로 객체를 스트링으로 만들어서 비교하는 방법은 같은 데이터인데도 객체 안의 데이터 순서가 다른 경우, 서로 다른 데이터로 인식할 수 있는 가능성(이 부분은 string으로 바꾸기 전에 sort를 사용하면 해결은 할 수 있지만...)도 있고, 사실 성능도 좋은 게 아니라 실제로 이용하는 경우는 잘 없다고 한다. 보통 불변성을 지켜서 shallow compare 만으로 변경을 인식할 수 있도록 하거나 옵저버, pub/sub 패턴을 활용해서 변경 이벤트를 발생시킬 수 있다고 멘토님께서 알려주셨는데 이 부분은 더 공부해봐야 할 것 같다.
  • 이벤트를 어디에 정의하는 게 합리적일까?
    • 백스페이스 키를 누르면 뒤로 가는 기능을 구현할 때, 이벤트를 Nodes 컴포넌트에 정의하는 게 좋을지 그 상위 컴포넌트인 App 컴포넌트에 정의하는 게 좋을지에 대한 고민이 있었다. 이에 대해 멘토님은 모듈을 구성할 때는 공학적으로 응집도와 결합도를 고려해야 하는데, 응집도로 봤을 때는 Nodes 컴포넌트에 정의하는 게 합리적일 것 같다고 답변 주셨다. 다만, 여러 번 생성되는 컴포넌트라서 이벤트 등록이 중복해서 일어날 것 같다면 container 등으로 래핑해서 상위 컴포넌트에서 이벤트를 등록하는 것이 좋다고.

 

• 유튜브 CSS 클론코딩
  • CSS 클론코딩 과제가 일요일까지였는데 일요일에 시작했다 ㅎ 너무 안일하게 생각한 것도 있지만 마크업 구현을 세세하게 해본 게 좀 오래 전 일이고 이전에 일한 직무가 사실상 '웹' 퍼블리싱이라고 말할 수 없는 곳이었기 때문에 제대로 메타 태그 넣고, reset.css 적용하고, 벤더 프리픽스 넣고 하면서 마크업 해본 적이 없어서 이번에 제대로 퍼블리싱 해보고 싶었다. 그래서 안 들은지 등록해놓고 못 들었던 패캠 Github 클론코딩 강의를 다시 들으면서 심기일전을 하다가 결국 일요일에 시작했다. 근데 막 제대로 하려고 하니까 신경써야 하는 부분이 생각보다 너무 많고, SCSS도 제대로 쓰는 건 이번이 처음이고, BEM도 처음 적용해서 이게 맞나 저게 맞나 하면서 시간이 되게 오래 걸렸다. 그리고 그동안 CSS 재밌다고 말해왔던 걸 반성하면서 CSS의 혹독함을 다시금 깨닫는 시간을 보냈다... 그런데 정말 배우는 게 많았다. flex, grid도 이번 기회에 제대로 이해하게 된 것 같고, svg를 사용하는 방법도 알게 됐다. 여러모로 유익한 시간이었지만 과제 제출은 결국 화요일에 했고... 아직 자유 선택 과제를 시작도 못했다... 반성합니다...

 

• 도커 강의
  
  • 남여센에서 도커 강의를 마련해주셨는데 도커는 평소에 궁금했던 내용이라 들었다. 6시간 정도 진행되는 강의라 중간에 듣다가 탈주할까 했는데 2명이서 단란하게 듣게 돼서 끝까지 들었다... 가상화와 컨테이너의 차이, 구성 요소, 도커 파일, 도커 이미지, 도커 컨테이너의 관계, 도커 환경 아키텍처, 도커 파일 문법, 이미지 빌드 방법, 컨테이너 관리 명령 등 정말 세세하고 알차게 수업을 준비해주셨는데 내가 좀 대충 들었다 ㅠ 나중에 다시 복기해봐야 할 것 같다. 그래도 직접 도커 구성해보는 경험을 해볼 수 있어서 좋았다.

 

• React Native 라이브 코딩
  • 로토 강사님이 React Native 라이브 코딩을 해주셔서 좀 구경했는데 사실 React Native에 대해 하나도 몰라서 코드를 이해하면서 볼 수는 없었다. 하지만 옵셔널 체이닝도 배웠고, React Query라는 게 있다는 사실도 알게 됐다. 마침 제로초님 노드 버드 강의에 Next.js와 Redux는 잘 붙지 않는 편이라 React Query로 리팩토링한 코드가 업데이트 됐다는 알림이 와서 반가웠다. 다음에 React Query가 뭔지 좀 살펴보고 싶다.