📞 phone: 010-2311-1090

📧 Email : [email protected]

**Github | Tistory | LinkedIn**

👩‍💻 FrontEnd Developer

• Why를 통해 학습하고 문제를 해결하는 것을 즐깁니다.

  • 어떠한 기술을 도입하거나 학습할 때 어떤 기술인지(what), 어떻게 사용하는지(How)만으로 그치는 것이 아닌 이 기술이 어떤 문제를 해결하기위해 만들어진 것인지(why)를 고민하며 학습하고 문제를 해결합니다.

• 깊이 고찰한 것이나, 나만의 레슨런을 공유하는 것을 즐깁니다.

  • 공유를 통해 팀과 함께 성장하며 문제를 해결하고 이를 통해 팀 내 신뢰와 유대가 형성되는 긍정적인 경험을 겪어본, 공유 문화를 주도적으로 이끌어나가는 개발자입니다.

• 사용자의 입장에서 서비스를 바라보는, UX를 중시하는 개발자입니다.

  • 유저의 행동에 대한 옳바른 반응을 해주는 것과 유저가 원하는 목표에 도달하는데 적은 시간이 걸리도록 하여 UX를 개선하는 것에 관심이 많습니다.
  • ASAP이라는 ‘최적의 회의시간 도출 서비스’를 운영하며 약 500명의 누적사용자를 유치하고 피드백을 받으며 서비스를 개선해본 경험이 있습니다.

• 웹개발에 대한 깊이있는 학습자세와 공유를 통해 상호성장하는 모습, 팀을 이끄는 리더십을 인정받아 200명 가량의 인원이 참여하는 IT 동아리 SOPT의 웹개발파트장을 맡아 대학생 동료들을 주니어 개발자로 성장시키는 경험을 하였습니다.

⚒ Project

글쓰기 모임을 위한 글쓰기 커뮤니티 서비스

:: Mile

2 PM / 2 Design / 4 FE / 2 BE

React, Typescript, Tanstack-Query v5, Emotion

2023.12~ ing

https://github.com/Mile-Writings/Mile-Client

MILE

유저에겐 에디터를 활용해 다양한 기능으로 간편하게 글을 쓰고 상호작용할 수 있는, 모임 관리자에겐 admin기능을 제공해 글모임을 만들고 간편하게 관리할 수 있도록 해주는 데스크탑 웹 서비스

<aside> [ React CSR환경에서 prerender 파이프라인 구축으로 SEO개선 & dynamic OG meta tag 설정으로 서비스 유입 유도]

상황 : React로 이루어진 서비스에서 모든 페이지에서 하나의 meta tag가 제공되고 초기에 크롤러가 빈 index.html파일을 보는 것으로 인해 각각의 글에 대한 정보를 SEO에 최적화하지 못하여 검색을 통한 새로운 유저의 유입이 어렵고 유저피드백을 통해 카카오톡 등 소셜 미디어에서의 링크 공유 시 글의 제목과 image를 보여주는 것에 대한 니즈가 있음을 확인하였습니다. 이러한 OG image와 title을 보여주는 것은 유저의 경험을 개선시키는 것 뿐만 아니라 새로운 유저의 유입에도 긍정적인 영향을 끼칠 것이라 판단하여 CSR에 환경에서 prerender pipeline을 구축하였습니다.

문제 : CSR환경에서는 빈 html을 로드하고 각 페이지에 대한 컴포넌트를 렌더링하는 방식으로 사용하기 때문에 크롤러가 볼 수 있는 meta tag는 index.html의 정적인 데이터가 유일하다는 문제가 있었습니다.

행동 : 몇가지 문제 해결 방법에 대한 가설을 세우고 해결 방법을 구상해나갔습니다.

1. react-helmet-async 라이브러리를 도입하여 메타태그를 동적으로 검색엔진에 노출
2. NEXT JS로 마이그레이션, ssr 컴포넌트를 구현 또는 vite-plugin-ssr 을 사용해서 ssr환경 구축
3. prerender 로직을 구현하여 빌드 단계에서 글 상세페이지에 meta tag를 동적으로 넣어주는 기능을 구현

결과 : OG meta tag를 추가하는 작업만으로 마이그레이션을 하거나 ssr 컴포넌트를 구축하는 것은 너무 많은 리소스를 필요로한다는 판단하에 vite 환경에서 puppeteer를 활용한 prerendering 파이프라인을 구축하였습니다.

react-helmet-async 라이브러리는 컴포넌트가 마운트된 이후에 작동하기 때문에 크롤러가 접근한 이후에 meta tag를 추가하여서 SNS공유를 위한 meta tag 추가의 방법으로는 적합하지 않았습니다.

react-snap에서 사용하고 있는 puppeteer의 버전이 낮아서 발생하는 이슈는 해결되었지만 dynamic prerendering에 대한 지원이 충분하지 않았고 Create-React-App 환경에 대한 세팅을 기본적으로 하기 때문에 vite나 rollup에 대한 호환성이 맞지 않는 부분이 다수 존재하였습니다.

따라서 @prerenderer/rollup-plugin과 @prerenderer/renderer-puppeteer를 사용하여 prerendering에 필요한 게시글에 대한 dynamic route를 추가하고 prerender되는 html 파일을 커스텀하여 meta tag를 추가하는 방법을 활용하여 해당 문제를 해결하였습니다.

</aside>

<aside> [ Lighthouse와 vite-bundle-visualizer를 활용하여 성능개선 ]

모바일 환경에서 메인페이지의 초기 로딩 속도에 대한 문제를 발견하여 Lighthouse와 vite-bundle-visualizer를 활용하여 성능을 확인한 후 문제가 되는 부분을 개선하였습니다.

1. 글모임에서 업로드 되고있는 고화질 이미지로 인해 초기 렌더링되는 리소스 크기와 LCP 성능에 악영향을 주고있는 것을 확인하여 이미지 업로드 과정에서 이미지의 확장자를 webP로 변경하는 방법으로 이미지 최적화를 적용하였습니다. 이로 인해 LCP load time을 30% 단축하고 S3의 사용량을 30% 절감하였으며 초기 렌더링되는 리소스를 8.0 MB → 2.6MB로 약 75% 감소시켰습니다.

2. 네트워크 탭에서 폰트 파일의 용량이 가장 큰 부분을 차지하고 있는 것을 확인하고 다운로드 용량 감소를 위해 font dynamic subset을 적용하였습니다.

이를 통해 Resource 2.1MB → 400KB 약 80% SI 3.2s → 2.6s **약 20%**의 성능을 개선하였습니다.

3. 개발자 도구의 Coverage 탭을 확인하여 메인페이지에 불필요한 JS파일, 사용하지 않는 CSS파일을 확인 후 해당 번들을 route level을 기준으로 여러 chunk로 나누어 필요한 시점에 해당 청크들을 불러오도록 code splitting을 적용하여 초기 번들 사이즈를 줄여주었습니다.

4. 불필요한 리렌더링 로직과 useEffect로직을 제거하는 리팩토링 과정을 거친 후 below the fold 영역의 이미지를 lazy loading하는 과정을 거쳐 FCP를 3.3s → 1.8s 약 50% 의 성능을 개선하였습니다.

위 4가지를 통해 메인페이지의 Production 기준 성능지표를 아래와 같이 개선하였습니다. FCP - 3.3s → 0.5s SI - 3.2s → 0.5s Lighthouse Performance Score - 66→ 99

</aside>

<aside> [ 낙관적 업데이트로 UX 개선]

네트워크 환경이 불안정한 상황에서 좋아요 기능의 느린 업데이트로 인해 좋지 않은 유저 경험을 제공하고 있다는 것을 확인하여 낙관적 업데이트를 적용하여 UX를 개선하였습니다. 구현과정 중 Tanstack query 라이브러리의 setQueryData 메소드를 깊게 고찰하며 어떤 원리로 해당 로직이 작동하는지를 기록하고 공유하였습니다. 🔗 낙관적 업데이트 (feat setQueryData 뜯어보기)

</aside>

<aside> [ Tanstack query key 구조 개선 ]

기존의 중복 가능성과 파악하기 어려운 키 위계, 휴먼 에러로 발생하였던 문제들을 해결하기 위해 **🔗query key factory를 도입**하여 React Query key를 구조화하여 Hierarchy 구조로 만들었고 아래 4가지를 고려하며 Query key를 관리하는 구조를 리팩토링 하였습니다.

1. 중복되지 않는 키
2. 확실한 위계
3. 쉽게 파악할 수 있는 키 구조
4. 공동배치(Colocation)

이를 통해 키의 위계를 한 눈에 파악할 수 있어 키의 세분화에 대한 변경에도 쉽게 대처할 수 있게 되었고 더 용이한 수동 상호작용이 가능하게 하여 개발자 경험을 향상시켰습니다.

</aside>

<aside> [ presigned URL 도입으로 고화질 이미지 화질저하 및 서버 부하 감소 ]

서버에 고화질 이미지 업로드 시에 화질이 저하되는 문제와 더불어 서버의 부하를 줄이기 위한 방법으로 s3로 직접 이미지를 업로드하는 presigned URL 방식을 채택하여 이를 적용하였습니다. 이 때 이미지를 업로드하는 모든 로직에 반복적인 코드를 사용하는 것을 확인하여 이를 커스텀훅으로 만들어 코드의 중복을 없애고 재사용성과 가독성을 높였습니다. 🔗 PR 링크

</aside>

<aside> [ MSW를 활용하여 개발 병목현상 개선 및 서버의존성 감소]

백엔드에 의존하는 프론트엔드 개발에서의 병목현상과 디버깅이 필요한 상황에 서버에 의존하고 있던 문제로 인한 스프린트의 장기화를 경험하고 이를 개선하기 위해 MSW를 도입하였고 이를 통해 서버 개발자와의 소통비용을 줄여 스프린트 기간을 일주일가량 단축시켰습니다.

</aside>

<aside> [ FE Lead Developer ]

프론트엔드 팀 리더로서 주도적으로 협업에 참여했으며 공유하는 팀 문화를 만들어 도입해야할 라이브러리에 대한 세션을 진행해서 팀원 모두에게 공유하는 문화, 스프린트 끝에 서로가 마주한 트러블을 공유하고 회고하는 문화를 만들어 나갔습니다. Pn룰을 적용하여 코드리뷰 과정에서 명확한 의사전달이 가능하도록 하였고, PR이 커지는 것이 빠른 리뷰와 반영을 어렵게 하여 이를 방지하기 위해 PR size labeling을 도입하는 등 효율적인 코드리뷰를 위해 팀 컨벤션을 만들어나갔습니다.

</aside>

최적의 회의시간 도출 서비스

:: ASAP

2 PM / 2 Design / 2 FE / 2 BE

React, Typescript, Recoil, styled-components

2023.06~2023.10,

2024.06~ 2024.08

https://github.com/ASAP-as-soon-as-possible/ASAP_Client

모든 회의의 시작, ASAP

회의시간을 잡을 때의 비용을 줄이고 불편함을 개선하기 위한 모바일 웹 서비스

<aside> [ 일상생활의 문제를 직접 해결하여 누적사용자 500명 유치 ] 팀프로젝트와 협업에서 팀 구성원들의 회의시간을 선정하는데에 불편함을 느껴 해당 문제를 직접 해결하기 위해 오너십을 가지고 진행한 프로젝트이며 지속적으로 유저 피드백을 받아 UX를 개선하여 지금까지 약 500명 의 누적 사용자를 보유하고 있습니다.

</aside>

<aside> [ 수동 배포 플로우 자동화 ] github actions의 workflow를 통해 CI단계에서 Lint와 빌드테스트를 추가하여 배포시 에러가 발생할 가능성을 낮추었고 기존에 vercel 배포에 대한 과금을 피하기 위해 수동으로 진행하던 배포과정을 자동화해주는 workflow를 구축하여 기존에 번거로웠던 수동 배포 플로우를 개선하였습니다.

</aside>

<aside> [ 크로스 브라우징 환경 대응 ] 크로스 브라우징 환경에 대한 대응을 하여 유저에게 적절한 텍스트를 보여준 후 web share API를 활용하여 카카오톡 공유하기 기능을 구현하였습니다.

</aside>

<aside> [ 반응형 웹 서비스 개발 ] 기존 고정된 사이즈로 인해 큰 화면의 모바일 기기나 데스크탑 사용 유저의 불편에 대한 피드백을 수용하여 반응형 웹 서비스로 개선하였습니다.

</aside>

🎯 Experience

🧑‍🏫 2024 카카오 테크 캠퍼스 WEB 실습코치 (2024.06~ 2024.08)