Loven 회고

프로젝트 소개

Loven은 이탈리아어로 칭찬이라는 뜻입니다.

2022년을 마무리 하면서 상을 못받은 친구나 주변 친구를 칭찬하기 위해 간단하게 상장을 제작할 수 있는 서비스입니다.

프로젝트 목적

2022년을 마무리하며 친구에게 칭찬하고 싶지만 부끄러워 말하지 못하는 친구들과 학교에 다니면서 상을 받지 못했던 친구들이 있을 겁니다. 이러한 친구들을 위해 칭찬을 해주는 서비스를 만들고 싶었습니다. 그래서 저희는 “상장을 이용하여 센스 있고 재미있게 칭찬하자” 라는 취지로 상장 제작 서비스를 제작하였습니다.

🤔 내 아이디어로 문제가 해결된 것

문제

사용자가 입력한 내용들이 출력할 때 어떻게 나오는지 모릅니다.

해결

미리보기 기능을 추가하였습니다.
입력하면서 상장 미리보기 버튼 클릭 시 상장 프리뷰를 볼 수 있도록 하였습니다.

🤯 트러블 슈팅

문제

컴포넌트를 세분화 하다보니 prop으로 넘기는 과정이 많았습니다.
prop 값 중에 유니온 타입이 있었는데 컴포넌트 렌더링 하는 부분에서 타입을 정확히 알 수 없어 타입 에러가 발생하였습니다.

원인

props로 넘어오는 값인 prize를 유니온 타입으로 해주면 컴포넌트 부분에서 prize.form.prize 값에 접근을 하지 못했습니다.
에러 때문에 유니온 타입을 지정할 수 없어 어쩔 수 없이 any 타입과 인터섹션 타입으로 해결하였습니다.

해결

TypeGuard라는 개념을 배웠습니다.
사용자 정의 타입가드를 생성하여 정확히 타입을 구별하였습니다.


export const isDirectPrize = (
  target: DirectPrizeType | RandomPrizeType,
): target is DirectPrizeType => {
  return (target as DirectPrizeType).content !== undefined;
};

결론

유니온 타입을 검사하려면 사용자 정의 타입 가드를 사용한다.

참고 자료

유니온 타입과 타입 가드

타입스크립트를 사용하면서 편리한 점은 코딩할 때 매우 정확하게 자동완성 된다는 점이다. 코드 편집기에 연동된 타입스크립트 컴파일러가 실시간으로 코드를 분석해서 타입을 추적해준 덕분이다. 타입스크립트 피처링의 멋진 개발 환경이다. 타입가드(Type Guard…

https://jeonghwan-kim.github.io/dev/2021/03/18/type-guard.html

만족한 점

처음으로 팀에서 팀장을 맡았는데 미리미리 계획한대로 실행이 되고 팀원들이 잘 참여해줘서 프로젝트가 완성된 것을 보니 팀장이 팀원들을 잘 이끌어줘야 결과도 좋게 나올 수 있다는 것을 느꼈고, 팀장의 역할을 잘 해낸 것 같아 만족스러웠습니다.

부스 운영하면서 총 89개의 상장이 제작되었습니다.

🤩 성장한 점 & 알게된 점

유니온 타입과 인터렉션 타입 차이점과 TypeScript 타입가드에 대해 알게되었습니다.

NextJS 12와 NextJS 13 차이점에 대해 알게되었습니다.