[주요업무 및 경험] 사용자 페이지 개발 - Vercel을 활용한 프로젝트 초기 세팅 및 CI/CD 환경 구성 - Figma 디자인 시안을 바탕으로 퍼블리싱 및 프론트엔드 개발 전체 담당 (기여도 100%) - 차트라이브러리를 통한 데이터 시각화 - 사용자 친화적인 인터랙션을 위해 로딩 스피너, 상태에 따른 조건부 렌더링 등 세부 동작 최적화 - 반응형 UI/UX 적용 Tanstack Query 도입 및 데이터 캐싱 최적화 - 동일 요청에 대한 자동 캐싱 및 캐시 유지시간(Query staleTime) 설정을 통해 네트워크 사용량 감소 및 UX 개선 - refetchOnWindowFocus, staleTime, enabled 등 옵션을 활용해 데이터 갱신 전략 최적화 - 컴포넌트 간 공유되는 데이터를 전역에서 효율적으로 관리하여 UX 향상 - 중요 데이터(예: 실시간 대시보드, 통계 등)에 대해서는 조건부 refetching 적용 로그인 흐름 UX 개선 및 서버 인증(Middleware) 도입 - Next.js 초기 진입 시 UX 문제(플리커)를 해결하기 위한 서버 인증 흐름 도입 - 기존 sessionStorage 기반 인증에서 쿠키 기반 인증 추가하여 미들웨어에서 제어 가능하도록 개선 - 로그인 여부를 서버컴포넌트에서 선판단하여 /login 또는 /dashboard로 자연스럽게 라우팅되도록 UX 흐름 최적화 - 쿠키 + 세션스토리지 병행 사용으로 SSR/CSR 환경 모두에서 인증 상태 일관성 유지 유지보수 및 최적화 - 전체 프로젝트에 대한 코드 컨벤션 적용 (디렉토리명, 디렉토리구조, 컴포넌트명 등) - React.memo사용으로 불필요한 리렌더링 방지 - 페이지 별사용하는 비즈니스로직과 UI 로직 분리 - Next.js의 dynamic import와 ssr: false 옵션을 사용해 초기 불필요한 JS 코드가 로딩되지 않도록 최적화 - Lighthouse 성능 점수가 높아지고, Core Web Vitals 기준(LCP, TTI 등)도 함께 향상됨 어드민페이지 개발 - 퍼블리싱 및 프론트엔드 업무 및 개발 (기여도 100%) - 차트로 데이터 시각화 - oauth 구글 소셜로그인 연동 - 프론트엔드 인프라 vercel 초기 세팅 및 배포진행

查看更多

[주요업무 및 경험] 사용자 페이지 퍼블리싱 및 개발 - 프로젝트 전반적인 프론트엔드 업무 진행(기여도 60%) - ApexChart 그래프를 활용한 데이터 시각화 - 반응형 퍼블리싱 Apple 소셜 로그인 도입 - OAuth 2.0 기반 Apple 소셜 로그인 기능 신규 도입 - 로그인/회원가입 분기 처리 및 토큰 유효성 검증 로직 개발 - 기존 구글 로그인과 통합하여 통합 인증 로직 개선 - iOS 디바이스 테스트를 통한 UX 안정성 확보 결제프로그램 PG 도입 - 헥토파이낸셜(PG사) 결제 모듈 연동 및 결제 프로세스 구현 - PG사 API를 활용한 결제 요청, 응답 처리 및 결과 검증 로직 개발 - 결제 완료/실패/취소에 따른 후처리 로직 및 상태 관리 처리 웹페이지 SEO 최적화 - 페이지 별 메타태그 적용 - og이미지 설정으로 미리보기에 최적화된 이미지 사용 유지보수 및 성능최적화 - 북마크 기능 반응속도 최적화 (낙관적 업데이트 적용) - UI 애니메이션 적용 - 자주 바뀌지 않는 데이터 캐싱 후 사용 이로인해 ux개선에 도움이 됨(2시간에 한번씩 호출하도록 변경) [외주프로젝트] [주요업무 및 경험] 어드민 페이지 개발 - 서비스 운영을 위한 어드민 페이지 신규 개발 - 리소스 관리, 계정 관리, 통계 시각화 등 주요 기능 구현 - 조건별 필터, 테이블 정렬, 페이지네이션 등 UI/UX 개선 - 비효율적인 하드코딩을 제거하고 공통 컴포넌트로 모듈화 - Context Api를 활용한 상태 관리 및 코드 구조 개선

查看更多

[주요업무 및 경험] 공통 UI 컴포넌트 개발 - next.js react.js 기반의 DnD UI컴포넌트 개발 (react-beautiful-dnd 라이브러리 활용) - 레이아웃 UI컴포넌트 개발 - 모달창 컴포넌트 개발 - 슬라이드 UI 컴포넌트 개발 (swiper 라이브러리 활용) API 개발 참여 - node.js express 기반의 api 개발 (CRUD) 스터디 및 기술검토 - TDD (jest , react-testing-library) 적용 기술 검토

查看更多

[주요업무 및 경험] 사용자 페이지 개발 - Restful API를 사용하여 resource 생성 및 디테일 페이지 개발 - 불필요한 렌더링 방지를 위한 react hooks 사용 - 백엔드 개발자와 협업하여 DB정보에 따른 팝업창 유/무 개발 유지보수 - 사용자의 password 상태가 Request Payload에 노출되는 현상 발생 Base64를 사용하여 인코딩 후 DB전달 개선 - antd를 사용해 RDB관리 페이지 UI개선 - 간단한 UI 수정 및 하드코딩 개선 - 자주사용되는 코드 모듈화 및 업데이트

查看更多