프론트엔드 데브코스 5기 회고 MIL 3 - 반성

김영현·2023년 12월 25일
2

TIL

목록 보기
71/129

서론이라 쓰고 반성문이라 읽는다

...반성이 많은 달이다.
저번 MIL에서 Try부분에 적어놓은 것들을 거의다 지키지 않았다😥

  1. TS프로젝트 : TS로 과제를 두번이나 진행하고 이번 협업시 TS를 써야하다보니 todoList단계를 할 필요가 없어져서 하지 않았다.
  2. 일찍 일어나기 : 드문드문 일찍 일어나긴 했는데, 늦게 일어난 날이 더 많다. 반성반성...사실 이제부터는 9시~2시코어타임이라 강제로 기상하긴 한다.
  3. 용어와 지식을 정확히 알기 : 이건 잘 하고 있다. 특히 공식문서를 보는 실력이 늘었다. 남의 코드를 리뷰하면서 코드를 보는 눈이 조금 뜨였다.
  4. 알고리즘 1일 1문제 : 거의 안했다. 바빠서 그랬다기엔 게임도 하고 쉴때도 있었으니 변명밖에 안된다...ㅠㅠ

반성은 요까지...

계속 반성만 하면 앞으로 나아가질 못한다. 그치만 반성은 대단히 중요하다! 반성이 필요없다는게 아니다.
앞으로 이런일이 없도록 노력하자...ㅠㅠ


이번달엔 무엇을 배웠는고?

Vue

리액트를 배우기 전 뷰에 대해 배웠다. 매우 심도 깊게 파고든 건 아니었지만, 사용 경험이 좋았다.
특히 기존 html/css/js구조를 쏙 빼다박아서 그런지 몰라도 러닝커브가 적었다.
또한 상태관리 라이브러리도 매우 간단했다.(pinia기준)

뷰의 장점은 레거시 환경의 일부분만 vue로 바꿀수 있다는 점이라는데, 왜 그런지 알것같다.

배울때는 왜 배우나 싶다가도 막상해보니 재밌어서 공부를 더 하게됐다.

vercel, serverless function

Vue과제할때 사용했던 기술들이다.
vercel은 정적페이지와 Serverless function을 제공해준다.
정적페이지에 serverless function기능을 활용하여 살아있는 페이지로 보이게 할 수있다.
서버리스 함수는 백엔드의 기능을 프론트도 사용할 수 있게 도와준다. 즉, 서버에서 수행될 기능을 프론트에서 작성 가능하다.
보통 함수의 요청이 들어오면 그제서야 컨테이너 || 가상머신을 생성하여 함수를 실행하고 반환해준다고 한다.
이 덕분에 api호출할때 네트워크탭에서 api키 노출을 피할 수 있게 되었다.

컴포넌트 => 스토어(네트워크 탭에서는 여기가 보인다) => 서버리스 => 실제 API주소

Ts

타입스크립트! 이 또한 Vue과제를 진행하며 처음 배우게됐는데, 쉽지않아보였다.
하지만 하다보니 결국 타입을 지원하기 위한 언어라는 걸 깨닫고는 조금 편하게 사용 할 수 있었다.(아직까지 as키워드를 사용하는 등 사소한 문제가 존재하지만...)
귀찮게 느껴졌지만 오히려 이제는 타입선언이 없으면 불안하고 이상해보인다ㅎㅎ
유틸타입과 제네릭의 활용이 Ts의 정수 아닐까 싶다.

React

대망의 리액트. 옛날에 한 번 겉핥기로 배워본적이 있어 템플릿 자체는 어렵지 않았다.
대신 재사용 가능한 훅, 컴포넌트등을 배우는게 굉장히 어려웠다. 특히 어디까지 추상화 해야하는지가 제일 어려웠다.
props의 갯수가 너무 많으면 안될것같고...또한 children프롭스를 사용하여 재사용가능하게 컴포넌트를 만드는 건 바로 이해되질 않았다.
하지만 이제는 얼추 이해됐음!

리액트를 배울땐 아래와 같은 기능도 같이 배웠다.

  • contextApi : 상태관리가 아닌 전역상태 공유가 중점인 리액트 내장 기능이다. 많은 라이브러리에서 이를 채택했다. 아마 Provider라고 명명되어 최상단(App.tsx)를 감싸는 형태라면 거의 contextApi를 사용할 것 같다.
    재사용 가능한 컴포넌트를 만들때도 유용하다.
  • emotion : styled-component처럼 컴포넌트에 스타일을 입힐 수도있고 css를 객체단위로 만들어 다룰수도 있다. 확실히 styled-component보다 경험이 좋았다.
  • storybook : 컴포넌트 단위로 쪼개어 바로 볼 수있는 컴포넌트 개발도구다. 딱히 정의할 단어가 없는듯? 테스트(그냥 상태 수치 돌려보기 ㅋㅋ)도 되고 컴포넌트에 어떠한 props가 있는지 확인하기 매우 좋다. 또한 각 상태별 컴포넌트를 보여줄 수 있어서 굉장히 유용했다. 문서화도 쉬워서 자주 사용할 것 같다.

확실히 대세 프레임워크라 그런지 배운 내용이 많았다.

NextJs, Strapi, GraphQL

여기는 자세히 배우지 않았다. 대신 느낀점을 적어보자면...

  • NextJs : 라우팅도 템플릿으로 지원하고 서버측 렌더링도 지원하여 괜찮아보인다. 아직까지 서버렌더링의 필요성을 느낄만한 프로젝트를 해보지 못해서 잘 모르겠다. 여기저기서 본 장단점만 알고있음
  • Strapi : 코드 없이 백엔드를 짤 수 있게 도와준다(nodejs의 koa 기반이다). GUI로 짤 수 있어서 대단히 좋지만...결국 코드를 짜야하긴함ㅎㅎ 그래도 보일러플레이트가 줄어들긴한다.
  • GraphQL : 경험이 아주 좋았던 쿼리 언어. restAPI와 자웅을 겨루는데, 백엔드가 이를 지원한다면 무조건 도입하고 싶긴 하다. 특히 필요없는 데이터를 가져오지 않는다는점이 굉장히 맘에든다. JSON처럼 생긴 문법으로 데이터를 갖고올수 있어서 편리하다.

절반이나 지났다

이는 곧 수료까지 절반밖에 남지 않았다는 걸 의미한다. 그 절반이 지나면 프로여야한다. 코드를 치고 돈을 받는 사람말이다.
쉽게 생각하지말자. 쉽게 포기하지도 말고 있는 힘껏 노력해보자!

profile
모르는 것을 모른다고 하기

2개의 댓글

comment-user-thumbnail
2023년 12월 25일

매일 꾸준히 회고 작성하시는 모습 보고 많이 자극받습니다. 다음 달도 화이팅입니다!!

1개의 답글