안녕하세요. 저는 웹 개발자
유승윤입니다.
저는 끊임없는 도전을 즐기며,
웹 개발의 매력에 빠져 있습니다.
사용자에게 먼저 다가갈 수 있는 웹사이트의 프론트엔드 부분을 담당하고 있습니다. 제 웹 포트폴리오를 방문해 주셔서 진심으로 감사드립니다.
01.
About Me
다나와에서 프론트엔드 개발자로 일하며, Next.js 기반 플랫폼 마이그레이션 업무를 담당하고 있습니다.
컴포넌트 설계, 렌더링 최적화, 상태 관리, 협업을 고려한 코드 구조화에 관심이 많으며 더 나은 사용자 경험을 만드는 데 집중하고 있습니다.
02.
Experience
커넥트웨이브(다나와)
Frontend Developer
2026.01 - 현재
- 다나와 가격검색 페이지 플랫폼 마이그레이션
2024.12 - 2025.12
- Next.js 도입 및 Docker 기반 CI/CD 자동화 구축
- 자동차 TCO PC/Mobile 페이지 개발
- 렌터카 알림톡 페이지 개발
- 자동차 소모품 섹션 개발
03.
Skills
Skill Stack @ Language
HTML5
• 기본적인 HTML 태그를 사용할 수 있습니다.
CSS
• 순수 CSS만을 이용하여 레이아웃을 할 수 있습니다.
Javacript
• ES6+ 문법을 활용하여 코드를 작성 할 수 있습니다.
Typescript
• 타입을 활용하여 명확한 코드를 작성할 수 있으며, 제네릭, 인덱싱, 유틸리티 타입을 사용할 수 있습니다.
Java
• 학부생시절 재밌게 배웠던 언어이며, 2~3학년 동안 자바로 과제나, 프로그램을 작성했습니다.
Skill Stack @ FrontEnd
React
• 리액트로 여러 프로젝트를 해봤으며, ContextAPI, useReducer, useState, useCallBack, useMemo, Suspense를 활용 할 수 있습니다.
NextJS
• 상황별로 SSG, SSR, CSR를 활용할 수 있습니다. • middleware와 API를 작성할 수 있습니다.
Axios
• interceptors를 이용하여 에러와, 요청 전처리를 할 수 있습니다. • 재요청 로직을 프로젝트에 적용한 경험이 있습니다.
TailwindCSS
• 최근 즐겨 사용하고 있습니다. 프로젝트에 적용한 경험이 있습니다.
PostCSS
• CSS 모듈을 활용하여 CSS 작성하는 것을 좋아합니다.
TanstackQuery(ReactQuery) v3~5
• API 로직 분리와 캐싱을 위해 사용해 왔으며, 프로젝트 적용 전 변경사항을 확인하며 적용해오고 있습니다. • SuspenseQuery, OptimisticUpdate를 활용할 수 있습니다.
Zustand
• 최근 프로젝트에 전역 상태 관리를 위해 사용한 경험이 있습니다. • localStorage와 연동, reducer형태로 적용한 경험이 있습니다.
Recoil
• 프로젝트에 전역 상태 관리를 위해 사용한 경험이 있습니다. • localStorageEffect를 이용하여 localStorage와 연동한 경험이 있습니다.
Redux
• 프로젝트에 적용한 경험이 없지만, 혼자 리덕스가 무엇인지 알기 위해 사용해본 경험이 있습니다.
React-Router-Dom v6
• SPA 프로젝트의 네비게이션을 위해 적용한 경험이 있습니다.
Jest
• React-Testing-Libary를 사용하기 위해 학습한 경험이 있습니다.
React-Testing-Libary
• React-Testing-Libary를 사용하여 프로젝트에 적용한 경험이 있습니다. • 전체를 테스트 하지 않았지만, 어떻게 사용하는지를 알게되었습니다.
PlayWright
• 최근 프로젝트의 테스트를 눈으로 확인하며 하려고 사용해봤습니다. • 조금씩 적용하고 있습니다.
Skill Stack @ BackEnd
Express
• React와 Express를 학습 후 첫 간단한 프로젝트의 백엔드 프레임워크로 사용한 경험이 있습니다.
Spring-Boot
• 프로젝트에 사용한 경험은 없지만, 스프링부트가 무엇이고 어떻게 사용하는지 궁금해서 강의나 책을 보며 따라 해 본 경험이 있습니다.
Skill Stack @ Database
Mysql
• 학부생 시절 배운 적이 있습니다.
Skill Stack @ ETC
AWS-EC2
• NextJS 프로젝트를 EC2에 배포해 본 경험이 있습니다.
AWS-S3
• React 프로젝트를 S3에 배포해 본 경험이 있습니다..
Docker
• NextJS 프로젝트를 Docker 파일을 작성하여 배포해 본 경험이 있습니다.
Git
• 코드 저장과 버전 기록을 위해 사용했습니다.
Github
• 외부 저장과 협업을 위해 사용하였습니다.
Gitlab
• 외부 저장과 협업을 위해 사용하였습니다.
Netlify
• React 프로젝트를 배포해 본 경험이 있습니다.
Vercel
• NextJS 프로젝트를 배포해 본 경험이 있습니다.
04.
Main Projects
Main Project
하얼남
2024.06 ~ 2024.07
자신의 하루를 어떻게 사용했는지 시각화하여 볼 수 있게 해주는 타이머 서비스입니다. Nextjs로 만든 프로젝트이며, PWA를 활용해 앱을 사용하는 듯한 사용자 경험을 제공해줍니다. Nextjs로 만든 프로젝트이며, ec2서버를 사용해서 배포했습니다.
- React
- NextJS v14
- PWA
- TailwindCSS
- React-Query v4
- Zustand
- Nginx
- Docker
- Github
- Express
- Prisma
- Typescript
Main Project
Emmerce
2023.10.16 ~ 2024.01.05
Next.js를 이용한 쇼핑몰 프로젝트입니다. SSR, CSR, SSG를 조합하여 이머스를 구축하였으며, Next.js(13~14) 숙련도 향상과 함께 GitLab-Issue 기록, AWS, Docker, GitLab-Runner를 활용한 인프라 구성을 목표로 했습니다.
- React
- NextJS v14
- TailwindCSS
- React-Query v5
- Zustand
- Nginx
- Docker
- GItlab
- KakaoAPI
- Typescript
Main Project
Poje
* AWS 기간이 만료되어 운영중이지 않습니다.2023.01.15 ~ 2023.03.25
포트폴리오를 제작 및 공유하는 프로젝트입니다. 로직분리를 위한 Hooks 패턴과 React-Query를 활용한 데이터 캐싱을 목표로 했으며, React-Testing-Library를 적용하여 테스트코드를 작성했습니다.
- React
- React-Query v4
- Recoil
- AWS S3
- React-Testing-Library
- React-Router-Dom v6
- GitHub Actions
- Typescript
Main Project
혼밥메이트
* AWS 기간이 만료되어 운영중이지 않습니다.2022.03 ~ 2022.11
대학교에서 밥을 같이 먹을 사람을 구하는 프로젝트입니다. Soket.io, Stompjs를 활용해서 실시간 위치공유, 채팅 기능을 구현했으며, 프로토타입을 위해 Express를 활용한 테스트 서버 및 소개 페이지를 제작했습니다.
- React
- React-router-dom
- ContextAPI
- StompJS
- Socket.io
- Express
- Mysql
- KakaoMapAPI
- Javascript
Main Project
Package
* heroku 기간이 만료되어 운영중이지 않습니다.2022.02 ~ 2022.3
React와 Express를 학습 후 처음으로 제작한 택배 및 등기 관리 프로젝트입니다.
- React
- Express
- React-Router-Dom
- Javascript
Sub Projects
무신사 크롤링
무신사 크롤링입니다. playwright를 사용해 구현했습니다.페이커 페이지
페이커 헌정 기념 스크롤 인터랙션 페이지SeYn Portfolio
Brittany Chiang의 포트폴리오 디자인을 참고하여 포트폴리오를 제작했습니다.원티드 프론트엔드 인턴십
원티드에서 주관하는 프론트엔드 인턴십 교육입니다.
4주 동안 4개의 과제를 하여 프론트엔드 팀원들과 협업하여 진행하는 방식으로 과제를 수행했습니다.
Contact
저와 함께 작업하고 싶거나, 더 많은 정보를 원하신다면 언제든지 연락주세요. 새로운 기회를 기다리고 있습니다!