안녕하세요 👋
프론트엔드 엔지니어 신주안입니다.
2년차 프론트엔드 개발자로 스타트업에서 웹 서비스를 개발/배포/운영하였습니다. 기존 프로젝트 투입 및 새로운 프로젝트의 기획 및 개발을 담당하여 처음부터 끝까지 책임졌던 경험이 있습니다.
저는 항상 적극적이고 능동적인 자세로 도전에 임하며, 문제를 발견하고 해결하는 것을 두려워하지 않습니다. 프론트엔드 신입으로 입사했으나, 회사의 요구에 따라 백엔드 업무까지 맡게 되어 두 분야 모두에서 실무 경험을 쌓을 수 있었습니다.
항상 기술적인 성장을 위해 최신 기술 학습에 관심이 많고, 주도적으로 문제를 발견하여 분석하고 해결하기 위해 노력하고 있습니다. 이를 통해 팀 내에서의 역량을 발휘하고, 최고의 결과 물을 만들어내고자 합니다.
Work Experience
이노즈 (Inroes)
Frontend Developer
2024.07 ~ 2024.09 (3개월)
개발팀 / 매니저
클라이언트 프론트엔드 엔지니어
린미 Linme
2024.07 ~ 2024.09 (프론트엔드 2인 개발)
Description
건강 기능 식품 이커머스 플랫폼
Work
- 레거시 코드 리팩토링 : 기존 레거시 코드를 리팩토링하여 코드 가독성 향상 및 재사용성 향상
- 성능 최적화 : TanStack Query를 도입하여 불필요한 API 호출을 50% 감소하고 컴포넌트 분리로 페이지 로딩 속도 개선
- 아키택처 개선 : DDD 원칙을 적용한 폴더 구조 재설계로 개발 생산성 향상
Tech Stack
React, TanStack Query, SCSS/Sass
마켓잇 (Marketit)
Frontend Developer
2022.11 ~ 2024.03 (1년 4개월)
신사업실 개발팀 / 매니저
프론트엔드 엔지니어
캐디 Caddy
2023.11 ~ 2024.03 (프론트엔드 1인 개발)
Description
실제 인물 이미지를 AI 인플루언서 이미지로 변환하는 B2B 서비스
Work
- 초기 페이지 로딩 속도 개선 : 초기 화면에 고해상도 이미지로 인해 로드 시간이 느려지는 문제를 해결하기 위해, next/image 컴포넌트를 사용하여 AVIF와 WebP 형식으로 이미지를 최적화하고, lazy loading과 priority 속성을 적용하여 🔗 초기 페이지 로드 시간을 약 4초에서 0.97초로 개선하였습니다.
- 시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선 : 로딩 화면이 오래 지속되는 문제로 인한 사용자 경험 저하를 해결하기 위해 API 호출 로직을 수정하여 실시간으로 이미지를 생성하고 사용자에게 지속적으로 업데이트를 제공함으로써 🔗 사용자 경험을 개선하였습니다.
- 사용자를 위한 데이트 시각화 차트 개발 : 인플루언서의 팔로워 수 등락을 시각적으로 표현하기 위해 ApexCharts.js 라이브러리를 도입하여 🔗 데이터 시각화를 위한 차트를 개발하였습니다. 이를 통해 사용자들이 데이터를 더 쉽게 이해하고 분석할 수 있게 하였습니다.
- 링크 공유 시 필터링 조건 유지 기능 구현 : 기존 상태 관리 방식을 개선하여 🔗 쿼리 파라미터를 활용한 URL 필터링 기능을 구현하고, 재사용 가능한 useQueryParams 커스텀 훅을 개발하여 팀 간 협업과 코드 유지보수성을 향상시켰습니다.
- 크레딧 및 멤버십 결제 기능 구현 : 포트원 모듈을 사용하여 🔗 구매 정책을 위한 결제 기능 구현하였습니다. 이를 통해 안전하고 편리한 결제 시스템을 구축하였습니다.
Tech Stack
Next.js 13, TypeScript, Tailwind CSS, TanStack Query, Recoil
원트모어 WantMore
2023.04 ~ 2024.05 (프론트엔드 기여도 20%)
Description
포스팅 커머스 플랫폼
Work
- 이미지 업로드 모듈 개선 : 이미지 업로드 모듈의 편의성을 개선하였습니다. 사용자가 여러 장의 이미지를 등록한 후 수정할 때, 순서를 원하는 대로 지정할 수 있도록 이미지에 인덱스 기능을 추가하고, 체크박스 선택 여부에 따라 순서를 자유롭게 조정할 수 있게 하여 사용자 경험 개선 하였습니다.
- 인턴 멘토링 및 팀 협업 경험 : 멘토로서 인턴 두 명과 함께 프로젝트를 수행하며 효과적인 팀 협업을 경험했습니다. 모르는 부분에 대해 적극적으로 공유하고, 코드 리뷰를 통해 코드를 개선하고 향상시켰습니다.
Tech Stack
Next.js 12, TypeScript, Tailwind CSS
인플카 Inflca
2022.11 ~ 2023.11 (풀스택 개발)
Description
포스팅 커머스 플랫폼
Work
- 웹 퍼블리싱 및 페이지 구현 : 프로젝트 전반의 웹 퍼블리싱을 담당하여, 디자인 시안에 맞춰 모든 페이지를 구현하였습니다.
- 업무용 API 개발 : 회원 정보 수정, 이벤트 관리, 상품 등록 등을 위한 업무용 API를 개발하여 내부 운영 효율성을 높였습니다.
- 관리자 리스트 화면 개발 및 데이터 관리 : 회원 목록, 포스팅 검수, 이벤트 관리 등의 업무에 필요한 리스트 화면을 개발하여 관리자들이 쉽게 데이터를 관리하고 모니터링할 수 있도록 하였습니다.
- 데이터 시각화 차트 도입을 통한 UI/UX 개선 및 데이터 분석 지원 : 일자별 매출, 회원 수 등락, 등급별 유저 현황 등을 기존 수치로만 보여주던 부분에서 시각화 차트 도입하여 한눈에 파악할 수 있도록 UI/UX 개선하였습니다. 이를 통해 관리자들이 데이터를 더 쉽게 이해하고, 빠르게 의사 결정을 할 수 있도록 지원하였습니다.
Tech Stack
Spring Boot, Thymeleaf, jQuery, JPA, Mybatis, Bootstrap
Other Experience.
개인 기술 블로그
2023.10 ~ 현재
Description
🔗 ju4n-devlog.site 라는 개인 기술 블로그를 직접 개발하고 배포하여 운영하고 있습니다. 최신 기술 트렌드와 해결하고 싶은 기술적인 문제들에대해서 다루고 있으며, 새로운 기술을 공부하고 배운 내용을 체계적으로 정리하고 공유하고 있습니다. 있습니다.Work
- Next.js의 SSR을 활용한 SEO 향상 : 검색 엔진 최적화를 위해 Next.js의 서버 사이드 렌더링(SSR)을 활용하여 SEO 성능을 크게 향상시켰습니다.
- MarkDown 파일 파싱 : 포스팅을 MarkDown 파일로 작성할 수 있도록 하고, 시멘틱 태그로 변환하여 접근성과 검색 엔진 가독성을 개선하는 파싱 로직을 개발하였습니다.
- 반응형 레이아웃 및 다크모드 구현 : 다양한 디바이스와 사용 환경에서 일관된 사용자 경험을 제공하기 위해 반응형 레이아웃과 다크모드를 구현하여 모바일 및 데스크탑 사용자 모두에게 최적의 인터페이스를 제공하였습니다.
- 개발 생산성과 커스터마이징 용이성을 고려한 shadcn/ui 라이브러리 사용 : 기술 블로그 제작 시, 개발 생산성과 UI 일관성을 유지하고 반응형 디자인 및 커스터마이징 용이성을 높이기 위해 shadcn/ui 라이브러리를 선택하여 사용하였습니다.
Tech Stack
Next.js 13, TypeScript, Tailwind CSS, shadcn/ui
수원대학교
운동건강관리학과
2015.03 ~ 2021.02
수원대학교에서 운동건강관리학과를 전공하였습니다. 2016년에는 학생회, 2020년에는 체육대학 부학생회장을 역임하며 학생들의 의견을 수렴하여 학교와 학생들의 소통을 원활하게 하였습니다.
Skills.
- Front-End : React, TypeScript, Next.js, TanStack Query, SWR, Zustand, Recoil, Tailwind CSS
- Back-End : MySQL, NestJS, TypeORM