[Wecode 32일차] JWT, 쿠키,세션,로컬스토리지, OAuth,ENOSPC에러

1. this.props.children

헤더와 검색창을 나란히 놓고 z-index로 헤더위에 검색창을 구현했지만, 멘토님께서 이렇게 작성하지 말라고 하셨다.

<Header headerName="main_header"/>
<SearchBar SearchBarName="main_searchbar"/>

<Header headerName="main_header">
   <SearchBar SearchBarName="main_searchbar"/>
</Header>

그래서 아래와 같이 헤더 밑에 검색창 컴포넌트를 넣으니, 화면에서 헤더위에 검색창이 아예 사라졌다.

원인은 헤더 컴포넌트에 this.props.children을 넣지 않아서 발생한 문제였다.

평소에 this. props.children을 알기만 했지, 실제 언제 사용하는지는 궁금했었는데. 감을 잡았고. 해결했다.

//헤더.js
<div className={headerName}>
   <div className={textName} onClick={handleClick}>{text}</div>
   {children}
 </div>

2. 작업중 갑자기 파일이 안열리고 눈앞에서 사라지는 현상이 발생함.

    vscode에서 무슨알림이 떴는데.. 클릭하니 아래와 같은 페이지로 이동했음

https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc 

Running Visual Studio Code on Linux

ENOSPC에러

리눅스환경에서 node.js를 실행시킬때 watch의 문제때문에 발생한다.

Watch란? 모든 자바스크립트 빌드 툴에 사용하고 있는 핵심적인 기능 중  하나로써, 옵션으로 지정한 경로를 감시하다가 경로 내부에서 디렉토리 혹은 파일의 추가, 수정, 삭제가 일어나면 지정한 콜백함수를 실행시키는 기능이다.

이 에러를 계속 무시하다가.. 내 프로젝트 파일이 눈앞에서 삭제되는 현상이 발생했다.

발생하는 이유는 내부 watch의 모니터링 허용한계를 벗어났기 때문임.

우분투는 inotify 를 이용하여 디렉토리의 변경 현황을 모니터링한다. 일반적인 사용에서는 큰 문제는 없지만,  특정 작업으로 인해 모니터링 갯수가 늘어난다면, 위와 같은 에러가 발생한다. 

해결방법은 허용범위를 늘려주면된다.

우분투 64비트 기준으로 8192로 설정되어있고, Max로 늘려주면 해결된다.(터미널에서 아래와 같이 입력해주면 된다)

ech fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

3. JWT

JWT : 존 윅 3 가 아닌 JSON WEB TOKEN이다.

 1) 주고받는 Flow

    서버와 클라이언트가 통신할때 HTTP 방식으로 통신을 하고, HTTP의 특성인 stateless 때문에, JWT를 사용하게

    되었다.  서버에서 JWT를 클라이언트로 보내주면, 클라이언트는 헤더에 JWT를 쿠키, 로컬스토리지, 세션스토리지

    중 하나에 저장해서(프론트엔드 개발자가 선택할 수 있음) 서버로 보낸다.

 2) 세부설명

JSON 데이터를 토큰으로 만들었는데, 그 토큰을 웹에서 사용하는 것이 JWT이며, 인증이 아닌 인가와 관련이 있다.

JWT는 dot (.)을 기준으로 3부분으로 나뉜다. 1번째 부분은 헤더, 2번째 부분은 바디 부분, 3번째 부분은 시그니쳐

부분이고. 3번째 부분을 제외한 1,2 부분은 누구나 decode를 할수 있다. 따라서, JWT에는 민감한 정보를 넣어서는

안된다.

3번째 부분의 용도는 서버에서 자신이 발행한 토큰이 맞는지 확인할 수 있는 일종의 발행도장 같은 개념이다.

3번째부분은 서버에서 복호화를 할 수 있기에, 요청온 정보를 복호화 하면 해당 서버가 만든 JWT이고, 복호화를 못하면

외부에서 만든 토큰이 된다.

통상 로그인 이후에 사용한다.

로그인 이후 보낼때 fetch에서 헤더에  Authorization : token을 추가해서 보내준다. 

백엔드는 이 기준을 근거로 해당 사용자의 정보를 전달한다.

let token = localStorage.getItem('wtw-token') || '';  

fetch('http://localhost:8000/likes/', {
  headers: {
      'Authorization': token,
  }
})
.then(response => response.json())
.then(response => {
   console.log(response.data);
})

4. 쿠키, 로컬스토리지, 세션스토리지

1) 쿠키 : 시간이 있는 데이터이고, 쿠키의 만료시간을 정해줄 수 있음. 웹토큰 저장하는 방식중 하나임 ex) 팝업창 기간

2) 로컬스토리지 : 한번 저장되면 삭제하기 전까지 유지됨. 정보 유지용.

3) 세션스토리지 : 한 세션만 유지하며, 브라우져를 끄면 끊어진다. 은행 등 보안이 중요한 곳에 사용함.

                       도메인별, port별로 스토리지 저장된다.

프론트 엔드 개발자는 위 3가지 사항 중 선택해서 사용할 수 있다.

5. OAuth

또 다른 인가, 인증방식이고, 통상 직접 로그인이 아닌, 서비스를 이용할때, 구글, 페북, 카카오 등 버튼을 통해

로그인 하는 방법이다.

구글, 페북, 카카오에 가입된 정보를 이용해서 서비스를 이용하는 방식인데, 작동 방식은 이렇다.

구글, 페북, 카카오 입장에서 우리 시스템을 사용하지 못하게 하면서도 필요한 부분만 전달해주는데,

이것이 인증키(OTP, one time pass)이다.

Flow

프론트엔드에서 페북, 구글, 카카오 로그인버튼을 눌러서 호출을 하면 인증키를 구글, 페북, 카카오 중 신청한 곳에서

인증키를 보내주고, 프론트엔드에서 그 키를 받아서 백엔드로 보내준다. 그러면 백엔드에서 인증키가 있어야, 페북,

카카오, 구글에 api를 요청해서 해당 고객의 정보를 받아오는데, 그것이 DB에 없으면 저장해서 회원가입이 되고,

두번째부터는 DB상에 데이터가 존재하므로 로그인이 된다.