목록2024/05 (18)
개발자 도전기
오늘은 JWT 토큰과 React Router에 대해 배웠습니다! 2024.05.17 - [분류 전체보기] - [React] JWT 토큰 발급하기 [React] JWT 토큰 발급하기JWT 토큰이란?JWT(Json Web Token) 토큰이란 암호화된 Json 토큰으로 사용자의 인증 또는 인가 정보를 서버와 클라이언트 간에 주고받기 위해 사용됩니다 쿠키와 비슷하게 사용자가 로그인을 하면 서abc-datatype.tistory.com
[React] JWT 토큰 발급하기
JWT 토큰이란?JWT(Json Web Token) 토큰이란 암호화된 Json 토큰으로 사용자의 인증 또는 인가 정보를 서버와 클라이언트 간에 주고받기 위해 사용됩니다 쿠키와 비슷하게 사용자가 로그인을 하면 서버가 발급한 토큰이 브라우저에 저장되고 이후 클라이언트가 해당 토큰을 서버에 제출하면 서버는 토큰이 유효한지를 검사해 로그인 여부를 확인합니다. SpringSecurity에서 JWT 토큰이 사용되기 때문에 많이 사용됩니다 JWT 토큰의 구조JWT 토큰은 헤더(header), 페이로드(payload), 서명(signature) 세 부분으로 이루어져 있습니다 헤더{ "alg": "HS256", "typ": "JWT"} 토큰의 유형과 서명 알고리즘이 명시됩니다 페이로드{ "sub": "1234567..
오늘은 Axios를 사용해서 AJAX 방식으로 Get, Post 요청을 하는 법과 JSON 형식으로 데이터 전달하기, 상태코드에 따른 다양한 예제에 대해 배웠습니다 젠지가 이겨서 기분이 좋네요 2024.05.16 - [개발공부/React] - [React] AXIOS를 사용해서 Get, Post 요청(feat. JSON) [React] AXIOS를 사용해서 Get, Post 요청(feat. JSON)Axios는 백엔드와 프론트엔드의 통신을 쉽게 하기 위한 라이브러리로, 프레임워크에서 ajax를 구현하기 위해 사용합니다. AXIOS를 사용하면AJAX 방식으로 응답, 요청할 수 있습니다자바, 자바스크립abc-datatype.tistory.com
Axios는 백엔드와 프론트엔드의 통신을 쉽게 하기 위한 라이브러리로, 프레임워크에서 ajax를 구현하기 위해 사용합니다. AXIOS를 사용하면AJAX 방식으로 응답, 요청할 수 있습니다자바, 자바스크립트 객체를 자동으로 JSON 형식으로 변환해줍니다 npm 설치npm install axios axios를 사용하기 위해 설치해줍니다 Proxy 설정React의 포트 번호와 스프링의 포트 번호가 다르기 때문에 vite.config.js 파일에서 다음과 같이 설정합니다server: { proxy: { "/api": { target: "http://localhost:8080", }, }, }, /api 경로로 요청이 오면 :8080 포트로 요청을 보냅니다 Get 요청a..
오늘은 initial render와 re-render, useEffect 사용하는 방법, 그리고 axios로 get 요청하는 방법을 배웠습니다여태 자바를 공부하다가 리액트로 자바스크립트를 사용하니 뭔가 낯설게 느껴지네요😂
javascript의 구조 분해 할당과 props를 사용해서 데이터를 전달하고 응용하는 법을 배웠습니다 2024.05.10 - [개발공부/React] - [React] Javascript 구조 분해 할당 [React] Javascript 구조 분해 할당구조 분해 할당구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다 const a = { name: "son", age: 33, }; const aName = a.name; const aAge = a.abc-datatype.tistory.com
구조 분해 할당구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다 const a = { name: "son", age: 33, }; const aName = a.name; const aAge = a.age; console.log("aName", aName); // son console.log("aAge", aAge); // 33 위와 같이 객체의 속성값을 하나하나 대입하는 대신에 const { name: bName, age: bAge } = a; console.log("bName", bName); // son console.log("bAge", bAge); // 33 구조 분해 할당 구문으로 손쉽게 ..
오늘은 리액트를 설치하고 리액트의 기본 문법과 자바스크립트의 기본 문법, 데이터 타입, jsx에서 자바스크립트를 사용하는 방법 등에 대해 배웠습니다 리액트는 어렵다고 들었는데 프로젝트 전 마지막 과정인만큼 집중해서 들어봐야겠습니다!! 2024.05.09 - [개발공부/SQL] - [SQL] 동적 SQL(Dynamic SQL) [SQL] 동적 SQL(Dynamic SQL)Dynamic SQL사용할 SQL문이 Runtime시에 결정되어 SQL 쿼리를 동적으로 수행할 수 있게 해줍니다SQL문 내부에서 사용합니다 https://mybatis.org/mybatis-3/dynamic-sql.html mybatis – MyBatis 3 | Dynamic SQLDynamic SQL One ofabc-datatype..
Dynamic SQL사용할 SQL문이 Runtime시에 결정되어 SQL 쿼리를 동적으로 수행할 수 있게 해줍니다SQL문 내부에서 사용합니다 https://mybatis.org/mybatis-3/dynamic-sql.html mybatis – MyBatis 3 | Dynamic SQLDynamic SQL One of the most powerful features of MyBatis has always been its Dynamic SQL capabilities. If you have any experience with JDBC or any similar framework, you understand how painful it is to conditionally concatenate strings of S..