미리보기

기술 스택: React, Next.js, TypeScript, Tanstack-Query, Chakra UI

로그인 & 회원가입 페이지

• 로그인 & 회원가입 페이지 UI 제작

• safari 환경의 크로스 브라우징 이슈 처리

• 핸드폰 번호 중복 검사 로직 개발

• 로그인 유지, 리프레시 기능들을 적용하며 UX 개선

홈화면

• 홈화면 UI 제작

• 주기적인 배너 UI 업데이트에 대해 SDUI 적용으로 DX 개선

채팅 페이지

• 채팅 페이지 UI 제작

• 웹소켓을 사용한 실시간 메시지 수신/발신 기능 개발

• S3 멀티파트 업로드를 통한 대용량 파일 업로드 처리

• 메시지 전송/전달 시간 처리 로직 개발

개선 사항

• React의 state로 이뤄지던 form 유효성 검사를 react-hook-form과 yup으로 변경

• 중첩 삼항 연산자를 사용한 스타일 적용 에서 객체 리터럴 방식으로 리팩토링

• URL query에 명시된 프로젝트 id 난수화 도입

• 버그 예방과 컨벤션 유지를 위한 husky와 lint-staged를 도입

• Eslint import/order를 사용해 순서 자동화 적용

• 프로젝트 최적화 진행

  • 트리쉐이킹 진행(부분 import, 미사용 코드 삭제, 동일 기능의 함수 병합)

  • Next/dynamic 적용

  • 페이지 초기 로드 속도 단축(평균 기준 866.8 ms 801.2 ms)

  • 번들 사이즈 25% 감소 (541kb 406kb)

기술 스택: React, Redux, Redux-saga, SCSS

채팅 페이지

• text 기반 채팅에서 이미지 발신, 수신 기능 개발

• 채팅방에 업로드된 이미지를 편하게 볼 수 있도록 개발

• 대화 시기에 따른 메시지 시간 표기 로직 개발

사이드바-급매물

• 선택한 급매물 지역에 대한 알림 수신 개발

  • 서비스 개발 이후 신규 유저 재방문 순 증가( 28.94% 35.38%)

• GA를 통한 지역별 클릭 수 통계 분석

사이드바 - 그래프

• d3 라이브러리를 사용한 최저 실거래가 / 최고 실거래가 그래프 유지보수

집내놓기 페이지

• 부동산 매물 등록을 진행하며 거래 유형과 부동산 옵션을 선택 적용할 수 있는 페이지.

• 조건 필터 및 거래 금액 입력 시 최근 거래가 노출 로직 구현

• 비정상적인 가격 입력 시 거래 등록 방지 로직 구현

기업 소개 페이지

• 매매, 전세 거래 시 발생하는 수수료 계산 기능 구현

• 페이지 이동 버튼과 계산기의 거래유형 버튼에 GA 작업을 통해

  
  유저가 이용하는 서비스 통계 결과 공유

초기 로딩 타임 개선

• 웹 페이지 초기의 로딩 시간 단축

  • React.lazy & Suspense를 사용한 코드 스플리팅

  • 이미지 lazy loading

  • 이미지 로드 개선안을 문서화