미리보기

Overview

• sort-prop-types Rule의 noSortAlphabetically 옵션을 true로 설정하여도 적용되지 않는 버그를 발견하여, 해당 오류를 수정하여 PR.
• video 태그에 onResize Prop이 unknown property로 인식되는 버그를 발견하여, 해당 오류를 수정하여 PR.

Link

sort-prop-types PR
no-unknown-property PR

Overview

• GitHub 이슈 탭 클론 코딩
• 팀 프로젝트로 진행했던 프로젝트에 supabase를 사용하여 개인 프로젝트로 새로 개발

Skills

• TypeScript, React, Tailwind, Tanstack query, React Hook Form
• Webpack, Inversify
• Supabase

Development

• 관심사 분리
  
  
  • Presentation, Domain, Data 3개의 레이어를 분리하여 각 레이어간 의존성 감소
  • Presentation(뷰)과 Data(API) 사이 의존성 제거
  • IoC컨테이너를 활용하여 의존성 주입 자동화 및 중앙화
    
    
• 공용 컴포넌트 재사용성 향상
  
  
  • 공용 컴포넌트와 도메인을 분리함으로써 공용 컴포넌트 재사용성 증가
  • Compound Component 패턴을 활용하여 공용 컴포넌트 캡슐화 및 재사용성 증가
    
    
• webpack을 활용한 개발 환경 구성
  
  
  • webpack의 HMR 만으로는 리액트 컴포넌트의 상태가 유지 되지 않아 React Fast Refresh를 활용하여 컴포넌트 상태 유지
  • dev mode에 추천되는 source map 옵션들을 비교 분석하여 가장 적합한 source map 사용을 통한 빌드 시간 감소
  • babel-plugin-transform-typescript-metadata를 사용하여 @babel/preset-typescript 사용 시 decorator를 인식하지 못하는 문제 해결
    
    
• webpack을 통한 production 최적화
  
  
  • splitChunks를 통해 공통 모듈 추출
  • MiniCssExtractPlugin을 통해 CSS 별도의 파일로 추출
  • CssMinimizerPlugin을 통해 CSS 번들 최적화
  • code splitting을 통해 최초 로딩 시간 감소

Link

Github
Blog | 관심사 분리
Blog | 공용 컴포넌트 재사용성 향상
Blog | 웹팩 설정

Overview

• 네이버 메인 화면 뉴스 탭 클론 코딩

Skills

• JavaScript

Development

• 리액트, 뷰와 같은 모던 라이브러리/프레임워크의 동작 원리를 이해하기 위해 JavaScript로 SPA 및 FLUX 아키텍처 구현
• Observer Pattern을 이용한 데이터 바인딩
  
  
  • Observer Pattern에서 Subject가 Observers를 강한 참조로 관리하게 될 경우 명시적인 Unsubscribe를 하지 않으면 GC가 되지 않아 메모리 누수가 발생
  • Subject의 Observers를 WeakRef를 통해 약한 참조로 관리하여 명시적인 Unsubscribe없이도 GC가 되도록 해결. 또한, GC가 된 Observer의 WeakRef 인스턴스를 FinalizationRegisitry를 이용하여 Subject의 Observers에서 제거

Link

Github
Blog | 옵저버패턴 Memory Leak 해결하기

Overview

• 주변 놀거리를 랜덤으로 추천해주는 프로젝트
• PM, 디자이너와의 협업을 통해 10일간 MVP 제작

Skills

• React, styled-components

Development

• 기존 range 타입의 input을 기반으로 한 슬라이더의 Discrete한 움직임을 개선하여 Continous한 움직임의 슬라이더 구현하여 UX 향상
• 디자이너 분의 복잡한 애니메이션 요구사항을 구현하기 위해 Lottie 사용

Link

Github

Overview

• GitHub 이슈 탭 클론 코딩

Skills

• React, styled-components

Development

• GitHub 이슈/마일스톤을 활용한 백로그/주간 스프린트 관리
• 데일리 스크럼을 통한 팀원과의 일정 공유
• KPT 방법론을 활용한 주간 회고

Link

Github