미리보기

:: 프로젝트 소개

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 호출 최적화

:: 프로젝트 소개

자신의 버킷 리스트를 공유하고, 나와 유사한 관심사를 가진 사용자들을 추천받으며 교류하는 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)

:: 프로젝트 소개

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를 활용한 채널 선택, 대기방 및 방 생성 페이지 개발 

• 대기방 및 게임에서 사용되는 채팅 기능 개발