깃허브
환율 계산기 📇
목표
환율 계산기를 팀 내에서 두 가지 버전으로 구현해본다.
💌 과제 사전 질문 3가지
과제를 진행하기 전 토론해볼 3가지 질문
- CRA 구조에서 특정 폴더 구조를 사용한 이유
- CSS 작성 방법 선택(styled-components) 과 그 이유
- 깃허브 Commit message 템플릿과 선택 이유
그동안 당연하게 써 오던 practice들에 대해
왜 이렇게 사용하는지 생각해보는 계기가 되었다.
알게 된 것
💚 utils 폴더 사용하기
공통으로 사용하는 함수를 개별 폴더에 분리
=> 재사용성과 유지보수성을 높인다.
🏃♂️ 깃허브 협업 사이클
이번 과제를 통해 다음 사이클을 확실히 연습하였다. (특히 3, 4번)
1. 상위 깃허브 클론
2. 개인 브랜치 생성
3. 작업 후 push 및 PR 생성
4. merge 후 로컬에서 pull 받기
🤖 airbnb 코드 스타일 준수하기
OT 때 소개받았는데 코딩 스타일을 준수하기 위해 이러한 가이드가 존재한다는 걸 처음 알았다.
이번 과제에는 첫 세팅 시 Pretteir, Eslint 설정까지 같이 하느라 시간 소모가 상당했지만 예전에 사용해보지 않은 방식을 시도해보는 과정에서는 흥미로웠다.
보완할 점
- 단위 테스트 구현
- Cypress만 써 봤는데 Jest도 도전해볼 기회..!
- 과제 반응형 구현
- 화면 공유할 때 다른 팀원의 모니터를 보니
구현된 계산기 크기가 내 노트북 모니터와 매우 달랐다.
다음에 기능 구현 & 리팩토링 후 시간이 남는다면 반응형 꼭 추가하기.
- 기능 구현 전 깃허브에 issue 정리
- issue에 체크리스트를 넣어놓고 확인해가며 구현하니 빼먹은 기능이 없었다.
- 팀 내 커밋을 더 일관성 있게
- 이번 과제의 경우 1팀은 각 개별 파일에 대한 commit 진행
2팀은 전반적인 기능별로 크게크게 commit 진행
- netlify 외의 배포방식 더 도전해보기
- netlify가 안 된 이후 배포에 상당한 시간 소요가 있었다.
(netlify에서 헤어나오지 못한 결과)여러 가지 변수로 오류가 생길 경우 다른 방법으로도 배포할 줄 알아야 한다.
슬랙에 공유된 다른 배포방법
Heroku
netlify 처럼 github를 연동해서 배포하면 5분 내외로 배포 가능하고, SPA 에서 발생하는 404 라우터 문제나, https 강제 리다이렉트가 발생하지 않아서 다음에 혹시 비슷한 앱 환경을 배포해야하는 경우 시간 절약 가능
(김영종 님 감사합니다 🙇♀️)
https://velog.io/@tohero/Heroku%EB%A1%9C-%EC%9B%B9-%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
AWS S3
1~3번까지 진행해서 CLI 말고 빌드파일 드래그앤드랍으로 올리면 금방 빌드 가능
(현다솜 님 감사합니다 🙇♀️)
https://42place.innovationacademy.kr/archives/9784
- 상수 데이터를 파일로 분리
- utils 폴더 개념과 유사한 것 같다. 유지보수성을 최대화하기 위해 시도해보고 싶다.
- airbnb 코드 스타일 더 준수
-
초기에 Prettier, Eslint와 함께 세팅하는 과정에서 엄청 헤맨데다가 진행 중에도 거의 타입스크립트마냥 에러를 잡아줘서 시간이 더 걸리는 경우가 많았다.
(package.json에 가득한 0들의 향연)이렇게 계속 false 처리 할 바에야 설정한 것이 무슨 의미가 있을까 싶었다. -
하지만 프로젝트 규모가 커지고 함께 협업하는 개발자 인원 수가 많아지면 코드 스타일의 일관성 준수는 필수이다.
따라서 이번 프리온보딩의 과제들을 통해서 사용하는 것을 계속 연습할 수 있으면 좋겠다.
