프로그래머스 데브코스 프론트엔드 3기 6주차 회고(11/21 - 11/27)

공부한 것

• VanillaJS로 웹 앱 만들기(고양이 사진첩, 고양이 사진 검색기)
  
  • API 연동 전 더미 데이터를 적용해서 컴포넌트 만들기
  • main.js와 App 컴포넌트를 분리해서 구현하면 컴포넌트를 선언하는 부분과 컴포넌트를 초기화해서 실행하는 부분을 분리할 수 있다. App 컴포넌트를 여러 곳에 재사용할 수도 있다. Java나 C언어는 main 함수로 실행과 구현부를 분리하는 게 자연스러운 반면 JavaScript는 그 경계가 모호하다. 선언부와 실행부가 분리되어 있으면 나중에 유닛 테스트할 때 편리하다.
  • 자동 완성 UI 만들기
    • 타이머로 이벤트를 지연시키는 중에 같은 이벤트가 발생하면 이전 이벤트를 취소하고 다시 타이머를 거는 방식으로 디바운스를 적용할 수 있다.
    • 검색 키워드를 session storage에 캐시해서 API 호출 횟수를 줄인다. storage에 접근하고 업데이트하는 것도 리소스가 드는 일이라 필요할 때만 하자.
• VanillaJS로 드래그 앤 드롭 구현하기
  • 드래그를 시작하는 시점에 dataTransfer 객체를 통해 드롭할 곳으로 보낼 데이터를 정의하고 사용한다.
  • 큐 자료구조와 낙관적 업데이트를 이용하면 불필요한 API 요청을 줄일 수 있다. 네트워크 속도가 느린 경우를 고려하자.
    • 개발자 도구 - 네트워크에서 throttling을 설정하여 속도가 느린 경우를 테스트해볼 수 있다.
    • 데이터 흐름과 네트워크 요청을 어떻게 제어할지 고민하자.
  • window.requestIdleCallback()(safari 호환x)나 Web worker(메인 스레드 외부에서 별도로 작업을 진행하여 성능을 개선할 수 있음)를 사용해서 반드시 실시간으로 DB와 sync되지 않아도 되는 작업을 처리할 수 있다.
• VanillaJS로 구현해보는 훈련을 통해 컴포넌트 방식으로 생각하고 확장 가능한 UI 프로그래밍을 경험할 수 있다. 상태와 데이터를 중심으로 UI를 표현해보면서 화면의 변화를 미리 예상하고 추적하는 것이 중요하다.
• CSS float, position, flex, grid, transform, columns, filter
  • CodePen으로 간단하게 HTML, CSS, JavaScript 프로젝트를 만들 수 있다.
  • flex/grid의 container와 items에 정의할 수 있는 속성을 구분해서 알아둬야 한다.
  • 속성을 적용했을 때 다른 속성의 값이 자동으로 지정되는 경우도, 입력한 속성 값이 적용되지 않는 경우도 꽤 많다.
  • 무수히 많은 속성과 속성값들...
• 알고리즘 문제 풀이

 

 

어려웠던 것

• CSS 심화 강의에서 다양한 속성들을 배우고 있는데 양이 많고 놓치고 있던 게 많았다. 한번에 모든 내용을 외우려고 했다가 실패했다. 일단 속성별로 속성 값과 예외 사항을 한 곳에 잘 정리해둬야겠다. 최근에 진행한 노션 프로젝트에서 불필요하게 적용한 스타일이 없는지 확인해봐야겠다. 또는 곧 나올 과제를 통해..? 반복해서 보다 보면 기억에 오래 남을 것 같다.

 

 

궁금한 것

• 데브코스 세션에서 Node.js headless CMS인 strapi.io에 대해 배우고 실제로 적용하는 과정을 볼 수 있었다. headless CMS에 대해 좀 더 알아보기 위해 영어 아티클을 다음 주 내로 번역해서 블로그에 공유해보고 싶다. 예전에 Firebase를 이용한 프로젝트에 참여할 때 다른 팀원이 대신 데이터 구조를 설계해줬었는데, 이번에는 직접 데이터 설계도 해보고(결코 쉽지 않겠지만) strapi.io로 API를 빠르게 만들어서 토이 프로젝트를 진행해보고 싶다. 잘 활용하면 정말 유용할 것 같다.
• API 연동 과정에서 문제가 생겼을 때 사용자에게 어느 오류를 어떤 메시지로 알리는 게 효과적일지 궁금하다. 'API 호출 실패'와 같은 메시지보다 좀 더 사용자 친화적인 게 무엇인지 실제로 경험해보지 않았다(또는 기억하지 못할 정도로 자연스러워서?). 팀원들과 한번 이야기 나눠봐야겠다! 이전 과제에서 궁금했었는데 이번 과제 코드 리뷰에서 멘토님이 언급해주셔서 이번 기회에 제대로 짚고 넘어갈 수 있을 것 같다.

 

 

부족한 점

• 과제 구현할 때 주어진 요구사항에 대한 고민이 부족했다. 단순한 기능이라고 생각하고 강의에서 구현한 함수를 그대로 사용했는데 그 과정에서 예외 처리를 제대로 하지 못했다. 코드 리뷰가 빠르게 진행된 덕분에 바로 캐치했지만... 앞으로는 좀 더 고민하고 설계와 근거를 충분히 준비해서 접근해야겠다.
• 팀원 분들께도 알찬 코드 리뷰를 드리고 싶어서 이전 과제에서 내가 남긴 코멘트를 다시 봤는데 논리적인 흐름보다는 주로 변수명이나 코딩 컨벤션처럼 눈에 보이는 영역을 언급한 게 많았다. 다른 교육에서도 과제 컴파일할 때마다 스스로 답답하다고 느꼈던 부분인데 코드 리뷰에 시간을 좀 더 할애하고 생각하면서 많이 읽어봐야겠다. 
• 강의 양이 많아지면서 강의가 조금씩 밀리고 있는데 어떻게든 강의만큼은 안 밀리게끔 집중해야겠다! 코어타임에 최대한 집중하고 스크럼 때 나눌, 강의와 관련된 이야깃거리를 만들어보자.

 

 

느낀 점

데브코스 팀이 바뀐 첫 주여서 새로운 멘토님, 팀원들과 스크럼과 커피챗을 진행했다. 새로운 분위기에 조금씩 적응하고 있고 열정적인 분들과 함께하게 되어 매일 자극을 많이 받았다. 곧 프로젝트도 함께하는 만큼 나도 열심히 하는 모습을 꾸준히 보여야겠다. 지난 팀 활동에 대한 피드백도 받았는데 나의 좋은 점은 잘 유지하고 스스로 부족하다고 느낀 점은 개선해나가야겠다.

 

데브코스 강의와 과제, 이력서 보완, 코딩테스트와 면접 준비, 개발 공부 등 해야 할 일이 점점 많아진다... 최근에 여러 곳에서 HTTP 완벽 가이드 책을 추천 받아서 공부하려고 하는데 이왕 하는 거 스터디로 같이 공부하면 좋을 것 같다. 한번 운영해볼까 고민했는데 잘 할 수 있을지 확신이 없다. 다음 주 중으로 결정하기.

 

데브코스 매니저님이 말씀해주신 대로 부지런히 매일 우선순위대로 하나씩 하다 보면 해낼 수 있을 것 같다! 일단 오늘 일은 내일로 미루지 않기. 파이팅