미리보기

프로젝트 : https://github.com/boostcampwm-2024/web35-watchducks

역할 : 프론트엔드 총괄 및 디자인

사용기술 : React, Zustand, Tailwind, TanstackQuery, ApexChart, Netlify

주요 성과

• 다크모드기능 추가

  • 문제 : 데모 발표 중, 눈이 아프다는 사용자 피드백 확인

  • 해결 : TailwindCSS를 이용하여 다크모드 기능 구현

  • 성과 : 사용자경험, 색상관련 긍정적 반응을 받음

• Navbar관련 Props drilling개선

  • 문제 : Navbar컴포넌트에서 하위 컴포넌트들에 props로 상태를 넘겨, 불필요한 렌더링이 일어나는걸 확인

  • 해결 : Zustand를 이용해 Navbar의 상태를 전역으로 관리하여 렌더링 최적화

  • 성과 : 4개 컴포넌트 리렌더링 → 리렌더링 제거

• 랭킹,트래픽데이터관련 TanstackQuery를 이용 api캐싱

  • 문제 : 메인페이지에 접속 시, 매번 트래픽데이터를 요청

  • 해결 : TanstackQuery를 이용해, 프론트엔드에서 api캐싱 적용

  • 성과: 불필요한 네트워크 요청 최적화

프로젝트 : https://github.com/Jeju-Dorang/Frontend

수상 : 장려상

역할 : 프론트엔드 팀장

사용 기술 : React, Zustand, Tailwind, Netlify

주요성과

• UX 전문가 피드백 기반 모바일 최적화

  • 커뮤니티(네이버 부스트캠프)에서 현직 프론트엔드 개발자에게 UI,UX 피드백 요청

  • 문제 : 모바일 환경에서 버튼 롱클릭 시, UX를 해칠 것 같단 피드백을 받음

  • 해결 : CSS의 -webkit-touch-callout 설정을 None으로 설정

  • 성과 : 모바일 사용자경험 개선

• 카카오 맵 react-sdk기반 커스텀 맵마커 컴포넌트 구현

  • 문제 : 기존 맵마커 컴포넌트의 경우, 길찾기 기능이 없음

  • 해결 : 길찾기 기능이 들어간 커스텀 컴포넌트 구현

  • 성과 : 길찾기 기능을 통해, 사용자가 편의시설들을 쉽게 찾아갈 수 있게 됨

• 스토리 좋아요 디바운스 기능 구현

  • 문제 : 인스타 스토리 기능중 좋아요 버튼을 계속누르면 요청이 계속되는걸 확인

  • 해결 : 스토리 좋아요 관련 디바운스기능을 추가

  • 성과 : 3초간의 요청들을 한번에 묶어 처리해 서버 부하 1/3로 최적화

프로젝트 : https://github.com/BeyondPong/Frontend

역할 : 프론트엔드, 전체 팀 팀장

사용기술 : Vanilla Javascript, Bootstrap, Docker, Socket, three.js, canvas api

주요성과

• 언어 선택기능을 구현해 해외유저도 사용이 가능하도록 개선

  • 문제 : 사용자 중 해외국적의 유저도 있음을 확인

  • 해결 : 단어를 배열로 관리하여 다중언어기능 구현

  • 성과 : 다양한 국적의 사용자들이 이용할 수 있게됨

• 키보드 focusable기능을 통한 유저 접근성 개선

  • 문제 : 게임 종료 후 , 마우스를 클릭하는것이 불편하다는 피드백을 받음

  • 해결 : tabInex옵션을 통해 키보드 포커스 기능 추가

  • 성과 : 사용자가 키보드만으로도 모든조작을 할 수 있게 됨

역할 : 프론트엔드 개발팀원

수상 : 대상

사용기술 : React, Styled Component, Context API

주요성과

• 모든 버튼에 Hover 테스트

  • 문제 : 기존 사이트에선 호버기능이 없는 버튼들이 존재

  • 해결 : UX개선을 위해, 모든 버튼,요소들에 호버테스트를 하고 기능을 추가함

  • 성과 : 사용자가 어디를 가리키고있는지, 확실히 알 수 있게됨

• 420장의 차량 이미지 프리로딩과 WebP 포맷 적용으로 페이지 로딩 시간 66% 단축 (3초 → 1초)

  • 문제 : 360도 회전 이미지를 가져오는 과정에서 렌더링까지 3초 소요

  • 해결 : 이미지 프리로딩 기능을 추가해 이미지를 미리 가져오도록함

  • 성과 : 페이지로딩시간을 3초에서 1초로 단축시켜 사용자 이탈율을 낮춤

• Context API를 활용한 차량 옵션 상태 관리로 복잡한 상태 로직을 효율적으로 구현

  • 문제 : 기존 코드의 경우 다양한 상태들이 상위 컴포넌트에 나뉘어져 있었음

  • 해결 : Context API를 통해 전역으로 상태들을 관리

  • 성과 : 복잡한 로직을 개선

활동기간 : 2024.04.25 ~ 2024.05.07

활동 내용

• 해당 책 스터디를 통해, 프레임워크가 개발되기전 SPA나 라우팅 같은 여러 기능들이 어떻게 구현되었는지 학습

• 이를 바탕으로 온라인 탁구게임사이트(비욘드퐁)에 적용하여 실제 코드까지 작성

활동기간 : 2023.12 ~ 2024.04

활동 내용

• c++기반의 알고리즘 스터디

• 기초 알고리즘 지식이 부족하다 생각해 17주간 스터디하며 알고리즘 능력향상

활동기간 : 2022.03 ~ 2023.12

활동내용

• 2022: 동아리 일원으로서, javascript,html,css기초 공부 및 해커톤 참여

• 2023: 2023 기획팀장으로서, 일원들에게 javascript문법 설명 및 숙제 제출, 검사 해커톤 피드백

• https://www.notion.so/kw-likelion11/HTML-5-13-79af08d3a1964e078195c29f050084aa

• https://www.notion.so/kw-likelion11/CSS-5-20-a70ce5d21df1416ead300fc118478886

• https://www.notion.so/kw-likelion11/6-24-f2957472302e4beab4c6bbe9d3fe54cb