위와 같은 이미지, 많이 익숙하신가요?
우리가 사용하고 있는 웹 페이지들에서 흔히들 볼 수 있는 로그인 페이지입니다.
로그인은, 웹 사이트에 회원가입 등으로 저장되어 있는 사용자 정보로
접속하려고 하는 요청을 검증하고 ( 아이디 또는 이메일, 비밀번호 체크 )
검증이 완료되면 해당 사용자의 정보 데이터를 가지고 오는 과정입니다.
프론트엔드에서 처리되는 로그인 과정은
접속하려는 사용자의 아이디 또는 이메일과 비밀번호를 받아오는 Input 태그를
만드는 과정에서부터 시작합니다.
이메일과 비밀번호를 담아올 수 있는 기본틀입니다.
이 Input 태그 안으로, 접속하려고 하는 사용자의 이메일과 비밀번호를 받아
서버로 전송할 수 있습니다.
아이디와 비밀번호를 받아왔다면
해당 데이터를 서버로 전송해볼까요?
로그인 하는 API 입니다.
인자로 password 와 email 를 넘겨줬을 때
AccessToken이라는 데이터를 새로 받아올 수 있습니다.
AccessToken은, 로그인 된 유저의 정보들을
특정한 규칙에 따라 배치된 일렬의 문자열 형태를 가집니다.
AccessToken를 받아왔다는 것은
해당 사용자에 대한 검증이 완료 (이메일과 비밀번호가 일치하는지) 되었으므로
현재 사용자가 해당되는 사용자와 동일한 것을 인증해주는 데이터를 받아온 것과 동일합니다.
만약, 사용자의 정보가 담겨있는 마이페이지에 접근하려고 했을 때
이 마이페이지의 주인이 현재 사용자와 동일한지를 검증하는 과정에서
AccessToken 을 이용해 '이 페이지의 주인과 동일하다' 라는 검증을 할 수 있습니다.
자, 그럼 받아온 AccessToken 을 어디서 사용할 수 있을까요?
바로 서버와 통신되는 순간에 AccessToken을 함께 넘겨주면서
사용자에 대한 인증을 진행할 수 있습니다.
app.tsx 에서 기존에 사용했던 createUploadLink 코드에
headers 로 AccessToken을 담아서 넘겨줍니다.
이때, authorization 의 키 값으로 시작하며
관례상 Bearer 을 함께 사용해줍니다.
❗ AccessToken 에 대한 데이터 값을 App.tsx 에서 사용하는 방법은 이전 시간에 배웠던 Context-API를 활용하면 되겠죠??!
자, 방금 설정했던 코드가 어떤 코드인지 감이 오시나요?
headers 는 서버와의 통신을 설정하는 부분입니다.
이때, headers 에 authorization (인증)이란 데이터의 값으로
AccessToken을 담아서 넘겨줄 수 있습니다.
그렇게 되면, 해당 서버에서는 authorization으로 AccessToken을 받은 후,
AccessToken 이 아직 유효하다면 사용자가 로그인을 했다고 판단한 후
사용자의 인증이 필요한 데이터들을 클라이언트로 보내주게 됩니다.
개발자모드의 Network에서 서버와 통신하는 API 안에서
Request Headers 부분을 확인해보면, authorization 의 이름으로
AccessToken 이 담겨서 전송되는 걸 확인할 수 있습니다.
로그인 프로세스 (Back-End)
자, 클라이언트로부터 사용자의 이메일과 비밀번호를 전송했으니
서버에서도 받아올 수 있겠죠?
서버에서는 요청한 이메일과 비밀번호 데이터가
데이터베이스에 실제로 저장이 되어 있는 데이터인지 (= 회원가입 된 유저인지) 를
검증해줘야 합니다.
이때, 필요한 과정이 하나 더 있는데
비밀번호를 해싱하는 과정입니다.
서버에서는 클라이언트로부터 받은 비밀번호를 원형 그대로 저장을 하지 않고
비밀번호를 어떠한 규칙에 따라 여러가지 문자들이 섞인 문자열로 변환한 후에
데이터베이스에 저장하게 됩니다.
비밀번호를 해싱하는 과정이 왜 필요할까요?
비밀번호를 원형 그대로 서버에 저장하게 된다면
개인정보 유출 및 해킹 등에 대한 보안 이슈에 상당한 문제가 생기기 때문에
개인의 비밀번호는 서버 관리자도 확인할 수 없도록 해싱하는 과정이 꼭 필요합니다.
해싱한 비밀번호와 이메일이 일치한 데이터가 데이터베이스에 있다면
해당 유저가 로그인 했다는 걸 인증해주기 위한 AccessToken을 만들어주게 됩니다.
이때 사용하는 표준 방식을 JWT (JSON Web Token) 라고 합니다.
생성한 AccessToken은 서버에서 사용 시간을 설정해둘 수 있습니다.
즉, 로그인 후 2시간 동안은 로그인을 유지해두겠다. 라고 설정을 한다면
2시간 동안은 로그인이 된 상태로 유지가 되다가,
2시간 후에는 새로운 AccessToken 을 받아오도록 합니다. === refreshToken?
권한분기
로그인 인증을 마쳤으면 이에 따른 권한 분기가 이루어 집니다.
아주 작게는 로그인을 한 사람과 로그인을 하지 않은 사람
추가적으로 로그인에 등급을 매기면, 운영자로 로그인 한 사람, 판매자로 로그인 한 사람, 거래처 사장님으로 로그인 한 사람 등 다양하게 권한을 분리할 수 있습니다.
클로저
📖 MDN 공식문서를 참고해보세요!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
클로저를 사용하기 위해서는 전역변수와 지역변수에 대한 개념부터 알아보고 가야합니다.
전역변수는 해당 컴포넌트 (= 페이지) 안이라면 어디서든 사용할 수 있는 변수를 의미합니다.
지역변수는 함수 안에서 정의된 변수로써, 해당 함수 안에서만 사용되는 변수를 의미합니다.
이 두 가지 의미를 가지고, 클로저는 내부 함수에서 외부 함수의 지역변수에 접근하는 것을 의미합니다.
function A(){
const 지역변수 = 123
return function B(){
console.log(지역변수) // 123
}
}HOC vs HOF
HOC는 Higher Order Component
HOF는 Higher Order Function
이 두 개념은 위의 클로저로부터 확장된 개념입니다.
1. HOC
가장 대표적으로 HOC 가 사용되는 부분은 페이지의 권한을 처리할 때 사용하게 됩니다.
예를 들면, 아래 페이지는 회원 공개 페이지 입니다.
UserPage가 실행되기 전, withAuth라는 상위 컴포넌트가 먼저 실행이 되게 됩니다.
여기서 클로저의 개념이 다시 한 번 나오게 됩니다.
const UserPage = (props) => {
return <div>회원 페이지입니다.</div>;
};
export default withAuth(UserPage);아래는 withAuth라는 HOC 컴포넌트 입니다. 클로저라는 개념으로 만들어졌습니다.
어디가 클로저냐구요?! 외부 함수에서 받은 Component라는 변수는 내부 함수에서 사용하고 있기 때문입니다.
const withAuth = (Component) => (props) => {
const router = useRouter();
const { accessToken } = useContext(GlobalContext);
// 토큰체크
useEffect(() => {
if (!accessToken) router.push("/login");
}, []);
if (!accessToken) return <></>;
return <Component {...props} />;
};
export default withAuth;2. HOF
HOF 역시 HOC와 비슷합니다. 단지 최종 return 값이 JSX인지, JSX가 아닌지로 구분됩니다.
Component대신 Function이려면 최종으로 return 되는 값이 JSX가 아닌 일반 함수이면 되겠죠?
그동안 특정 버튼을 클릭했을 때, id 값을 넘겨주기 위해 event.target.id를 사용하곤 했습니다.
하지만, 이는 고유한 id를 태그에 입력하게 되므로, 예기치 못하게 id가 중복되어 작성되는 경우에 오작동을 할 가능성이 있습니다.
물론, 서비스의 규모가 커지면 커질수록 가능성은 더 높아지겠죠?
이러한 이유로 HOF를 사용하게 됩니다.
(또한, HOF를 사용하면 기존에 UI프레임워크를 사용하면서 발생했던 문제(id가 사라지는 문제)도 해결됩니다.
- 기존의 방법
// 기존의 방법
export default function Aaa(){
const onClickButton = (event) => {
console.log(event.target.id)
}
return <button id={123} onClick={onClickButton}>클릭</button>
}- HOF 방법
// HOF 방법
export default function Bbb(){
const onClickButton = (id) => (event) => {
console.log(id)
}
return <button onClick={onClickButton(123)}>클릭</button>
}