Front-end12 [Front-end] 카카오 로그인 서비스 구현에 관하여, 주의 사항 프로젝트를 진행 하던 중KaKao REST API를 이용해서 kakao 로그인을 연동하는 기능을 구현하기로 했다. 프론트엔드 단에서 할 일은 매우 간단하다고 볼 수 있는데.. 사진으로 한 번 보고가는게 이해가 빠르기 때문에 출처를 남기고 사진을 올려보겠다. 카카오 로그인 서비스의 과정을 나타낸 사진이다. 그 중 REST API 방식은 그렇다면 프론트엔드에서 구현해야할 것들은.. 1. 로그인 페이지에 카카오에서 지정한 URL로 로그인 페이지로 이동 시킨다.2. 카카오 로그인 페이지에서 로그인을 하고 되돌아오는 인가코드를 받아서 백엔드에 전달한다.3. 백엔드에 전달하고 나온 accessToken을 로컬 스토리지에 저장한다. 순서대로 살펴보자면 1. 로그인 페이지에 카카오에서 지정한 URL로 로그인 페이지.. 2024. 4. 30. JWT Token (Access Token, Refresh Token) 우선 Token을 쓰는 이유 부터 알아보도록 하자. JWT 토큰은 유저의 신원을 확인해주는 정보를 담은 데이터 조각이라고 볼 수 있다. JWT 토큰의 인증 방식 자체가 비밀키로 암호화 하기 때문에 client Server는 서로 안정적인 통신을 할 수 있다. 하지만 만약에라도 탈취를 당한다면 자신의 신원 자체를 다른 사람에게 뺏기는 것과 같으며 인증을 통과할 수 있기 때문에 위험하다. 따라서 이 토큰 탈취 당했을 때의 위험을 방지하기 위해 토큰의 유효 기간을 두어서 해결한다. 하지만 토큰의 기한이 짧으면 사용자는 토큰을 다시 받기 위해 로그인을 해야하고 길게두면 탈취 방지를 하기에 적합하지 않다. 따라서 JWT 토큰 자체를 2개(access Token, Refresh Token)로 나누어서 유효 기간을 .. 2024. 2. 26. React에 직접 적용하기 전 TypeScript 간단하게 알아보기 TypeScript 타입스크립트가 무엇인가? 자바스크립트의 "superset"언어이며 자바스크립트를 기반으로 하되 보다 더 확장된 언어이다. 자바스크립트의 기본적인 문법과 코드 작성법을 그대로 사용하면서 몇 가지 기능을 추가한 것이다. 타입스크립트는 JS의 라이브러리가 아니기 때문에 새로운 기능을 만들거나 기능을 확장하진 않는다. 정적 타입(statically Typed)의 특징을 갖는다는게 중요하다. 자바 스크립트는 원래 동적 타입 언어인데 Type이 고정되어 있지도 않고 함수에서 사용할 Type을 미리 정해두지도 않은 상태에서 전달된 변수를 받아 코드를 실행한다. 그럼 쓰는 이유는 뭘까요? 만약 대규모 프로젝트에서 함수나 객체를 의도치 않은 방식으로 사용할때 자바스크립트는 경고해주지 않고 일단 무조건.. 2024. 1. 22. React-Router-Dom React-Router-Dom에 대해서 알아보자! 우선 간단하게 라우팅이란.. -> 네트워크의 경로를 선택하는 process 라고 말한다. 쉽게 풀어서 말하자면 내가 가야 할 곳의 목적지를 맞게 이동시켜 주는 작업이라고 볼 수 있다. React-Router를 사용하는 이유 리액트는 기본적으로 SPA(Single Page Application)이다. 컴포넌트의 변화가 단일 페이지 안에서 일어난다. 그렇기에 다른 URL로 이동한다고 해도 페이지 전체가 교체되는게 아니라 한 페이지에서 컴포넌트의 변화만 일어난다. -> 이렇기에 사용자의 히스토리가 생기기 않아 뒤로가기 기능을 수행 할 수없고 특정 페이지 북마크, 새로고침 기능이 불가능해진다. 이러한 단점을 React-Router로 보완한다. Router의 종류.. 2024. 1. 18. 이전 1 2 3 다음
