부트캠프 기간 중 학습에 사용했던 망각곡선 이론 바탕 복습법을 활용한 기록 저장 서비스입니다. 학습 직후에 학습한 내용을 데이터 베이스에 저장하고 현 시점 기준 24시간, 일주일, 한 달 전 기록 표시하여 다시 타이핑 해보면서 복습하도록 유도합니다. 기계식 키보드 커스텀에 진심인 개발자들이 타이핑을 하면서 자신이 커스텀한 키보드의 소리도 감상하고, 복습도 할 수 있는 서비스입니다.
| 항목 | 내용 |
|---|---|
| 기간 | 2023.07.19 - 진행중 |
| 배포 | https://review-now-green.vercel.app/ |
| 기술 스택 | TypeScript, React, styled-component, firebase, vercel |
| 사용 기술 |
|
| 패키지 |
|
| 포맷터 |
|
| 디자인 |
|
| IDE |
|
| 배포 |
|
-
React: 컴포넌트 각각의 내부 로직과 렌더링 원칙을 활용해 확장성이 뛰어나고, 웹 앱 일관성을 달성할 수 있습니다. 또한 DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 즉시 반영하여 놀라운 속도의 렌더링을 제공할 수 있기 때문에 사용하였습니다.
-
TS: 타입을 미리 정의해 자동완성기능을 사용하고, 컴파일 과정에서 오류를 미리 발견하여 개발의 효율성을 높일 수 있었습니다.
-
Vercel: 배포 자동화를 손쉽게 해주는 도구, aws나 docker를 통한 연결에 대해서 어려워하는 프론트엔드 개발자에게 쉽게 배포환경을 제공해주고 관리가 쉽기 때문에 선택했습니다. 소스 코드가 있는 깃허브 저장소를 Vercel에 연결하면 매 push마다 자동으로 배포할 수 있습니다.
-
Styled-Component: 스타일을 따로 정의해 코드의 가독성과 유지 보수성을 높이기 위해 사용하였습니다.
-
React Router : React의 SPA 환경에서 URL에 따라 동적으로 컴포넌트를 변화시킴으로써, 브라우저의 뒤로 가기와 앞으로 가기 기능을 활용할 수 있게 됩니다. 새로운 페이지로 이동할 경우 전체 페이지를 다시 렌더링 하지 않고, 변화가 필요한 컴포넌트만을 업데이트하여 React의 효율적인 렌더링을 유지하기 위해 사용하셨습니다.
| Type | 설명 |
|---|---|
| fix | 버그, 오류 수정 |
| docs | README.md, json 파일 등 수정, 라이브러리 설치 (문서 관련, 코드 수정 없음) |
| style | CSS 등 사용자 UI 디자인 변경 (제품 코드 수정 발생, 코드 형식, 정렬 등의 변경) |
| refactor | 코드 리팩토링 |
| chore | 패키지 매니저 설정할 경우, etc 등 (ex. gitignore) |
| comment | 필요한 주석 추가 및 변경 |
| rename | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
| remove | 파일을 삭제하는 작업만 수행한 경우 |