너무 더워서 항상 에어컨 밑에서 시간을 보내는 요즘, 데브코스를 시작한지 벌써 두 달이 넘어가고 있다. 7월에는 내가 어떤 공부를 해왔는지 정리해보고자 한다.
7월은 기존에 알고있던 지식에서 살을 붙이는 공부보단 새롭게 배우는 공부를 더 많이 했던 것 같다.

데브코스 과제들

고양이 갤러리

Vanilla JS를 사용한 고양이 갤러리에 정합성 체크와 최적화를 개선하는 과제를 했다. 각 컴포넌트들의 상태(state)를 비교해서 상태에 변화가 생긴 경우에만 리렌더링을 하도록 하는 로직 추가가 핵심 이였다.

개선해야 할 점

• 고양이 갤러리 API는 API 요청에 고의적으로 1~3초로 랜덤 딜레이가 들어가 있다. 빠른 로딩을 위해 Cache Web API를 사용하면 더 좋을 것 같다.

잘한 점 or 배우게 된 점

• 듣기만 했던 lodash 라이브러리를 조금은 공부할 수 있었다. 컴포넌트의 객체 상태 변화 감지를 lodash를 사용해서 적절하게 구현했다고 생각한다.
• Vanilla JS로 컴포넌트 형식으로 구현과 SPA와 비슷하게 구현하는 것에 대해 많이 공부할 수 있었고 Vanilla JS에 대해 자신감이 많이 생긴 프로젝트였다.

모바일 네이버 페이지 레이아웃 클론

네이버 클론 바로가기

SCSS를 사용해서 네이버 모바일 페이지 레이아웃을 클론하는 과제를 했다.
이 과제를 통해 원래도 알고 있었지만 CSS는 항상 꾸준히 공부해야 겠다는 생각이 들었다. 다른 개발자 분들이 구현한 CSS코드를 많이 보며 레이아웃 구현 센스를 많이 키워야 겠다는 생각이 든 과제였다.

개선해야 할 점

• 시멘틱 태그를 더 적극적으로 사용해야 한다. a, main, header와 같은 기본적이 태그 외에 section, article 태그 등 다른 시멘틱 태그도 더 많이 사용해서 웹 접근성을 향상시킬 필요가 있다.
• BEM 방법에 대해 좀더 공부해보자... BEM 방법론이 생각보다 어렵게 느껴졌고, 잘 적용하지 못한 것 같다.
• &(상위 선택자)를 더 적극적으로 사용하자.

잘한 점 or 배우게 된 점

• 페이지의 크기에 따라 반응형으로 제작하는 과정에 grid 레이아웃을 적용하면서 grid에 대해 많이 공부할 수 있었다.
• 잘 만들어진 웹 사이트 레이아웃을 클론 코딩하면서 사용하기 편한 레이아웃이 뭔지 생각해보는 계기가 되었다.

Vue? Webpack?

프론트엔드를 공부하면서 Vue를 공부하겠다고 생각해본적은 없었다. React 배우기도 바쁘다는 핑계로 Vue는 공부하려고 하지 않았었다.
이번 데브코스 강의를 통해 Vue에 대해 공부할 수 있었고 Vue가 생각보다 흥미롭다는 생각이 들었다. 라이브러리인 React와 프레임워크인 Vue의 차이점에 대해 알 수 있었고 React와는 다른 매력을 Vue가 가지고 있다고 생각한다.
Vue 프로젝트를 세팅하는 과정에서 Webpack과 Vite 번들러에 대해서도 공부할 수 있었다. 사실 Vite는 세팅 과정이 쉬워서 공부한 부분이 많다고 말할 순 없지만 너무 어렵다고 느껴졌던 webpack에 대해 제대로 배울 수 있었다.
webpack에 대해 어렵다고 느낀 부분은 eslint, prettier, 외부 라이브러리 등을 프로젝트에 추가하면서 계속해서 생기는 컴파일 오류였다. 하지만 강의의 세팅을 따라해보며 여러 속성들을 추가하는 이유와 속성의 사용 방법을 공부할 수 있었고 webpack도 이제 어느정도 사용할 수 있게 되었다.

개선해야 할 점

• 앞에 배웠던 부분을 벌써 조금은 까먹은 것 같다... Vue의 공식 문서를 읽어보며 복습하는 시간을 가져야 한다!

잘한 점 or 배우게 된 점

• 저번 과제에서 Webpack을 적용하려다가 실패했던 경험을 바탕으로 webpack에 대해 좀더 기억이 남는 공부를 할 수 있었다. 어렵다고 생각되는 부분은 무작정 시도해보고 좌절은 겪은 후 공부하면 더 오래 기억에 남는 걸 이용해야겠다.

개인 블로그...

개인 블로그를 만들기 위해 적용하고 싶은 기술을 들을 공부하고 있다. NextJS, Tailwind CSS등을 공부하면서 새로운 기술들에 대해 많이 공부할 수 있었고 이제는 블로그 제작을 이어갈 단계만 남았다!

개선해야 할 점

• 공부를 하다보니 계속 욕심이 생겨서 다른 것들을 공부하고 정작 시작은 안하고 있다... 항상 MVP(Minimum Valuable Product)를 기억하고 튜토리얼 지옥에 빠지지 말자.

잘한 점 or 배우게 된 점

• NextJS를 공부하면서 React의 server component의 원리 등을 추가로 공부하면서 이해를 높이기 위해 노력했다.
• 그동안 공부해보고 싶었던 tailwind에 대해 공부했다. 이제 적용을 통해 사용법에 익숙해져야 한다.

8월 계획

7월달을 돌아보니 정말 많은 것들을 공부했던 것 같다. 7월엔 이론 학습를 많이 했다면 8월은 실습 학습을 많이한 달로 기억하고 싶기에 다음과 같은 계획들을 가지고 있다.

• 개인 블로그 배포하기(14일 전까지)
• 전에 했던 4=10 클론 프로젝트 tailwindCSS로 리팩토링하고 배포하기(9월 전까지)
• 이펙티브 타입스크립트 책 공부 시작하기(8월은 3장까지 읽기)