[Wecode 35일차] 리스트와 지도연동, url파싱

1. 지도 연동시 jsx내에서 삼항연산자를 여러개 써야하는 번거로움 발생

jsx내에서 if~else문을 사용할 수 없어 삼항연산자로 구현했으나, 가독성이 너무 떨어지고, 코드가 지져분 해지는 관계로, 리펙토링을 진행하였음.

filter+map 메소드로 정리함.

  {                  
   this.props.storeNum === undefined && mapMakerList.filter(el=>this.props.storeInfo === undefined ||  this.props.storeInfo === el.food_type_id)
     .map((item, index) => {
       return (                                                       
          <AnyReactComponent key={item.id}                          
                             lat={item.latitude}
                             lng={item.longitude}
                             name={item.name}
                             text={item.food_type_id === 1 ? <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="red"/> :
                             	   item.food_type_id === 2 ? <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="green"/> :  
                                   item.food_type_id === 3 ? <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="#04b4f4"/> : 
                                    <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="#bf2d93"/>
                                   }
           />                                           
        ) //return end
      }  
      )
  }
  {   
   //detail화면 props = this.props.storeNum가 undefined이 아니면 detail화면임.
   this.props.storeNum !== undefined && mapMakerList.filter(el=> Number(this.props.storeNum) === el.id)
      .map((item, index) => {                       
         return (                                                                          
            <AnyReactComponent key={item.id}                          
                               lat={item.latitude}
                               lng={item.longitude}
                               name={item.name}
                               text={item.food_type_id === 1 ? <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="red"/> :
                                     item.food_type_id === 2 ? <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="green"/> :  
                                     item.food_type_id === 3 ? <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="#04b4f4"/> : 
                                     <FontAwesomeIcon icon={faMapMarkerAlt} size="lg" color="#bf2d93"/>
                                     }
            />                         
         ) //return end
       }  //end jsx
       )
   }

2. 부모에서 자식컴포넌트로 원하는 값 props넘기기

     Map -> Layout -> detail  로 구성된 컴포넌트 관계에서, 가장 하위에 있는 Map컴포넌트에서 부모의 컴포넌트를 받아 마커를 지도에 뿌려줘야할 때, 데이터 흐름에 따라 props로 넘기는데, Layout컴포넌트의 버튼에 따른 StoreId를 자식 컴포넌트에 넘기기 위해 state에 값을 저장하여 자식 컴포넌트에 넘겨서 처리함.  

3. url 파싱

리스트에서 하나의 세부정보로 들어가려면 라우터(ex) "http://10.10.10.10:8000/store/1" 이런식이면,

this.props.history.push('/store/1'))로 페이지를 이동하고, 해당 페이지 

document.location.pathname을 하면 url정보가 나오는데, 상세페이지 등의 param값을 따려면, split 등으로 파싱을 해서 

엔드포인트 주소 param 값에 맞게 파싱해서 보내야 한다.

ex) 식당 세부정보 "http://10.10.10.10:8000/store/individual/"+파싱한 아이디

4. gitIgnore

프로젝트간 깃에 올리고 싶지 않은 경우, 여기에 파일을 등록하면 깃에 올라가지 않는다.

구글 지도 키같은거는 브라우져에서 확인 가능하므로 중요하지 않다.

하지만 정말 중요한 프라이빗 키라면, scret.js 파일 등으로 등록해서 관리를 하고, gitIgnore에 등록을 한다.

현업에서 프로젝트할 때는 클론이나 포크 받을경우 프라이빗 키가 없기때문에 처음에 에러가 날텐데, 그때는 

직접 사람에게 파일을 받던가 하면 된다.