📝 도입 배경 본 프로젝트 (삐삐:Best Interior)는 인테리어 정보 교환을 위한 커뮤니티로, 고화질의 사진 리소스를 사용하는 작업이 많았고, 서버에서 고용량의 사진 데이터를 받아오는 과정에서 발생 할 수 있는 사용자 불편함을 고려해야 하는 상황이었습니다. 또한, 고화질의 사진 리소스들은 불러오는데 많은 네트워크 비용이 들고, 장애 발생 가능성 또한 고려해야만 했습니다. 이러한 상황을 고려하여, 2가치 최적화 방안을 도입하였습니다. 🔨 최적화 방안 - (1). Pagenation 구현 고용량의 사진 데이터를 받아오면서 발생할 긴 로딩을 방지하기 위해, Pagenation을 구현하였음 각 페이지(쇼룸, 팁)에 12개의 개시글 단위로 Pagenation을 구현하였으며, 이를 통해 리소스가 큰 요청들을..
📝 배경 본 프로젝트 (삐삐:Best Interior)에서는 인테리어 관련 게시글, 팁관련 게시글을 작성할 수 있으며, 사용자는 댓글과 답글을 작성 할 수 있도록 기획하였다. 여기서 댓글은, 말그대로 게시글의 댓글, 답글은 댓글의 댓글이다. 🚨 문제 상황 - (1). 새로 작성한 댓글의 답글이 작성이 안되는 버그 새로운 댓글을 작성할 경우, 답글작성이 안되는 오류가 발생하였다. 오류: TypeError: Cannot read property 'push' of undefined 하지만, 새로고침을 할경우에는 정상적으로 답글이 작성되는 현상임을 확인하였음 🔍️ 원인 파악 에러 메세지에서 확인이 가능하듯이, 배열이 아닌 undefined에 push를 하려고 해서 발생하는 오류임을 파악 // 수정 전 코드 co..
📝 배경 본 프로젝트 (삐삐:Best Interior)에서는 서버가 클라이언트를 인증하는 방식 중 하나인 JWT를 이용하여 로그인 기능을 구현하기로 함 또한, 토큰은 로컬스토리지에 저장하는 방식을 택했으며, 이렇게 저장된 토큰은 매 요청 헤더에 담아 적절한 인증 과정을 거친 사용자인지 판단하는 인가(Authorization)를 구현함 이를 위해, axios 통신시 interceptors 를 이용하여 헤더에 토큰 정보를 담아 보내는 token.js라는 컴포넌트를 만들었으며, token 컴포넌트를 활용하여 useAxios라는 커스텀훅을 만들어서 통신로직을 추상화하고 재사용성 및 코드 가독성을 향상시키고자 했음 🚨 문제 상황 - (1). api 요청시 헤더에 엑세스토큰을 담아 보냇으나, 403에러 발생 로그인..
📝 배경 프로젝트가 50% 정도 진행되었을때, *S3를 통해 클라이언트 빌드파일을 배포하고 테스트를 진행하였다. 서버는 EC2를 통해 배포하였음 분명 로컬에서 테스트 했을 때에는 api호출이 정상적으로 이루어졌던 상황이었음 * S3 란? Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조..
