Project.

2022.04 ~ 2022.05

서비스 소개.

수행 인원.

React: 2명, Spring: 3명, Design: 2명

담당 역할

실시간 채팅&알람 구현
- Socketjs-client 와 stompjs 를 사용하여 websocket 을 지원하지 않는 브라우저 사용 유저 대응
무한스크롤 구현
- scrollHeight, scrollTop, clientHeight 로 스크롤 계산
- throttle 을 사용하여 일정 시간 내 api 호출 횟수 제한하여 성능 최적화
배포 자동화 작업 (github Actions)
성능 최적화 작업
- input 컴포넌트 분리 후 React.memo 적용
- 이미지 lazy loading 설정
- 웹폰트 형식 woff2, 웹이미지 png 사용
→ lighthouse performance 점수를 44 → 95 로 개선
반응형 웹 구현(미디어 쿼리)

트러블 슈팅.

이슈 구독한 웹소켓 주소에서 실시간 알람 메시지 중복 수신

→ 해결 컴포넌트 unmount 시 웹소켓 구독 해제 처리를 하지 않아 발생한 문제. useEffect clean-up 함수로 웹소캣 구독 해제하여 해결
이슈 컴포넌트 리랜더링 시 웹소켓 client object 중복 생성

→ 해결 웹소켓 client object 를 useEffect 에서 선언하고, ref 객체에 웹소켓 client object를 할당하여 ref 객체 활용

얻은 경험.

서비스 전반 과정 경험
사용자의 피드백을 반영한 UI/UX 개선 경험
- 사례 랜딩 페이지의 인트로 애니메이션 로드 시 스킵버튼이 없어 기다려야 하는 게 불편하다는 의견 → 스킵버튼 추가
디자이너, 백엔드 엔지니어와 프로젝트 협업 경험

기술 스택.

React, Redux-toolkit, Sockjs-client, Stompjs, webRTC, MediaStream Recording API, AWS, Github

Work Experience.

Dfinery 개발실 Console 팀 (front-end)

2022.09 - 2023.01 (4개월)

데이터 분석 및 개인화 마케팅 플랫폼 Dfinery 유지보수

사내 온보딩 과제로 설문지 시스템 구현
- 로그인 기능
- 설문지 생성/수정/삭제/조회 기능
- 설문 참여 기능
- 설문 결과 조회 기능 (테이블, 원/그래프 차트)
Dfinery 유지보수
- 애드 파트너 카드리스트 화면 개발
  - 애드파트너 검색(영/국문)
  - 추천/이름/활동순 정렬
  - 카드뷰/테이블뷰 컴포넌트 작업
- 인앱메시지 설정 시 인앱이벤트 하위 프로퍼티 추가
  1. 이벤트 옆에 이벤트 프로퍼티 조건 추가 추가
  2. ‘추가’ 클릭 시 이벤트 프로퍼티 관련 조건 추가

기술 스택.

Vue.js, VueX, SCSS, TypeScript, C#, ASP.NET