기술 스택: Next.js, TypeScript, Next-auth, Tailwind CSS, Recoil, SWR

구성원

• PM(1)
• FE 개발자(1)
• BE 개발자(1)

담당업무

• 피그마를 이용하여 사용자 UI/UX 기획 및 디자인 시안 제작.
• CMS 포함하여 전체적인 사용자 인터페이스 클라이언트 구축.
• JAVA 개발자가 구축한 백엔드 서버와 REST API를 통해 통신하여 효율적인 데이터 처리와 사용자 요청을 구현.
• 자체 개발한 대량 메일 발송 서비스를 구축.

성과

• Next.js와 TypeScript를 활용하여 클라이언트 애플리케이션을 개발하여 빠르고 안정적인 사용자 경험 제공.
• Recoil을 이용해 전역 상태 관리 및 템플릿 관리 최적화, 애플리케이션의 유지보수성을 높임.

경험

다수의 이메일 템플릿을 관리하기 위해 Recoil로 전역 상태 관리를 도입.
하지만 배열 형식의 데이터를 관리하다 보니, 사용자 화면에서 템플릿을 업데이트할 때마다 템플릿들이 깜빡이는 문제가 발생. React에서 제공하는 memo나 useMemo를 사용해 해결해 보려 했지만 메모리를 사용해야하고 각각의 값을 전역 상태로 관리하는 것은 코드가 복잡해지고 비효율적이라 판단.

데이터 관리는 부모 계층 컴포넌트에서 처리하되, 자식 컴포넌트의 값을 수정할 때는 props로 전달받은 값이 아닌 local state를 사용, 각 템플릿에서 아웃포커싱될 때 부모를 업데이트하도록 구현하여 확장에는 개방적이며 변경에는 폐쇄적인 패턴으로 컴포넌트의 리렌더링 최소화와 더불어 속도 측면에서도 개선.