미리보기

온라인 판매 재고 관리 B2B 서비스 개발 및 유지보수

사내 어드민 및 허브 시스템 개발 및 유지보수

주요 기여 사항 및 성과

재고 물품 등록 및 관리 시스템

• 여러 물품을 동시에 등록 및 수정할 수 있는 병렬 요청 처리로 시간 단축

• 병렬 요청 처리는 성공/에러에 따른 사이드 이펙트를 주입 받는 커스텀 훅으로 재사용 가능하도록 구현

• 엑셀 파일 업로드를 통한 물품 목록 저장
  

MSW 도입 및 환경 설정 자동화

• MSW 환경 세팅을 명령 스크립트 한 줄로 자동화

• API 일정에 의존하지 않고 프론트엔드 작업을 독립적으로 진행할 수 있도록 기여
  

이미지 및 비디오 업로드 공통 모듈 및 컴포넌트 추가

• 기존의 컴포넌트 불일치 문제를 해결

• 업로드 중 로딩 화면 및 비디오 플레이어 기능 추가

• 재사용 가능한 컴포넌트로 개발하여 이후의 개발 효율성 증대

• Promise 객체를 활용한 파일 병렬 업로드로 업로드 시간 단축
  

페이지 레이아웃 및 메인페이지 리뉴얼

• 메인페이지 / 상단바 / 드롭다운 사이드바 개발

• 네비게이션 사이드바의 경우, 하드코딩된 컴포넌트를 객체 수정 시 컴포넌트에 반영되도록 구현하여 편리한 유지보수에 기여

SPA 를 구축하고, 노션을 클로닝한 에디터 서비스
깃헙 : https://github.com/chasj0326/vanilla_playground
배포 : https://vanilla-playground-five.vercel.app/home

기술 스택

• TypeScript

기여한 내용

중첩 SPA 라우터

• 재사용이 가능하고, 렌더링 성능을 고려한 중첩 페이지 라우터

• 성능 개선

  • route 변경 시, 렌더링해야 하는 페이지들을 재귀적으로 탐색하고 달라진 페이지만 렌더링하는 로직 구현

상태 관리 스토어

• 컴포넌트 간 공유해야 하는 상태값들을 전역적으로 관리

• 상태의 키 값을 subscribe 하면, 업데이트 시 notify 하는 Observer 패턴을 통해 구현

• 성능 개선

  • Promise 를 활용하여 연속적인 상태 업데이트 시 비동기적으로 일괄 notify 하는 기능 추가

  • 브라우저에서 발생하는 중복 리렌더링 횟수 약 3배 감소

리치 텍스트 에디터

• contenteditable 속성을 활용힌 WYSIWYG 텍스트 에디터

• Backspace / Enter 키 이벤트 발생 시의 블럭 삭제 및 추가 로직 직접 구현

• 명령어 입력을 통해 텍스트 블럭 서식 변환

  • #h1, /h1 등의 명령어 입력 후 글 작성 시, H1 서식의 텍스트가 작성되는 기능

이모지 추가 기능

• 카테고리 별로 이모지들을 불러온 후 선택하여 문서 제목에 이모지 추가 (오픈소스 api 활용)

• onSuccess, onError 와 같이 사이드 이펙트를 제어할 수 있도록 서버 요청 로직을 추상화하였으며,
  이를 활용하여 무한 스크롤 요청 구현

• 세션 스토리지를 활용하여 최근 사용한 이모지 저장

익명 비밀번호 방명록

• 프로필 아바타 편집 및 선택 기능 (오픈소스 api 활용) 및 방명록 작성/수정 기능

• 방명록 문서에서, 타인의 방명록 글이 임의로 수정되는 문제 해결을 위해 구현

• 방명록 글 -> 비밀번호 입력 -> 글 수정 폼 순서로 UI 전환

개발 과정 포스팅

• Vanilla TS 로 중첩 라우팅 SPA 라우터 만들기

• 간단한 상태관리 Store 만들어보기

• 노션 클론 시리즈 (에디터/이모지/방명록 기능 포스트)

캐릭터 커스텀을 위한 보상이 주어지는 그룹 루틴 서비스
깃헙 : ️https://github.com/team-moabam/moabam-FE
배포 : ️https://www.moabam.com

기술 스택

• TypeScript React TailwindCSS Tanstack-query Storybook

팀 구성과 역할

• FE 개발 4명, BE 개발 5명

• 프론트엔드 리더, 가이드 / 랜딩 / 홈 / 검색 / 이벤트 페이지 및 PC 전용 가이드 UI

기여한 내용

검색 기능 및 페이지

• debounce 처리를 통해 입력과 동시에 검색 진행

• 검색 결과 무한 스크롤 조회 구현, 입력 키워드가 강조되는 하이라이팅 기능 구현

로딩 UX 개선

• 데이터 로딩 시 SkeletonUI 가 대체하도록 구현

• 하위 컴포넌트 렌더링을 지연시키는 Deffered 컴포넌트 구현

  • 로딩 시간에 따라 Skeleton UI 가 깜빡이는 문제 해결

  • 로딩 화면을 여러 단계로 나눔으로써 사용자 경험 증대

선착순 쿠폰 발급 이벤트 기능 및 페이지

• 쿠폰 발급 요청에 따른 버튼 disabled 처리를 통해 중복 요청 및 서버 에러 감소

• UX개선을 위해 응답 받은 http 상태코드에 따라 UI 분기 처리 (선착순 마감, 이미 발급 등)

모바일과 PC 환경을 고려한 인터랙션

• 잠금화면처럼 swipe up-down 으로 작동하는 페이지 전환 구현 (SwiperJS 활용)

• 개발과정 :️ Swiper 로 잠금화면 만들기

router 관련 로직 공통화

• url 에 의존하는 데이터 (auth, navbar, params, ...) 들이 하나의 객체에서 관리되도록 설계

• 관련 커스텀 훅 useRouteData, useMoveRoute 구현

  • url 데이터 가져오는 로직 통일 및 휴먼 에러 감축

• 관련 PR : feat: 라우트 세팅 및 관련 커스텀훅 작성

SNS 기능 API 를 활용한 밸런스 게임 서비스
깃헙 : https://github.com/prgrms-fe-devcourse/FEDC4_Angola_NaYoung
배포 : https://fedc4-angola.vercel.app

기술 스택

• TypeScript React Emotion Tanstack-query Recoil

팀 구성 및 역할

• FE 개발 5명

• 게시글 컴포넌트 및 좋아요 기능 / 유저 레벨 기능 / PC 및 모바일 반응형 UI / 서비스 UI 디자인

기여한 내용

유저 레벨 기능

• 사용자의 포스트+댓글 개수로 레벨 계산 및 전역 저장 (recoil 활용)

• 포스트/댓글 작성 시 레벨 데이터 즉각 업데이트 및

  레벨업 시 나타나는 팝업창 구현

api 활용 최대화

• POST 요청 시에는 join, GET 요청 시에는 split 하는 유틸 구현

• 각 게시글 당 3개의 필드가 필요했으나, 주어진 API 에서는 게시글 필드가 부족했던 문제 해결

UI 디자인 및 반응형 구현

• 서비스 전체 UI 디자인

• 디바이스 너비에 따른 스타일 작성을 통해 모바일/PC 반응형 구현

개발 과정 포스팅

• 데브코스 팀 프로젝트 회고 #1 -Angola!

• 데브코스 팀 프로젝트 회고 #2 -Angola!

• JavaScript, TypeScript, React, Vue 등 프론트엔드 기술 관련 강의 수강
• 개인 과제(7) 진행, 기획-개발-배포 프로세스 팀 프로젝트(2) 진행
• 현업 개발자 분들과 교육생 분들과의 코드 리뷰, 피어 리뷰를 통해 피드백을 제공하고 수용하는 경험

• 프론트엔드 파트 수료
• 프로그래밍 교육 이수 및 대학 연합 해커톤 참가

• 초등학생 대상 프로그래밍/메타버스 교육 컨텐츠 제작 및 실시

• 초등학생 대상 프로그래밍 기초 교육 온라인 컨텐츠 제작