"Hello, world!"

안녕하세요. 저는 웹 개발자

유승윤입니다.

저는 끊임없는 도전을 즐기며,
웹 개발의 매력에 빠져 있습니다.

사용자에게 먼저 다가갈 수 있는 웹사이트의 프론트엔드 부분을 담당하고 있습니다. 제 웹 포트폴리오를 방문해 주셔서 진심으로 감사드립니다.

01.

About Me

[첫인상을 주는 프론트엔드]

학부생 시절 PHP, JSP, Express, React를 활용한 웹 개발 경험이 있으며, 사용자에게 먼저 보여지는 프론트엔드에 흥미를 느껴 프론트엔드에 집중하고 있습니다.

[성장에 대한 즐거움]

새로운 프로젝트를 시작할 때마다, 단순히 이전에 사용하던 기술을 활용하는 것이 아닌, 이전 프로젝트에서 아쉬웠던 부분을 개선하고 새로운 코드 스타일이나 기술을 적용하는 것에 큰 즐거움을 느낍니다. 이는 개발에 있어서의 성장을 위한 동력이 되어주고 있습니다.

[꺾이지 않는 마음]

프론트엔드 개발은 대부분 혼자 진행했습니다. 이 과정에서 모든 것을 스스로 찾아내고 해결해야 했기 때문에, 때론 기능 구현에 며칠이 걸리기도 했습니다. 하지만 이런 과정을 통해 개발에 있어서 "해결할 수 없는 문제는 없다"는 확신을 가지게 되었습니다. 이로써, 꺾이지 않는 마음으로 어떤 문제든 극복할 수 있다는 자신감을 얻게 되었습니다.

프로필 이미지

02.

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 image

    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 프로젝트를 배포해 본 경험이 있습니다.

03.

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를 사용해 구현했습니다.
    • Javascript
    • Playwright
  • 페이커 페이지

    페이커 헌정 기념 스크롤 인터랙션 페이지
    • Javascript
    • canvas
    • Vercel
  • SeYn Portfolio

    Brittany Chiang의 포트폴리오 디자인을 참고하여 포트폴리오를 제작했습니다.
    • NextJS v14
    • TailwindCSS
    • React-Notion-X
  • 원티드 프론트엔드 인턴십

    원티드에서 주관하는 프론트엔드 인턴십 교육입니다.
    4주 동안 4개의 과제를 하여 프론트엔드 팀원들과 협업하여 진행하는 방식으로 과제를 수행했습니다.
    • React

Contact

저와 함께 작업하고 싶거나, 더 많은 정보를 원하신다면 언제든지 연락주세요. 새로운 기회를 기다리고 있습니다!

Send Mail