Sun's Blog

의존성 추가 npm i react-router-dom App.js import React from "react"; import BbsList from "./component/bbs/list"; import BbsDetail from "./component/bbs/detail" import {BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return ( ); } export default App; BrowserRouter 태그를 통해 to 속성에 이동할 경로를 추가하여 이동 링크를 통해 컴포넌트들을 렌더링해주는 역할이기 때문에 새로고침 시 해당 페이지를 찾지 못하는 경우가 생기면 에러 발생 HTML5 History API ..

import React, {useState} from "react"; export default function MyFunction() { const [counter, setConuter] = useState(0); function down() { setConuter(counter-1); } function reset() { setConuter(0); } function up() { setConuter(counter+1); } return ( {counter} ) } 위에는 useState를 사용하는 코드이다. useState는 자신이 직접 state에 접근하여 값의 상태를 변경한다. useReducer import React, {useReducer} from "react"; export default ..

프로젝트 생성 npx create-react-app todolist 의존성 추가 react-icons: npm i react-icons styled-components: npm i styled-components 페이지에 회색 배경 적용 App.js import React from "react"; import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { background: #e9ecef; } `; function App() { return ( 안녕하세요 ); } export default App; createGlobalStyle: styled-components에서 특정 컴포넌트를..

Css Module CSS 클래스 중첩을 방지하기 위해 사용 확장자는 파일명.module.css 리액트에서 컴포넌트에서 해당 CSS를 불러들일 때 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등을 사용해서 고유한 클래스명을 적용 레거시 프로젝트에 리액트를 도입하거나 CSS 클래스를 중복되지 않게 작성할 떄 네이밍 규칙을 정하기 귀찮을 때 사용하면 좋다. 또한 webpack에서 사용하는 css-loader에서 지원되기 때문에 CRA로 만든 프로젝트면 별도의 설치할 라이브러리가 없다. Box.modul.css .Box { background: black; color: white; padding: 2rem; } Box.js import React from "react"; import styles from "..

Syntactically Awesome Style Sheets Css의 pre-processor 확장자는 .scss와 .sass가 있으며 아래와 같은 문법적 차이가 있다 sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 이번에는 scss를 간단하게 공부해본다. 설치 npm i node-sass 만약 install 도중 에러가 나온다면 자신의 node..

@EnableWebMvc 해당 애너테이션을 선언하면 설정 클래스들이 기본 설정을 로딩하고 애플리케이션을 실행 Spring Boot에서는 spring-boot-starter-web 의존성만 추가하면 @EnableWebMvc를 명시적으로 설정하지 않아도 자동으로 설정 WebMvcConfigurer 기본 설정을 커스텀하고 싶으면 WebMvcConfigurer 구현 클래스에 @Configuration 애너테이션을 붙여 자바 설정 클래스를 생성 모든 메서드는 add, configure, extend로 시작 add는 기본 설정이 없는 것을 생성한다. extend는 기본 설정에서 추가하여 확장한다. configure는 기본 설정이 아닌 새로운 기능으로 교체한다. configurePathMatch PathMatchCo..