미리보기

목적 : 고객사의 쇼핑몰 상품을 11번가, 쿠팡 등 외부 마켓에 등록하고, 재고 및 주문을 통합 관리해 운영 효율성을 높여주는 서비스 개발

기술 스택 : React.js, Javascript, SCSS

PHP 기반 상용 서비스의 React 리팩토링

-> 기존 PHP 시스템을 React로 리팩토링해 코드 재사용성을 향상시키고, 유지보수 시간을 단축

• React의 컴포넌트 기반 구조로 UI를 모듈화 -> 재사용성을 높이고 코드 중복을 최소화

• 다양한 속성(디폴트 선택지, 전체 선택 옵션 등)을 가진 체크박스를 공통 컴포넌트로 제작 
-> 불필요한 리렌더링을 최소화하고 성능 최적화

사용자 편의성 증대 - 단계별 Form UI

-> 단계별 폼 구현으로 사용자 이탈률을 감소

• 동적 폼 설계: 각 단계의 선택지에 따라 다음 입력 항목이 변경되도록 설계하여 사용자 경험을 유연하게 제공

• Progress Indicator를 추가해 사용자가 현재 위치와 남은 단계를 직관적으로 확인 가능한 UI

• React의 상태 관리를 통해 사용자가 이전 단계로 돌아가더라도 입력값을 보존함 → 재입력 필요를 줄여 사용자 만족도 증가

보안 향상 - 자동 세션 관리

-> 로그인 토큰 만료 시 자동 로그아웃 기능으로 세션 관리 오류 및 보안 사고를 예방

• 로그인 토큰을 로컬 스토리지에 저장하고 만료 시간 기반 타이머로 자동 로그아웃 기능 구현 → 사용자의 부주의로 인한 세션 노출 방지

대량 데이터 가독성 향상 - 고정 열 테이블 UI

-> 대량 데이터 테이블에 고정 열을 추가하여 스크롤 시 중요한 정보를 항상 보이도록 유지

• 일반 스크롤 방식 대비 사용성 개선: 사용자가 긴 목록에서도 쉽게 원하는 데이터에 접근

프로젝트 진행 속도 향상

-> 기능 요구 사항과 페이지 흐름을 Figma로 문서화해 이해도를 높이고, 개발 착오를 줄여 프로젝트 완료 시간을 단축

• 줄 글 형태로 전달된 요구 사항을 Figma를 활용해 시각적으로 정리 → 비개발 팀원도 기능의 전체 흐름을 직관적으로 이해하게 돕고 커뮤니케이션 효율성을 향상

목적 : 대규모 사용자 기반의 SNS 서비스 관리 도구(어드민) 개발

기술 스택 : Vue2, JavaScript, Vuex, SCSS

실무 협업 경험
-> 기획, 디자인, 백엔드, 인프라, 프론트엔드 팀과 협업하여 프로젝트 완료

대시보드, 회원 관리, 콘텐츠 관리, 신고 처리, 결제 이력, 쿠폰 관리, 관리자 권한 설정 등 다양한 도메인을 다루며 프론트엔드 실무 역량을 쌓음

협업 중 발생할 수 있는 기획 누락 및 중복 문의를 방지하기 위해 소통 시트를 작성해 최종 변경안을 모든 팀원이 공유하도록 기록함

대규모 CRUD 시스템 구축

-> 140여 페이지에 걸쳐 생성, 조회, 수정, 삭제 기능을 구현

• 규모 있는 프로젝트를 통해 복잡한 기능을 체계적으로 구현 → 데이터 관리의 중요성을 실감하며 실무 역량을 강화

재사용 가능한 유틸리티 함수 개발 및 팀 내 공유

-> QA 과정에서 반복되는 이슈 해결을 위해 재사용 가능한 유틸리티 함수를 설계하여 팀에 공유함으로써 버그 수정 시간 단축

• 자주 발생하는 에러 패턴을 분석해 함수화 및 모듈화 → 코드 일관성 유지와 함께 개발 효율성 향상

기술적 성장

-> 무한 스크롤, Chart.js, 카카오 디벨로퍼스 API, 결제 시스템 등 다양한 기술을 적용하며 실무 역량 강화

• 프로젝트 진행 중 컴포넌트 구조를 설계했으나 더 다양한 디자인 패턴을 적용하지 못한 아쉬움이 남음 
→ 이를 보완하기 위해 디자인 패턴 관련 스터디 진행

팀 구성 : 6명 (프론트엔드 3명, 백엔드 2명, 디자이너1명)

목적 : 개인과 그룹으로 나누어 할 일을 관리하는 서비스 사이트와 어드민 사이트 개발

기술 스택 : Next.js 14, TypeScript, Tanstack query, Tailwind CSS, Turborepo

UI 일관성 향상

• Turborepo를 활용하여 두 가지의 프로젝트에서 공통 UI 컴포넌트를 재사용함으로써, UI 일관성을 유지하고 코드 중복을 줄이는 작업을 수행

API 효율화 및 토큰 관리

• Axios Interceptor를 활용해 모든 API 요청에 액세스 토큰을 자동 포함함으로써 API 호출의 안정성과 효율성 향상

• 쿠키 기반 토큰 관리를 통해 토큰 만료 시 리프레시 토큰으로 자동 갱신되도록 설계 → API 호출 시 보안성이 높아지고, 사용자 인증 과정이 간편해짐

회원가입 기능 구현

• 회원가입 완료율을 높이기 위해 실시간 유효성 검사와 상태 관리를 통해 사용자 친화적인 회원가입 폼 개발

노트 관리 페이지 개발

• 노트 생성, 수정, 삭제 및 텍스트 편집 기능 구현 → 상태 관리를 통해 변경 사항을 즉각 반영하여, 편리한 노트 관리 기능으로 사용자 만족도가 증가

웹 접근성

• Next.js의 SSR을 통해 OG 태그를 활용하여 웹 접근성과 SEO 최적화를 수행→ Lighthouse 점수가 90점 이상으로 향상

목적 : 효과적인 기업 소개를 위한 사이트 개발

기술 스택 : React, TypeScript, SCSS

프로젝트 기획 및 구현

• React와 TypeScript를 사용해 기업사이트 기획, 디자인, 전반적인 구현

상태 관리 최적화

• 상태 관리 방식 학습: 다양한 상태 관리 라이브러리를 도입하여 효율적인 상태 관리 방식을 학습 다양한 상태 관리 라이브러리를 도입해 효율적인 상태 관리 방식 학습

• 커스텀 훅을 이용한 반응형 웹사이트 전역 변수 관리로 유연한 레이아웃 구현

사용자 맞춤 UI 제공

• 다크 모드 UI 구현: 사용자 설정에 따라 다크 모드 전환 가능

• 팝업 노출 제한: 쿠키를 활용해 일정 시간 동안 팝업 노출 제한하여 사용자 경험 최적화 외부 API 활용 및 데이터 처리

• 반응형 웹 : 모바일, 태블릿, 데스크톱 등 세 가지 주요 해상도에 맞춰 레이아웃과 타이포그래피를 조정하고, 클릭 및 터치 영역을 사용성에 맞게 최적화하여 사용자 맞춤형 UI를 구현

외부 API 활용 및 데이터 처리

• YouTube Data API: 사용자 방문 시간 증가를 위해 기업 계정의 유튜브 플레이리스트, 댓글, 유저 정보 제공 및 검색 기능 구현

• Flickr API: 기업 계정 이미지 데이터를 활용해 갤러리 구현, 키워드 검색 및 SVG 마스크 선택/토글 기능 추가로 사용률 증가를 유도

커뮤니티 기능 구현

• CRUD 게시판과 댓글 추가/삭제, 공감 기능 구현

회원가입 폼 및 실시간 유효성 검사

• 사용자 이탈률 감소를 위해 회원가입 입력 폼에 실시간 유효성 검사 기능을 적용해 사용성 개선