Practical Accumulation

NextJs는 pre rendering 할 때 사용하는 폰트를 다운로드해서 static 페이지를 만든다. 서버에서 패키징 시에만 폰트 사이트에 접속해서 가져온다. 1. fonts.js 파일을 만들어 폰트를 import 한다. 보통 app 폴더 아래 만든다. // app/fonts.js import { Noto_Sans_KR } from 'next/font/google' export const notosanskr = Noto_Sans_KR({ subsets: ['latin'] }) 2. 사용한다. // component/heading.jsx import { notosanskr } from "../app/fonts" import React from 'react' function Heading({ childr..

같은 증상이 발생하면 해보기 바란다. 현재 스프링 부터 3.2.2 버전을 사용하고 있다. Security는 6.2.2 1. 이 문제는 고질적인 문제이다. Spring Cloud 환경에서 React와 Spring Boot 개발할 때 생기는 문제로 아무리 Spring Cloud Gateway 설정을 만져봤자 브라우저에서는 Origin이 없다고 호출을 차단해 버린다. 즉 아래 설정 같은 거 아무리 만줘 봤지 동작하지 않는다. gateway 서버가 그냥 헤더를 무성히하게 반환한다. sporing: cloud: gateway: default-filters: - DedupeResponseHeader=Access-Control-Allow-Origin Access-Control-Allow-Credentials glob..

1. CORS 브라우저가 접속한 클라이언트의 서버와 서비스를 받는 백엔드 서버가 다를 경우 생기는 문제이다. 그래서 브라우저에서 URL을 붙이면 결과가 나오는데 React로 실행하면 CORS 에러가 뜬다. 가장 대표적인 증상이다. 2. CORS 설정이 제대로 되지 않는 이상, Authroization이나 cookie 데이터를 브라우저와 서버가 주고 받을 수 없다. 막힌다. 3. Authroization 정보와 cookie 정보를 보내고 싶으면 3-1 서버에서 Cross Origin 설정을 해주어야 한다. 3-1-1 첫번째로 allowCredentials 를 true로 설정해야 한다. 3-1-2 두번째로 origin에 허용할 클라이언트 서버 도메인을 입력해야 한다. 여기에 예전처럼 * 하면 브라우저가 막아..

1. 기존의 css 형식에서 scss 형식으로 사용하려면 sass-loader를 설치하여 scss를 css로 컴파일하도록 해야 한다. 1-1 sass-loader를 설치하고 dart-sass를 추가로 설치해야 한다. dart-sass는 npm install sass로 설치한다. 1-1-1 이전에는 node-sass라는 것을 사용했는데, 지금은 dart-sass라는 새로운 패키지 사용을 권장한다. 1-2 styles.css파일을 styles.scss로 변경해 준다. $main-color: green; body { color: $main-color; } 1-3 webpack.config.js 설정파일에서 css뿐 아니라 scss파일도 읽을 수 있도록 변경한다. module: { rules: [{ test: ..

1. React에서 css를 사용하려면 loader와 webpack 설정을 해 주어야 한다. 1-1 우선 css-loader, style-loader를 설치한다. webpack에서는 이 두개를 같이 사용하는 것을 권장하고 있다. 1-2 css-loader는 @import, url() 같은 구문을 해석하고 적용해 준다. 1-3 style-loader는 테그를 통해서 CSS를 DOM에 적용해 준다. 1-4 이제 webpack.config.js파일에서 css파일을 검색하여 적용할 수 있도록 설정해야 한다. 1-4-1 아래의 파일을 보면 module 아래의 rules안에 새로운 객체를 열어 새로운 rule을 등록한다. 1-4-2 test는 .css로 끝나는 파일을 찾아 css-loader와 style-loade..

1. React Modal은 리액트에서 Modal을 사용하기 편리하도록 기능을 제공한다. 1-1 Modal을 사실 index.html의 독립적인 요소에 붙어 메인 프로그램과 병열적으로 작동해야 한다. 1-2 이런 개별적인 작업을 개발자가 쉽게 할 수 있도록 도와 주는 것이 React Modal 라이브러리이다. 2. 설치한다. npm install react-modal로 설치한다. 3. React Modal은 Modal이라는 객체를 제공하여 Modal기능을 제공한다. 3-1 Modal을 사용하기 위해서는 import으로 Modal을 가지고 와야 한다. 3-2 Modal은 Children으로 내부 template을 전달하는 형식으로 동작한다. 3-2-1 아래처럼 template을 사이에 넣는다. h3에 제목..

1. 예전에는 이 내용이 @babel/preset-stage-2에 있던 것들인데 모두 deprecated되어 별도로 지정해서 사용해야 한다. 1-1 아래의 링크가 바벨 홈페이지 proposal-class-properties에 관련된 내용이다. Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 2 이 syntax는 2가지의 편리한 기능을 제공한다. 2-1 첫 번째는 class 내에서 instance 변수를 선언할 수 있게 해준다. 2-1-1 아래의 소스를 보면 생성자 위에 state = {} 형식으로 변수를 선언하고 있다. 2-1-2 이 구문은 객체 지향 언어에서는 ..

1. 지금까지는 모든 파일을 app.js 파일 하나에 다 몰아서 사용했다. 1-1 이 큰 파일을 각 컴포넌트 별로 파일에 넣으면 좀 더 깔끔하게 프로그램을 관리할 수 있다. import React from 'react' import ReactDOM from 'react-dom' class TodoApp extends React.Component { constructor(props) { super(props) this.onRemoveAllClicked = this.onRemoveAllClicked.bind(this) this.onNextTodoClicked = this.onNextTodoClicked.bind(this) this.handleAddTodo = this.handleAddTodo.bind(thi..