🔗Link

GitHub | 디자인

🔧Stacks

Next.js TypeScript S3 Axios styled-components

👥 프론트 3人, 백엔드 1人 🙋🏻‍♂️My Part : FE 개발, 기획, 디자인

소개

<aside> ✔️ 반려동물과 여행할 수 있는 여행지, 음식점, 숙소, 산책로를 공유하는 커뮤니티

</aside>

반려동물 관련 다양한 정보를 한 곳에서 보고 소통하고자 하는 사용자를 위한 프로젝트입니다.

• Editor페이지, Intro페이지, 공용 컴포넌트(Custom Button, Seo) 개발
• 첫 페이지 로딩 시간을 단축하고자 Next.js의 dynamic import를 사용해 lazyload 적용함
• Axios를 사용하여 네트워크 요청 모듈화
• 최대한 재사용 컴포넌트로 개발하고 color를 상수화 하며 DRY 원칙을 적용함
• AWS의 S3를 사용하여 Base64로 인코딩된 사진의 url을 저장하고 짧아진 url을 반환하여 서버 부담 최소화함

느낀 점

• Tui의 Editor 라이브러리가 SSR을 지원하지 않아 Next.js의 dynamic import를 사용해 클라이언트에서 렌더링을 하여 해결하였습니다.
• S3에 사진을 등록하려고 하면 CORS가 발생하였고 AllowedOrigins 헤더를 허용해줌으로 해결하였고 CORS와 SOP에 대한 개념을 익혔습니다.
• 기획, 디자인, 기능 회의를 하면서 개발자는 코딩만 하는 것이 아닌 기획부터 의견을 정리하고 프로젝트 전반을 이해해 소통하는 것도 개발자의 업무이구나 라고 느꼈습니다.
• 혁신이란 불편함을 느끼고 개선하는 것이라고 몸소 느끼게 되어 내 주변부터 혁신을 해서 미래에는 많은 사람들에게 혁신의 경험을 새기고 싶다고 느꼈습니다.

Base64로 인코딩되는 사진

글쓰기 페이지에서 Editor에서 사진을 붙여넣었을 때 사진이 Base64로 인코딩되는데 Base64 인코딩 방식은 모든 시스템에서 공통으로 사용하는 ASCII 형태로 변환하여, 다른 시스템에서도 동일한 ‘이미지’를 보여줄 수 있기 때문에 Base64인코딩을 사용하지만 문자열의 길이가 너무나도 길어져 서버의 부담을 줄 것이라고 판단하였고 사진을 붙여넣음과 동시에 AWS의 S3에 저장하고 S3에서 짧아진 url을 반환하도록 하였습니다.

변경 전