📞 phone: 010-2311-1090

📧 Email : [email protected]

**Github | Tistory | LinkedIn**

👩‍💻 FrontEnd Developer

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

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

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

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

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

  • 여러 개발자와 타직군간의 원활한 협업을 돕고 파트내 공유문화(🔗웹파트 테크톡)를 만들어 나갔습니다. 총 🔗8번의 세미나를 진행하여 27명의 대학생 동료들을 주니어 개발자로 성장시키는 경험을 하였습니다.

⚒ 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> [ Lighthouse와 vite-bundle-visualizer를 활용하여 성능개선 ]

core web vitals를 이해하고 Lighthouse와 vite-bundle-visualizer를 활용하여 성능을 확인한 후 문제가 되는 부분을 개선하였습니다.

1. 폰트 파일의 용량 감소를 위해 font dynamic subset을 적용하여 이전과 비교하여 SI 3.2s → 2.6s **약 20%**의 성능을 개선하였습니다.

2. 개발자 도구의 Coverage 탭을 확인하여 메인페이지에 불필요한 JS파일, 사용하지 않는 CSS파일을 확인 후 해당 번들을 여러 chunk로 나누어 필요한 시점에 해당 청크들을 불러오도록 code splitting을 적용하여 초기 번들 사이즈를 줄여주어 초기 렌더링되는 리소스를 41.0 MB → 8.0MB로 약 80% 감소시켰습니다.

3. 고화질 이미지를 서버에서 불러올 때 LCP(load time) 성능 이슈를 확인한 후, 이미지 업로드 전에 webP 포맷으로 변환하는 최적화 로직을 적용하여 LCP load time을 30% 단축하고 S3 스토리지 사용량을 30% 절감했습니다.

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

위 4가지를 종합적으로 적용하여 최종 메인페이지의 배포 성능지표를 아래와 같이 개선하였습니다. FCP - 3.3s → 0.5s SI - 3.2s → 0.5s Lighthouse Performance Score - 66→ 99

</aside>

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

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

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

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

</aside>

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

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

</aside>

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

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

</aside>

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

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

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

</aside>

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

</aside>

<aside> [ 크로스 브라우징 환경 대응 ] html2canvas, web share api를 활용하며 크로스 브라우징에 대한 적절한 대응을 통해 유저에게 불편함없이 서비스를 제공하였습니다.

</aside>

🎯 Experience

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

🌳 IT 벤처 창업 동아리 SOPT 34기 웹파트장 (2024.01 ~ 2024.08)