미리보기

Description

알고리즘 문제풀이에 대해 동기부여를 주기 위한 사이트 (Website, Github)

Experience

• 문제풀이 데이터 시각화, 문제 풀이 현황 캘린더, 팔로잉 차트, 그룹 생성, 완료 페이지, 실시간 알람창

  구현 등 전반적인 사용자 기능 개발

• 반응형 차트, 커스텀 이벤트 활용을 위해 react-calendar, rechart 라이브러리 도입

• server state의 생명주기, 캐싱을 선언적으로 관리하기 위해 React-query 도입

• Lighthouse 통해 React Query 적용후 TTI 6.3초 -> 3.9초 개선

• 코드 스플리팅을 통해 JS payload 8MB -> 4.4MB 초기 렌더링 속도 45% 개선

• Routing시 컴포넌트 재사용으로 리렌더링이 누락되는 이슈 2초->0초 개선 (PR)

• 크로스 브라우징 이슈 개선 (PR)

• Trobuleshooting 문서화 (Link)

Tech Stack

React React-Query TypeScript styled-component

Description

개인의 관심 키워드에 따라 OX퀴즈를 제공하여 해양 환경문제 관련 정보 및 상식 제공하는 서비스. (Github)

Experience

• 재사용 공통 컴포넌트 관리 및 테마(ThemeProvider)를 활용하여 디자인 시스템 적용

• OX 페이지, 결과창 페이지(로그인 및 비로그인)

  , 프로필 뷰 구현

• 디자인 변경 시 단일 파일 수정만으로 디자인 관련 이슈 처리 시간을 50% 단축

• proxy 코드 추가하여 CORS 문제 대응 및 개선

• JavaScript -> TypeScript 마이그레이션 및 전체 AP

  I 코드 리펙토링 (Link)

Tech Stack

• React TypeScript styled-component

Description

부동산 API 사용 및 ChatGPT 활용 "내가 살만한 동네는 어디일까?" 라는 동네 추천 프로젝트 (Github)

Experience

• 비제어 컴포넌트 폼 개발 및 효율적인 상태 관리 위해 React Hook Form 도입

• DaumPostcode 와 react-modal 을 활용하여 우편번호 검색 구현

• 페이지가 Hydrate되기 전 SDK가 로드되도록 kakao-maps 렌더링 개선

• 타입 적용 및 API 구조변경을 통해 Lighthouse performance 71% -> 82% 개선

• 데일리 스크럼을 통해 프로젝트 일정 관리 및 리소스 관리

• JavaScript -> TypeScript 마이그레이션 (관련 아티클)

Tech Stack

• React Next.js TypeScript styled-component React hook form

Description

특정 github 레포지토리의 Issue 목록과 상세 내용을 확인하는 웹 사이트 구축. (Github)

Experience

• Github Issue 목록 및 상세 페이지, 데이터 요청 중 로딩, Issue 목록 광고 이미지 구현

• 비동기 통신 코드를 유틸함수로 생성하여 재사용성 용이하게 구현

• 전역 상태 및 API 호출 상태를 효율적으로 관리 및 GitHub 이슈 데이터를 일관성 위해 Context API 활용

• 스크롤 이벤트 연산 감소 위해 Intersection Observer API 활용 및 평균 FPS를 20% 향상

• GitHub Actions를 활용한 CI/CD 파이프라인 구축 및 자동화된 테스트/배포 프로세스 구현

• Git hook 자동화를 위해 Husky 도입 사전 점검 시간을 50% 감소

• Github Discussions를 활용해 의견

  을

  공유하

  고 의사결정을 문서화 (Link)

Tech Stack

React TypeScript styled-component Context API

Description

나만의 작은 전시회를 만들어 일상을 공유하는 웹페이지 (Website, Github)

Experience

• 소셜 로그인 및 회원가입, 이미지 스와이퍼 기능 구현

• 반응형 캐러셀 및 사용자 경험 향상을 위해 Swiper 라이브러리 도입

• 직접 서버 구축 및 소셜 로그인 기능 구현을 위해 Firebase 도입

• 실시간 알람 기능을 구현 및 사용자 경험 향상을 위해 hot-toast 라이브러리 도입

• PNG -> SVG 전환으로 이미지 용량을 1.2MB -> 250KB로 최적화하여 초기 렌더링 성능을 향상

• Context API 로그인 상태 전역 적용 및 useMemo를 통해 불필요한 리렌더링 개선

• a11y 및 웹 접근성을 준수하여 LightHouse Performance 70% -> 86% 개선

• 애자일 스크럼을 통해 프로젝트 리소스 담당

Tech Stack

React firebase styled-component Context API

매 주 1회 팀원들과 회의를 통해 챕터를 정하여 README 파일에 공유할 내용 정리하는 스터디.

• 궁금한 내용이나 새로 알게된 개념 및 인상 깊었던 점을 토론하여 서로의 역량을 길러주는 동료학습.(Github)

제주 및 K-SDGs 라는 키워드를 주제로 삼아 프로젝트 진행. 개인의 관심 키워드에 따라 OX퀴즈를 제공하여 해양 환경문제 관련 정보 및 상식을 제공하는 서비스. 해양 환경 문제 관련 인식 및 지식 확산을 목적으로 하며, 퀴즈를 맞춘 이력에 따라 FIN포인트를 부여함.

• UI/UX 디자인 참여

• 팀 Notion 운영 및 Project Resource 정리

• 팀 그라운드 룰 및 컨벤션 및 초기 세팅 참여

• 코드리뷰를 통해 JavaScript -> TypeScript 마이그레이션 및 API 연동 리펙토링

매 주 1회 팀원들과 주제를 한가지 정한 후 해당 주제에 대한 답변 정리 및 설명하는 방식으로 진행. 주차별로 반복 학습 후 팀원들이 면접관이 되어 질문을 하는 동료학습.

• Interview 스터디 참여 (5명)

• React/JavaScript 등 스터디 (Github)

2023.09 ~ 2023.10

금융 대기업의 API 활용(예금, P2P대출, 부동산, 공과금, 내 보험 등) 및 AI를 활용한 창의적인 금융&보험 서비스 개발에 참여. 싱커톤 시즌3 AI활용 온라인 개발대회에서 약 800여개 팀들 중 파이널리스트 15개 팀 선정

• 팀 Notion 운영 및 Project Resource 정리

• 데일리 스크럼 운영

• Github discussions 및 Notion 활용하여 트러블슈팅 정리

리액트에 대한 기술역량 강화, 똑같은 주제를 바탕으로 작성한 코드를 팀원들과 비교하며 Best Practice 를 선정하며 배우는 동료학습 (Github)

• Github discussion을 통해 코드리뷰

• 똑같은 기능하나에 가지각색의 동료들의 코드들을 비교분석하고 반면교사, 정면교사 학습

HTML, CSS, Javascript, React, Javascript 교육 및 기초역량 강화 팀 프로젝트를 통해 협업방식 및 동료학습을 배움