• Github | https://github.com/khj0426
• Blog | https://hj-devlog.vercel.app/
• Email | [email protected]

🙆🏼‍♂️About me

• 기록의 중요성을 알고 있습니다. 제가 학습하면서 배운 내용과 회고를 꾸준히 저의 블로그에 기록하고 있습니다.

• 2번의 교내 동아리와 1번의 교육과정을 거치면서 함께 성장하는 것과 깊이 학습하는 것의 중요성을 알게 되었습니다. 함께, 꾸준히, 깊이 성장하는 개발자가 되고 싶습니다.

🛬 Project

리뷰레인저

2023.10~

2023.11

FE 3/BE 3

프로젝트 소개

프로그래머스 데브코스 안에서 피어리뷰,멘토리뷰 시 발생하는 문제를

해결하기 위해 기획,개발한 서비스입니다.

총 2가지 문제점이 존재했고, 이 문제점을 해결하고자 하였습니다.

• 피어 리뷰를 수집하고, 종합하는데 많은 시간이 소요됩니다. 주관식 응답 중 욕설이나 부정적인 감정의 문장들을 일일이 수동적으로 정제해야 하는 불편함이 존재했습니다.

• 리뷰 결과를 보여주기 위해 구글폼, 슬랙, 엑셀등을 사용합니다. 여러 매체에 의존하지 않고 하나의 서비스에서 관리하고자 했습니다.

관련 링크

• 깃허브 https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE

사용 기술

React,Typescript,tanstack-query,tailwind-css,axios

• AWS S3 + CloudFront를 이용한 배포 환경 구성
• 백엔드 팀의 작업 속도에 의존적이지 않도록 msw 논의 후 도입
• 로그인페이지 ,생성한 리뷰 관리 페이지 구현
• 초기 커밋린트 및 파일 구조, 린트 규칙 설정 https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/pull/4

HJ DevLog

2023.06~

개인

프로젝트 소개

기존 블로그 플랫폼에서 벗어나, 저만의 블로그를 만들기 위해 개발한 프로젝트입니다.

Next.js 13의 App Route를 사용해 모든 개발을 혼자 진행했습니다.

제가 배운 내용들과 회고를 해당 블로그에 꾸준히 기록 중입니다.

구글 검색 결과 2.18만건의 글이 노출되었고 실제 클릭으로 이어진 횟수는 1.05천건이었습니다.

평균 CTR(웹에서의 검색 노출이 실제 클릭으로 이어진 값)은 4.8%였습니다.

구글 검색으로 들어온 사용자는 총 462명이었고, 평균 참여시간은 1분 1초였습니다.

관련 링크

• 코드리뷰

  https://github.com/Bokdol11859/code-review/pull/4

• 깃허브

  https://github.com/khj0426/HJ_Devlog

사용 기술

Next.js 13 App route,tanstack query,recoil,styled-components

• tanstack-query의 useInfinityQuery를 이용해 글 목록 무한스크롤 구현 초기화면이 빈 화면일 경우를 방지하여 tanstack-query의 prefetch Infinity Query로 초기 6개의 글 목록을 미리 가져오는 SSR 적용
• Lighthouse CI를 도입해 모든 페이지의 Lighthouse 지표를 CI 단계에서 효과적으로 추적 가능하게 설정
• recharts + GA 방문지표 데이터를 활용한 그래프 기능 구현
• react-markdown을 활용한 마크다운 글 파싱
• SEO를 최적화하기 위한 블로그 sitemap 생성, Google Search Console에 등록, OpenGraph ,RSS 피드 적용
• 효율적인 에러 로깅을 위한 Sentry 부착. 에러 시 메일로 에러의 자세한 정보를 확인할 수 있게 설정
• Next.js의 loading 페이지, 스켈레톤 UI를 이용해 페이지 로딩 UI를 선언적으로 처리
• 블로그 글의 목차를 나타내기 위해 Intersection Observer API를 사용한 TOC(Table of Contents**)** 개발
• 스토리북으로 블로그 내에서 사용하는 컴포넌트에 대한 문서화 적용 CI 단계에서 스토리북 자동 배포 설정
• 블로그 내에서 사용되는 모달, 페이지네이션, 토스트,스피너 등의 공통 컴포넌트 구현
• 2024.03.22~2024.04.22 한 달간의 보고서

초기 페이지 데스크탑 기준 FCP 1.3초 LCP 1.5초 Total Blocking Time 0밀리초 Speed Index 1.1초

꿀매포청천

2023.09~

2023.10

FE 5

프로젝트 소개

고물가 시대에서 싸고 좋은 물건을 구매하는 것은 쉬운 일이 아닙니다.

또한 스스로 산 물건이 싸게 잘 샀는지 판단하는 일 또한 쉬운 일은 아닙니다. 이런 어려움에 초점을 맞춰 꿀매포청천 이란 서비스를 기획했습니다.

관련 링크

• 깃허브

  https://github.com/prgrms-fe-devcourse/FEDC4_Price-PCC_DONGYOUNG

• 배포링크

  https://fedc-4-price-pcc-dongyoung.vercel.app/

• 프로젝트 회고

  https://hj-devlog.vercel.app/blog/2023년 9월 회고

사용 기술

Next.js ,typescript,axios,tanstack-query,sass,storybook

• 공통적으로 사용되는 컴포넌트를 팀원 모두 사용하도록 스토리북 도입
• 관심사의 분리와 실제 서버의 주소의 은닉을 위해 API의 별도 응용을 클라이언트에 부여하지 않고 NextJS API Route에 위임
• 댓글 삭제, 생성 기능 개발
• 전체 유저 사이드바 부분에서 유저의 정보가 변경 되거나, 유저가 새로 생성되었을 때 수정된 부분이 바로 적용되게끔 하기 위해 Next의 ISR랜더링 전략 도입
• 게시글 상세 페이지의 좋아요/싫어요 부분에서 보다 더 좋은 사용자 경험을 위해서 useMutation을 이용한 낙관적 업데이트 도입
• 여러 페이지에서 공통적으로 사용되는 아바타 컴포넌트,이미지 업로드 컴포넌트 개발

기술 공유

프레임워크로서의 규칙의 명확성, 여러 랜더링전략의 혼합 등의 장점으로 인해 Next.js를 도입하기로 결정했습니다.

다만 팀원분들 중 Next.js를 잠깐이라도 사용해본 팀원이 저 포함 2명이었고,

간략히 Next.js가 무엇이고 Next.js가 제공하는 랜더링 전략에 대해 개발 시작 전 제 지식을 공유한 적이 있습니다.

해당 발표를 통해 조금이나마 팀에 기여를 한 것 같은 뿌듯함을 느낀 경험이 있습니다.

https://docs.google.com/presentation/d/1Ytbqs0TOByFptpdD7hnyaYyBUEWPtuw8MFjgWlDsasw/edit#slide=id.g2422ee2320a_0_12

💥 Education

멋쟁이사자처럼

2024.01~

프로그래머스 웹 데브코스

2023.06~

2023.11

GDSC SKHU

2022.08~

2023.06.

• 동아리 홍보에 쓰이는 랜딩 페이지를 개발하였습니다. https://likelion-12th-skhu.github.io/

• 웹 프론트엔드 개발을 희망하는 학우들에게 여러 강의를 진행하였습니다.

• 프론트엔드 개발자의 기본기를 쌓기 위해 수료한 교육 과정입니다.

• 자바스크립트,CSS,Vue.js,React를 학습했습니다.

• 2번의 팀 프로젝트를 경험하였습니다.

• Google Developers에서 제공하는 프로그램으로, 대학교를 기반으로 하는 개발자 커뮤니티 그룹입니다.

• 프론트엔드 기술 학습 및 스터디, 프로젝트에 참여하였습니다.

• Google이 주최하는 Google Solution Challenge에 참가하여, 전 세계 대학 팀 중 상위 100팀에 선정되는 성과를 이뤄냈습니다.