최단거리를 구하는 문제로 너비 우선 탐색(BFS) 문제 유형이다. ( 최단거리는 BFS !!) BFS 란? 현재 정점에 연결된 가까운 점들부터 탐색하는 방법으로 큐를 이용해서 구현한다. function solution(maps) { let answer = 1; let queue = []; const dx = [-1, 1, 0, 0]; const dy = [0, 0, -1, 1]; const n = maps.length; const m = maps[0].length; // 시작 위치 담기 queue.push([0, 0]); // 지나간 위치를 0으로 막는다.(시작 위치도 지나간 위치 이므로 막음) maps[0][0] = 0; // 큐에 담긴 값이 없을 때까지 반복한다. while(queue.length >..

CORS CORS(Cross-Origin Resource Sharing) 란? 서로 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말한다. 따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는 대로 리소스를 공유하지 못하게 된다. 출처(Origin) 란? URL 구조에서 Protocal, Host, Port를 합친 것을 말한다. 셋중 하나라도 다르면 다른 출처로 분류된다. 백엔드 서버가 실행되는 중이면 콘솔 창에서 해당 오류가 나타난다. 이는 보안을 위한 CORS 헤더 Policy를 위반했기 때문이다. 처음 리소스를 제공한 출처가(Origin)이 현재 요청하려는 도메인(Origin)과 다르더라도 요청을 허락해 주는 웹 보안 방침이다. 1. 설정 방법(모든 Controller..

Spring Cecurity Spring Security 란? 간단히 말하면 Spring의 보안(인증과 권한, 인가 등)을 담당하는 서블릿 필터의 집합이다. 서블릿 필터는 서블릿 실행 전에 실행되는 클래스들로 토큰 인증을 위해 컨트롤러 메서드의 첫 부분마다 인증 코드를 작성하는 고민을 해결하기 위해 서블릿 필터를 사용한다. 1. Spring Security 라이브러리 설치 implementation 'org.springframework.boot:spring-boot-starter-security' 2. 패스워드 암호화 사용 방법 * Source Code * https://github.com/kangilbin/TodoList/blob/master/src/main/java/com/example/demo/co..

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