김효중

 
 
notion image
 

🙆🏼‍♂️About me

  • 꾸준함의 중요성을 알고 있습니다. 이를 위해 적은 양의 코드라도 꾸준함을 잃지 않기 위해 커밋을 하고 있습니다.
  • 기록의 중요성을 알고 있습니다. 제가 학습하면서 배운 내용과 회고를 꾸준히 저의 블로그에 기록하고 있습니다.
  • 항상 팀에 조금이라도 기여하는 개발자가 되고 싶습니다.
 

💥 Education

프로그래머스 웹 데브코스

2023.06~
2023.11
 
 

GDSC SKHU

2022.08~
2023.06
  • 프로그래머스에서 진행하는 프론트엔드 개발자 양성 교육 과정입니다.
  • 프론트엔드 개발자의 기본기를 쌓기 위해 수료한 교육 과정입니다.
  • 자바스크립트,CSS,Vue.js,React를 학습했습니다.
  • 2번의 팀 프로젝트를 경험하였습니다.
 
  • Google Developers에서 제공하는 프로그램으로, 대학교를 기반으로 하는 개발자 커뮤니티 그룹입니다.
  • 프론트엔드 기술 학습 및 스터디, 프로젝트에 참여하였습니다.
  • Google이 주최하는 Google Solution Challenge에 참가하여, 전 세계 대학 팀 중 상위 100팀에 선정되는 성과를 이뤄냈습니다.

🛬 Project

 

HJ DevLog

2023.06~
 

프로젝트 소개

기존 블로그 플랫폼에서 벗어나, 저만의 블로그를 만들기 위해 개발한 프로젝트입니다.
Next.js 13의 App Route를 사용해 모든 개발을 혼자 진행했습니다.
제가 배운 내용들과 회고를 해당 블로그에 꾸준히 기록 중입니다.
최근에는 블로그에 쓰이는 여러 공통 컴포넌트들을 만들고, 이를 스토리북으로 문서화하는 작업을 진행 중입니다.

관련 링크

사용 기술

Next.js 13 App route,tanstack query,recoil,styled-components
 
  • tanstack-query의 useInfinityQuery를 이용해 글 목록 무한스크롤 구현
  • Lighthouse CI를 도입해 모든 페이지의 Lighthouse 지표를 CI 단계에서 효과적으로 추적 가능하게 설정
  • Next 13 App Route기반의 페이지 정적 생성
  • react-markdown을 활용한 마크다운 글 파싱
  • SEO를 최적화하기 위한 블로그 sitemap 생성, Google Search Console에 등록, OpenGraph 적용
  • 효율적인 에러 로깅을 위한 Sentry 부착. 에러 시 메일로 에러의 자세한 정보를 확인할 수 있게 설정
  • 블로그 글의 목차를 나타내기 위해 Intersection Observer API를 사용한 TOC(Table of Contents) 개발
  • 블로그 방명록에서 사용자에게 빠르게 초기 방명록을 보여주기 위해 tanstack-query의 Hydrate를 이용한 SSR적용
  • 스토리북으로 블로그 내에서 사용하는 컴포넌트에 대한 문서화 적용, CI 단계에서 스토리북 자동 배포 설정
  • 2024.01.05기준 초기 페이지 FCP 0.5초 LCP 0.7초 Total Blocking Time 0밀리초 Speed Index 0.5초

만났던 문제점

 
가장 자료가 많고, 깃헙의 스타 수가 많은 마크다운 파싱 라이브러리인
react-syntax-hightlight를 마크다운 파싱을 위해 사용하고 있었습니다.
처음 블로그를 배포했을 떄, lighthouse의 점수가 굉장히 낮은 것을 볼 수 있었습니다.
특히 Total blocking time점수가 되게 낮았는데, @next/bundle-analyzer 로 번들 크기를 측정해보니, react-syntax-hightlight의 번들 크기가 굉장히 양이 많은 것을 발견할 수 있었습니다.
 
이 패키지는 내부적으로 hightlight.js에 의존하고 있었고 번들 크기가 이렇게 큰 것을
어떻게 해결할지 방법을 찾아나가야 했습니다.
 
notion image
 

Dynamic import

코드블록을 이쁘게 꾸며주는 역할의 CodeBlock 컴포넌트에서 이 react-syntax-hightlight 을 사용하고 있었고, 이는 블로그 글의 상세페이지에서만 필요한 컴포넌트였습니다.
 
따라서 초기 로드 때 글의 목록페이지에서 이를 불러올 필요가 없었고, 동적 import를 사용했습니다.

꿀매포청천

2023.09~
2023.10

프로젝트 소개

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

관련 링크

사용 기술

Next.js ,typescript,axios,tanstack-query,sass,storybook
 
  • 공통적으로 사용되는 컴포넌트를 팀원 모두 사용하도록 스토리북 도입
  • Next Api Route를 이용해 프론트엔드에서 API를 호출 할 때 Api Route를 거쳐서 실제 서버의 API 호출
  • 댓글 삭제, 생성 기능 개발
  • 전체 유저 사이드바 부분에서 유저의 정보가 변경 되거나, 유저가 새로 생성되었을 때 해당 부분이 바로 적용되게 하기 위해 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

노션클론

2023.07

프로젝트 소개

노션처럼 글 수정,작성,삭제를 할 수 있는 에디터

관련 링크

사용 기술

javascript,AWS S3,redux
 
  • XSS방지를 위한 dompurify라이브러리 적용

NearBy

2023.04~
2023.05
 

프로젝트 소개

가까운 위치의 약국,카페,음식점 등을 사용자에게 전달해주는 서비스입니다.
React와 Recoil을 학습하기 위하여 개발한 서비스입니다.
Vite와 Github Action, Github Page를 통해 배포하였습니다.

관련 링크

사용 기술

React,Github Page,Github Action,Vite,Recoil,styled-components
 
  • Intersection Observer API를 사용한 랜딩 페이지 개발
  • geolocation api를 통해 현재 사용자의 위치를 받고 해당 위치를 토대로 가까운 음식점,카페,약국,주차장 등을 KaKao API로 사용자에게 보여줌
  • 디바운스 기법으로 장소 검색 시 불필요한 API 요청 최소화

📒 Study

코어 자바스크립트 스터디

  • 코어자바스크립트를 장별로 읽고 정리한 내용을 공유하고 싶은 내용, 내가 중요하다고 생각한 내용 별로 각자 공유하는 방식으로 진행
  • 자바스크립트의 클로저,실행 컨텍스트 등 이론적 개념을 학습
  • 실행컨텍스트의 내용을 공부한 후 , 학습한 내용에 대해 발표 진행

관련 링크