미리보기
기본 정보
"협업을 기반으로, 성과를 만들어내는 신입 프론트엔드 개발자 이우성 입니다." 1. 코드를 하나의 중요한 협업 문서로 생각합니다. 함께 이해하기 쉬운 코드 작성을 선호하여, 표준이 되는 공식 문서를 기반으로 학습하고 제공되는 예제를 활용하여 개발할 수 있도록 노력하고 있습니다. 2. 효율적인 협업 환경을 구축해 팀의 효율을 높이는 일을 좋아합니다. 개발 시 마주하는 문제를 팀의 문제로 인식하고 이를 해결 및 공유하여 팀의 성과를 만들어내고자 합니다.
기술 스택
Next.js, React, react-query, zustand, TypeScript, JavaScript, HTML/CSS, TailWindCSS, Git, GitHub
포트폴리오
프로젝트
FasTravel
삼성 청년 소프트웨어 아카데미(SSAFY)
2024.02. ~ 2024.04.
:: 프로젝트 소개
FasTravel은 여행 추천 서비스 어플리케이션으로, 여행을 계획하며 접한 블로그의 URL을 기반으로 블로그 글과 유사하면서 내 주변에서 찾아볼 수 있는 여행지 추천 및 여행 일정 작성을 도와주는 서비스입니다.
:: 프로젝트 환경
- 프로젝트 기간: 23.02.19 - 24.04.05 (7주)
- 프로젝트 인원: FE 3명, BE 3명 (6명)
- FE 개발 환경: Vite, TypeScript, Tailwind, React 18, React-Query v5, Zustand
:: 프로젝트 개발 사항
"FE 팀의 리더를 맡으며 팀 리딩 및 협업 환경을 구성하는데 많은 노력을 기울였던 프로젝트 입니다."
1. FE 팀 리더 역할로써 협업 환경 구성
git commit message 활용해서 commit 로그 통일하기
husky와 lint-staged를 이용해 안전한 코드 환경 구축하기
Axios instance로 협업 환경 개선하기
2. 여행 생성 페이지 개발
state를 이용해 페이지 분할을 적용하여 생성 페이지 개발
3. 인증 & 설문조사 & 마이페이지 개발
OAuth 인증 방식을 사용한 카카오, 구글 로그인 구현
각 분야별 장소 정보를 받아오기 위해서 react-query의 useQueries 활용
새로고침 기능을 위해서 react-query의 queryclient.refetchQueries 활용
닉네임 변경 시 중복 확인 api에 디바운스를 적용하여 api 호출 최적화
4. 검색 페이지 개발
검색어 입력 시 디바운스를 적용하여 api 호출 최적화
꿈:틀
삼성 청년 소프트웨어 아카데미(SSAFY)
2024.01. ~ 2024.02.
:: 프로젝트 소개
자신의 버킷 리스트를 공유하고, 나와 유사한 관심사를 가진 사용자들을 추천받으며 교류하는 SNS 서비스입니다. 잊고 있던 꿈을 발견하기도 하고, 그리고 다시 시작하기 위해 일어설 수 있도록 꿈을 실천하는 선순환을 만들기 위해 서비스를 기획했습니다.
:: 프로젝트 환경
- 프로젝트 기간: 24.1.03 - 24.02.16 (7주)
- 프로젝트 인원: FE 2명, BE 4명 (6명)
- FE 개발 환경: Vite, TypeScript, Tailwind, React 18, React-Query v5, Zustand
:: 프로젝트 개발 사항
"다양한 기술 스택을 도입해보면서 사용자 관점에서 프로젝트를 개선하면 좋을지 고민해볼 수 있었던 프로젝트입니다."
1. 버킷 리스트 생성 및 수정 기능 개발
버킷 리스트를 생성 및 수정 페이지들 개발
react-router-dom의 Outlet을 활용 페이지 분할 기능을 적용(UX)
버킷 리스트 생성 시 FileReader를 이용하여 이미지 미리보기 기능을 제공
2. 버킷 리스트 내용 및 후기 기능 개발
버킷리스트의 상세 내용 및 후기 관련 CRUD 페이지들 개발
React Query를 이용한 무한 스크롤이 적용된 댓글 컴포넌트을 구현
후기를 작성 시 React-Quill를 이용하여 텍스트 에디터 기능을 구현
3. 버킷 리스트 달성 기능 개발
버킷 리스트 달성 관련 페이지들 개발
버킷리스트의 달성을 결정하는 달성 페이지에서 Web Animations API를 이용해 역동적인 사용자 경험을 제공(UX)
Mo or do
삼성 청년 소프트웨어 아카데미(SSAFY)
2024.04. ~ 2024.06.
:: 프로젝트 소개
3D 멀티 플레이 퀴즈 게임으로 친구와 함께 즐기면서 배우는 스피드 게임 학습 플랫폼입니다. Three.js를 활용하여 생동감 있고, 다양한 주제에 대한 문제들을 팀을 이뤄 학습을 재밌게 즐길 수 있습니다.
:: 프로젝트 환경
- 프로젝트 기간: 24.04.08 - 24.05.17 (6주)
- 프로젝트 인원: FE 3명, BE 3명 (6명)
- FE 개발 환경: NextJS 14, TypeScript, Tailwind, React 18, React-Query v5, Zustand
:: 프로젝트 개발 사항
"NextJS를 활용하여 프로젝트를 진행해보고 React 환경에서 소켓 통신을 전담해서 작업해볼 수 있었던 프로젝트입니다."
1. 소켓 통신 구현
WebSocket API를 이용하여 소켓 통신을 위한 코드 구현
전역에서 소켓을 저장하는 zustand useMainSocketStore 개발
소켓을 생성 및 연결, 연결 해제를 담당하는 useSocket hook 개발
게임 소켓 수신 로직 외 소켓 작업 전담
2. 채널 선택 & 대기방(로비) 페이지 개발
NextJS를 활용한 채널 선택, 대기방 및 방 생성 페이지 개발
대기방 및 게임에서 사용되는 채팅 기능 개발
교육
삼성청년소프트웨어아카데미(SSAFY))
사설 교육 | 컴퓨터공학과
2023.07. ~ 2024.06. | 졸업
금오공과대학교
대학교(학사) | 컴퓨터공학과
2015.03. ~ 2022.02. | 졸업