팀원들과 커뮤니케이션을 통해 서비스 제작하는 것을 좋아합니다. 회의를 통해 적극적으로 새로운 아이디어를 제안해 서비스를 제작하고 문제점을 공유하고 해결하는 과정에서 보람을 느낍니다.
회고를 통해 성장합니다. 프로젝트를 끝내고 블로그에 회고를 기록하고 있습니다. 회고에 배운점 작성을 통해 이전보다 얼마나 성장하였는지 확인하며 보완점 작성을 통해 부족한 부분을 보완해 나가고 있습니다.
기술의 사용 이유를 최우선으로 고려합니다. 팀의 목표와 필요에 맞게 가장 효율적인 방법을 찾기 위해서 프로젝트 진행 시 팀원들과 기술 사용 이유를 최우선으로 고려한 후 기술을 도입해왔습니다.
Github | https://github.com/Park-min-hyoung
Email | qkralswgud1324@gmail.com
+ 경력
+ 프로젝트
독서 기록 및 도서 추천 플랫폼 웹 사이트
도서 검색 및 추천, 독서 기록, 독서 모임 운영을 한 곳에서 할 수 있는 독서인들의 맞춤형 서비스
사용 기술
- Next.js, Typescript, Axios, Recoil, React-Query, Tailwind CSS
담당 파트
- React-Query의 useInfiniteQuery Hook으로 무한 스크롤 구현
- 도서 검색 결과 렌더링 소요 시간 단축을 위해 무한 스크롤 구현
- useInfiniteQuery Hook으로 제작한 이유: server 데이터를 server state로 관리하고 캐싱을 통해 API 중복 요청 방지해 UX 개선
- 카카오 소셜 로그인 구현
- 소셜 로그인을 선택한 이유: 간편한 로그인 절차로 UX 향상, 다양한 기기에서 일관된 로그인 경험 제공
- Access Token + Refresh Token 통해 사용자 인증 작업 처리
- Refresh Token을 함께 사용한 이유: 보안 강화 및 유효 기간 내에 Access Token을 갱신시켜 사용자 로그인 유지
- 비로그인 유저의 로그인 페이지 접근에 불편함을 느껴 로그인 페이지 접근 모달 컴포넌트 제작
- 페이지 새로고침 시 전역 상태(사용자 로그인 여부)가 초기화되는 recoil의 특징을 보완해 인증 상태 유지되도록 구현
- 팀 개발 생산성 향상 작업
트러블 슈팅 및 개선
- 무한 스크롤 마지막 리스트 데이터 수정 안되는 에러 해결
- 에러 해결 이유: 데이터가 즉각적으로 업데이트되지 않는다면 UX에 치명적일 것이라는 판단
- 에러 발생 원인
- 스크롤 바닥 감지 태그에 의해 fetchNextPage(다음 리스트 데이터를 fetch하는 InfiniteQuery Hook의 함수) 호출
- 더 이상 가져올 데이터가 없는 상황에서 함수 호출로 인해 에러 발생
- 해결 방법: hasNextPage(추가로 fetch 할 데이터 여부를 boolean 값으로 return)를 통해 fetch할 데이터가 있는 경우에만 fetchNextPage 호출
- 비 로그인 유저가 유저 전용 페이지 url을 통해 접근 시 사이트가 멈추는 에러 해결
- 에러 해결 이유: 웹 사이트의 신뢰성 및 UX 저하에 큰 영향을 줄 수 있다고 판단
- 에러 발생 원인: Access Token이 없는 비 로그인 유저가 Token을 필요로 하는 API 요청 → 데이터 fetch 에러 발생
- 해결 방법: 비 로그인 유저가 유저 전용 페이지로 접근 시 이전 페이지로 redirect 시키는 접근 금지 컴포넌트 제작
- 최적화 작업, 준비된 환경에서 좋은 서비스 제공이 가능하다고 생각합니다.
- 초기 로딩속도 개선: 담당 페이지 평균 성능 점수(91점 → 99점), LCP(1.9s → 0.8s)
- SEO 개선: 담당 페이지 평균 SEO 점수(80점 → 100점)
배포 링크 - 현재 서버 비용 관련해 논의하고 있는 상황이라서 서버가 닫힌 상태입니다.
음악 추천 및 대결 웹 사이트
잘 알려지지 않은 숨은 명곡을 공유하고 대결과 투표를 통해 더 좋은 곡을 알아가는 서비스
사용 기술
- Next.js, Typescript, Axios, Recoil, React-Query, styled-components
담당 파트
- Error 선언적 처리
- React-Query의 onError 메소드를 사용해 대결 신청페이지에서 발생 가능성이 있는 error를 선언적 처리
- alert창을 통해 사용자에게 error 내용 인지 및 이전 페이지로 redirection 시켜 UX 개선
- 음악 재생 공통 컴포넌트 구현
- 대결 페이지에 2개의 음악 정보가 있을 때 특정 노래 재생 시 나머지 노래는 재생되지 않도록 구현
- 제작 전 디자인을 보고 이벤트 버블링에 의한 에러 예상 후 선제적 처리
- 음악 카드 내에 재생 버튼이 있는 디자인을 보고 이벤트 버블링 에러 예상
- 음악 카드 리스트 페이지에서 경험한 에러 해결 경험을 기반으로 에러를 사전에 방지해 에러 해결에 소요되는 시간 단축
트러블 슈팅 및 개선
- 이벤트 버블링에의한 에러 해결
- 에러 내용: 음악 카드 리스트 페이지에서 음악 카드의 대결 신청 버튼(클릭 시 대결 신청 페이지로 이동) 클릭 시 추천 글 상세 페이지로 이동하는 에러 발생
- 에러 발생 원인
- 음악 카드의 대결 신청 버튼이 음악 카드 컴포넌트의 하위 컴포넌트
- 이벤트 버블링에 의해 음악 카드 컴포넌트의 이벤트(추천 글 상세 페이지로 이동)가 마지막에 발생
- 해결 방법
- 상위 컴포넌트가 event.defaultPrevented값을 true로 반환하도록 버튼 클릭 시 하위 컴포넌트에서 event.preventDefault 메소드 호출
- 상위 컴포넌트에서 event.defaultPrevented값이 true일 때 이벤트 전파 금지시켜 에러 해결
- 좋아요 기능 관련 에러 해결
- 에러 내용
- 특정 음악 상세 페이지에서 좋아요 클릭 후 음악 카드 리스트 페이지로 이동
- 음악 카드 리스트 페이지에서 해당 음악 카드 확인하면 좋아요 상태 업데이트 안 됨
- 에러 발생 원인: 상위 컴포넌트(음악 카드)의 props 데이터를 하위 컴포넌트(좋아요 버튼)에서 useState로만 관리
- 해결 방법: 하위 컴포넌트에서 useState와 useEffect를 같이 사용해 props update시 즉각적으로 state가 update 되도록 처리해 에러 해결
아빠들의 고민 상담 커뮤니티 웹 사이트
아버지들을 위한 자유로운 소통과 공감 그리고 상담과 위로를 받을 수 있는 공간을 제공하는 서비스
사용 기술
- React, Typescript, Axios, Recoil, React-Query, styled-components
담당 역할
- 사용자간 원활한 커뮤니케이션을 돕기 위해 알림 기능 구현
- 커뮤니티에 글 작성 후 다른 사용자가 댓글 및 좋아요를 했을 경우 알려주는 기능이 없어 불편함을 느낌
- 페이지에서 새로고침 시 사용자가 새로운 알림을 받을 수 있도록 구현
- ‘새로운 알림 조회’ 기능을 구현해 실시간으로 업데이트 되는 알림 데이터에 대응
- 무한 스크롤 구현을 통해 모바일 화면 초기 로딩속도 개선 및 안정적인 UI 제공
- 모바일 화면에서 기존 페이지네이션 방법 철회 → 로딩 시 필요한 데이터만 fetch해 로딩속도 개선
- 스크린 사이즈가 576px 이하가 될 때 페이지네이션 방법은 사용자가 조작하기 어려운 UI → 모바일 친화적 UI로 변경
트러블 슈팅 및 개선
- React-Query 도입을 통해 API 중복 호출 에러 해결
- React-Query를 도입한 이유: 캐싱을 통한 API 중복 호출 방지, 데이터 fetch 및 후속 작업을 간편하게 처리 가능
- 해결 방법: useState, useEffect Hook으로 작성된 API 호출 관련 코드를 제거하고 useQuery Hook을 사용해 리팩토링
- API 중복 호출 방지 및 성능점수 개선(80점대 초반 → 90점대 후반)
- 미디어 쿼리를 활용하여 다양한 디바이스 대응
- 작업 이유
- 모바일에서 화면이 깨지는 등의 사용이 어려운 문제 해결
- 다양한 디바이스에서 동일한 UI와 UX 제공
- 레이아웃 수정 및 무한 스크롤 구현을 통해 UI, UX 개선
- React-Hook-Form을 통한 비제어 컴포넌트로 폼 관리해 렌더링 최적화
- 로그인, 회원가입 페이지의 Form 데이터 입력 시 전체 컴포넌트 리 렌더링 되는 문제 발생
- React-Hook-Form의 register를 사용해 비제어 컴포넌트로 관리하여 불필요한 리 렌더링 방지 및 코드를 간결하게 관리
+ 활동
2023.06 ~ 2023.08
(2개월)
블로그 포스팅 스터디
- 프로젝트 진행 시 사용한 기술 선택 이유, 학습한 지식, 문제 해결 경험 기록
- 프로젝트 회고를 통해 배운점과 보완점 기록
2022.10 ~ 2023.03
(6개월)
프로그래머스 프론트엔드 데브코스
- Vanilla JS, React 강의를 통해 웹 사이트 제작에 필요한 개념 숙지
- 2번의 프로젝트를 통해 협업 시 필요한 기술 및 의사소통 방법 숙지
- 코드리뷰 문화 경험 및 커피챗을 통해 기술적 역량 보완
프론트엔드 지식 발표 스터디
- CS, 웹, JS, React 지식 학습 및 발표
- 발표 및 질의응답 활동을 통해 좋은 의사소통에 대한 고민
+ 교육
2015.03 ~ 2022.02
인제대학교 컴퓨터공학부 전공
+ 자격증
2022.06
정보처리기사