일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- justify-content: center;
- error
- input 컴포넌트
- react 상태 관리 라이브러리
- Redux
- REACT
- 모듈 관리
- JWT
- flexbox
- 조건부 스타일링
- 프로그래머스
- position
- 백준
- 테스트 코드
- 정보처리기사필기
- froggy
- 기사퍼스트
- flex item
- flex container
- 카카오맵
- github
- prettier
- git revert
- createstore 취소선
- 정보처리기사
- 홍달쌤
- flexbox/grid 적용 여부
- Flexbox Froggy
- login button 컴포넌트
- 정보처리기사실기
- Today
- Total
목록React/React graduation project 기록 (4)
minyoung
refresh token 없을 때의 기본 JWT 인증 과정● 프로세스 설명1. 사용자 로그인 : 사용자가 React 앱에서 로그인을 시도합니다.2. 서버 응답 : Spring 서버는 사용자를 인증하고, 유효한 경우 JWT 토큰을 발급하여 응답합니다.3. React에서 토큰 저장 : React앱은 받은 JWT 토큰을 안전하게 저장합니다. 일반적으로 브라우저의 로컬 스토리지 또는 쿠키를 활용합니다.4. API 요청과 토큰 전달 : 사용자가 보호된 리소스에 접근하려면, React 앱은 API 요청 시 저장한 토큰을 함께 서버에 전달합니다.5. 서버에서 토큰 검증 : Spring 서버는 받은 토큰을 검증하고, 유효하다면 요청에 응답합니다.6. 토큰 디코딩 및 화면 표시 : React 앱에서는 받은 토큰을 디코딩..
인코딩(Encoding)개념 : 인코딩은 정보나 데이터를 다른 형태로 변환하는 과정이다.주로 문자를 바이트로, 이미지를 Base64 등의 형태로 변환한다.예시 : "Hello, World!"를 UTF-8로 인코딩하면 바이트 시퀀스로 변환된다.디코딩(Decoding)개념 : 디코딩은 인코딩된 데이터를 원래의 형태로 변환하는 과정이다.즉, 역으로 변환하는 것이 디코딩이다.예시 : Base64로 인코딩된 이미지를 디코딩하면 원본의 이미지 형태로 돌아간다.

카카오 맵 API 공식문서 활용하기네 안녕하세요~이전 포스팅에서는 카카오 맵 API를 활용하기 위한 기초 작업을 진행했고, 이번 포스팅에서는 코딩 부분에 대해 기록하려고 합니다.지금부터는 카카오 맵 API 공식문서를 참고해서 코드를 작성해보려 합니다.설명은 간단합니다.간단한 코드를 통해 웹브라우저에 지도를 띄울 수 있습니디ㅏ.https://apis.map.kakao.com/web/guide/1. Kakaomap.js 파일을 생성하고 Kakaomap 컴포넌트를 생성합니다.위와 같이 지도를 담을 영역을 만듭니다.React의 컴포넌트를 작성하는 기본 방식대로 작성해주면 됩니다.width: "100%" => 이 컴포넌트라 렌더링 되는 영역 내에서 가로 너비가 100%를 차지하게 됩니다.height: "100vh..

React.js 에서 kakaomap API를 활용하는 방법을 알아보겠습니다.1. 우선 아래의 카카오 개발자 사이트에서 로그인한 후 내 앱을 등록합니다.https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com앱을 등록하는 부분은 간단합니다.우선 아래의 사진처럼 위의 카카오 개발자 사이트에 들어가서 내 애플리케이션을 클릭합니다.로그인은 당연히 하셔야합니다.자, 이제 애플리케이션 추가하기를 클릭합니다.이제 애플리케이션 정보만 입력하면 끝입니다.앱 이름은 아무거나 입력해주시면 됩니다.이제 애플리케이션이 등록되었..