[토이프로젝트] JUSTCODE 6기 롤링페이퍼 회고

JUSTCODE 6기 롤링페이퍼 썸네일

 

⭐️모두에게 롤링페이퍼 쓰러 가기

JUSTCODE 6기 롤링페이퍼

---

 

🤔 프로젝트를 시작하게 된 이유

수료식을 앞두고 동기들과 이야기를 하다가 롤링페이퍼를 하는 건 어떻냐는 이야기가 나왔다. 프로젝트를 또 만들기에는 시간이 모자라다고 생각해서 있던 서비스를 이용하기로 했다. 구글에 롤링페이퍼로 검색했을 때 제일 상단에 나오는 서비스를 이용해보려고 했는데 내가 원하던 방식이 아니었다. 롤링페이퍼를 서로 써주려면 동기들 모두가 서비스를 가입하고 자신의 보드를 만들어야 했다. 이렇게 되면 모두들 롤링페이퍼 작성에 참가하지 않을 것 같아서 시간이 촉박하지만 일단 만들어보기로 했다.

---

🛠 프로젝트 기간

22.10.27 - 22.10.28

+ 버그수정 & 리팩토링

 

* 레포 주소

 

 

 

⚙️ 파일 구조 및 사용 기술

Vite

React.js

React-router-dom

React-icons

Styled-components

Firebase

Git

GitHub pages

 

├── .env
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── letter.svg
├── src
│   ├── Home.jsx
│   ├── Router.jsx
│   ├── main.jsx
│   ├── pages
│   │   ├── board
│   │   │   ├── Board.jsx
│   │   │   ├── Detail.jsx
│   │   │   ├── Detail.style.js
│   │   │   └── NameCard.jsx
│   │   └── write
│   │       ├── Write.jsx
│   │       └── Write.style.js
│   ├── styles
│   │   ├── GlobalStyle.js
│   │   └── theme.js
│   └── utils
│       ├── color.js
│       └── name.js
├── README.md
└── vite.config.js

⚙️ 프로젝트 실행 방법

 

1. 프로젝트를 클론 받습니다.

git clone https://github.com/2021bong/justcode-6th-rolling-paper.git

 

 

2. 클론 받은 프로젝트 폴더로 들어가 디펜던시 패키지를 설치합니다.

cd justcode-6th-rollling-paper

npm i

 

 

3.프로젝트를 실행합니다.

npm run dev

 

 

💝 구현 화면

* 반응형 구현도 완료하여 모바일에서도 이용 가능합니다. 👍

1️⃣ 메인 화면

2️⃣ 롤링페이퍼 작성 화면

저스트코드 6기와 멘토에게 롤링페이퍼를 작성할 수 있습니다.
표시될 이름은 내가 원하는 데로 작성할 수 있으나 기존에 존재하는 이름과 동일한 이름으로 작성하면 기존의 메세지에 덮어씌워집니다.

3️⃣ 롤링페이퍼 목록 화면

저스트코드 6기와 멘토에게 작성된 롤링페이퍼를 확인할 수 있습니다.
원하는 사람의 이름을 클릭해 확인 가능합니다.

4️⃣ 롤링페이퍼 디테일 화면

받은 롤링페이퍼를 확인할 수 있습니다. 받은 롤링페이퍼가 없다면 롤링페이퍼가 없다는 화면을 보여줍니다.

 

---

 

🎵 소감

롤링페이퍼 이용까지 성공적으로 유도하려면 프로젝트를 시작한 다음 날 점심 전까지 링크를 슬랙에 공유해야 했다. 하지만 다음 날 점심부터 약속이 있어서 무조건 배포를 끝내고 잠들어야만 했고, 수료식 회식도 신경 쓰랴 타입스크립트 스터디 과제도 하랴 오후부터 정신없이 보낸 것 같다. 대략 11시간 정도 걸려서 프로젝트를 완성했는데 셀프로 타임리밋 챌린지를 한 기분이었다 ㅋㅋㅋㅋㅋ 하루 만에 만들 수 있을까 싶었는데 성공적으로 끝내서 뿌듯하고 이만큼 성장한 스스로가 자랑스러웠다. 또 허겁지겁하면서도 만들고 싶은 걸 만드니 재미있었다😋 그리고 다들 많이 이용해줘서 뿌듯했고, 동기들과 멘토님들의 편지를 받아서 감동적이었다🥺💕 좋은 경험을 할 수 있도록 롤링페이퍼 아이디어를 준 JUSTCODE 6기 정예원 최고 😀👍 동기들도 모두 취업까지 화이팅🔥

 

롤링페이퍼를 쓰자는 이야기가 나왔을 때 개발을 할 줄 모르고 디자인만 할 줄 알았더라면 롤링페이퍼에 들어갈 내용을 여러 사람에게 직접 전달받아서 합한 롤링페이퍼를 결과물로 내놓았을 것이다. 롤링페이퍼에 누가 무슨 내용을 썼는지 알았을 것이고 인원수만큼 시간을 들여 여러 장을 작업했을 것이다. 하지만 롤링페이퍼 프로젝트를 배포함으로써 롤링페이퍼 내용을 확인하는 설렘도 누릴 수 있게 되었으며 새로운 메시지가 있다 하더라도 시간을 들여 작업물을 수정하지 않아도 되게 되었다. 개발 배우길 잘했다~😀👍

 

ps. 매번 로딩이 느려서 안 보다가 firebase analytics를 우연찮게 보게 되었는데 이용 횟수가 많아서 뿌듯했다..!

 

firebase analytics 통계

+ 221117 사용량

 

😲 새롭게 배운 점

HashRouter에는 basename을 설정해 줄 필요가 없다는 점을 새롭게 알게 됐다. 기존에 계속 BrowserRouter를 사용하다가 지난 프로젝트부터 HashRouter를 쓰고 있는데 BrowserRouter처럼 basename을 설정하고 배포를 했더니 흰 화면이 나왔다. 그리고 지난번에도 봤는데 해결하지 못했던 이 에러도 그래서 발생한 게 아닌가 싶다.

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort’.

 

 

 

 

하드코딩을 하는 것이 유지보수에 좋지 않다는 말을 몸소 느끼게 되었다. 랜덤 하게 배경색이 들어가도록 했는데 처음에는 배열의 길이를 숫자로 하드코딩을 했다가 length로 변경을 했다. 그리고 그 뒤에 컬러를 추가하면서 배열의 길이가 늘어났는데 만약 배열의 길이를 숫자로 하드 코딩했다면 하나하나 다 수정해야 했을 것이다. 추상화를 해야 하는 이유를 직접적으로 체감하게 되었다.😀👍

// color.js

export const randomColors = [
  '#FF645E',
  '#9D4AD9',
  '#5C64ED',
  '#30ABDB',
  '#1CCF55',
  '#E06DC1',
];

 

// 하드코딩
const NameCard = ({ name, handleMoveDetail }) => {
  return (
    <Main
      randomColor={
        randomColors[Math.floor(Math.random() * 6)]
      }
      onClick={handleMoveDetail}
    >
      {name}
    </Main>
  );
};

// 추상화
const NameCard = ({ name, handleMoveDetail }) => {
  return (
    <Main
      randomColor={
        randomColors[Math.floor(Math.random() * randomColors.length)]
      }
      onClick={handleMoveDetail}
    >
      {name}
    </Main>
  );
};

---

추후 컬러 추가

// color.js

export const randomColors = [
  '#FF645E',
  '#9D4AD9',
  '#5C64ED',
  '#30ABDB',
  '#1CCF55',
  '#E06DC1',
  '#FCBB3A',
  '#8E7FF5',
  '#E67D27',
  '#0BBFAA',
  '#EB4473',
  '#A6AABD',
];

 

// 하드코딩 : 하나하나 숫자를 찾아서 변경해 주어야 함.
const NameCard = ({ name, handleMoveDetail }) => {
  return (
    <Main
      randomColor={
        randomColors[Math.floor(Math.random() * 12)]
      }
      onClick={handleMoveDetail}
    >
      {name}
    </Main>
  );
};

// 추상화 : 변경할 필요 없이 동일한 코드
const NameCard = ({ name, handleMoveDetail }) => {
  return (
    <Main
      randomColor={
        randomColors[Math.floor(Math.random() * randomColors.length)]
      }
      onClick={handleMoveDetail}
    >
      {name}
    </Main>
  );
};