미리보기
기본 정보
사용하는 스택들의 장점을 어떻게 잘 활용할 수 있는지 고민하는 개발자입니다. 단지 최신 트렌드라고 해서 사용하는 것이 아닌, 어떠한 장점때문에 해당 스택들을 사용하는지가 중요하다고 생각합니다. Next.js의 서버컴포넌트를 활용해 ssr을 적용하여 초기 페이지 로딩 속도 향상시키고 metaData를 활용해 seo점수 향상 및 이미지 최적화를 진행하였습니다. 또한 react-query를 활용해 서버-클라이언트 데이터 동기화 및 캐시 데이터를 통한 UI 업데이트 반응속도를 개선하였습니다 .
기술 스택
React, Next.js, TypeScript, JavaScript, tailwind-css, react-query, Jest, Cypress
프로젝트
같이 달램
코드잇
2024.09. ~ 2024.10.
다양한 모임을 탐색하고 참여하며, 직접 모임을 개설하고 리뷰를 생성할 수 있는 서비스
사용 스택 : next.js typeScript react-query jest cypress react-query tailwind axios
팀원 : 프론트엔드 4명
코드의 안정성과 품질 향상을 위해 jest, cypress를 이용한 테스트코드 작성
검증된 CI/CD를 위해 lint, jest, cypress 관련 git-action 설정
사용자 경험 향상을 위해 캐시 데이터 활용하여 UI 반응속도 120ms -> 5ms로 단축
next/Image의 priority 속성을 사용함으로써 LCP 시간 2.2s -> 0.6s 로 단축
Husky를 활용한 pre-commit 설정으로 Jest 테스트 및 ESLint를 자동으로 실행하여 코드 품질 유지
오센스
개인
2023.09. ~ 2024.07.
시간표, 클래스, 강사, 학생, 룸을 관리할 수 있는 학원 관리 서비스
사용 스택 : next.js typeScript tailwind Recoil
팀원: 프론트엔드 2명, 백엔드 1명, 디자이너 1명, 기획자 1명
보안성과 사용자 편리를 위해 소셜 로그인 구현(naver, kakao, google)
axios interceptor를 활용하여 토큰 최신화, 에러 공용 처리 기능 구현
다음 주소 API를 사용하여 주소 입력 기능 구현
공공 데이터 포털의 공휴일 관련 open-api를 사용하여 캘린더 기간 선택 기능 구현
KNoo
개인
2023.04. ~ 2023.08.
공주대학교 학생들만 이용할 수 있는 대학교 커뮤니티 서비스
react javaScript axios
naver-map-api를 활용하여 맛집, 카페 지도 기능 구현
proxy를 설정하여 배포 서버와 백엔드 서버 연결
게시판, 댓글의 CRUD 기능 구현
포트폴리오
URL
첨부파일
교육
코드잇
사설 교육 | 코드잇 프론트엔드 단기 심화 3기
2024.08. ~ 2024.10. | 졸업