미리보기

프로젝트 요약

영화 취향이 비슷한 사람들과 클럽을 만들고 함께 리뷰를 공유할 수 있는 소셜 플랫폼

• 기술스택: React, Vite, TypeScrpt, react-query, Axios, Zustand, Storybook, Emotion, Npm, ESLint, Prettier, AWS

• [프론트엔드 레포지토리]

• [디자인시스템 레포지토리]

담당 업무

1. 컴포넌트 설계 및 개발 [적용 과정 블로그]

• Atomic Design Pattern 적용하여 일관된 컴포넌트 설계 및 개발

• 재사용성과 사용자 정의 가능성을 고려하여 컴포넌트 분리 결정

• 디자인 시스템 명칭 및 property 타입을 고려하여 100%의 atom 및 molecule 구현

• NPM으로 배포하여 버전관리 및 유지보수성 보장

2. 데이터 캐싱 최적화

• react-query를 도입하여 데이터 캐싱 최적화 + 데이터 신선도 유지

• useInfiniteQuery을 통해 무한스크롤을 구현하여 데이터 로딩 시간을 감축

3. React 18 버전의 Concurrent Rendering을 적용

• Suspense, ErrorBoundary을 적용하여 사용자 경험 및 UI 안정성을 개선

• useApiError hook 유틸함수 작성 - 에러 핸들링을 설계하여 에러 발생 시 유저에게 가이드라인 제시

4. UI 접근성 향상

• 라이트테마, 다크테마를 구현하여 유저의 접근성을 향상

• Moblie과 PC 2가지 버전의 반응형 UI를 구현

• React-quill 라이브러리를 커스텀하여 글 작성 시 풍부한 에디터를 제공

• tosspayments-sdk 사용한 간편한 PG 결제를 진행

프로젝트 요약

반려동물 관련 커머셜 상품을 구매할 수 있는 쇼핑 플랫폼

• 기술스택: React, Vite, JavaScript, Axios, Zustand, Material UI, Styled-Component, ESLint, Prettier, Supabase(Edge Function + Deno), Vercel

• [프론트엔드 레포지토리]

담당 역할

• Frontend 팀원 5명 중 기획 및 개발 리드를 담당

• 모바일 퍼스트(moblie-first) 환경 구축으로 사용자 친화적인 사용성 제공

• Supabase Edge Function을 사용한 모든 주문, 결제 로직을 담당하며 커머스 서비스 로직 경험

• 홈 페이지, 주문 상품 페이지, 페스티벌 페이지, 마이 페이지 담당

• 페스티벌 참여 인증 기능 및 현장 QR 체크로 강화된 비즈니스 로직을 제공

프로젝트 요약

반려동물 관련 커머셜 상품을 구매할 수 있는 쇼핑 플랫폼

• 기술스택: React, Vite, JavaScript, Axios, Redux, Material UI, Node.js, Express, MongoDB, ESLint, Prettier

• [프론트엔드 레포지토리]

• [백엔드 레포지토리]

담당 역할

• 팀장으로서 기획 및 Frontend, Backend 개발 리드를 담당

• 클라이언트 및 서버 보일러 플레이트를 설정하고 팀원들에게 풀스택 개발 방법을 공유

• React Webpack -> Vite로 마이그레이션 - 빌드속도 7.66s -> 4.94s 로 2배 가량 개선

• 회원가입 및 로그인 구현 - Auth를 적용하여 안전한 인증 및 인가 시스템 구축

• 카카오맵 API를 활용한 위치 검색 기능 구현 및 장소 정보를 지도로 제공

• FullCalendar로 한 눈에 파악하기 쉬운 편리한 캘린더 정보를 제공

수행 프로젝트 상세

국가보안기술연구소 아웃소싱 - SPTB(Scenario-Protocol-Test-Bed) 웹 개발

• 서비스 구분 : 솔루션

• 사용 기술 : Vue3, TypeScript, pinia, Sass, Quasar, Springboot, Spring Security, MariaDB, Kotlin, Gitea, jenkins

주요 내용

• Web 프론트엔드, 백엔드 풀스택 개발

• 기존 레거시 실행파일을 웹(Web)페이지로 전환

• 기존의 페인포인트(pain-point)의 개선점을 찾아 클라이언트가 보다 쉽게 사용할 수 있도록 개선

• 시나리오 기반 제어 프로토콜(Modbus, OPCUA) 시험 환경 구축

[Frontend]

1. 회원가입 및 로그인

• JWT 만료 시 Regen Token으로 클라이언트 로직 구현 및 적용

• 로그인 시에만 이용 가능하도록 페이지 보안 가드 설정

2. 메인 페이지

• 로컬 스토리지를 활용하여 최근 설정 항목 리스트 즐겨찾기 기능 제공

3. 프로토콜 통신 설정 입력 페이지 및 결과 출력

• 유효성 검증을 통한 입력값 설정

• 설정값 저장 후 실시간 로그 데이터 출력 페이지 이동

4. 로그 조회 페이지

• 날짜에 따라 해당 데이터 로그 조회 기능 구현

[Backend]

WhiteList IP를 구현하여 보안 강화

• Data JOOQ로 접근 가능 IP, 활성화 관련 데이터 DB 관리

• WhiteList IP CRD 기능 및 API 구현

• IP filter 구현하여 허용 여부 판단 및 Security Filter 테스트

[CI/CD]

Jenkins & GITEA webhooks

• 형상 관리를 위해 Gitea 이벤트 발생 시 jenkins에서 build 이후 배포 및 서비스 자동화 단계까지 진행

교육 내용 요약

• 웹개발 기초: Java 기초, 알고리즘, Springboot 기초, HTML, CSS, JavaScript, React

• LG U+ 현직자 멘토링 진행

• 알고리즘 & CS 스터디 진행

관련 팀 프로젝트

1. 미니 프로젝트 -> 커뮤니티 플랫폼 웹 서비스(자율 프로젝트) Gather-U 프로젝트 수행

2. 종합 프로젝트 -> 반려동물 커머스 플랫폼 관련 프로젝트 PETSTIVAL 프로젝트 수행

3. 3⃣ 최종 융합 프로젝트

   -> 영화 및 소셜 플랫폼 관련 프로젝트 POV 프로젝트 수행

수상

• 종합 프로젝트 부분 최우수상 수상