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} )..

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..

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미함. 클래스형 컴포넌트가 가지고 있는 state가 있고, 함수형 컴포넌트가 가지고 있는 state가 있다. => props와 다른 점은 부모 컴포넌트가 설정하는 값이고 자식 컴포넌트에서 읽기 전용으로만 사용할 수 있다는 점 import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); // state의 초깃값 설정 this.state = { number: 0, }; } render() { const { number } = this.state; return ( {number} { this.setState({ ..

- export키워드는 다른 파일에서 파일 import 할 때 위에서 선언한 클래스 불러오도록 함 export default MyComponent; - import 키워드로 아래와 같이 모듈을 불러올 수 있다. import React from 'react'; const MyComponent = () => { return 나의 새롭고 멋진 컴포넌트; }; export default MyComponent; import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ; }; export default App;