Spring Cecurity Spring Security 란? 간단히 말하면 Spring의 보안(인증과 권한, 인가 등)을 담당하는 서블릿 필터의 집합이다. 서블릿 필터는 서블릿 실행 전에 실행되는 클래스들로 토큰 인증을 위해 컨트롤러 메서드의 첫 부분마다 인증 코드를 작성하는 고민을 해결하기 위해 서블릿 필터를 사용한다. JWT(JSON Web Token) 란? 2022.10.24 - [Java] - JWT(JSON Web Token) 개념 및 구조 * 전체 Source Code * https://github.com/kangilbin/TodoList 1. JWT 토큰 발행 방법 토큰 발행 > 로그인 시 토큰 반환 > 토큰을 이용해 API 인증 1-1) 토큰 생성을 위한 JWT 라이브러리 추가하기 htt..

JWT JWT 란? 서버에서 전자 서명된 토큰을 이용하면 인증에 따른 스케일 문제를 해결할 수 있다. 전자 서명 토큰 중 하나가 JWT(JSON Web Token)이다. 기존 토큰 기반 인증과 차이점은 서버가 헤더와 페이로드를 생성한 후 전자 서명을 한다는 점이다. JSON 형태의 토큰으로 {header}.{payload}.{signature}로 구성되어있고, 토큰 기반 인증이므로 서버가 생성한다. 1. JWT 장점 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요 없고, MSA 환경에서 인증 서버와 데이터베이스에 의존하지 않는 쉬운 인증 및 인가 방법을 제공한다. MSA(micro service architecture) 란? 소프트웨어가 잘 정의된 API를 통해 ..

서버와 클라이언트의 클래스명이 다른 것이 원인이다. NextJS는 첫 페이지 로드가 SSR로 동작하기 때문에, 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. * SSR / CSR 이란? 2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 1. babel-plugin-styled-components 라이브러리 설치 환경에 따라 달라지는 className을 일관되게 해준다. npm add -D babel-plugin-styled-components 2. root경로에. babelrc파일 생성 ( .babelrc 파일) { "presets"..

NextJS에서는 기본적으로 라우트 설정이 되어있지 않는 페이지에 대해 서버사이드 랜더링을 하지 않게 아래와 같은 404 오류 페이지를 보여주도록 되어있다. * 공식 문서 * https://nextjs.org/docs/advanced-features/custom-error-page 1. 404 페이지 커스텀 방법 기존 오류 페이지를 사용하지 않기 위해서는 pages폴더에 404 파일을 생성한다. ( 404.tsx ) export default function NotFound(){ return "What are u doing here" } 원하는 화면으로 커스텀 404 파일은 기본적으로 빌드 타임에 만들어 지기 때문에 데이터를 불러오는 작업이 있다면 getStaticProps를 통해 가져와야한다. 2. 5..

NextJS에서는 img태그가 아닌 next에서 import 해 온 next/image의 Image태그를 사용해야 한다. NextJS에서 이미지를 최적화시켜주기 때문이다. * 공식 문서 * https://nextjs.org/docs/api-reference/next/image 1. 장점 Loader을 통해서 커스터마이징 가능 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소 가능 자동 스켈레톤 UI(placeholder 통해서), CLS 방지도 가능 이미지 캐싱도 자동으로 해주고 expiration time 설정도 가능 next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호 가능 2. 사용 방법 2-1..

EVN 란? 개발자만 알아야 하는 민감한 정보(Port, DB, API KEY 등)나 Git, 오픈소스에 올리면 안 되는 값들이 있다. 이때 환경변수 파일을 외부에 만들어 저장시켜 소스코드 내에 하드 코딩하지 않고 사용할 수 있다. 1. EVN 파일 사용 방법 1-1) 최상위 경로(root)에서 .evn 파일 생성 환경 변수로 지정할 값 작성 리액트(create-react-app)일 경우 변수명 REACT_APP_으로 시작한다. ( ex) REACT_APP_API_KEY ) NextJS의 경우 NEXT_PUBLIC_으로 시작한다. 1-2) .gitignore 설정 추가 .evn파일을 등록해주어야 Git에 Push 할 때, 파일이 올라가지 않는다. 1-3) 환경 변수 사용 const API_KEY = pr..

데이터가 유효할 때만 화면이 보이는 게 좋은가 또는 Loading화면을 보여준 다음에 데이터가 받는 게 좋을지 선택하여 SSR 방법을 사용할지 redirect, rewrites을 사용할지 선택하면 된다. * Source Code * https://github.com/kangilbin/React.js/blob/master/nextjs-study/next.config.js 1. redirect 사용 방법 요청 URL을 임의의 URL 변경시켜 준다. parameter 값은 확인 가능하다. ( next.config.js ) const { redirect } = require("next/dist/server/api-utils"); const nextConfig = { reactStrictMode: true, sw..

1. Style JSX 스타일을 꾸미는 방법 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } 컴포넌트에 CSS를 적용시켜준다. global : 모든 컴포넌트에 CSS 적용한다. - NextJS는 하나의 큰 앱이 아니라 각각의 나누어진 페이지이기 때문에 하나의 페이지에 작성한 global CSS는 다른 페이지에 영향일 끼칠 수 없지만, 컴포넌트로 하위에 넣게 되면 적용된다. ( _app.tsx에 넣어서 전체 페이지에 적용) 2. Custom App Component ( 템플..

* NextJS 프로젝트 설치 및 실행 * https://cocococo.tistory.com/42 * Source Code * https://github.com/kangilbin/React.js/tree/master/nextjs-study 1. Routes pages 폴더 안에 새로운 page 파일을 넣게 되면 자동으로 이동할 수 있다. ( about.tsx ) export default function Potato() { return "about"; } export default로 만들어 주어야한다. 함수명은 상관없다. 파일 이름이 그대로 url로 들어간다. index 파일은 메인 홈페이와 연결되어있다. http://localhost:3000 => index 페이지 2. Routing import L..

NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * Pre-Rendering, SSR, CSR 개념 * https://cocococo.tistory.com/41 1. NextJS 실행 과정 1) reactJS를 백엔드에서 동작시켜서 페이지를 미리 만들어 컴포넌트들을 렌더링 시킨다. 2) 렌더링이 끝났을 때 HTML이 되고 HTML를 페이지 소스 코드에 넣어준다. 3) 사용자는 자바스크립트와 reactJS가 로딩되지 않더라도 콘텐츠를 볼 수 있다. 4) react가 로딩이 끝났을 때 기본적으로 존재하는 것들과 연결시켜주어 react ..