프리온보딩 | 4번째 과제 회고 - 2주차

noopy·2022년 2월 9일
1

프리온보딩

목록 보기
4/6
post-thumbnail

Wanted-preonboarding 2-1

깃허브 링크
배포 링크

📕 구현 명세

  1. figma에 작성된 가이드 그대로 구현하기
  2. json-servermock rest-api server 띄우기

🪞 데모

기능 전체

  • 가공방식, 재료 내에서 선택 시 옵션을 포함하고 있으면 모두 노출
  • 가공빙식 + 재료 선택 시 옵션을 포함하고 있으면 모두 노출
  • 상담 중인 요청 토글 시 상담중 태그 달린 카드만 노출
  • 필터링 리셋 클릭 시 선택된 옵션 모두 해제

모바일

  • 사이드 바 토글

⏰ 진행 과정

이번 과제는 필터링이 메인이기 때문에 한 사람이 작업을 맡는 대신 4명이 모여 페어프로그래밍을 진행하자고 제안했다. 우선 기존에 하던 작업처럼 필요한 컴포넌트들은 issue로 등록 후 각자 맡아 작업한 이후 페어프로그래밍을 진행해보았다.

팀원들이 처음에 이 방식을 낯설어하는 듯 했지만 이내 잘 적응해서 시키지 않아도 필요한 컴포넌트나 작업들을 진행하였다. 할당된 작업이 일찍 끝나면 알아서 일을 찾아 issue를 등록하고 진행해서 감사하고 기특(?)했다.

나의 경우 dropdown 컴포넌트를 구현하기로 했는데 만만하게 생각했다가 데이터 받아올 것도 고려해서 짜느라 시간이 더 소모되었다 😂😂.

🔑 KEY POINT

사실 이번 과제는 나보다 팀원들이 더 잘해주었기 때문에 전체적으로 설명하겠다.

1. 필터링 구현하기

필터링을 구현하기 위해 dropdown 컴포넌트에서 데이터를 활용하는 부분을 잘 짜야했다. 맨 처음에 멘토님이 한개만 선택하도록 구현하라 했지만, figma를 잘 살펴보니 중복 선택이 가능한 checkbox였다. 한 개만 선택이 가능했다면 option 태그로 쉽게쉽게 로직을 짤 수 있었겠지만 똑같이 구현하는 것이 중요하므로 기존 로직을 없애고 checkbox로 다시 구현했다.

데이터를 받아온 후 가공방식('method')재료('material') 각각의 데이터를 키값으로 하여 false로 초기화시켜주었다. 추후 팀원분이 데이터가 바뀔 때마다 동적으로 키 값의 false를 초기화하도록 리팩토링해서 훨씬 깔끔한 코드가 탄생하였다.

👉🏻 리팩토링 전

👉🏻 리팩토링 후

첫째날엔 컴포넌트들을 각자 만들고 둘째날부터 google meet로 실시간 페어프로그래밍을 진행했다.
1. 컴포넌트 합치기
2. 모바일 구현하기
3. filter 로직 구현하기
1번과 2번은 사다리타기를 따라 화면을 공유할 팀원을 정하고 마지막 filter 로직은 각자 실시간으로 얘기를 나누며 함께 고민했지만 팀원 한분이 캐리해주셔서 코드가 탄생해버렸다.

전체적인 로직은 {키: boolean} 형태로 받아왔던 데이터를 true 값인 친구들의 키값만 배열로 받아온다. 기존의 데이터를 순회하면서 받아온 배열에서 포함하고 있으면 출력한다. 관련 로직은 filterCard에서 확인할 수 있다.

2. json-server 활용하기

내가 열심히 dropdown 컴포넌트 로직을 짜는 동안 할 일을 마친 팀원이 json-server를 열어주셨다. json server는 db.json 파일안에 받아올 json 데이터를 작성 후 package.json에서 scripts로 서버를 어떻게 열 것인지 명시해주면 된다.

  "scripts": {
    "server": "json-server ./server/db.json --port 3001",
  },

해석해보면 server 명령어로 실행할 경우 json-server가 실행되고 받아올 파일의 위치와 어떤 port로 열 것인지 작성한다.

3. Heroku로 배포하기

Heroku 배포는 Vlpt-Heroku 가이드에서 도움을 얻었다.
json-server로 데이터를 받아오기 때문에 기존의 netlify 같은 서비스로 배포할 수 없었다. 인터넷에 쳐보니 Heroku 배포를 이용하면 된다고 해서 이 부분은 내가 담당해보기로 했다!
Heroku 배포를 하기 위해선 Heroku 홈페이지에서 로그인 한 후 프로젝트를 연다.

root에서 server 폴더를 만들고 db.json 파일과 index.js 파일을 만든다. (⚠️ index.ts로 작성하면 안됨)
db.json에선 json 데이터를 작성하고, index.js 파일에선 서버를 작성한다.

const jsonServer = require('json-server');
const path = require('path');

const server = jsonServer.create(); // json server 생성
const router = jsonServer.router(path.resolve(__dirname + '/db.json')); // 현재 폴더에서 db.json으로 route
const middlewares = jsonServer.defaults({
  static: path.resolve(__dirname + '/../build/'),
}); // build된 폴더의 내용으로 배포

const port = process.env.PORT || 3001;// process.env PORT 가 없을 경우 3001번으로 서버 오픈

server.use(middlewares);

server.use(jsonServer.bodyParser);

server.use(router);
server.listen(port, () => {
  console.log('JSON Server is running');
});

이제 package.json에서 scripts를 조금 수정한다.

"scripts": {
    "start": "node server", // json server 
    "start:dev": "react-app-rewired start",// localhost
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject",
    "ts-node": "ts-node -r tsconfig-paths/register ./src/index.ts",
    "heroku-postbuild": "npm run build" // heroku build 명령어
  }

그 외에는 Vlpt님의 글을 참고하되 push가 실패할 경우 아래의 명령어로 push한다.

$ git push heroku HEAD:master
HEROKU 특징

Heroku는 5개의 프로젝트를 무료로 배포할 수 있다. 또한 계정 인증을 진행하지 않은 사용자는 배포 회수가 10회(?)로 제한이 있기 때문에 카드번호를 입력해 계정 제한을 풀어줘야 한다 😭. 계정을 인증하면 배포 제한회수가 300회로 늘어난다.
마지막으로 Heroku는 30분 동안 배포주소에 접속하지 않을 경우 잠자기 모드가 되어버려서 접속 시 15초정도의 딜레이가 있다고 한다. 이를 방지하기 위해 Heroku를 계속 깨우는 대행 사이트가 있다.
heroku Wake up! 글을 참고하여 나의 소중한 프로젝트의 딜레이를 방어해주었다.

버그 with HEROKU

Heroku로 배포를 하면서 특정 svg 파일 위치를 인식하지 못하는 버그가 있어서 꽤 오랜시간 삽질했다.

(삽질의 흔적)

그냥 build했을 땐 잘 인식하는데 Heroku에서 자체적으로 build하면서 계속 오류가 났다. 똑같은 조건의 svg 파일들은 잘 인식하는데 딱 하나만 인식을 못해서 결국 해당 파일을 삭제하고 다시 가져왔더니 잘되었다 ㅂㄷㅂㄷ. 전에도 이런 일이 있었는데 이유를 알 수가 없다. 추측해볼만한 이유는 camelCase로 작성했다가 lowerCase로 이름을 변경했는데 git에서 이를 인지 못했던 일이 있었다. 아마 이것과 관련이 있지 않을까 추측해보는데...

🌈 결론

이번 프로젝트에선 팀원들과 손발 척척 잘맞아 떨어지는 느낌을 받았다. 물론 내가 할 일이 줄어들어서 그럴 수도 있는데, 시키지 않아도 으쌰으쌰 잘하는 팀원들 덕분에, 그리고 한명이 로직을 맡지않고 다같이 모여서 작업한 덕분에 좀더 소통을 많이 했다고 느꼈던 프로젝트였다.

profile
💪🏻 아는 걸 설명할 줄 아는 개발자 되기

0개의 댓글