Skip to content

Rolling: 누구나 손쉽게 만들 수 있는 온라인 롤링 페이퍼 서비스

Notifications You must be signed in to change notification settings

Rolligo/rolling

Repository files navigation

프로젝트: 롤링 📮

📌 롤링 서비스 소개

📢 누구나 손쉽게 만들 수 있는 온라인 롤링 페이퍼 서비스

  • 로그인 없이 자유롭게 만드는 롤링 페이퍼
  • 롤링 페이퍼에 원하는 스타일로 메세지를 남길 수 있어요
  • 서로에게 이모지로 감정을 표현할 수 있어요

🖥️ 미리보기

image

image

image

image

image

📝 프로젝트 소개

📍 배포 링크

https://rolling-paper.netlify.app/

📆 개발 기간

2023.11.3 ~ 2023.11.17

🛠️ 사용 기술

Core Technologies

React Styled-components

Supporting Libraries

ESLint Prettier Axios React-Router-Dom

React-Helmet React-Quill dompurify emoji-picker-react

⚙️ 개발 방법론

  • 상향식(bottom-up)으로, 컴포넌트를 먼저 구현하고 이후에 페이지에서 컴포넌트를 조립하는 방식을 사용
  • 반응형 웹 디자인은 모바일 사이즈를 기준으로 먼저 개발하고, 이후에 태블릿과 PC 사이즈를 고려하는 방식을 사용
  • 하루에 한 번, 정해진 시간에 데일리 스크럼을 진행
  • 프로젝트 관리 도구로는 팀 Notion을 사용, 전체적인 진행 상황을 항상 공유할 수 있도록 최신화
  • Git Flow 전략을 참고해서 프로젝트 규모에 맞추어 브랜치 전략을 설정
    • develop 브랜치를 중심으로 새로운 브랜치를 만들어서 작업 후, Pull Request 과정을 거쳐 developmerge하는 방식으로 진행
    • 이때 브랜치 이름은 작업 내용에 따라 feature/{작업 내용}, refactor/{작업 내용}과 같이 설정하고, 컴포넌트 위주의 작업이라면 브랜치에서도 실제 컴포넌트 이름과 통일성을 부여하기 위해 PascalCase를 사용
  • 버그나 에러를 발견하면 GitHub에 Issue를 등록하고 새로운 브랜치를 만들어서 해결

✏️ 코딩 컨벤션

  • 프로젝트 내의 .eslintrc.prettierrc 파일을 통해 모든 구성원이 코딩 컨벤션을 통일할 수 있도록 설정
  • ESLint와 Prettier의 기본 설정을 사용하되, 프로젝트를 진행하면서 필요한 규칙이 있다면 커스텀해서 사용
  • 프로젝트 내에서 가독성을 고려해서 절대 경로와 상대 경로를 혼용해서 사용할 수 있도록 별도 설정
  • 디자인에서 공통적으로 사용되는 폰트, 색상, 미디어 쿼리 등의 스타일링 코드는 미리 작성하고 사용함으로써 가독성과 효율성 확보
  • 리액트 컴포넌트 작성 시에는 아래와 같은 규칙을 따르도록 통일
    • 리액트 컴포넌트는 하나의 폴더에 .jsx 확장자를 사용해서 작성, 파일명은 컴포넌트의 이름을 따르도록 함
    • 스타일링 코드는 일괄적으로 styled-components를 사용해서 같은 폴더에 별도의 파일로 작성, 파일명은 스타일링 대상에 .style.js를 붙이도록 함
    • 스타일드 컴포넌트를 사용할 때는 와일드카드 문자를 통해 S 객체로 import해서 사용
    • 컴포넌트가 다른 코드에서 사용될 때의 가독성 향상을 위해 별도의 index.js 파일을 만들어 export문을 작성
  • 프로젝트 내에서 API를 사용하는 코드는 모두 커스텀 훅 useRequest를 사용해 코드의 가독성을 향상

👥 팀원 소개

팀원 팀원 팀원 팀장 팀원

김기연

김소은

김윤후

안성재

임건우

About

Rolling: 누구나 손쉽게 만들 수 있는 온라인 롤링 페이퍼 서비스

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published