붕어빵 지도 프로토타입

 

붕어빵 지도 프로토 타입을 만들어 보려고 한다.

구상은 이런 느낌?

 

 

1. 헤더를 추가하고 헤더에 넣을 카테고리는 더 생각해보기

2. 지도에 붕어빵 마커를 누르면 해당 가게의 정보 제공

3. 현재 위치를 실시간으로 업데이트 하는 내 위치 정보 제공

4. 지도 중심을 내 위치로 이동시켜 주는 아이콘 제공

5. 가게 이름, 좌표, 메뉴, 가게 사진, 기타 정보등을 테이블에 저장할 수 있 기능 제공

(웹으로 서비스하고 돌아다니면서 저장할 예정)

 

일단은 이 정도로 구상해놨다.

아직 가게를 눌렀을 때 어떤 식으로 사용자들한테 정보를 제공할지는 더 고민해봐야겠다.

 

---

 

프로젝트 시작하기 전에 왜 리액트를 쓰는 건지, 리액트가 어떤 부분에서 좋은건지 알고 쓰고 싶어서 찾아봤다.

 

🪐리액트?

 

1️⃣ 컴포넌트 기반 아키텍쳐

리액트는 각각의 컴포넌트를 독립적으로 재사용할 수 있기 때문에, UI를 컴포넌트 단위로 나눌 수 있어서 재사용과 유지보수가 뛰어나다.

 

2️⃣ 가상 DOM(Virtual DOM) 사용

가상 DOM을 사용하기 때문에 변경이 필요한 부분만 실제 DOM에 업데이트 하기 때문에 효율적이고 빠르다.

 

3️⃣ 상태 관리

useState, useReducer, Redux 등을 통해 상태를 체계적으로 관리할 수 있다.

 

4️⃣ JSX 구문

JavaScript의 확장 문법인 JSX를 통해 JavaScript와 HTML을 결합하여 더 직관적인 UI 개발을 가능하게 한다.

 

5️⃣ 풍부한 생태계, 라이브러리 지원

방대한 라이브러리와 프레임워크 덕분에 다양한 기능을 빠르게 통합하고 확장성 높은 개발이 가능하다.

 

결과적으로 리액트는 UI 상태에 따라 화면을 업데이트 하는 방식이 선언적이기 때문에

개발자가 어떻게 업데이트 할지(how)를 명시적으로 작성하는게 아니라

어떤 상태에서 무엇을 보여줄지(what)을 정의하면 리액트가 처리한다고 한다.

 

---

 

 

1차 프로젝트 했을때 리액트 프로젝트 초기 환경을 설정할때

CRA라는 npx Create-React-App을 썼던 기억이 나서 찾아봤는데 요즘은 CRA보다는 다른 방식으로 프로젝트를 시작하는 것 같았다.

실제로 create-react-app에 대한 업데이트는 2년 전이 마지막인 상태라고 한다.

 

공식 문서에서도 CRA에 대한 언급이 사라졌고 다양한 프레임워크들을 추천해주고 있었다.

https://react.dev/learn/start-a-new-react-project

Start a New React Project – React

 

 

그래서 이번엔 Vite로 React 프로젝트 환경설정을 했다.

 

npm create vite@latest prjt_name -- --template react
npm install
npm run dev

 

 

Vite + React

 

 

이런 화면이 나왔다! 신기하게도 포트는 5173을 썼다. CRA를 썼을때는 포트번호 3000으로 기억한다.

명령어들도 조금씩 다르고 최초 화면도 달랐다.

 

이제 환경설정이 다 되었으니 시작!!