[Wecode 41일차] 새로고침, 정규표현식 등 삽질

1. window.location.reload()

 페이지 새로고침할 때 사용하는 함수이다. 댓글 버튼 누른 후 반영될때 사용하면 유용하다. 

 나는 리다이렉트로 처리하려고 했지만, 리로드 방법을 권유하셨다.

 

2. 리액트에서 map함수 사용시  key값 설정하는데, 설정해도 에러가 있다면? 프레그먼트가

불필요하게 있는지 확인해볼 것.

 

3. get방식으로 데이터 요청할때는 쿼리스트링이나, url 파싱을통해서 데이터를 전달 할 수 있다.

 

4. 엔드포인트는 명사로 설정한다. 

 

5. componentDidUpdate의 삽질.

    부모태그에서 자식태그에게 props를(store_id) 주었는데, 자식태그의 componentDidMount안에서 console.log(this.props.store_id) 프롭스가 undefinded으로 계속떴다.

라이프싸이클에 문제가 있는듯하여 콘솔로그를 찍어봤는데, 처음 render => componentDidmount 로 찍힘.

랜더부분에서는 나오는데 componentDidMount여기서는 자꾸 안나와서, 다시 생각해 본결과 componentDidUpdate에서 

프롭스가 바로 찍혔다.  허탈... 감사합니다 멘토님.

 

6. 정규표현식

1100 => 11:00 바꿔주는 정규표현식 /\B(?=(\d{2})+(?!\d))/g, ":"
1000원 => 1,000원 바꿔주는 정규표현식  /\B(?=(\d{3})+(?!\d))/g, ","

7. HTTP hError [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

하나의 엔드포인트에서 조회 기능에 대해 비슷한 기능의 쿼리 두줄을 날리고, 두줄에 대한 res.json()을 리턴하니 발생한 에러.

변수에 두개 쿼리의 결과를 종합하고 res.json()을 하나만 사용하여 해결함.

HTTP통신은 하나의 요청에 하나의 응답이 기본임. 하나의 요청에 두개의 응답을 보내니, 이런 문제가 발생함.

 

8. 노드 JWT 토큰 decode하기

실제 백엔드 서버가 장고인데, 댓글기능을 테스트하기 위해서 노드로 백엔드 목업서버를 구성하였다.

댓글은 로그인한 사용자만 사용할 수 있기에 JWT 토큰이 필요하다. 장고에서 프론트로 보내고, 프론트에서 저장한 JWT토큰을 

노드에서 어떤 사용자인지 해석하려면, 디코드 기능이 필요하다. 

npm install jwt-decode

const jwtDecode = require('jwt-decode');

 const decodeToken = jwtDecode(req.headers["authorization"]);
 
//클라이언트언트에서 헤더에 authorization를 넣고 보냄

let DATA = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": getToken
      },
      body: JSON.stringify({
        user_id: userId,
        user_comment: textAreaValue,
        user_like: selectedEmoticonResult,
        restaurant_name : this.state.detail_store.name,
        restaurant_id : this.state.detail_store_number
        // userProfile: userProfile
      })
    };
    
 이런식으로 보냄

9. DB가 인서트가 어쩔땐 되다가 어쩔땐 안되는 현상은 원인분석 중임.