프론트엔드 개발 포트폴리오 | 데스크테리어 커뮤니티 사이트

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘BE MY DESK’를 소개합니다.
프론트엔드 개발 포트폴리오 | 데스크테리어 커뮤니티 사이트

나 다운 공간에서 나 다움을 만들다, 데스크테리어 커뮤니티 사이트. [Be my desk.]


 

⚒️아키텍쳐

notion image

🛠️ 주요기술

  • react
  • nextJS
  • Firebase
  • typescript
  • react-query
 

🔥트러블 슈팅

✅ React-Query 로 서버 데이터 효율적으로 관리하기
Trouble, 무엇을 개선할 것인가
  • 반복적이고 불필요한 data fetching 방지로 인한 렌더링 속도 향상
    • 파이어베이스 제공 onSnapshot - 모든 사용자의 액션을 실시간으로 반영해 data fetching
    • 파이어베이스 제공 getDoc - UI 에 데이터 업데이트 반영하려면 무조건 refetching 필요
    • useEffect 사용으로, 데이터 업데이트 여부와 상관없이 마운팅시 반복적으로 data fetching
  • 서버 data fetching 시, 로딩 및 에러 상태에 대한 처리 코드의 반복
  • 서버 데이터 업데이트 시, UI 반영속도 개선 (한박자 느리게 반응하는 UI)
 
Solution, 어떤 해결책이 있는가
  • 비동기 data 처리 및 상태관리 라이브러리 적용, React Query VS SWR
    • 캐시 무효화 및 data fetching 시점 설정
    • 캐시 데이터 조작으로 UI 업데이트
    • Optimistic Updates 로 UI 반영속도 개선
 
Decision-making, 어떤 의사결정을 내렸는가
  • React Query 사용
    • React Query 에 ~~ 기능을 사용할 것이기 때문
🔖
데스크테리어 공유 커뮤니티의 특성상 실시간으로 게시글 업데이트가 일어날 확률이 낮다. 채팅기능 처럼 다른 사용자의 피드백이 실시간으로 팔로업 하는 것이 필수적이지 않다. → staleTime 과 cacheTime 을 길게 잡아 캐싱 데이터를 오래 유지
🔖
유저가 변화를 감지하는 포인트 : 본인의 액션이 일어났을 때 (좋아요, 스크랩, 팔로우 등) → 캐시 무효화 시점 : 유저 액션 (좋아요, 스크랩 등)이 일어났을 경우
🔖
유저가 현재 보고 있는 페이지에서는 액션에 따른 data fetching 을 최소화하자. → 캐시 무효화 대상 : 액션이 발생한 데이터를 포함하고 있는 다른 페이지의 데이터 데이터 캐시 조작& 클라이언트 상태값으로 data fetching 없이 현재 페이지의 UI 업데이트
🔖
유저의 액션을 바로 UI에 반영시켜 체감 속도를 개선하자. → Optimistic Updates 를 사용해 캐시 조작을 통해 서버 통신과 별개로 UI 상에서 유저 액션을 바로 반영
 
 
✅ 이미지 압축으로 렌더링 속도 높이기
Trouble, 무엇을 개선할 것인가
  • 이미지 최적화 및 렌더링 속도 향상
  • build time 줄이기
Solution, 어떤 해결책이 있는가
  1. nextJS/Image 적용하여 이미지 최적화
  1. 이미지 압축 관련 라이브러리 적용
Decision-making, 어떤 의사결정을 내렸는가
  • 기존 <img> ➡️ next/Image 변환하기
    • next/Image
      요구사항
      기존 <img>로 작업된 부분의 최적화가 필요하다
      선택지
      next/Image를 사용하여 이미지 크기 최적화 적용
      의견 결정
      <img> ➡️ next/Image로 수정
      결과
      notion image
      next/Image를 사용하여 이미지 용량을 줄여 페이지 로딩 속도를 줄이는데 도움이 되도록 함
  • 이미지 업로드 시 이미지 압축하기(라이브러리 사용)
    • browser-image-compression(라이브러리)
      요구사항
      포스팅을 업로드할 때 이미지의 용량에 따라 업로드가 오래 걸리는 사항이 발생함
      따라서 이미지를 핸들링할 필요성을 느낌
      선택지
      • 클라이언트에서 이미지를 압축해서 전달해주기
      • 서버에서 이미지를 리사이징해서 저장하기
      의견 조율
      이미지를 글쓰기 페이지에서 업로드 할 때 이미지를 압축해서 용량을 낮추기로 함
      의견 결정
      클라이언트에서 이미지를 압축시켜 서버(파이어베이스)에 전달하기로 함.
      browser-image-compression 라이브러리를 사용하여 원본이미지에 손상을 최대한 줄이는 방향으로 압축을 진행하였음.
      결과
      notion image
      이미지 압축을 진행하지 않고 고화질의 사진을 업로드해 글을 포스팅하는 경우에는 위와 같이 3,408ms가 걸림.
       
      notion image
      이미지를 압축하여 포스팅을 한 경우에는 1,547ms로 총 45% 이상 시간이 줄어든 것을 확인할 수 있음. 특히 렌더링 시간이 50% 이상 줄어든 것을 볼 수 있음. 따라서 사용자 경험을 향상 시키는 데 도움을 줄 수 있음.
       
      notion image
      이미지를 많이 사용하는 사이트이기 때문에 각각의 이미지 용량도 서버 과부하에 영향을 미칠 것이라고 생각함. 압축을 하지 않고 서버로 전달한 이미지의 용량은 1.23MB임.
       
      notion image
      압축을 진행한 후 서버로 넘긴 이미지의 크기는 811.346KB로 줄었음.
      sharp(라이브러리)
      요구사항
      vercel에서 배포 후 홈페이지 렌더링 속도가 느려 빠르게 개선 해야 할 필요성을 느낌
      선택지
      • 관련 라이브러리를 찾아 장단점을 따져 적용하기
      • next 자체에 이와 관련된 기능이 있는지 찾아 적용하기
      의견 결정
      nextJS에서 제공하는 sharp 라이브러리를 적용하여 이미지 옵티마이즈를 진행하기로 함
      결과
      sharp 설치 후 바로 적용이 되었고, 실제로 페이지 로딩 시간이 줄어듦(측정은 하지 못함)
       
 

💖주요기능

포스트 필터링(트렌트, 직업별(개발자, 디자이너, 학생, 게이머)
  • 포스트리스트 페이지에서 전체글, 트렌드(좋아요 많은 순), 직업별 필터링(개발자, 디자이너, 학생, 게이머)별로 필터링
  • 메인 페이지에서 직업별로 필터링
포스트리스트 필터링
포스트리스트 필터링
메인 필터링
메인 필터링
 
 
검색 1 (포스트의 제목, 내용 검색)
  • 상단 오른쪽 검색창에서 글 제목과 내용을 기준으로 검색 가능
    • notion image
검색 2 (네이버 오픈 API 사용하여 제품 검색
  • 글쓰기 페이지 내 모달 안에서 네이버 쇼핑 검색 가능
    • notion image
 
공유(카카오톡, 페이스북, 링크)
  • 드롭다운 형식의 공유하기 버튼 클릭 시 카카오톡, 페이스북, 해당 페이지 링크 직접 공유 선택 가능
    • notion image
 
좋아요, 스크랩, 팔로우
  • 마음에 드는 게시물 좋아요와 스크랩 가능
  • 계속 소식을 받아보고 싶은 사람 팔로우 가능
notion image
 
마이페이지 내 마이포스트, 스크랩, 좋아요, 팔로우 조회
  • 마이페이지에서 자신이 작성한 게시물, 스크랩 한 글, 팔로우 조회 및 삭제 가능
notion image
 
유저인증(비밀번호찾기, SNS유저 추가정보 입력)
  • SNS 로그인 유저의 추가정보 입력(닉네임 중복검사),
  • 비밀번호 찾기 시 유저 회원타입(SNS/패스워드 회원가입) 검증
notion image
notion image
notion image
 
 
Share article
Subscribe Newsletter
Stay connected for the latest news and insights.
RSSPowered by inblog