date
Jan 31, 2023
slug
sendee-platform
author
status
Public
tags
Next.js
SSR
summary
비용이 발생하는 시스템인 만큼, FE 스러운 에러처리를 적용한 프로젝트
type
Log
thumbnail
updatedAt
Jul 2, 2023 08:30 AM
category
마케팅 플랫폼, Sendee
📌 Intro
개발동기
- 중 장년층을 타겟으로 하는 마케팅 솔루션의 부재
- 당시 회사에서 애드센스 비용으로 월 5천 이상 태우지만, 전환율이 2~5%에 머문다는 사실에 충격
담당 역할
- 당사 신사업팀, 마케팅 플랫폼 프로젝트 리드 담당
- FE 개발 담당 및 기획, 운영, 디자인 개발 진행
주요성과
- 숭실대학교 Pre 스타트업 지원 선정 및 수료
- 당사 이커머스 재구매율 10% 중반 → 25.3%로 증가
📌 Dev
기획
- 발표자료
개발
기술스택
- NextJS
- 동적 페이지 OG 적용을 위한 SSR 기능 적용이 필요했음
- 이미지 활용이 많은 서비스였으며, 관련 최적화 서비스를 많이 제공해주고 있었음
- React와 DX가 크게 다르지 않으며, 쉽게 SSR 적용 및 Vercel을 통한 배포 용이
- tanstack query
- 고객 정보, 랜딩 페이지, 고객 그룹 등의 페이지에서 다양한 데이터를 관리해야하며, 각각의 정보가 요구하는 양이 많아 사용자가 페이지 이동시 겪는 로딩의 답답함을 캐싱을 통해 해결해고자 했음.
- 기존의 데이터에 CRUD가 발생할 때, 자연스러운 상태 관리가 되기를 원했음. (모달을 통해서 카테고리 생성시, 자연스럽게 카테고리가 추가되는 등)
- tailwind
- 스타일링 코드를 줄이고 개발 속도를 높이고자 했음
- 직접 CSS를 구현하는 것보다 더 높은 브라우저 호환성을 제공 받을 수 있었음
- tailwind가 제공하는 다양한 애니메이션 등을 손쉽게 추가할 수 있음
- emotion
- 가독성과 유지보수에 용이할 것으로 보였음
- 컴포넌트 단위로 스타일링 할 수 있다는 장점
- styled componet 보다는 편리한 SSR 지원
⇒ 빠르고 안정적으로 FE 개발을 할 수 있도록 스택 선택
FE 개발
- Cloudflare Images를 활용한 이미지 서비스 연동
- 카카오톡 링크 미리보기를 위한 동적 OG 생성
- 길이가 긴 데이터 업로드 및 다운로드시 손실 방지를 위한 Promise 객체 활용
FE OG 생성관련
카카오톡 링크 미리보기를 위한 동적 OG 생성
해당 플랫폼은 마케팅 툴이었기 때문에 사용자가 생성한 랜딩페이지를 링크로 공유하였을 때,
미리보기 기능이 있어야 했습니다.
해당 기능 구현에 “그냥 OG 태그만 추가하면 되는거네, 쉽네”라고 생각하고 접근하였지만,
전혀 그렇지 못했습니다.
처음에는 그냥
[id].tsx에 next/head 를 가지고 와서 OG태그를 지정해주고 해당 기능 적용이 끝났다고 생각했었습니다.하지만, 실제로 테스트를 해본 결과,
_document.tsx의 기본 OG태그 값으로 덮어써지고 있었습니다.그렇다보니 동적 페이지에서 해당 기능을 활용할 수 없었고,
저는 그러면…
_document.tsx 도 컴포넌트의 일종이니깐,
렌더링되기 전에 값을 Parsing해와서 그냥 이미지랑 텍스트를 변수로 설정해줘야겠다라고 생각했었습니다.하지만,
_document는 _app 다음에 실행된다는 점과 언제나 서버에서 실행되어 API요청이나
이벤트 핸들러 사용이 불가능했기에 해결책이 될 수 없었습니다.고민 끝에, CSR로는 문제를 해결하기는 어려울 것 같다고 생각했습니다.
왜냐하면 미리보기 기능을 위해서는 HTML파일을 읽어서,
카카오톡에서는 OG태그에 해당 하는 부분을 미리보기로 활용하는 것일텐데,
기본 골격만 내려오고, 이후 클라이언트가 모든 데이터를 JS를 실행시켜 데이터를 채우는 과정으로는 요구사항을 구현하기 어려울 것 같다고 판단했기 때문입니다.
그래서 저는 Next의
getServerSideProps를 활용하여 어렵지 않게 SSR관련 작업을 진행할 수 있었습니다.컴포넌트에서
getServerSideProps 를 활용하여 데이터를 페칭하고,
_app 에서 pageProps로 컴포넌트에서 가져온 데이터를 가져와 OG태그를 지정하여 해당 문제를 해결할 수 있었습니다.BE 관련
- DB 스키마 구조 설계 참여
- API 설계 및 응답코드 구조 설계 참여
- 외부 서비스 연동 로직 설계 참여
📌 ACHV
📌 Screen
