Skip to content
/ 00mask Public

๐Ÿ˜ท ๊ณต์  ๋งˆ์Šคํฌ ํŒ๋งค์ฒ˜ ํ™•์ธ

Notifications You must be signed in to change notification settings

leyuri/00mask

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

46 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

00mask

Development environment

Features

  • Check where masks are sold on the map
  • Check the details of where masks are sold

Screenshot

2020-05-10 15 19 51 2020-05-10 15 20 10
Todo
  • Reducer / Redux / React-Redux / Redux-thunk / Redux-logger store๋ฅผ provider์—
  • React-Router ํ†ตํ•ด Page Switch
  • AppBar, BottomNavigation
  • ListUI
  • Map Page
  • NaverMap -> Component
  • Map - Redux ์—ฐ๊ฒฐ
  • Map์— Marker ์ถ”๊ฐ€ (iconfinder์ด์šฉ)
  • ๋งต์„ ์›€์ง์ธ ๋‹ค์Œ์— ํ˜„์žฌ ์ค‘์‹ฌ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ
  • ์žฌ๊ณ  list ์ •๋ ฌ
  • ์ƒ์  ์ƒ์„ธ ํŽ˜์ด์ง€
  • ๋งต ๋งˆ์ปค์—์„œ ์ƒ์„ธ ํŽ˜์ด์ง€ ์—ฐ๊ฒฐ
  • responsiveํ•˜๊ฒŒ ์ƒ๋‹จ padding ํฌ๊ธฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š”๋ฐ, ๋งˆ์ง„ ์กฐ์ •ใ…Žใ…๊ธฐ..ใ…œ
Tip
  • redux-dev-tool์„ ๋งŒ๋“œ๋ ค๋ฉด ์Šคํ† ์–ด์— ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด์ค˜์•ผ ํ•จ
 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

๋ฏธ๋“ค์›จ์–ด๋ž‘ ๊ฐ™์ด ์“ธ ๊ฒฝ์šฐ๋Š”?

  import { createStore, applyMiddleware, compose } from 'redux';

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

์ ์šฉ๊ฒฐ๊ณผ!

reducers/index.js์˜ baseState์— ๊ฐ’์„ ๋„ฃ์–ด๋ณด๊ณ 

Screen Shot 2020-05-03 at 12 15 14 PM

redux-dev-tool chrome ์—์„œ ํ™•์ธ

Screen Shot 2020-05-03 at 12 14 54 PM


  • css ์ ์šฉ

"& .MuiBottomNavigationAction-root" ์ด ํƒœ๊ทธ๋ฅผ ๋งŒ๋‚˜๋ฉด css๋ฅผ ๋ณ€๊ฒฝ์‹œ์ผœ์ค„ ์ˆ˜๋„ ์žˆ์Œ

const useStyles = makeStyles({
  root: {
    background: "#eee",
    width: "100%",
    "& .MuiBottomNavigationAction-root": {
        minWidth: 0
    }
  },

});

  • useState
  const [value, setValue] = React.useState(() =>{

      const path = location.pathname;
      //pathname์€ URL์˜ ๊ฒฝ๋กœ ์ด๋ฆ„์„ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
      if (path === "/list") return 1;
      if (path === "/help") return 2;
      if (path === "/about") return 3;
      return 0; 
  });

ํ˜„์žฌ ๋ˆ„๊ฐ€ ์„ ํƒ๋˜์–ด์žˆ๋Š”์ง€๋Š” valueState๋ฅผ ํ†ต์ œํ•˜๊ณ  ์žˆ๋‹ค. hooks์„ ์ด์šฉํ•ด์„œ ํ›…์„ ์“ฐ๊ณ  ์žˆ๋‹ค. ์ดˆ๊ธฐ๊ฐ’์ด 0์ด๋ผ์„œ ๋ฌด์กฐ๊ฑด 0๋ฒˆ์งธ๊ฐ€ ์„ ํƒ๋˜์–ด์„œ ๋งํฌํŽ˜์ด์ง€๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ map์— ๊ณ ์ •๋˜์–ด ์žˆ๋‹ค. ์—ฌ๊ธฐ์˜ ์ดˆ๊ธฐ๊ฐ’์€ path๋ฅผ ์„ ํƒํ•ด์ค˜์•ผ ํ•˜๋Š”๋ฐ... react-router-dom์˜ hooks ์ฐธ๊ณ ! useLocation, ์ดˆ๊ธฐ๊ฐ’์€ ํ•จ์ˆ˜๋กœ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ์ดˆ๊ธฐ๊ฐ’์ด ํ•จ์ˆ˜๋กœ ๋˜์–ด์žˆ์ง€ ์•Š์œผ๋ฉด ์•ฑ์„ ๋žœ๋”๋ง ํ•  ๋•Œ๋งˆ๋‹ค ์‹คํ–‰์„ ํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋งŒํผ ์•ˆ์ข‹์€ ์ ์ด ์ƒ๊น€..

useState์—๋Š” intinalState๊ฐ€ ๋“ค์–ด๊ฐ€๋Š”๋ฐ intinalState๊ฐ€ ํ•จ์ˆ˜๋ฉด ์ด ํ•จ์ˆ˜๊ฐ€ ์ œ์ผ ์ฒ˜์Œ ์ฝœํ• ๋•Œ ํ•œ๋ฒˆ๋งŒ ์ฝœํ•˜๊ณ  ๊ธฐ์–ต์ด ๋œ๋‹ค?....


json ํŒŒ์ผ์„ js object๋กœ ๋ฐ”๊ฟ”์คŒ


  • ๋ฐ–์—์„œ ๋“ค์–ด์™”์œผ๋ฏ€๋กœ ๋” ์ด์ƒ ์—๋Ÿฌ๋ผ๊ณ  ํ‘œ์‹œํ•ด์ฃผ์ง€ ๋งˆ์„ธ์š”...!
/* global naver */

  • css ๋‚ด์—์„œ ์ง์ ‘ ๊ณ„์‚ฐ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š”?!
const useStyles = makeStyles((theme) => ({
    mapWrapper: {
      width: "100%",
      marginBottom: theme.spacing(7),
      height: `calc(100vh - ${ 2 * theme.spacing(7)}px)`
    },
}));

๊ธฐ๊ณ„ ํ™”๋ฉด๋งˆ๋‹ค ์‚ฌ์ด์ฆˆ๊ฐ€ ๋‹ฌ๋ผ์ง€๊ธฐ ๋•Œ๋ฌธ์— ์กฐ์ ˆ์„ ํ•ด์ค˜์•ผ ํ•œ๋‹คใ…œใ…œ


  • What is ... ?

The ... can also be used to spread objects and not just arrays

// Using rest syntax here
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; 
x; // 1
y; // 2
z; // { a: 3, b: 4 }

// Using spread here
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

์ถœ์ฒ˜


  • action์„ ์ถ”๊ฐ€,,์ด๋ ‡๊ฒŒ ๋ณด์ด๋Š” ์ด์œ ๋Š” ๋ฆฌ๋•์Šค ๋กœ๊ทธ๋ฅผ ๋ฐ›์•„๋†จ๊ธฐ ๋•Œ๋ฌธ..!

Screen Shot 2020-05-04 at 11 11 36 PM

ํ•˜์ง€๋งŒ ์•„์ง state๋Š” ๋ฐ”๋€Œ์ง€ ์•Š์Œ reducer์—์„œ ์ฒ˜๋ฆฌ๋ฅผ ์•ˆํ•ด์คฌ๊ธฐ ๋•Œ๋ฌธ์—ใ… ใ…œ


  • ํฐ ๋ฌธ์ œ๊ฐ€?...
const reducer = produce((state, action) => {
    switch(action.type) {
        case "SET_MAP_ZOOM":
            state.mapZoom = action.payload;
            break;
        case "SET_MAP_CENTER":
            state.mapCenter = action.payload;
            break;
        // ์ „์ฒด global state๋ฅผ ๋ฐ”๊ฟ”์ค€ ๊ฒƒ..!
        default:
            break;
    }
}, baseState);

์™œ ์ƒ๊ธธ ์ˆ˜ ์žˆ๋ƒ๋ฉด...

Screen Shot 2020-05-04 at 11 24 07 PM

์ด๋ ‡๊ฒŒ ๋žœ๋”๊ฐ€ ๋‘๋ฒˆ ๋จผ์ € ๋ถˆ๋ฆฌ๋ฉด ์ƒ๊ด€์ด ์—†๋‹ค. ์ฒ˜์Œ ๋žœ๋”๊ฐ€ ๋˜์—ˆ์„ ๋•Œ๋Š” ๋งˆ์šดํŠธ ๋˜๊ธฐ ์ „, ๋ฆฌ๋•์Šค ๊ฐ’์ด. ๋ฐ”๋€Œ์ง€ ์•Š์Œ, ๋”ฐ๋ผ์„œ ๋žœ๋” ํ›„ Map์ด initialized ๋˜๋Š” ๊ฒƒ์€ ์ข‹์Œ..๊ทผ๋ฐ ์ง€๊ธˆ ์ƒํƒœ์—์„œ ๋“œ๋ž˜๊ทธ ํ•ด์„œ ์˜ฎ๊ธฐ๋ฉด ๊ณ„์† ๋žœ๋”๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. Map์ด initialized๋˜๋ฉด ๋ฌธ์ œ๊ฐ€ ์ƒ๊น€ ใ…œ -> ํŽ˜์ด์ง€ ๋ฐ”๊ฟ€ ๋•Œ๋งˆ๋‹ค initialized ๋จ


  • ์ง€๊ธˆ์€.. ์ง€๊ธˆ์€ pin์„ stores์˜ 100๋งŒ๊ฐœ๋ฅผ ๋ฐ›์•„์™”์œผ๋ฉด ๋ฐฑ๋งŒ๊ฐœ๋ฅผ ๋งˆ์ปค๋กœ ์ฐ๊ณ  ์žˆ๋‹ค. ๊ทผ๋ฐ ๊ทธ๋Ÿด ํ•„์š” ์—†์Œ..ใ…œใ…œ ๋ฐ”์šด๋“œ ์•ˆ์— (=๋งต ํ™”๋ฉด) ์žˆ๋Š” ๊ฒƒ๋“ค๋งŒ ์ฐ๋Š” ๊ฒŒ ์ข‹๋‹ค -> getBounds,,,,,,
hasLatLng(latlng)

๊ฐ์ฒด์˜ ์ขŒํ‘œ ๊ฒฝ๊ณ„ ๋‚ด์— ์ง€์ •ํ•œ ์ขŒํ‘œ๊ฐ€ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธ!

Screen Shot 2020-05-05 at 9 18 37 AM

Screen Shot 2020-05-05 at 9 18 47 AM

์œ„์™€ ๊ฐ™์ด ๋‹ค๋ฅธ ๊ณณ์— ์œ„์น˜ํ•œ ๊ณณ์˜ ๋งˆ์ปค๋Š” ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Œ! ๊ทผ๋ฐ ๋‹จ์  ์กด์žฌ ใ…  ๋‹ค๋ฅธ ๊ณณ์— ์œ„์น˜ํ•œ ๊ณณ์˜ ์Šคํ† ์–ด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋‚˜์˜ค์ง€ ์•Š๋Š” ๊ฒƒ..
naver.maps.Event.addListener(this.map, 'dragend', () => {
    const coord = this.map.getCenter();
    dispatch(setMapCenter([coord.lat(), coord.lng()]));
    this.loadPins();
    // dragend๊ฐ€ ๋˜์—ˆ์„ ๋•Œ ๋‹ค์‹œ loadPins ํ•ด์ค˜์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. ๊ทธ ์•ˆ์— ํ•€๋“ค์„ ๋‹ค์‹œ ๋ถˆ๋Ÿฌ๋‚ด์ฃผ๋„๋ก!
});

this.loadPins(); ์ถ”๊ฐ€ํ•˜๊ธฐ ๊ทผ๋ฐ ์—ฌ์ „ํžˆ ๋ฌธ์ œ ์กด์žฌ, ์ด๋ฏธ ์žˆ๋Š” marker๋ฅผ ๋˜ ๋งŒ๋“ค๊ณ  ์žˆ์„ ๊ฒƒ์ด๋‹ค.

if (this.markers[store.code]) {
    // code์— ํ•ด๋‹นํ•˜๋Š” ๋งˆ์ปค๊ฐ€ ์žˆ์œผ๋ฉด ๋” ํ•  ํ•„์š”๊ฐ€ ์—†์œผใ…,,๋น ์ ธ๋‚˜๊ฐ€๋ฉด ๋จ 
    return;
}

์ด ๋ถ€๋ถ„์„ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด์„œ ํ•ด๊ฒฐ

  • stores๊ฐ€ ๋ณ€๊ฒฝ ๋ฌ๋Š”๋ฐ ์™œ ์•„๋ฌด๊ฒƒ๋„ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์„๊นŒ?...stores๊ฐ€ ๋ณ€ํ•˜๋ฉด ๋ Œ๋”๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค. ๊ทผ๋ฐ ๋ Œ๋”๊ฐ€ ๋œ ์ดํ›„ ์•„๋ฌด๊ฒƒ๋„ ๋ณ€ํ•˜์ง€ ์•Š์Œ
    render() {
        console.log("RENDER~~~~~~~")
        return (
            <MapDiv ref={this.mapRef}/>
            /* ์ด๋ ‡๊ฒŒ id๋ฅผ ์ฃผ๋ฉด ์ปดํฌ๋„ŒํŠธ๋“ค๋กœ์„œ์˜ ์—ญํ• ์„ ํ•  ์ˆ˜ ์—†๋‹ค. 
            ๋ฆฌ์•กํŠธ์˜ refs๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ!
            */

        )
    }

Screen Shot 2020-05-06 at 9 03 32 AM

Screen Shot 2020-05-06 at 9 03 38 AM

  • ์ƒˆ๋กœ ํŒจ์น˜๋ฅผ ํ•ด์™€์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ๋Š”๋ฐ ํŒจ์น˜๊ฐ€ ์•ˆ๋œ๊ฑฐ๊ณ  stores๋‚˜ ๊ทธ๋Ÿฐ ๊ฒƒ๋“ค์ด ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ ๊ทธ๊ฑฐ์— ๋Œ€ํ•ด์„œ ๋ฐ˜์‘์„ ์•ˆํ•˜๊ณ  ์žˆ๋‹ค. ๋ Œ๋”์—๊ฒŒ๋‹ค ์ด๊ฒƒ์„ ๋„ฃ๊ธฐ ๋ณด๋‹ค๋Š”...

  • ํ˜„์žฌ์˜ center์—์„œ ์ƒˆ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์„ ๋งŒ๋“ค์ž

  • ํŒจ์น˜๋ฅผ ์•ˆํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— stores์— ์•„๋ฌด๊ฒƒ๋„ ์—†์Œ

Screen Shot 2020-05-06 at 1 52 56 PM

  • store๋ฅผ ์ง์ ‘ ๋„ฃ์–ด์ฃผ๋ ค๊ณ  ํ•œ๋‹ค. ์Šคํ† ์˜ค์™€ useSelector์—ฐ๊ฒฐ ํ•˜๋Š” ๋ถ€๋ถ„ ๋นผ์ฃผ๊ณ ใ… 

  • withRouter

error

About

๐Ÿ˜ท ๊ณต์  ๋งˆ์Šคํฌ ํŒ๋งค์ฒ˜ ํ™•์ธ

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published