질의 응답 방식으로 자바스크립트, 브라우저 기본 지식 학습 멘토 코드리뷰를 받으며 프로젝트 진행

강의와 과제를 통한 타입스크립트, 리액트 학습 테스트 코드 작성 연습 학습 내용 기반 <a href="https://haeuns-organization.gitbook.io/megaptera-frontend-course/">데브노트</a> 작성

코드리뷰 기반 동료학습 과제 수행 C/C++ 프로그래밍 및 컴퓨터 과학 지식 학습

Ruby on Rails, Django 스터디 및 해커톤 참여

인프콘 2024

성실함

책임감

커뮤니케이션

김하은

즉석사진 포즈 추천 서비스 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.poseplz.com/">서비스 바로가기</a> / <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pobu-team/poseplz-client">Github 바로가기</a><ul><li>포즈 찜하기 기능 개발 중 Recoil 캐싱 문제를 해결하기 위해 React-Query 도입<ul><li>전체 포즈 리스트와 마이페이지 찜한 포즈 리스트에서 Recoil 캐싱으로 인한 비동기 상태 불일치 이슈 발생</li><li>데이터 fetching 용 selector가 호출된 횟수를 기록하는 atom을 구독하도록 수정하는 방안을 고려했으나, 코드의 복잡성과 안정성등을 이유로 React-Query 도입 결정</li></ul></li><li>React18 <code>useTransition</code> 훅을 활용하여 찜하기 버튼 클릭시 컴포넌트 깜빡임 문제를 해결<ul><li>전체 포즈리스트에 찜하기 버튼을 표시하기 위해 사용자가 찜한 포즈 리스트 데이터를 불러오고 있어, 찜하기 버튼을 누르면 전체 포즈 리스트 컴포넌트가 깜빡이는 문제 발생</li><li><code>useTransition</code> 훅을 이용한 동시성 렌더링으로 리렌더링 중에도 기존의 UI를 유지</li></ul></li><li>Google Analytics를 통한 유저 활동 분석 및 사용자 설문조사로 UI/UX 개선점을 도출하고, 실제 서비스에 반영하여 누적 방문자 3천명 달성</li><li>PWA를 활용하여 안드로이드 앱 출시</li></ul>

공모주 청약 입문자 들이 증권사 계좌 개설 20일 제한 때문에 청약 기회를 놓치는 문제를 해결하기 위한 공모주 일정 및 계좌개설 안내 서비스 <a target="_blank" rel="noopener noreferrer nofollow" href="https://modumozu.vercel.app/">서비스 바로가기</a> / <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/8princesses/modumozu-client">Github 바로가기</a><ul><li>동일한 컴포넌트를 여러 페이지에서 사용하게 되면서 발생하는 상태관리 이슈를 해결<ul><li>Detail 페이지에서 좋아요를 누르고 Home으로 이동한 경우 Home에서 반영되지 않는 문제</li><li>MyPage에서 좋아요 해제시 바로 관심 공모주 목록에서 사라지지 않게 해달라는 요구사항을 위해 좋아요 상태를 별도로 관리하게 되면서 발생한 버그</li><li><code>useEffect</code>로 수신 데이터 변화시 상태 변경하도록 하여 해결</li></ul></li><li>아이폰 사파리에서 100vh에 하단 검색창이 포함되는 문제 해결<ul><li><code>window.innerHeight</code>를 <code>setProperty</code>로 별도 변수에 저장하여 vh대신 사용</li></ul></li><li>색상/폰트 및 컴포넌트에 대한 디자인 시스템 정의 후 Storybook으로 문서화<ul><li>Component Driven Development로 전체 디자인 완성 전에 컴포넌트 개발을 먼저 진행하여 개발일정 준수에 도움</li></ul></li><li>Next.js를 활용한 서버 사이드 렌더링 경험</li></ul>

<a target="_blank" rel="noopener noreferrer nofollow" href="https://f-lab-edu.github.io/pomodoro-js/">서비스 바로가기</a> / <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/f-lab-edu/pomodoro-js">Github 바로가기</a><ul><li>클래스 기반 컴포넌트 아키텍쳐, Diffing을 통한 렌더링 구현<ul><li>render, mount 등 공통 기능을 가진 Component 클래스를 만든 후 상속받아 컴포넌트 구현</li><li>DOM노드의 tagName과 attribute가 변경된 경우에만 이전 DOM노드를 신규 노드로 교체</li></ul></li><li>History API를 이용한 라우팅 구현</li><li>단방향 데이터 바인딩 방식의 전역 상태 관리 구현<ul><li>Redux와 유사하게 사용할 수 있도록 store를 만들어 reducer를 통해 상태를 변경하고, 상태가 변경될 때마다 구독한 함수들을 실행</li></ul></li><li>Webpack 번들링<ul><li>SPA 구현을 위해 html 태그를 자바스크립트에서 문자열로 가지고 있는 불편함을 해소하기 위하여 각 컴포넌트의 템플릿을 copyPlugin으로 정적 파일 복사후 import해서 사용</li><li>SPA 구현시 특정 URL로 직접 이동시 404오류가 발생하여 webpack dev server의 historyApiFallback 활용</li></ul></li><li>Jest로 테스트코드 작성</li></ul>