[React] 키록장 프로젝트 🔐 -1

유지연·2023년 12월 31일
0

👋 개인 프로젝트 키록장 시작! (TIL 231228)

Ready!

1. 프로젝트의 시작

FE 공부하는 사람들은 누구나 거쳐간다는 투두리스트를 완성시키고 다음 프로젝트는 어떤 것을 진행하면 좋을지 고민을 많이 했다. 사실 키록장 이전에 인디온이라는 프로젝트가 있었다. 인디 음악을 소개해주고 사용자가 추천 글도 올릴 수 있는... 대충 그런 컨셉이었는데 여러가지 문제점들에 부딪혀 우선은 중단하고 새로운 프로젝트를 만들어 보기로 결정했다! 그치만 언젠가 인디온도 꼭 마무리 지어볼 생각이다.

프로젝트 아이디어를 생각할 때 아무래도 나의 관심사의 범위에서 생각이 많이 나는데, 이번에는 "방탈출"이라는 키워드가 떠올랐다. 고등학생때부터 방탈출을 정말정말 좋아했었고, 방탈출을 한 뒤 항상 아이폰 메모장에 기록을 남겼었다.

방탈출을 좋아하는 사람이면 알겠지만, 대부분은 블로그나 활성화된 카페를 이용하여 후기를 남긴다. 또 후기를 남기면 다음 방문시 할인을 해주는 제휴가 맺어져 있는 곳도 있다. 여기서 아이디어를 얻어 방탈출 후기에 최적화된 기록 서비스가 있으면 어떨까?라는 생각을 했고 그래서 탄생한 것이 키록장이다!

2. 기술 스택

기술 스택으로는 React(FE), JS/TS(언어), Firebase(BE)를 사용하려고 한다.

3. 개발 환경 구축 Vite

FE 개발 환경 툴로는 vite를 사용하였다. 이 전에는 항상 create-react-app을 사용했는데 이보다 빠른 속도의 빌드툴이 있다고 하여 새롭게 사용해보았다!

  • 원하는 위치에 vite 설치
  • 프로젝트명 → 프레임워크 → 언어 설정
  • npm install
  • npm run dev
$ npm create vite@latest
$ npm i

https://ko.vitejs.dev/

기타 설치 과정들도 거치면 드디어 개발 준비가 끝났다! (git repo 연동도 반드시 할 것)

$ npm i react-router-dom
$ npm i styled-reset
$ npm i styled-components
$ npm i @types/styled-components -D
→ styled-component를 typescipt와 함께 사용하기 위함
profile
Keep At It

0개의 댓글