JsonWebToken 3단계로 구성되어있음 Issuer Data - 토근이 생성될때 서버에 의해 토큰에 자동으로 추가되는 데이터 Custom Data - 커스텀 데이터, ex) 사용자 정보 Secret Sigining Key - 비밀키를 서버에 설정 => 클라이언트는 해당 정보를 볼 수 없음. 서버만이 해당 정보 볼 수 있음 => 해당 키로 접근 가능한지 서버에서 판단. 키는 토큰에 포함되지 않음. 토큰은 클라이언트 사이드 브라우저에 저장되어 서버의 보호된 리소스에 대한 요청에 첨부됨. Next.js 에서는 토큰 생성 및 유효성 검사등을 안전한 서드파티 패키지에 맡길 수 있다. 설치 명령어는 다음 (구버전) npm install --save-exact next-auth@3 or (최신 버전) npm i..

node redux 설치 명령어 npm install redux react-redux Redux Store import { configureStore } from 'redux'; // 2. state와 action에 대한 조치를 유발하는 reducer를 만든다. const counterReudcer = (state = { counter: 0 }, action) => { if (action.type === 'increment') { return { counter: state.counter + 1 } } if (action.type === 'decrement') { return { counter: state.counter - 1 } } return state; }; //1. 전역에서 딱 하나밖에 없는 전역관..

경로에 할당되는 페이지가 없을때, 404 page를 띄우기 pages폴더에 404.js 파일 추가 function NotFoundPage() { return ( Page not found! ); } export default NotFoundPage;

React환경에서 App-wide하게끔 state값을 유지하기 위해 a태그가 아닌, 리액트에서 제공하는 Link 라이브러리를 사용한다. import Link from 'next/Link'; Portfolio Portfolio - replace프로퍼티를 설정하면 새로운 페이지 또 띄우지 않고 현재 페이지를 새 페이지로 띄울 수 있음. import Link from 'next/link'; function ClientsPage() { const clients = [ { id: 'max', name: 'Maximilian' }, { id: 'manu', name: 'Manuel' }, ]; return ( The Clients Page {clients.map((client) => ( {client.name} )..

OKKY - myBatis에서 mapper 설정 중 statementType 질문입니다 OKKY - myBatis에서 mapper 설정 중 statementType 질문입니다 statementType="CALLABLE" 로 기입이 되어있어서 이게 뭔가 하고 검색해보니 'default값은 "PREPARED" 이고, STATEMENT,CALLABLE 로 설정가능하다.' 정도로 설명되는데 그래서 그게 무슨 역할을 한다는지 내용이 없 okky.kr 일반 쿼리는 PreparedStatement / Statement 타입 사용하고, Prodcedure나 Function 사용하는 쿼리는 statementType="CALLABLE" 사용 ex) ....

NextJS 프로덕션용 React framework ReactJS의 풀 스택 프레임워크 React라이브러리 위에 구축된 프레임워크로, React를 좀 더 강화시키는(?) 개념이라고 보면 된다. 대규모 용의 React구축을 쉽게 해준다. React앱에 다양한 기능 추가해줌으로써, 많은 기능들을 바로 사용할 수 있다! React의 기능 props, state, context + Framework의 기능 Routing..etc등을 결합 React React는 사용자 인터페이스 구축을 위한 라이브러리 React는 인증등을 추가하려면, 서드 파티 라이브러리들을 추가해주어야함 핵심 기능 SSR : 서버측의 페이지 상에 렌더링 되는 콘텐츠 처리 => SSR이 CSR에 비해 좋은 이유?. CSR의 경우 클라측에서 JS..

라이프 사이클 모든 리액트 컴포넌트에는 라이프 사이클이 존재함 컴포넌트의 수명은 페이지 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝남 클래스형 컴포넌트에서만 사용 가능 => 함수형 컴포넌트에서는 Hooks를 사용하여 비슷한 작업 처리 가능 라이프 사이클 메서드 마운트, 업데이트, 언마운트 카테고리로 나뉘어짐 리액트에서 라이프사이클 메서드의 종류는 총 9가지 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 마운트 DOM이 생성되고 웹 브라우저에서 나타나는 것 constructor -> getDerivedStateFromProps-> render -> componmentDidMount 순으로..

* 프로젝트 기본 환경 설치 1. node.js 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - node.js를 설치함으로써, npm(Node로 만들어진 패키지들을 관리해주는 툴)과 npx(node 5.2.0부터 새로 추가됨)이 자동으로 설치됨. - 보다 더 빠른 패키지관리 명령어인 yarn을 대체로 사용해도 된다. 아래는 npm과 yarn을 비교한 글과 npm의 명령어 및 관련 파일에 관하여 설명한 글들. https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8..

Token - 사용자를 구별할 수 있는 문자열 1. 최초 로그인(클라요청)시 서버가 생성함 2. 서버가 로그인 한 후 토큰을 만들어 반환 3. 클라이언트는 이후 요청에 아이디 / 비밀번호 대신 토큰(Authorization : Bearer 형태로 넘김 => 여기서 Bearer은 OAuth에 대한 토큰을 의미한다고 함)을 계속 넘겨서 자신이 인증된 사용자임을 알림 JSON 웹 토큰 - header / payload / signature - header에는 typ(토큰 타입) / alg(해시 알고리즘 종류) - payload에는 토큰에 담길 정보들이 들어감 - Signature에는 토큰을 발행한 issuer의 서명이 들어가며, 토큰의 유효성 검사에 쓰임 1. 클라이언트단에서 로그인 요청 2. 서버에서 사용자..