프론트엔드 데브코스 회고 #5

호벌·2023년 12월 10일

DevCourse

목록 보기

7/10

👀 간단 일기

이번에도 의도하진 않았는데 2주정도만에 작성이 된 것 같다. 저번주에 vue과제하고, 발표준비 하느라 해야할 일들이 날 덮쳐버렸다.. 이번주는 밀렸던 일들을 해결하고 하나씩 정리해가는 시간을 보내기 위해 노력했다. 오늘은 TS에 대한 깨달음(?)과 why? 발표 후기, vue과제를 하면서 추상화 및 상태관리에 대해서 많이 생각했던 내용을 정리해보고자 한다.

🔥TS

타입스크립트.. 정말 적응안되는 언어체계이고 왜 오류가 발생하는지, 타입선언에 대한 추상화는 어떻게 진행해야하는지 정말 고민을 많이했다. 사실 아직 타입스크립트가 생겨났을 때의 의도가 존재할텐데 해당 의도를 정확하게 이해하고 있는지는 잘 모르겠다.

하지만 객체내에서 타입을 지정해주고 객체에서 데이터를 꺼내올 때

깔끔하게 타입을 지정해준다면 에러가 발생하지 않는다는 점
의도하지 않은 값이 저장될 때를 대비하여 타입스크립트에서 오류를 발생시킨다는점

다양한 장점을 과제하면서 느꼈고 더 많은 타입스크립트의 장점들이 존재할 것을 생각하면 더 깊게 학습하고싶다는 생각을 많이했다.

vue과제 타입 관리하는 모습.. 꽤 멋질지도..? 🤔

++ 스타~디 팀 TodoList 리팩토링 과제는 다음 블로그에 포함될 예정입니다. 😁

vue 과제 후기 ⭐️

일단, 기존에 의도했던 설계보다 많이 복잡한 구현이 되었다.

난 정말 포토카드만들의향 없었고... 라우팅 간단하게 처리하려고했지만.. 🙀 모든 구현을 해야했다

~~물론.. 반응형과 세부적인 CSS는 포기해버린..~~

일단 처음에 코드를 작성했을 때 API요청 필요로 하는 코드가 두개였다.

DetailMovie 요청 Axios코드와 MovieList를 요청하는 코드로나눴고 두개로 나눈 이유는 각 코드별로 필요로하는 parameter가 달랐기 때문이다.

물론 해당코드에 대한 문제점은 존재하지 않았지만 만약 프로젝트 단위에서 필요로하는 요청이 20개라면..? 이때 추상화가 필요하다는 걸 알게되었다.

추상화란? 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다.

const URL = `https://omdbapi.com?apikey=${API_KEY}`;

interface RequestBody {
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  path: string;
}

export default async function (req: VercelRequest, res: VercelResponse) {
  const { method = 'GET', path } = req.body as RequestBody;
  const { data } = await axios({
    url: `${URL}${path}`,
    method,
    headers: {
      'Content-Type': 'application/json',
    },
  });
  res.status(200).json(data);
}

내 코드는 이렇게 추상화 되었다. path는 각 요청에서 처리해서 데이터로 받고, 모든 요청에 동일하게 동작할 수 있도록 추상화를 진행했다.

코드를 리팩토링하고 느낀점은 많이 늘었다!? 🙋🏻‍♂️

누군가 보기엔 당연한 코드일 수 있겠지만 나에겐, 아무런 검색없이 필요한 데이터를 정확하게 이해하고 추상화한것은 많이 성장했다고 느낄 수 밖에 없었다.

🎤 why? 발표 후기

너무바쁜 vue강의와 함께 Why? feat.Next.js 에 대한 딥다이브 발표를 진행했다.
~~Next.js의 기술적인 부분은 포함시키지 못했어요...~~

평소에 발표할 때 긴장을 전혀하지 않는 편이라고 생각했는데, 발표준비가 덜 됐다고 생각했는지 시작하기 두세시간 전부터 어마어마하게 긴장이 되기 시작했다.

평소에 나는 선생님에 의해서 기본에 대해 정말 많이 생각한다. 왜 사용하는가? 왜 필요한가? 왜 학습하는가? 왜 그렇게 동작하는가? 에 대한것들이 정말 중요하다고 생각하는데 실질적으로 그렇지 않은 사람들이 너무많다고 생각했고, 나의 생각을 공유하는 시간을 갖고싶었다.

발표자료를 열심히 만들고 발표를 진행하는데 거의 마지막까지 원할하게 진행했다고 생각했는데, 어느순간 내가 뭘 전달하고싶은거지? 😭 라는 생각을 하기시작했다. 최대한 준비한대로 결과를 끝맺긴 했지만, 의도한 바가 정확히 전달되었는가.. 에 대한 의문이 남았다.

그래도 전 동료들과 현 동료들, 많은 데브코스 동료분들이 발표 잘 들었다고 해주셔서 감동이었습니다..‼️

만약 기회가 된다면 한번 더 발표해보고 싶다는 생각을 했다. 어느정도 여유기간을 갖고, 충분히 기술적인 지식과 함께 나의 경험을 전달한다면 조금 더 잘 할 수 있겠다는 생각을 했다.

KPT회고

오늘은 눈에 KPT 회고가 보였기에 KPT회고를 진행하려고 한다

K : Keep

스타~디 팀과 타입스크립트 스터디가 잘 진행되고 있는 것
딥다이브 발표진행
(구) 더기팀과 코테 준비중 !!
노아팀과 프로젝트 사전설계 및 프로젝트 체계 정리

P : Problem

React 강의가 조금 밀려있다.
CSS에 대한 부족함을 굉장히 많이 느꼈다. - vue과제할 때

T : Try

프로젝트 초기세팅에 대한 회의 잘진행해야 될 것 같다
스타~디 팀과 타입스크립트에 대해 two-depth 까지 학습해 볼 것

📕Just 기록

노아팀과 프로젝트에 대한 초기세팅을 많이 진행하고있고, 더 많은 커뮤니케이션을 하기 위해 노력하고 있다. 현재 나의 부담은 프로젝트를 시작한 이후에 만약 소통의 부재가 발생한다면 어떡하지? 였다. 부담을 해소하기 위해 팀원들에게 일부로 한마디 더 시키고, 더 일찍 다른팀들보다 세팅하고있는데 올바른 방향으로 진행되고있는지에 대한 고민이 있다.
지금 당장 나의 선택에 정답은 알 수가 없지만, 나의 선택이 우리팀이 진행하는 프로젝트가 조금이라도 더 옳은 방향으로 진행되었으면 좋겠다.