🥞 오늘 한 일

• 최종 프로젝트
  • 기술적 의사결정 제작
  • 공구템, 자취템 동적 메타데이터 설정
  • 이미지 warning 해결 (여유 있을 때마다 진행 중)
  • 마이페이지 주소 input readonly 설정
• 기술면접 연습
• 2차 UT 테스트 배포

브로셔 제출

우리 팀의 브로셔를 제출했다. 나는 기술적 의사결정 제작을 맡았다. 내가 제작한 내용은 아래와 같다.

기술적 의사결정

Framework

• Next.js
  Next.js를 사용한 이유는 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)이 SEO에 최적화되어 있으며, Route Handler를 사용하여 CORS 오류를 방지할 수 있습니다. 또한 파일 기반 라우팅으로 직관적이고 간편한 라우팅 구조를 가지고 있고, 이미지 최적화, 자동 코드 분할 등 장점이 많기 때문에 선택하게 되었습니다.

Programming Language

• TypeScript
  동적 타이핑을 지원하는 자바스크립트와 달리 정적 타이핑을 지원합니다. 이를 통해 컴파일 시점에 미리 오류를 체크할 수 있고 intellisense(자동 완성) 기능으로 오타로 인한 실수 역시 줄일 수 있기에 선택했습니다.

Database

• Supabase
  데이터베이스와 API를 비교적 쉽게 구축할 수 있어 개발에 집중하기 용이합니다. 또한 RLS 기능으로 보안 문제를 해결할 수 있으며, RTSP 기능을 사용하여 채팅 기능을 제작할 수 있기 때문에 사용했습니다.
• Supabase realtime
  즉각적인 실시간 업데이트가 가능하고, 무료로 사용 가능하고, 간편하게 설정할 수 있다는 부분에서 공구템 채팅으로 Supabase Realtime을 선택했습니다.

State Management Libraries

• Tanstack Query
  data caching을 통해 불필요한 네트워크 요청을 방지합니다. 또한 data fetching 요청이 있을 때 loading, error, success 상태를 얻을 수 있어 손쉽게 네트워크 상태를 제공받을 수 있고, 네트워크 통신 실패 시 자동 refetch를 지원하는 등의 장점이 있어 선택했습니다.
• zustand
  경량 라이브러리로 보일러 플레이트가 적고 애플리케이션의 성능에 미치는 영향이 최소화되며, 사용하기 간편합니다.

Styling

• Tailwind CSS
  컴포넌트의 생성과 관리가 쉬워 신속하게 개발이 가능합니다. 표준화된 유틸리티 클래스 집합을 사용하기 때문에 디자인이 일관성 있게 유지됩니다. Next.js에서 적극적으로 권장하는 라이브러리이기도 하고 모바일 반응형 작업에도 간편하여 선택하게 되었습니다.
• notiflix
  유저 친화적인 UI와 간편한 셋팅 기능을 제공하기 때문에 선택하게 되었습니다. 다양한 옵션을 커스터마이즈할 수 있고 맞춤형 알림을 효율적으로 구현할 수 있습니다.
• toast ui editor
  유저 친화적인 UI와 텍스트의 컬러 변경이 가능하고, 마크다운 뷰어까지 같이 설정할 수 있어 Toast UI Editor를 선택하게 되었습니다.

API

• 카카오톡 공유 API
  그저 링크 복사로만 공유하는 것보단 대부분의 사람들이 사용하는 카카오톡으로 공유하는 api가 있으면 서비스에 대한 접근성이 훨씬 좋아질 것으로 예상되어 선택했습니다.
• 포트원 결제 API
  토스 API 대신, 다양한 결제 수단을 지원하는 KG이니시스를 사용할 수 있는 포트원 API를 선택한 이유는 포트원 API가 폭넓은 결제 옵션을 제공하여 고객의 다양한 요구를 충족할 수 있기 때문입니다. 초기 설정 과정에서 더 많은 시간이 소요될 수 있는 점은 단점으로 고려되었지만, 포트원 API는 강력한 보안 기능과 안정성을 갖추고 있어 결제 시스템의 신뢰성을 높일 수 있다는 점에서 선택하게 되었습니다.
• 다음 주소 검색 API
  공구 신청하기, 랜덤박스 결제에서 필요한 주소 검색 버튼 부분에서 유저가 사용하기에 익숙하면서도 편리하고 공통된 디자인을 보여주기 위해 다음 주소 API를 선택하였습니다.

기술면접 연습

리액트의 상태가 불변성을 유지하는 이유는 무엇일까요?

리액트의 상태가 불변성을 유지하는 이유는 상태가 언제 어떻게 변경되었는지 추적하기가 쉬워지기 때문입니다. 만약 직접 변경한다면 무엇이 언제 어떻게 변경되었는지 추적하기 쉽지 않을 것이기 때문에, 불변성을 유지하도록 설계가 되어있습니다.

리액트의 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

폼을 예를 들어 설명을 드리겠습니다. 제어 컴포넌트는 onChange 이벤트를 통해 입력할 때마다 데이터를 매번 상태에 저장해 관리하는 방식이고, 비제어 컴포넌트는 상태에 저장하는 게 아니라 onSubmit 이벤트 같은 폼의 제출 때만 입력 값을 확인합니다. 제어 컴포넌트의 특징은 모든 데이터를 입력마다 제어할 수 있지만 코드가 좀 길어질 수 있고, 비제어 컴포넌트는 제출 때만 입력값의 검증을 실행할 수 있지만 코드가 단순해집니다.

flux 아키텍처를 설명해주세요.

flux 아키텍처는 단방향 데이터 흐름을 기반으로 하는 아키텍처입니다. 흐름을 순서대로 말씀드리자면, 유저는 view에서 action을 dispatch하고, dispatch된 action은 store로 전달되며, store는 reducer를 사용해 action을 판별하고 상태를 업데이트 합니다. 상태가 업데이트 되면 observing하고 있던 모든 view에게 내용을 알리고, view는 그걸 기반으로 리렌더링합니다.

🍽️ 트러블 슈팅

이미지 warning

has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

웬만한 이미지에서 전부 이 오류가 났다. 때문에 해결 방법을 찾아보았는데...
일단 해결 방법 자체는 찾았다. 방법은 다음과 같다.

<Image
  src="/img/main-visual-group.png"
  alt="혼자 살 때 라는 건 우리가 필요한 법"
  width={0}
  height={0}
  priority
  className="w-[500px] h-auto"
/>

만약 className의 width나 height에 하나라도 auto가 들어간다면(...) width 및 height를 0으로 지정해준다.

<Image
  src="/img/main-visual-group-icon-white.svg"
  width={79}
  height={79}
  alt="별표"
  className="w-[79px] h-[79px] absolute left-[3%] lg:left-0 top-[10%]"
/>

auto가 아닌 고정된 px가 들어갈 경우에는 width 및 height를 기존처럼 적어주어도 warning이 뜨지 않고 잘 작동한다.
일단 해결 자체는 했지만 검색으로도 도저히 이해가 가지 않아서 튜터님께 찾아가서 말씀드리고 원인을 알아보았는데, 명확한 해답이 나오지 않았고 대다수의 사람들이 "그냥 이건 버그니까 이렇게 해결해"라는 식의 이야기만 있어서, 그냥 버그로 결론을 내리고 일단 해당 warning은 무시하기로 했다. 명확한 해결이라고 하기엔 애매하지만, 기억해두고 싶어 일단 작성한다.

🍴 돌아보기

정신없이 지나간 날이었다. 내일은 휴일이긴 하지만 캠프가 막바지이기 때문에 조금이라도 코드를 발전시킬 곳을 찾아봐야겠다.

🇰🇷 내일 목표

• 최종 프로젝트
  • 불필요하거나 재사용되는 코드 리팩토링