미리보기

설명

매일 하루 하나의 글쓰기 루틴을 하고자 하는 사람에게, 글 이라는 매체가 너무 막연하여 부담되는 이들에게 하루 딱 한줄 만이라도 매일 쓰게 장려하는 자체 제작 서비스 입니다.

사용 기술

TypeScript, React, Next.js (App Router), ReactQuery, Tailwind, Supabase

주요 구현 기능

• 작성한 게시물을 연혁으로 볼 수 있는 잔디밭 형태의 캘린더 구현

• 각 월 단위의 정확한 위치 표현

• 자주 사용하는 단어 수집

• 마크 다운으로 게시물 게시

• 댓글에 달 수 있는 답글

마주한 문제

유저 정보를 가져온 뒤 해당 정보로 추가 데이터를 한번 더 가져와 데이터 요청이 두번 발생

→ Trigger 함수를 이용하여 필요한 데이터를 유저 정보에도 함께 저장하여 결과적으로 데이터 요청을 한번으로 줄임

달린 댓글의 갯수를 표시해주는 기능 구현 중, 답글의 갯수를 한번의 요청으로 가져오지 못하는 문제 발생

→ 게시물에 댓글 count 컬럼을 따로 만들고 Trigger 함수로 대댓글 추가 시 에도 count가 오르게 하여 정확한 댓글 갯수를 가져옴

setTimeout으로 언마운트 타이밍을 수동으로 일일이 지정해 코드가 길어지고 시안성이 떨어짐

→ onTransitionEnd 속성을 이용해 요소가 사라지는 애니메이션이 끝나는 순간을 감지하여 언마운트 하도록 개선

상태를 변경하여 언마운트 시키는 방식으로 불필요한 리렌더링 발생

→ 비표준 속성을 이용해 리렌더링이 필요없는 로직으로 개선

특정 Link로 페이지 이동시 개발 환경에선 문제 없이 동작하나 프로덕션 환경에선 페이지를 찾지 못하는 문제 발생

→ 평행 라우팅으로 라우트 되던 페이지에 충돌이 일어나는 Layout 파일이 있어 해당 파일을 삭제하여 문제 해결

설명

각종 상품에 대한 리뷰를 나누고 기록하는 플랫폼 입니다.

사용 기술

TypeScript, React, Tailwind, Next.js (Page Router), ReactQuery, ShadcnUi

내가 한 일

카카오와 구글 소셜 로그인 연동

소셜 로그인시 필요한 동작을 라이브러리 사용 없이 직접 구현 → Next의 api 폴더 컨벤션을 통하여 리다이렉션시 실행할 로직을 구현하고 RestApi 로 직접 로그인 요청

공용 컴포넌트 구축

tailwind-merge, cva, clsx 라이브러리를 이용해 재사용성 높은 Button 컴포넌트 구축 → cva로 variant,size,disabled 와 같은 props를 정의하고 조건에 따른 loading 컴포넌트도 내부에서 표현

설명

일정 관리 서비스를 제공하는 플랫폼 입니다.

사용 기술

TypeScript, React, Tailwind, Redux Toolkit, Next.js (Page Router), Airbnb Lint

내가 한 일

공통 컴포넌트인 Modal과 Toast 구현

→ 출력 불값과 필요한 props를 전역에서 관리하여 손쉽게 호출 하는 로직 구축

언마운트 애니메이션 표현

→ setTimeout으로 언마운트 시점을 정해주고 애니메이션 표현 이후 언마운트

마주한 문제

기관에서 제공된 백엔드에는 배열에 문자열로만 전달되어 태그 마다 색상을 지정할 수 없음

→ NoSQL을 이용하여 객체 형태로 태그의 색상 정보를 저장