• FE 3명 / BE 2명 (FE기여도 60%)
• 메인 페이지, 로그인, 회원가입, 마이페이지, 청년 주택 페이지를 제작하였습니다.
• React, Next.JS를 사용하며 컴포넌트 기반으로 UI를 구성했습니다.
• 사용자 입력 데이터의 유효성을 검사하기 위해 클라이언트 측에서는 프론트엔드에서, 서버 측에서는 백엔드에서 검증을 수행했습니다.
• 에러 핸들링을 통해 사용자가 예상치 못한 상황에 대비하고, 적절한 오류 메시지를 제공하여 사용자 경험을 향상시켰습니다.
• JIRA와 디스코드를 활용한 협업 및 데일리 미팅과 코드리뷰를 진행하고 GitHub를 통해 코드를 관리하였습니다.

메인페이지

• 캐러셀 구현을 통해 사용자에게 다양한 콘텐츠 제공
• 전체 UI 마크업

로그인

• OAuth 로그인 네이버, 카카오, 구글 구현
• React Query를 이용한 세션 관리를 통한 사용자 경험 향상
• 사용자 인증에는 JWT(JSON Web Tokens)를 활용하여 토큰 기반의 인증 시스템을 구축했습니다.

회원가입

• 이메일 인증 기능 구현
• AWS S3를 이용한 이미지 업로드 구현

마이페이지

• 이메일 비밀번호 재설정을 통한 비밀번호 변경 구현
• 회원탈퇴
• AWS S3를 이용한 이미지 업로드 구현
• 작성이력 및 북마크 구현하여 사용자의 개인화된 서비스 제공

청년주택

• 공공 API를 활용한 공공주택 데이터를 네이버 지도상에 마커 표시 및 데이터 출력
• geolocation을 통해 주소데이터를 위도, 경도로 변환하여 사용

• FE 2명 / BE 1명 (FE기여도 70%) 외주 제작
• 주짓수 경기의 점수판, 경기 결과 조회 홈페이지, 공식 홈페이지를 제작하였습니다.
• 외주 제작이라는 특성상 고객의 요구사항을 반영하여 UI/UX를 설계

점수판

• 타이머 기능 구현을 위해 startTimer, stopTimer, setInterval 함수 등을 활용하여 게임 진행 시간을 관리하였습니다.
• 고객사와의 소통과 피드백을 수렴하면서 디자인 수정 및 추가 기능 개발을 진행하여 완성도 높은 결과물을 제공하였습니다.

경기결과조회 페이지

• React Query를 사용하여 서버 데이터를 비동기적으로 가져오고, 캐싱 및 관리하였습니다. 이를 통해 사용자에게 빠르고 원활한 경기 결과 조회를 제공하였습니다.
• matchData, matData 속성들을 활용하여 동적으로 컴포넌트를 렌더링, 조건부 스타일을 적용하여 사용자에게 직관적인 정보 제공을 지원하였습니다.

공식홈페이지

• 초기 로딩은 SSR을 활용하여 성능을 향상시켰으며, 상호작용이 필요한 경우 CSR 처리 하여 사용자 경험을 최적화 하였습니다.
• metadata 설정을 통해 SEO 최적화를 하였습니다.
• 반응형 웹 페이지를 제작하여 다양한 기기와 화면 크기에 대응하고, 크로스 브라우징 이슈를 해결하여 모든 사용자에게 일관된 경험을 제공하였습니다.
• UI/UX를 고려하여 분기에 따라 레이아웃과 스타일을 적절히 제작하여 사용자에게 편의성 높은 UI를 제공하였습니다.
• 공통적으로 들어가는 항목을 컴포넌트화 하여 개발 시간을 줄이고 유지보수성을 높였습니다.
• 외주 작업이기 때문에 코드를 제공해 드릴 수 없는 점 양해 부탁드립니다.

• FE 2명 / BE 1명 (FE 기여도 80%) 외주 제작
• Next.js 프레임워크를 사용하여 CSR/SSR의 구분과 파일 기반 라우팅 등의 장점을 경험했습니다.
• 마크업에는 Tailwind CSS를 활용하여 직관적이고 효율적인 CSS 프레임워크의 장점을 학습하였습니다.
• SSR, metadata 설정을 통해 SEO 최적화를 경험하였습니다.
• 반응형 웹 페이지를 제작하여 모바일 기종, 브라우저에 따른 화면 이슈를 해결하면서 사용자 경험 향상을 위한 크로스 브라우징 이슈를 핸들링 해야 한다는 것을 깨달았습니다.
• UI/UX를 고려하여 분기에 따라 레이아웃과 스타일을 적절히 제작하여 사용자에게 편의성 높은 UI를 제공하였습니다.
• 공통적으로 사용되는 항목을 컴포넌트화하여 코드의 재사용성을 높이고, 개발 작업을 효율화하였습니다.
• 외주 작업이기 때문에 코드를 제공해 드릴 수 없는 점 양해 부탁드립니다.

• FE 3명 / BE 4명 (FE 기여도 50%)
• 팀장을 맡아 진행하였으며 서비스 기획, 분석 설계, 개발 환경 세팅, 사용자 요구사항 정의서 작성 등 처음부터 끝까지의 협업 과정을 핸들링하였습니다.
• 디자이너 팀원의 부재로 메인 페이지 및 이력서 디자인을 직접 제작하였습니다.
• 메인 페이지와 이력서 CRUD를 담당하였으며 신입 개발자의 이력서 작성을 용이하게 하기 위해 직관적인 UI 제작, 인풋 요소들을 효율적으로 배치하여 사용자 경험을 개선했습니다.
• 상태 관리 라이브러리 Recoil을 이용해 이력서 임시저장 기능을 구현하고 JWT token을 전역 상태로 관리하였습니다.
• AWS S3 서비스를 통해 클라이언트를 배포하였으며, 프로젝트 전반적인 기술 스택과 클라우드 서비스 활용을 경험했습니다.
• 원활한 프로젝트 진행을 위해 스크럼을 진행하며 데일리 미팅을 주최하고 소극적인 팀원들을 도와 시간 내에 프로젝트를 완성하였습니다.
• 프로젝트가 끝나고 회고를 통해 어떤 점이 미흡했고 잘한 부분은 무엇인지, 발전할 수 있는 방향에 대해서 논의하였습니다.
  노션 협업 문서