리덕스는 리액트에서 상태를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리이다.
예시로 프로젝트가 복잡할 때, handleSomethin은 value를 업데이트하는 함수이다. 이 함수는 컴포넌트 두 개를 거쳐서 왼쪽 A 컴포넌트로 전달한다. 이 함수가 호출되면 맨 위에 있는 app 컴포넌트의 value 값을 바꾸고, 이 value 값을 b 컴포넌트로 전달하여 b 컴포넌트 안에서 렌더링된다.
이런식으로 특정 작업을 하려고 여러 컴포넌트를 거쳐서 props를 전달하는 것은 비효율적이다. 작업을 하면서 헷갈릴 수도 있고, 실제로 컴포넌트 자기 자신은 필요하지 않은데 자식 컴포넌트 때문에 필요한 props 개수가 너무 많아질 수도 있기 때문이다.
추가로 형제 컴포넌트에서 불필요한 렌더링이 일어나기 때문에 이 역시 상황에 따라 방지해 주어야 한다.
또 최상위 컴포넌트인 app에 상태 관리 로직이 너무 많아 컴포넌트의 코드 길이가 너무 길어지는 현상도 발생할 수 있다.
이런 문제점들은 리덕스라는 상태관리 도구를 사용하면 매끄럽게 해결가능하다.
리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것이다. 리덕스를 사용하면 store라는 객체 내부에 상태를 담게 된다.
리덕스를 사용하면 스토어에서 모든 상태관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션이라는 것을 스토어에 전달한다. 액션은 객체 형태로 되어있으며, 상태를 변화 시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정은 디스패치라고 한다.
스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다.
스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컼포넌트에 바로 전달한다. 부모컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다.
- 스토어 : 애플리케이션의 상태 값들을 내장하고 있다.
- 액션 : 상태 변화를 일으킬 때 참조하는 객체이다.
- 디스패치 : 액션을 스토어에 전달하는 것을 의미한다.
- 리듀서 : 상태를 변화시키는 로직이 있는 함수이다.
- 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.
ESLint
Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다.
코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다.
0. token, 왜 필요한가?
HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다.
이러한 상황을 막기 위한 것이 token이다 !
먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마이페이지 등 로그인이 필요한 사이트를 접속할 때마다 서버에 token을 보내며 로그인을 한 유저인지, 권한이 있는지 알려줌으로써 다시 로그인을 할 필요가 없다.
1. JWT란 무엇인가?
JWT는 Jason Web Token의 약자이다.
모바일 앱이나 웹에서 사용자 인증(Authentication)을 수행할 때 사용하는 암호화된 토큰이다.
사용자의 정보 등을 암호화하여 사용자 정보가 필요한 API를 호출할 때, 해당 토큰을 보내주면 백엔드에서 그 토큰을 검증(verity)하는 과정을 거친다. 그 후 response를 해주는 것이다.
2. Local Storage ? Session Storage?
둘 다 HTML5에 추가된 '저장소'이다.
로컬 스토리지(Local Storage)에 들어간 데이터는 유저가 지우지 않는 이상 브라우저에 계속 남아있게 된다.
하지만, 세션 스토리지(Session Storage)에 들어간 데이터는 브라우저 탭을 닫을 경우에 사라지게 된다.
이를 통해 '로그인을 유지'시키기 위해서는 세션 스토리지가 아닌 로컬 스토리지에 token을 넣어주면 된다는걸 알 수 있다.
3. 로그인 과정
-
최초 회원가입 시 비밀번호를 DB에 바로 저장하지 않고 Bcrypt를 이용해 암호화를 한 후 비밀번호를 DB에 저장한다.
* Bcrypt: 현업에서 많이 사용하고 있는 패스워드 암호화 알고리즘/Bcrypt 모듈을 설치해서 사용가능하다. -
유저 정보를 저장한 후에 로그인을 할 때 암호화된 비밀번호화 비교하는 검증 과정을 거친 후 일치하게 되면 로그인을 한다.
-
로그인을 할 때 JWT token을 생성하고 token을 localStorage에 저장하여 로그인을 유지시킨다.
-
로그아웃을 할 때엔 localStorage에 있는 토큰을 지운다.
4. 어떻게 저장하고, 서버에 보내는가?
- 로그인 성공시 localStorage에 token 저장
1) 백엔드 측에서 설정한 로그인 성공시 response.MESSAGE와
2) 토큰의 발급 유무에 따라 로그인 성공 여부를 알 수 있다.
token이 true이면(있으면) localStorage에 login-token이라는 키 값으로 token을 저장한다.
(localStorage에 저장할 경우 해당 도메인에 영구저장된다.)
2. 인가(Authorization)가 필요한 사이트에서 token 전달
이제 마이페이지, 장바구니 등 인가 과정이 필요한 사이트에서 데이터를 요청할 때,
아래의 방법으로 localStorage에 저장해두었던 token을 꺼내 함께 전달하면 된다.
fetch 함수의 두 번째 인자는 조건 부분이므로, 이 부분을 headers에 아래 부분을 작성한다.
- 'Content-Type': 'application/json': 데이터를 json 형태로 전송
- Authorization: localStorage.getItem('login-token'): localStorage에 login-token key로 저장한 값을 HTTP Authorization 요청 헤더로 전달
출처: https://bo5mi.tistory.com/188 [대범하게:티스토리]
