🎂 2001.11.08 📤 [email protected] 💾 github : @yeongipark 📕 블로그 : 블로그 링크

"완벽함을 추구하며, 신뢰받는 개발자가 되겠습니다.”

프론트엔드 개발자로서 빠르게 성장할 수 있었던 ****비결은 저의 완벽주의적인 성향이라고 생각합니다. 맡은 일은 항상 끝까지 책임지고 완벽하게 마무리하려 노력합니다. 작은 디테일 하나까지 놓치지 않고, 사용자 경험과 코드의 품질을 모두 만족시키기 위해 끊임없이 고민합니다.

또한, 새로운 기술이나 개념을 배우는 과정에서도 완벽하게 이해하고자 노력하며, 이를 제 방식대로 기록하고 정리합니다. 이를 통해 매일 성장하고 있으며, 동료와 함께 문제를 해결하고 발전해 나가는 것이 저의 가장 큰 목표입니다.

Project

**CNS

( Company Network Service )**

FE 2명, BE 2명, PM 1명

2024.02 ~ (진행중)

Github : @CNS_Github

CNS : 👑CNS 사용하기

기업용 프로젝트 관리 및 소통 서비스🛜
프로젝트 문제 해결 과정

☺️CNS 문제 해결 과정 보러 가기
사용 기술 스택
- React, React Query, Zustand , HTML, SCSS, Javascript
역할 및 성과
- 프론트엔드 70% 기여
  - 사용자 검색 최적화
    - 사용자 검색 기능을 최적화하기 위해 디바운스(debounce) 기술을 적용
    - 매번 입력 요청마다 서버 요청 발생 → 최종 입력 후에만 서버 요청이 이루어지도록 개선하여 1번의 서버 요청으로 줄임
  - 게시글
    - React Query의 useinfinitequery와 intersectionobserver를 이용한 무한스크롤 구현
    - 게시글 CRUD 구현
    - 게시글 작성시 이미지 미리보기 기능 구현
    - 게시글 댓글, 대댓글 CRUD 구현
    - 서버로부터 받아온 댓글 정보에서 멘션된 부분을 식별하고, 이를 클릭 가능한 링크로 변환하는 기능을 구현
  - 마이페이지
    - 프로필 사진 변경 및 삭제
    - 이력서 등록 및 삭제
    - 게시물 모아보기
    - 게시물 필터 오래된 순, 좋아요 많은 순, 최근 순 필터 기능 구현
  - 멘션
    - 댓글, 게시글 작성에서 “@” 입력시 멘션 기능 활성화 기능 직접 구현
  - 실시간 알림
    - **Server Sent Events(SSE)**를 이용한 실시간 알림 기능 구현
      - SSE 사용 이유 보러 가기
  - 프로젝트 관리
    - 달력을 이용한 프로젝트 일정 관리를 위해 FullCalendar 라이브러리 사용
    - 프로젝트 일정 관리 구현
  - 할 일 관리
    - 할 일의 상태를 drag and drop으로 변경하기 위해 react-baeutiful-dnd 사용
- 사용자 경험 최적화
  - 사용자 경험을 향상시키기 위해 로딩 화면 대신 Skeleton UI를 사용
  - React Query를 도입해 데이터를 캐싱함으로써, 한번 접속한 화면의 데이터 로딩을 최소화
  - 사용자의 요청에 즉각적으로 반응하기 위해 React Query의 useMutation 옵션인 onMutate를 사용하여 낙관적 업데이트 적용

BignnerFit

FE 3명, BE 2명, DESIGN 1명

2024.07.05 ~ 2024.08.04 (1개월)

Github : @BignnerFit_Github

헬스/관리/운동 등에 무지한 사람들 위해 나에게 맞는 홈트 영상 추천/운동 종목 추천 해주는 서비스 🏃
프로젝트 문제 해결 과정

☺️BignnerFit 문제 해결 과정 보러 가기
사용 기술 스택
- React, Zustand, Styled-Component, Javascript , HTML
역할 및 성과
- 팀장, 프론트엔드 팀 리더
  - 출석률
    - 달력에 출석한 날짜를 표시하기 위해 react-calendar 라이브러리 사용, 다양한 라이브러리를 비교하며 최적의 라이브러리 선정
    - 출석률을 반 도넛 그래프 형태로 표시하기 위해 recharts 라이브러리 사용, 여러 라이브러리를 비교하며 최적의 라이브러리 선정
  - 홈트 영상
    - Youtube Data API를 사용해 사용자에게 추천할 홈트 영상의 정보를 사용
  - 챌린지
    - 메인 화면 매일 해야할 미션의 목록 표시
    - 애니메이션 기능을 추가하여 사용자에게 재밌는 경험 제공
  - 알림
    - 사용자의 알림을 모아서 보여줌
    - 읽은 알림과 안 읽은 알림을 state로 관리해 실시간으로 상태 변화
  - 접근성 제어
- 자주 사용되는 fetch, post 로직을 커스텀 훅으로 분리하여 재사용성을 높이고 가독성을 높임
- 디자이너의 기획에 99% 일치하는 결과물을 완성
- 코드 리뷰를 통한 코드 개선
- 프로젝트 전반적인 기획, 설계, 개발 일정 계획 설정
프로젝트 KPT 회고

"완벽함을 추구하며, 신뢰받는 개발자가 되겠습니다.”

Project

**CNS

BignnerFit

Tech