PM Project 기획안

thisisyjin·2022년 5월 25일
0

Dev Log 🐥

목록 보기
17/23

PM (Put on a Mask) Project

PM = 미세먼지 를 의미한다. 동시에 이 프로젝트의 이름인 Put on a Mask를 의미!

주요 기능

  • 미세먼지 정도에 따라 (매우나쁨/나쁨/보통/좋음) 다른 이미지가 렌더링 되고,
    마스크를 착용하라는 문구가 뜨도록 할 예정.
  • 서울시 지도 이미지를 좌표를 추출하여 각 구를 클릭하면 볼 수 있게 함.

📝 기획 및 디자인

  • 이번 프로젝트는 아이디어 + 디자인 모두 직접 진행해봄.
  • 데이터 구조를 짜고, 리덕스를 이용한 상태관리를 할 예정.
  • 공공 API인 서울시 미세먼지 API를 가져와서 사용함.

디자인 미리보기


🛠 의존성

사용할 라이브러리

1. redux / react-redux

이번에는 recoil을 사용해볼까 고민했지만, 아직도 사용률 1위인 리덕스에 먼저 익숙해지고자
다시한번 redux를 선택하게 되었다.
리덕스가 어려운만큼 여러번 연습해야 나중에도 기억에 남을 것 같다.

MapStateToProps를 사용하는 것보다 react-redux의 useSelector, useDispatch를 사용하는 것이 훨씬 간편하기에 react-redux를 사용한다.


2. redux-actions

모듈을 작성할 때 createAction, handleActions를 사용하면 훨씬 쉽기 때문에
이번에도 redux-actions를 사용하기로 하였다.


3. styled-components

처음엔 scss와 고민했으나, css in JS 방식이 나는 잘 맞는 것같고,
props를 이용하여 자유롭게 스타일링을 할 수 있는 점이
리액트라는 라이브러리와 잘 어울린다고 생각이 들었다.
따라서 이번에도 styled-components로 스타일링을 한다.


4. react-router-dom

API 요청시 params나 쿼리스트링을 다뤄야 하고, 추후 백엔드를 연동하여
REST API 요청을 해야 한다.
react-router-dom에는 Link 컴포넌트 등의 간편한 기능들이 많으니 사용한다.


5. axios

API 요청은 비동기 작업이므로 http 기반의 axios를 사용한다.
지난 예제에서는 미들웨어로 api를 요청했으나, 우선 아직은 미들웨어의 필요성을 못느꼈다.
-> 추후 프로젝트 진행 과정에서 redux-saga를 사용할수도 있다.


컴포넌트 구성

components

pages


라우트

BrowserRouter

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

Routes/Route

App.jsx

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Pm from './pages/Pm';

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/pm/:city" element={<Pm />} />
      </Routes>
    </>
  );
};

export default App;

-> Pm 컴포넌트에서 useParams 가능 (city)


상태 + props 흐름도

  • 추후 프로젝트 진행되면서 추가함
profile
기억은 한계가 있지만, 기록은 한계가 없다.

0개의 댓글