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

프로젝트 생성 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..

State 끌어올리기 import React from 'react'; import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); /** * 온도 단위 */ const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; /** * 화씨를 섭씨로 변환 * * @param fahrenheit 화씨 온도 * @returns 섭씨 온도 */ function toCelsius(fahrenheit) { return (fahrenheit - 32) * 5 / 9; } /** * 섭씨 온도를 화씨 온도로 변환 * * @param celsius 섭씨 온도 ..

의존성 추가 org.apache.tomcat.embed tomcat-embed-jasper jstl jstl 1.2 org.apache.tiles tiles-extras 3.0.8 org.apache.tiles tiles-servlet 3.0.8 org.apache.tiles tiles-jsp 3.0.8 Config 파일 @Configuration public class TilesConfig { @Bean public TilesConfigurer tilesConfigurer() { TilesConfigurer tilesConfigurer = new TilesConfigurer(); tilesConfigurer.setDefinitions("/WEB-INF/tiles.xml"); tilesConfigurer..