멋쟁이 사자처럼 프론트엔드 스쿨 6기와 이듬을 위한 SNS

기획 자료 보기

• 목차

  • 🚀 팀 구성
  • 🎯 개인별 프로젝트 목표
  • ✅ 프로젝트 진행 시 준수사항
  • 📚 기술 스택
  • 🚩 서비스 흐름도
  • 📋 시작 가이드
  • 💡 결과물
    • 황초원
      • 게시글 폼 Component
    • 김태일
      • 프로필 이미지 삽입 버튼 Component | 채널명 버튼 Component
    • 박지함
      • 시작하기 버튼 Component | 글쓰기 버튼 Component
    • 이지수
      • text input Component

• 기간 : 2023 / 08 / 30 ~ 2023 / 09 / 26

• 황초원(조장) : GitHub 바로가기
• 김태일(스크럼 마스터) : GitHub 바로가기
• 박지함 : GitHub 바로가기
• 이지수 : GitHub 바로가기

• 황초원 : 리액트에 익숙해지며 hook을 적절하게 사용해보고 프로젝트 경험 쌓기
• 김태일 : 많은 페이지를 만들기보다 완성도 있게 만들기
• 박지함 : 기능 구현을 통해서 리액트 및 관련 라이브러리 활용하는 실력 늘리기
• 이지수 : 배운 것을 최대한 많이 활용하여 프로젝트 잘 마무리 하기

• 웹 표준, 접근성 준수 및 (가능한 선에서) 반응형 웹 구현
• 오픈 소스 라이브러리 또는 (작성 가능한 경우) 유틸리티 함수 최대한 활용
• 가급적 작은 단위로 React 컴포넌트 구성 (유지 보수 용이)
• 코드가 복잡한 React 컴포넌트가 없도록 설계 (유지 보수가 어렵기 때문)
• 컴포넌트 간 재사용 가능한 로직은 (가능한 선에서) 커스텀 훅 활용
• React 프론트엔드 개발에 집중 (백엔드 서비스는 팀 별, PocketBase 활용)
• API 데이터 모델링 (팀 별, PocketBase 계정 생성 후 업로드)

• 랜딩 페이지 ➡️ 로그인 페이지 ➡️ 로그인 | 계정 찾기 | 회원가입
  • 로그인 ➡️ 피드
  • 계정 찾기 ➡️ 아이디 찾기 | 비밀번호 찾기 ➡️ 로그인 페이지 ➡️ 로그인 ➡️ 피드
  • 회원가입 ➡️ 피드

• 피드 ➡️ 마이 페이지 | 글쓰기 | 글 선택하기
  • 마이 페이지 ➡️ 프로필 수정 | 내 글 보기
    • 프로필 수정
    • 내 글 보기 ➡️ 수정하기 | 삭제하기 | 댓글 쓰기
  • 글쓰기
  • 글 선택하기
    • 내가 작성한 글 ➡️ 수정하기 | 삭제하기 | 댓글 쓰기
    • 다른 사람이 작성한 글 ➡️ 댓글 쓰기

npm i | pnpm i

• react ➡️ 18.2.0
• react-helmet-async ➡️ 1.3.0
• react-hot-toast ➡️ 2.4.1
• prop-types ➡️ 15.8.1
• framer-motion ➡️ 10.16.2
• vite ➡️ 4.4.5
• vite-plugin-svgr ➡️ 3.2.0
• tailwindcss ➡️ 3.3.3
• postcss ➡️ 8.4.29
• autoprefixer ➡️ 10.4.15
• prettier ➡️ 3.0.3
• prettier-plugin-tailwindcss ➡️ 0.5.4
• eslint ➡️ 8.45.0