미리보기
기본 정보

React, Next.js, Typescript 기반 프론트엔드 개발자 정태진 입니다. 문제 해결을 위한 기술 습득을 즐기며 문제 해결의 결과를 팀원과 공유하는것에 즐거움을 느끼는 개발자입니다. 코드 컨벤션, merge전 팀원모두 코드리뷰 진행, 이슈 템플릿, 풀리퀘스트 템플릿 등 규칙을 직접 만들어 협업을 리드한 경험이 있습니다. 다양한 직군, 사람들과 협업을 진행하며 의사소통의 중요성, 협업의 즐거움을 깨달았습니다. 이러한 협업을 통해 여러 사람들과 하나의 목표를 향해 나아가는 것이 얼마나 강력한 동기부여가 될수있는지 깨달았으며 목표를 달성하기 위해 서로 노력하고 이해하며 성장하는 팀의 일원이 되고 싶습니다.
프로젝트
paw-paw
팀 프로젝트 | FE 3명, BE 3명, 디자이너 3명
2023.08. ~ 2023.10.
반려동물을 기르는 사람들을 위한 커뮤니티 플랫폼
📎 Deploy: paw-paw
📎 Github: paw-paw frontend repository
🖥️ Test Id: pawpaw@test.com
🖥️ Test Password: 12341234aa
📁 사용 기술: React, Typescript, React-Query, Next.js(app dir), tailwind-css
구현기능
- 실시간 채팅방 전체기능 구현 (실시간 채팅, 이미지 업로드, 스케줄 생성, 참여, 삭제 등...)
- 채팅방 리스트를 랜더링하는 커뮤니티 페이지 구현,채팅방 생성모달 구현
- Next.js Intercepting Routes,SSR,Suspense를 활용한 검색모달 구현
문제해결
- 채팅 참여자 리스트 실시간 반영
- 방장위임, 유저 퇴장, 초대 등 특정 이벤트 발생시 유저리스트가 최신화 안되는 문제 발생
- 유저퇴장, 초대등 WebSocket 이벤트 발생시 React-Query의 invalidateQueries를 사용하여 실시간 유저리스트 최신화 해결
- Web API를 사용한 문제 해결
- Viewport가 작은 기기의 경우 Datepicker 컴포넌트의 하단이 짤리는 문제 발생
getBoundingClientRect를 사용하여 컴포넌트 위치를 유저의 Viewport와 비교하여 컴포넌트가 화면을 벗어날 경우 상단으로 렌더링 되도록 구현하여 해결 - 이전채팅 조회시 스크롤 유지 안되는 문제 발생
WebAPI ResizeObserver를 사용하여 스크롤유지 문제해결
- Viewport가 작은 기기의 경우 Datepicker 컴포넌트의 하단이 짤리는 문제 발생
- React 적절한 Hook을 사용한 문제해결
- Datepicker 컴포넌트 다이나믹 렌더링시 아래로 깜빡이는 문제발생
useLayoutEffect를 사용하여 유저의 Viewport에따른 컴포넌트의 위치를 렌더링 이전에 계산 하도록하여 해결
- Datepicker 컴포넌트 다이나믹 렌더링시 아래로 깜빡이는 문제발생
- 웹 성능 최적화
- 초기에 바로 필요하지 않은 컴포넌트들은 dynamic import 적용하여 번들 최소화
- Layout Shift 최적화를 위하여 스켈레톤 컴포넌트 적용 CLS 점수 0.12 -> 0.012 개선
Light house를 사용하여 웹 성능 측정후 부족한 부분 최적화 진행
Side-Effect
팀 프로젝트 | FE 3명, BE 3명
2023.04. ~ 2023.06.
개발자, 디자이너 등 사이드 프로젝트를 쉽게 시작하고 자랑할 수 있는 커뮤니티 플랫폼 입니다.
📎 Deploy: Side-Effect
📎 Github: Side-Effect frontend repository
📁 사용 기술: React, Typescript, React-Query, Next.js(page dir), styled-components,Redux-toolkit
- 메인 페이지 애니메이션 구현
- react-intersection-observer를 사용하여 특정 viewport 교차시 애니메이션 동작 기능 구현
- 회원가입/로그인 개발
- 사용자의 편의성을 위한 전역 모달 회원가입/로그인 컴포넌트 개발
- Redux-toolkit을 활용한 전역 상태관리
- 회원가입 유저 정보, 회원가입 모달 View 상태관리 구현
- 다크모드, 토스트 알림 컴포넌트 상태관리 구현
- Axios interceptor를 활용한 HTTP 요청 모듈화
- 액세스 토큰 만료시 리프레시 토큰을 사용한 자동 재발급 개발
- 리프레쉬 토큰 만료시 자동 로그아웃 처리
- 사이드 프로젝트 지원자,팀원 관리 기능개발
- 사이드 프로젝트 지원자와 팀원 각각 관리할수있는 모달 컴포넌트 개발
- React-query의 useMutation을 사용한 실시간 서버데이터 반영
React-query select를 활용한 서버데이터 커스텀
포트폴리오
기술 스택
JavaScript, Next.js, TypeScript, react-query, redux-toolkit, tailwind-css, HTML/CSS
교육
중원대학교
대학교(학사) | 국제통상학과
2015.02. ~ 2021.02. | 졸업
코드스테이츠
사설 교육 | 프론트엔드
2022.08. ~ 2023.02. | 졸업