2023 7월 회고

나는 무엇을 했나!

2023-08-07

한달이 너무나도 빨리 지나간다.. 과제를 끝내고 새로운 과제를 하면서 7월은 정말 금방 지나간 것 같다. 한달 동안 반성아닌 반성을 해보면

여러 지식을 너무 수동적으로 받아들이고 있나?

라는 느낌을 받았다. 강의를 듣고 코드를 따라치고 ,정리하고,, 이런 과정들을 겪을 떄 내가 진짜 머리속에 input이 들어가는 걸까??라는 생각을 많이 했다!

능동적으로 배운 것을 써먹어보고, 삽질도 해봐야 지식이 더 잘 들어오는 것을 알지만 막상 실천을 하진 못했다.

테오님의 학습법 중에 컴퓨팅 사고와 개발 실력 늘리는 공부법

언제나 실습을 통해 개발 훈련을 하시기를 바랍니다. 
개발은 기술을 통해서 무언가를 만들어내는 작업이기에 만들기 않고 공부만 하는 것은 아무런 도움이 되지 않습니다.

라는 문구를 읽고 내가 한달동안 너무 공부만 한게 아닐까...라는 아쉬움이 많이 들었다.

그럼에도 과제를 통해 뭔가를 만드는 경험은 7월의 가장 좋은 점 중 하나였다.

JS

노션클로닝 과제는 블로그에 정리를 했지만, 지금까지 배운 타입스크립트를 입혀서 타입스크립트를 학습하는 방향으로 쓸 수 있을 것 같다.

고양이 사진첩 과제는 state의 validation이 핵심인 것 같다. 나름 꼼꼼히 했다고 생각했는데, 다른 팀원분들의 코드, 멘토님의 리뷰를 통해 더 validation을 추가했다.

그리고 프로그래머스 과제란에서 멘땅에 해딩으로 실제 고양이 사진첩 시험을 치뤄봤는데, 내가 강의를 듣지 않고 시험을 치뤘을 떄 요구사항을 분석하고, 컴포넌트를 강사님의 생각의 흐름대로 구성할 수 있었을까?에 회의감이 매우 강하게 들었다.

실제로 시간적으로 매우 빡셌고, 강의를 듣지 않았다면 더 처참했을 거라고 생각한다.🥲🥲

바닐라 자바스크립트로 컴포넌트를 구성하고 만드는 작업은 종종 해야겠다고 느꼈다.

CSS

나는 여러 사이트 중 스포티파이를 클론했는데, 클론한 스포티파이 CSS와 SCSS를 나름 재밌게 배운 것 같다. 다만 SCSS를 과제에 많이 녹여내지 못한 게 아쉽고, SCSS의 여러 기능을 도입 못하고 무지성코딩을 한 것 같다.

멘토님의 코드리뷰와 팀원들의 코드리뷰로 무지성코딩을 조금이나마 고치긴 했지만 SCSS를 다음과제에는 더 잘써야겠다고 생각했다.

Typescript와 Vue.js

타입스크립트와 Vue.js는 강의를 통해 자세히 배울수 있어서 좋았다. 특히 기본적인 타입선언만을 위해 타입스크립트를 쓰던 나에게, 강의는 매우매우 유익했다.

이펙티드 타입스크립트 책도 사서 읽고 있다.! 하루하루 조금씩 읽고 있고, 책에서도 얻어 갈 것이 되게 많다.

아직 타입스크립트를 잘쓴다고 하진 못하겠지만, 꾸준히 하다보면 언젠가는 잘 쓰지 않을까..??

Vue.js는 되게 새롭다. 리액트만 해서 그런가 낯설기도 하지만 재밌게 배우고 있는 것 같다.

코어자바스크립트 스터디

실행 컨텍스트를 주제로 발표를 했다.!

발표를 준비하면서 코드가 읽혀감에 따라 어떻게 실행컨텍스트가 바뀌는지 과정의 흐름대로 정리를 쭉 한 것 같다.

사실 이렇게 발표준비를 빡세게 한 이유는 첫 발표 때 스터디 팀원이신 지성님이 발표를 정말 알차게 해주셔서 , 나도 정말 알찬 발표를 해야겠다고 다짐했기 때문이다.

코어자바스크립트 스터디는 퀴즈를 푸는 시간이 있는데, 퀴즈를 푸는게 꽤 재밌다..!

멘토님과 1대1 커피챗

학습을 하면서 궁금했던 부분을 정말 다 물어본 것 같다. 정말 감사하게도 멘토님께서 진지하게 내 질문에 답해주셨다..!

최근 했던 고민은

• 인기 있는 기술 스택들을 어느정도로 알아야 하는지?

• 순수 바닐라로 컴포넌트를 만들고 구성하는 과정은 재밌고 신기하다!. 그러나 바닐라로 계속 컴포넌트를 만들고 구성하는 게 언제쓰일까..?라는 의구심도 들기도 하고,,, 그리고 이론적인 자바스크립트를 공부하는 게 더 나을 것 같다는 생각도 든다. 어떻게 바닐라 자바스크립트의 학습을 이어갈지 조언을 듣고 싶다(궁금함)

• 주말에 잡페어를 다녀왔는데, 공통적으로 인사담당자분들이나 개발자분들께서 하시는 말씀이,신입에게는 당장의 퍼포먼스를 내는 것을 기대하는 것이 아니라, 커뮤니케이션 + 발전할 수 있는 사람인지를 중점적으로 본다고 하셨다. 사실 이 이야기만 듣고 너무 막막했다. 취업할떄 최소한의 기술역량 + 커뮤니케이션 + 성장 가능성이 3개가 중요할 거 같은데, 어떻게 어필할 지 도무지 모르겠다…,

요런 고민들을 했는데, 커피챗이나 1대1 면담을 통해 어느정도 해소한 것 같다!

블로그

블로그 개발에 기능을 이것저것 붙이는 과정이 재밌다. 이 순간만큼은 진짜 엄청 몰입을 하게 되는데, 뿌듯하기도 하면서 다음엔 뭘 하면 좋알까?라고 생각하는 게 되게 재밌다!

개발을 하면서 마주친 문제점은 다음과 같다.

Static Site Generation은 빌드 타임에 모든 정적 자원을 가져온다. 따라서 현재 화면에 보이지 않는 정적인 자원들도 모두 빌드타임에 가져오게 된다.

블로그 글을 랜더링할떄 대표이미지도 정적인 자원이라 빌드타임에 가져가는데, 현재 화면에 있는 이미지가 아니더라도 결국 모든 이미지 를 가져온다.

위 그림도 현재 화면에 걸려있지 않지만, 초기에 가져오는 것을 볼 수 있었다!

비록 지금은 자원이 얼마 없어서 괜찮지만,
정적자원이 어마어마하게 많아지면 이 방법이 바람직한가??

라는 생각을 계속 했다.

그럼 이미지 간 우선순위를 줘서 해결할 수 있지 않을까?? 라는 생각도 이어서 하게 되었다.

하지만 전체 블로그 중 몇 개만 선별해서 우선순위를 높게 가져가는 것은 명확한 방법이 아니라고 생각했다..

아직 이거다! 라는 해답을 찾지 못했지만, 다음의 방법을 사용했다.

초기 5개의 글만 가져와서 랜더링을 한다.
그 후 추가적인 글은 버튼을 누를떄 클라이언트 요청에 의해 받아오고 그려준다.

초기 불러온 글은 app/src/page.tsx에서 , 클라이언트 요청에 의해 랜더링되는 글은 따로 컴포넌트를 만들어서 분기했다.

클라이언트 요청의 처리를 위해 매우매우 간단하게 API ROUTES를 만들어 처리했다.

API Routes

그래서

http://localhost:3000/api/posts?start=1&end=5

이런식의 쿼리 파라미터로 응답을 받으면 아래와 같이 응답을 내리게 해주었다.

Lighthouse CI

블로그의 lighthouse의 점수를 쉽게 확인하기 위해 lighthouseCI와 깃헙 액션을 사용해서 push시 확인하게 하였다.

Lighthouse CI를 깃헙액션에 적용하기 이 글을 참고해서 개발을 했던 것 같다.

전체 블로그 글의 모든 URL을 확인하게 하고 있는데 너무 느리지만, 점수를 편하게 볼 수 있는 장점이 있어서 매우 좋은 것 같다.

정말 너무너무 빨리 7월이 지나갔다. 앞으로 보완해야 할 점을 정해보자면

• 능동적인 학습하기(배운 거 조금이라도 써먹어보기!)
• 컨디션 조절 잘하기
• 매순간 최선을 다하기

인것 같다..!

8월도 화이팅