백엔드 개발 포트폴리오 | 캠핑 정보 공유 커뮤니티

내일배움캠프 4기 주특기 트랙 Node.js 과정 수료생 최종 프로젝트 '내일바로캠핑'을 소개합니다.

Aug 16, 2023

Contents

✏ 아키텍처 👑 주요 기술 👀 기술적 의사 결정 📌 트러블 슈팅 🔎 주요 기능

캠핑장 & 캠핑 용품 & 캠핑 요리 레시피 등 모든 정보를 한눈에 볼 수 있는 커뮤니티 사이트

캠핑을 좋아하는 사람도, 관심 없었던 사람도 쉽게 접근할 수 있도록

다양한 사람들이 경험을 공유하며 함께 어우러지는 장을 마련하는 것이 목표입니다!

서비스 둘러보기 : 링크

Github Repository : 링크

✏ 아키텍처

👑 주요 기술

로그인

인증 : JWT

인가 : passport

FrontEnd

NestJS MVC
HTML / CSS / JS
EJS
AXIOS

BackEnd

NestJS

배포

검색

elasticsearch

crawling

puppeteer
cheerio
scheduling: nestjs Task Scheduling

👀 기술적 의사 결정

elastic search cloud : 기존 like로 검색을 하게 되면 쿼리 증가로 인한 사이트 속도 저하 및 정확한 검색 결과 산출이 어려운 문제가 있었고, 서버에 부담이 가지 않으며 빠르고 정확한 검색 결과 산출을 위해 사용

puppeteer

카카오 지도 api

11번가 api

cheerio

scheduling

passport

xml2js


craling -> nestjs task scheduling 사용
todo :
Cloudwatch (schedule) + lambda  이용해서 크롤링 하도록 변경 하는것을 계획중.
-> 백엔드 서비스 api 서버와 결합도를 없애기 위함

📌 트러블 슈팅

캠핑장 검색 시 데이터가 많아 로드뷰에 과도한 로딩 시도


문제 : 기존 like로 검색을 하게 되면 쿼리 증가로 인한 사이트 속도 저하 및 정확한 검색 결과 산출이 어려운 문제 발생

과정 : 
	-> 서비스는 각각의 도메인 (캠핑장 / 레시피 / 상품) 별 mysql table 이 나눠져 있음 
	-> 3번의 쿼리가 필요함
	-> like 검색으로 전방일지가 아닌 단어 포함으로 검색 할 경우 index 를 사용하지 않아 레이턴시가 길어짐

결과 : 역인덱싱을 제공하는 es 를 통해 통합 검색을 구현하여 속도가 빨라짐

페이지네이션으로 로딩 시간을 줄여 빠른 데이터 처리 진행 → rdb 의 인덱스를 사용 못함 %%

캠핑장 검색결과에 로드뷰가 아닌 캠핑장 이미지 삽입시도


문제 : puppeteer 라이브러리로 요청 시도 하였으나 너무 대량의 요청이 발생하여 status 429 발생

과정 : 확인 결과 해당 api에서 분당 최대 200회 요청이 가능하며 200회 초과 시 status429 반환 확인됨


결과 : 분단 200회 미만으로 요청하기 위해 크롤링 시 시간 설정을 하여 분당 120회 요청으로 변경


문제 : 카카오 지도 api를 이용하여 캠핑장 정보를 받아온다.
       최초 화면 구성 시 로드뷰로 구성하였으나 로드뷰가 지원되지 않는 지역의 캠핑장이
       많은 관계로 UX가 좋지 않았고, 로딩되는 데이터가 너무 많은 문제가 발생하여 이미지를
       출력하기를 원하였으나 api에서 이미지를 제공하지 않음

과정 : 이미지 크롤링을 시도하였으나 axios로 get 요청시 xhr 통신이 막혀있는 문제로 ssl 
       인증 에러가 발생하여 curl 라이브러리로 재시도 하였으나 로컬에서 동일한 에러가 발생
			 로컬에서 테스트 진행하기 위해 로컬환경에서 작동 가능한 라이브러리를 검색하여
			 puppeteer 라이브러리로 요청 시 이미지 크롤링이 가능함이 확인됨


결과 : puppeteer 라이브러리로 요청 시 이미지 크롤링이 가능하지만 이미지 크롤링 속도가
       과하게 느린 문제 확인되어 추가 문제 해결 방법 고민 중

Api 스케줄러로 주기적으로 실행시, 변함 없는 데이터는 그대로 유지 변화가 생긴 데이터는 delete 메소드로 db를 비우고 실행


문제 : api 호출시 insert 메소드로 인해서 기존에 데이터가 존재하더라도 중복으로 입력되는 문제가
			 발생하여 delete 메소드로 데이터 삭제 후 insert를 진행하였으나 불필요한 삭제가 일어남

과정 : 변경이 없는 데이터는 삭제할 필요가 없다고 판단하여, On duplicate key update를 적용

결과 : 이미 가져온 데이터 중 변경되지 않는 것으로 판단되는 데이터는 더이상 요청하지 않도록
			 구현하는 것을 계획중이며 어떤 방법이 있는지 검색 중

회원 탈퇴


문제 : 회원 탈퇴 버튼을 누르면 너무 쉽게 회원 탈퇴가 되어 당황을 했다는 사용자 피드백

과정 :
		-> 회원 탈퇴 시 프론트에서 bcrypt 처리 된 유저의 비밀번호를 불러와 현재 입력된 비밀번호를 암호화 시켜 
			서로 일치하면 회원 탈퇴를 진행하도록 처리 시도
		-> 프론트에서 위와 같은 처리를 하게 되면 암호화 로직이 공개적으로 보여지기에 백에서 처리하도록 시도


결과 : 백에서 현재 입력된 비밀번호와 db에서 불러온 유저의 비밀번호를 대조하여 일치하면 회원 탈퇴를 진행


문제 : 회원 탈퇴 진행 시 조인 했을 때 실제 사용자가 없기 때문에 게시물 조회 실패

과정 : 
		-> 회원 탈퇴 시 탈퇴한 유저가 작성한 게시글, 댓글, 리뷰와 좋아요 까지 모두 delete 되도록 구현하였으나
			사이트 목적인 소통, 즉 커뮤니티의 기능이 상실된다고 판단
		-> 탈퇴한 사용자를 delete -> softdelete 처리
		-> 게시물 조회 시, typeorm 특성 상 기본적으로 delete_at = null 조건을 추가함


결과 : typeorm 기능 중 withDeleted = true 옵션을 사용하여 삭제된 유저정보도 join 되도록 함

frontend에서의 페이지네이션


문제 : 모든 게시글을 select하여 frontend로 전달 후 페이지네이션을 구현하였으나 2페이지 선택 부터는 빨랐으나
			첫페이지에서 모든 게시글을 가져오기에 성능이 떨어져 속도가 저하됨

과정 : 
		-> backend에서 findAndCount 함수를 통해 한 페이지에 가져올 데이터의 제한 갯수와 
				이전 요청의 데이터 갯수를 계산하는 페이지네이션을 구현
		-> 계산된 값으로 select 해서 가져오는 값의 범위를 축소시킴

결과 : backend에서 구현한 페이지네이션을 적용한 결과, 속도가 향상되었음

좋아요 / 댓글 카운트


문제 : 초반에는 update 문을 사용하여 like + 1로 구현을 하였으나
			많은 사용자 부하테스트 결과 count를 제대로 인식하지 못하는 현상이 발생함  
			 => 동시성 문제

결과 : typeorm의 createselectquery를 사용하여 좋아요 / 댓글 갯수를 세는 카운트를 구현

비로그인 유저


문제 : 비로그인 시 게시글, 리뷰 작성 시 글쓰기는 가능하지만 저장을 눌렀을 때 undefind 가 뜬다는 사용자 피드백

과정 : backend에서 UseGuards를 활용하여 user정보를 반환하도록 설계

결과 : 비로그인 시 axios get을 통해 유저 정보가 없을 시 로그인 페이지로 이동하게 구현

검색 기능 like `%${검색어}%`로 기능 구현하여 불필요한 정보가 불러와짐


문제 : like `%${검색어}%`을 이용하여 검색 기능 구현을 시도 하였으나 불필요한 정보가 불러와짐

결과 : elasticsearch, kibana 도입으로 보다 빠르고 완벽한 검색 기능 구현

elastic search → elastic search cloud로 변경


문제 : elastic search 도입하였으나 서버 사양 부족으로 로컬 elastic search 구현 불가

과정 : 
		-> opensearch 를 사용하려 시도하였으나 비용적인 문제가 발생(상용 프로젝트가 아니기 때문),
		-> elastic search cloud 14일간 무료 평가판 제공됨

결과 : elastic search cloud 로 변경하여 서버의 부담을 없앰