미리보기

사내 관리회계시스템 프로젝트

• 재무 담당자로 시스템 구축부터 서비스 론칭, 고도화까지 프로젝트 전 과정에 참여했습니다.
• 시스템 개발을 통해 데이터를 보다 직관적이고 시각적으로 표현할 수 있다는 점에 큰 매력을 느꼈고, 프론트엔드 개발에 대한 관심을 갖게된 결정적인 계기가 되었습니다.

전사 ERP 도입 프로젝트

• 다양한 유관 부서와 협력하여 업무 프로세스를 분석 및 모듈화하고, 분산된 데이터와 업무 프로세스를 통합하여 최적화된 업무 방식을 구축하는 데 기여했습니다.
• 이 과정에서 효과적인 커뮤니케이션과 협업을 통해 부서 간 이해관계를 조율하는 경험을 했습니다.

프로젝트 소개

• 수준별 운동 매칭을 통해 실력이 비슷한 사람들과 운동을 즐기고 운동 수준(티어)을 평가받을 수 있는 서비스
• 사용 기술 : Next.js, TypeScript, React-query, TailwindCSS
• 팀 구성 : FE 3명, BE 3명, Disigner 1명
• Github : 링크

역할 및 기여

1. SSR/CSR 페이지 구현
   • 게시물 상세 페이지: SEO 최적화와 초기 로딩 속도를 줄여 사용자 이탈을 막기 위해 SSR로 구현
   • 게시물 작성 및 수정 페이지: 사용자와 상호작용이 많은 페이지로, 동적으로 입력값을 변경하기 위해 CSR로 구현
2. React-hook-form 라이브러리를 활용한 비제어 컴포넌트 구현
   • 한 페이지 내 다수의 입력/선택 필드가 존재해 값 변경 시 페이지 전체의 불필요한 렌더링 발생
   • 이를 해결하기 위해, 제출 시에만 각 필드의 값을 동기화할 수 있는 비제어 컴포넌트를 도입
3. 재사용 가능한 컴포넌트 설계 및 구현
   • 디자인 시스템과 요구 사항에 맞는 재사용 가능한 컴포넌트 설계 및 구현

트러블 슈팅

Kakao Map API 연동

• react-kakao-maps-sdk 라이브러리를 활용해 사용자가 운동할 장소를 선택할 수 있는 기능 구현 중, 스크립트 로딩 타이밍 문제로 window.kakao 객체가 제대로 초기화되지 않음.
• Next.js의 Script 태그에 strategy 속성을 beforeInteractive로 설정해 페이지의 하이드레이션 이전에 SDK 스크립트가 먼저 로드되도록 조치하여 문제 해결

프로젝트 소개

• 동물의 숲을 모티브로, 내 숲의 주민들을 선택해 사고 팔 수 있는 서비스
• FE 사용 기술 : TypeScript, Next.js, React-query, TailwindCSS
• BE 사용 기술 : TypeScript, Nest.js, Prisma, AWS RDS
• Client Github : 링크
• Server Github : 링크

역할 및 기여

• 회원 인증(회원가입 / 로그인 / 로그아웃) 및 유효성 검증 절차 구현
• JWT 토큰 인증 절차 구현
• 게시물 CRUD 및 좋아요 Toggle 기능
• 반응형 웹 구현 (데스크탑 / 태블릿 / 모바일)

프로젝트 소개

• 위치 서비스를 기반으로 동네 주민들과 물물 혹은 재능 교환을 할 수 있는 서비스
• 사용 기술 : React, TypeScript, Reduxjs/toolkit, Styled-component
• 팀 구성 : FE 2명, BE 1명, Disigner 2명
• Github : 링크

역할 및 기여

• 메인페이지, 게시물 작성 페이지, 오퍼 페이지, 채팅 페이지, 검색페이지 담당
• React DevTools을 통해 컴포넌트의 렌더링을 분석하고, 메모이제이션 Hook 사용
• 반복되는 동일 로직에 대해 useModal, useNavigate 등 Custom Hooks 구현

프로젝트 소개

• 원하는 문구로 URL 주소를 만들고, 온라인으로 편지를 작성하고 보낼 수 있는 서비스
• 사용 기술 : React, JavaScript, Zustand, Styled-component
• 팀 구성 : FE 3명, BE 3명
• 현재 서버 다운 상태입니다.

역할 및 기여

• 회원 인증 절차(회원가입 / 로그인) 및 편지 조회 페이지 담당
• Cookie와 Web Storage를 활용한 JWT 인증절차 구현
• Web Speech API를 이용한 음성 TTS 기능
• Dom to image, File Saver를 활용한 이미지 저장 기능

팀 프로젝트로 진행한 Sweatier에서 FE 개발을 담당하여 최우수상을 수상했습니다.

• 기간 : 2023.12 - 2024.03
• 프론트엔드 과정 : React, Next.js, TypeScript 기반
• 백엔드 과정 : Nest.js, TypeScript, Prisma, AWS RDS 기반
• 개인 프로젝트 / 팀 프로젝트

• 매주 주제를 선정해 Github에 학습한 내용을 업로드하고 발표 및 토의
• 기간 : 2024.01 - 2024.02
• Github : 링크

• 매주 2개의 주제를 선정해 발표 및 토의 면접 진행
• 기간 : 2023.05 - 2023.12
• Github : 링크

• 매주 프론트엔드 및 CS 주제를 선정해 Github에 학습한 내용을 업로드하고 발표 및 토의
• 기간 : 2023.05 - 2023.06
• Github : 링크

• 기간 : 2023.03 - 2023.12