Front-end (19) 썸네일형 리스트형 [react] <antd> Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported 2022-02-26 index.js에서 import "antd/dist/antd.css"; 할때 아래와 같은 WARNING이 발생한다. 해결방법 // import "antd/dist/antd.css"; import "antd/dist/antd.min.css"; 위 코드로 실행 시 잘 작동한다. [react] react-router-dom V6 Redirect v5에서 v6로 오면서 Redirect 역시 사라졌다. 따라서 이를 대체하기 위해 을 사용할 수 있다. 코드 설명: islogin 변수가 true이면 Home page로 redirect하게 해주었다. 기존 방식 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import Links from "./components/Links"; import NavLinks from "./components/NavLinks"; import About from "./pages/About"; import Home from "./pages/Home"; import NotFound from "./pages/NotFound"; import Pro.. [react] react-router-dom V6에서 queryString 사용법 2가지 방법으로 queryString을 사용해 보았다. import queryString from "query-string"; import { useLocation, useSearchParams } from "react-router-dom"; export default function About() { // useLocation() const { search } = useLocation(); const values = queryString.parse(search); console.log(values); // useSearchParams() const [searchParams] = useSearchParams(); const query = queryString.parse(searchParams.toStri.. [react] Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. react-router-dom 사용시 error 대처 방법 기존 작성 방법 import { BrowserRouter, Route } from "react-router-dom"; import Home from "./pages/Home"; function App() { return ( ); } export default App; Error message 시키는 대로 로 감싸도 해결되지 않는다. 해결 방법 react-router-dom 라이브러리가 업데이트되면서 의 매개변수 이름이 변경되었다. 따라서 이전 버전을 설치하여 사용하던가 최신 버전에 맞게 작성하면 된다. 최신 버전 작성 방법 import { BrowserRouter, Route, Routes } from "react-router-dom"; impo.. css 속성3 들어가기 앞서, CSS 속성2에 이어서 배경과 관련된 속성에 대해 알아보겠다. background-color 요소의 배경 색상 기본값: transparent, 투명함 background-image 요소의 배경 이미지 삽입 기본값: none none, 이미지 없음 url("경로"), 이미지 경로 background-repeat 요소의 배경 이미지 반복 기본값: repeat repeat, 이미지를 수직, 수평 반복 repeat-x, 이미지를 수평 반복 repeat-y, 이미지를 수직 반복 no-repeat, 반복 없음 background-position 요소의 배경 이미지 위치 방향: top, bottom, left, right, center 단위: px, em, rem 등 background-size 요소.. css 속성2 들어가기 앞서, CSS 속성1에 이어 글꼴과 문자와 관련된 속성에 대해 알아보겠다. font-style 글자의 기울기 기본값: normal normal, 기울기 없음 italic, 이텔릭체 oblique, 기울어진 글자 font-weight 글자의 두께(가중치) 기본값: normal normal, 400 기본 두께 bold, 700 두껍게 100~900, 100단위의 숫자 9개 font-size 글자의 크기 기본값: 16px, 기본 크기 line-height 한 줄의 높이, 행간과 유사기본값: normal font-family 글꼴(서체) 지정 font-family: 글꼴1, "글 꼴2", ... 글꼴계열; serif, 바탕체 계열 sans-serif, 고딕체 계열 monospace, 고정너비(가로폭이 .. css 속성1 들어가기 앞서, CSS 속성에는 여러가지가 있다. 이 중에서도 자주 쓰이는 몇가지 속성에 대해서 알아보겠다. width, height 요소의 가로/세로 너비를 지정한다. 기본값: auto, 브라우저가 너비를 계산 max-width, max-height 요소가 커질 수 있는 최대 가로/세로 너비를 지정한다. 기본값: none, 최대 너비 제한 없음 min-width, min-height 요소가 작아질 수 있는 최소 가로/세로 너비를 지정한다. 기본값: 0, 최소 너비 제한 없음 margin 요소의 외부 여백(공간)을 지정하는 단축 속성 기본값: 0, 외부 여백 없음 margin의 값으로 몇개를 주느냐에 따라 사용법이 달라진다. margin: top, right, bottom, left; margin: to.. css 기본 문법4(선택자 우선순위) 들어가기 앞서, CSS 기본 문법3에 이어 기본적인 문법 선택자 우선순위에 대해서 다루어보겠다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법이다. 점수가 높은 선언이 우선한다. 점수가 같으면 가장 마지막에 해석된 선언이 우선한다. 선택자 점수 전체 선택자(*): 0점 태그 선택자(div): 1점 Class 선택자(.color_green): 10점 ID 선택자(#color_yellow): 100점 인라인 선언(style="color: orange;"): 1000점 !important: ∞ 이전 1 2 3 다음 목록 더보기
