[월간 회고] 프론트엔드 데브코스 회고 (10.19~11.18)

저번 달의 목표 달성

1. 기록하는 습관 가지기
2. "왜"?라는 생각 가지기
3. 건강 챙기기, 운동 열심히 하기

다음 3가지를 목표로 했는데 1.5개 달성한거 같다😓 한달 동안 운동을 거의 못했던거 같다... 졸업 작품이라는 핑계 아닌 핑계로 운동을 가지 않았다.. 그리고 기록하는 습관은 점점 익숙해지는 것 같다 항상 조금씩 기록하고 내가 기록한 내용을 공개하려고 노력하고 있다 ㅎㅎ

한달 간 기록

강의

1 ~ 2주차 : 노션 클로닝 개인 프로젝트

첫째주, 둘째주 모두 노션 클로닝 프로젝트를 진행했다. Vanila JS만을 이용해 노션을 클로닝 하는 프로젝트였다... 요구사항을 구현하는데 정말 어려웠다 처음 노션 페이지를 봤을 때는 나름 간단한(?) 프로젝트라고 생각을 했다. 그러나 요구사항을 하나씩 정리하다 보니까 정말 많은 기능이 있었다.. 그리고 어려움을 많이 겪었다..

🔗노션 프로젝트 github

🔗노션 프로젝트 배포링크

 

1. x-username 값을 header에 넣어 API 호출하기

고유한 x-username 값을 설정해서 API를 호출하여 값을 넣고 가져오고 해야했다..

headers: {
        "Content-Type": "application/json",
        "x-username": "baekjunwon",
      },

 

다음과 같이 header에 x-username 값을 넣어줬는데 문제는 안에 데이터가 아무것도 없는 것이었다.. 데이터는 넣을 수 있는데 초기 구성부터 데이터를 보면서 개발하고 싶어서 당황했다 그래서 DUMMY DATA를 사용하려다가 팀원들에게 혹시 좋은 방법이 있는지 여쭤봤는데 인혁님이 나의 x-username에 데이터를 넣어주신다고 해서 정말 편했다..

너무 감사합니다👍

 

2. 모듈과 history API로 SPA 구현

모듈과 history API로 SPA 구현하는 것은 정말 신세계 였다! SPA 구현하는 것은 프레임워크를 사용하여야 가능한줄만 알았었는데 모듈화를 시키고 history API를 사용하여 SPA를 구현할 수 있었다. 각 각 기능을 컴포넌트를 export하여 필요한 곳에 import 해주면서 컴포넌트화를 시켰습니다. Vanila JS에서 export, import를 사용하는줄은 몰랐다...

history API의 pushState 메서드를 통해 현재 URL 상태에 따라 라우팅해주는 함수를 구현하여 SPA를 구현했다.

지금까지 정말 자바스크립트의 일부분만 알고 있던거 같다 이렇게 실습과 강의를 들어보고 "모던 자바스크립트 딥다이브"책을 보니 책이 다르게 보였다. 정말 자세하고 좋은 책이다

 

3. 컴포넌트화

이번 프로젝트는 이전 과제에 비해 규모가 커서 컴포넌트를 나누는데 어려움을 많이 겪었던거 같다. 항상 과제나 프로젝트나 개인 공부를 진행할 때 컴포넌트를 어디까지 나누고 어느 기준으로 나눌지 고민하는게 너무 어려운 것 같다.. 이번에도 나름 많이 나눴다고 생각했는데 팀원분들 코드 리뷰를 하면서 더 나눠도 좋았을 것 같다는 생각이 들었다

3 ~ 4주차 : JS 실습, SCSS, TypeScript

1. JS 실습

JS 무한 스크롤실습을 하면서 쓰로틀링 이라는 개념을 공부했다.

 

쓰로틀링(Throttling)

• 스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생하는데  scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 엄청 렉이 걸리는 경우 쓰로틀링을 사용한다.

실습을 하면서 따라서 구현해봤지만 아직 내것으로 만들지 못한거 같다. 강의를 듣고 실습을 하면서 우리가 편하게 사용하는 웹에 디테일한 부분까지 다양한 기술이 들어갔다는 생각을 해봤다.. 프론트엔드는 공부할수록 더욱 어려워지는거 같다

 

2. SCSS

CSS 심화 강의를 들으면서 이전까지 레이아웃을 배치할 때 flex를 주로 사용하였지만 float, grid를 사용할 수 있다는 것을 배웠고 그 외에 Transform을 사용해서 CSS로 3D를 나타낼 수 있는 방법을 배웠다. CSS의 속성이 정말 많다는 것을 배웠고 아직 모르는게 정말 많다는 것을 느꼈다.

SCSS를 공부하면서 CSS를 조금 더 정돈되고 깔끔하게 사용할 수 있다는 생각을 했다 @mixin을 이용한 재사용은 정말 신세계였다. 그리고 자주 사용하는 속성들은 변수로 선언하여 재사용하면 정말 좋았다

 

3. TypeScript

타입스크립트 강의를 들었는데 어려웠다... 자바스크립트를 알고 있다면 그래도 조금 이해하기 편할거라고 들은거 같은데 어려웠다.. 아직 익숙하지 않아서 그럴수도 있겠다는 생각이 들었다. 예제 코드를 따라해보고 했는데 에러가 정말 많이 발생해서 놀랐다. 그리고 타입스크립트를 사용하기 전에 환경설정해야할 것이 정말 많았다. 자바스크립트와 비슷할 줄 알았지만 다른점이 많았다

과제

🔗JavaScript validation 과제

🔗SCSS 유튜브 클론 과제

특강

프로그래밍의 효율적 학습 - 이웅모님

headless cms를 이용해 토이프로젝트하기 - 김태희 강사님 

CSS 레이아웃 핵심 기법 소개 - 박영웅 강사님 

TS 구성 옵션 추가 정리 - 박영웅 강사님

 

스터디

모던 자바스크립트 DeepDive 스터디를 통해 강의에서 이해가 잘 되지 않았던 부분이나 어려웠던 부분을 다시 공부했고 정말 도움이 많이 되었다. 그리고 팀원들과 배웠던 부분 몰랐던 부분을 공유하니까 두 번 공부할 수 있게 되는 것 같다

🔗 스터디 github

코드리뷰

팀원들과 과제 또는 스터디에 대한 코드 리뷰를 진행하는데 이번에 리뷰할 과제와 프로젝트는 규모가 커서 더 어려웠던 것 같다. 코드를 작성하는 것보다 다른 사람의 코드를 이해하고 수정하는 것이 어렵다는 것을 더욱 깨닳았다. 팀원분들 코드리뷰를 하면서 나도 많이 배우는 것 같다 너무 깔끔하게 코드를 작성하시고 각각 다르게 코드를 작성하니까 코드를 작성하는 시야가 넓어지는 것 같다

후기

첫 한 달에 비해 이번 한달이 정말 순식간에 지나갔다.. 프로젝트 때문에 시간이 정말 빨리 간거 같다. 학습을 하면서 성장을 하긴 했지만 아직 많이 부족한거 같다. 졸업 프로젝트가 끝나고 심적으로 시간적으로 여유가 생겨서 프론트엔드 공부에 집중해야겠다. 코딩테스트가 정말 많이 부족한거 같아서 코딩테스트 공부도 하고 React를 시작하기 전 JavaScript, TypeScript 공부를 탄탄하게 해야겠다는 생각이 들었다. 지난 달의 목표에서 달성하지 못한 부분 중에서 운동하기를 꼭 달성해야겠다. 작년까지만 하더라도 일주일 최소 5번은 운동을 했었는데 대학생활과 공부를 한다는 거의 운동을 안했다 덕분에 살이 정말 많이 쪘다...😑 그리고 기록을 작성하는법을 조금 바꿔봐야 겠다. 이전에는 TIL을 통해서 강의를 통해 배운 것들을 정리하는 느낌이었는데 앞으로는 배운 것들을 정리하고 내가 잘 몰랐고 궁금했던 부분을 따로 모아서 따로 기록해봐야 겠다는 생각이 들었다.

앞으로 목표

1. 건강 챙기기, 운동 꼭 열심히 하기
2. 포트폴리오 만들기
3. 코딩테스트 꾸준하게 문제 풀기
4. 사이드 프로젝트 - 개인 블로그

이번 달에는 다음 목표를 꼭 지켜서 한층 더 성장한 개발자가 되고 싶다.. 아직 러닝커브가 낮다고 생각해서 힘든 시간을 보내고 있는데 건뎌내서 러닝커브가 가파를 수 있도록 열심히 노력해야 겠다