티스토리

굿놈

검색하기

블로그 홈

굿놈

good-nom.tistory.com/m

it관련 기술을 끄적이는 곳

구독자: 0

방명록 방문하기

주요 글 목록

[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"; 위 코드로 실행 시 잘 작동한다. 공감수 0 댓글수 0 2022. 2. 26.
[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.. 공감수 0 댓글수 0 2022. 2. 26.
[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.. 공감수 0 댓글수 0 2022. 2. 26.
[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.. 공감수 0 댓글수 0 2022. 2. 26.
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 요소.. 공감수 0 댓글수 0 2022. 1. 24.
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, 고정너비(가로폭이 .. 공감수 0 댓글수 0 2022. 1. 24.
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.. 공감수 0 댓글수 0 2022. 1. 24.
css 기본 문법4(선택자 우선순위) 들어가기 앞서, CSS 기본 문법3에 이어 기본적인 문법 선택자 우선순위에 대해서 다루어보겠다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법이다. 점수가 높은 선언이 우선한다. 점수가 같으면 가장 마지막에 해석된 선언이 우선한다. 선택자 점수 전체 선택자(*): 0점 태그 선택자(div): 1점 Class 선택자(.color_green): 10점 ID 선택자(#color_yellow): 100점 인라인 선언(style="color: orange;"): 1000점 !important: ∞ 공감수 0 댓글수 0 2022. 1. 15.
css 기본 문법3(스타일 상속) 들어가기 앞서, CSS 기본 문법2에 이어 기본적인 문법 스타일 상속에 대해서 다루어보겠다. 상속 위 그림을 보면 .animal에 대해서만 css를 작성해주었지만 animal class의 하위 클래스인 tiger, lion, elephant class에도 css style이 적용된 것을 확인할 수 있다. 이를 상속이라고 한다. 모든 css 속성들이 상속 되는건 아니고 글자/문자와 관련된 속성들만 상속된다.(모든 글자/문자 속성이 상속되는 것은 아님) ex) font-style: 글자 기울기 font-weight: 글자두께 font-size: 글자 크기 line-height: 줄 높이 font-family: 폰트(서체) color: 글자 색상 text-align: 정렬 강제 상속 상속은 위에서 설명했듯이 .. 공감수 0 댓글수 0 2022. 1. 15.
css 기본 문법2(여러가지 선택자) 들어가기 앞서, CSS 기본 문법1에 이어 기본적인 문법 선택자들에 대해서 다루어보겠다. CSS 선택자 *: 모든 요소를 선택 ABC: 태그 이름이 ABC인 요소 선택 .ABC: HTML class 속성의 값이 ABC인 요소 선택 #ABC: HTML id 속성의 값이 ABC인 요소 선택 ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 ABC>XYZ: 선택자 ABC의 자식 요소 XYZ 선택 ABC XYZ: 선택자 ABC의 하위 요소 XYZ 선택('띄어쓰기'가 선택자의 기호이다.) ABC+XYZ: 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 ABC~XYZ: 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택 ABC:hover: 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선.. 공감수 0 댓글수 0 2022. 1. 15.
css 기본 문법1(선택자, 속성, 값, 주석, 선언 방식) 들어가기 앞서, CSS의 꼭 알아야할 기본적인 문법들에 대해서 다루어보겠다. 선택자, 속성, 값 CSS는 기본적으로 "선택자{속성: 값;}" 과 같은 형식으로 이루어져있다. 여기서 선택자는 스타일(CSS)을 적용할 대상(Selector)이고 속성은 스타일(CSS)의 종류(Property)이고 값은 스타일(CSS)의 값(Value)를 뜻한다. ex) div { color: red; margin: 20px; } 선택자는 div이고 속성은 글자의 색을 뜻하는 color와 요소 외부 여백을 뜻한는 margin이고 값은 빨강색을 뜻하는 red와 크기를 의미하는 20px이다. 주석 주석은 "/*주석 내용*/"과 같이 작성할 수 있다. 단축키는 "Ctrl + /" or "Cmd + /" 이다. 이 주석 단축키는 대부.. 공감수 0 댓글수 0 2022. 1. 15.
HTML 기본 문법 들어가기 앞서, html의 꼭 알아야할 기본적인 문법들에 대해서 다루어보겠다. 태그 하이라이트 된 부분이 의미하는 것을 알아보자. 내용 : 요소(Element) 내용 : 시작(열린) 태그(Tag) 내용 : 종료(닫힌) 태그 내용 : 요소의 내용(Contents) 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 부모 요소이다. 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 자식 요소이다. 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 상위(조상) 요소(바깥쪽의 모든 태그)이다. 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 하위(후손) 요소(안쪽의 모든 태그)이다. : 종료(닫힌) 태그가 없는 태그를 빈(Empty) 태그라고 한다. 빈 태그는 혹은 로 표기해준다. 그냥 로 쓰는 것이 편리하긴하.. 공감수 0 댓글수 0 2022. 1. 10.
reset.css 브라우저 스타일 초기화 들어가기 앞서, css 스타일 초기화를 하지 않고 코드를 작성하면 브라우저마다 css 스타일이 조금씩 다르기때문에 브라우저 별로 다른 결과를 나타낼 수 있다. 따라서 reset.css를 통해 css 스타일을 초기화하고 작업을 시작하는 것이 좋다. reset.css cdn 구글에 reset.css cdn이라고 검색하면 아래와 같은 결과가 나오고 해당 링크로 이동한다. 링크로 이동하게 되면 아래의 페이지를 볼 수 있느데 여기서 reset.min.css와 reset.css 두가지 버전을 확인할 수 있다. 우리는 reset.css를 수정할 일이 거의 없으므로 reset.css의 경량화 버전인 reset.min.css를 Copy HTML 버튼을 눌러 복사해준다. 복사한 내용을 main.css를 link하기 바로 .. 공감수 0 댓글수 0 2022. 1. 9.
codepen으로 코드 테스트 들어가기 앞서, 간단한 코드를 테스트 할때 매번 프로젝트를 새로 구성하지 않고 테스트할 수 있는 codepen이라는 사이트가 존재한다. codepen 구글에 codepen이라고 검색하면 아래와 같이 결과가 나온다. 이 사이트로 들어가면 아래와 같은 페이지를 확인할 수 있다 여기서 좌측 상단에 메뉴바에 보이는 Start Coding을 클릭한다. 그러면 아래와 같은 페이지를 확인할 수 있는데 이 페이지에서 간단한 코딩을 하면 바로 결과를 볼수있다. 이때 html부분은 body부분에 코딩을 하는 개념이라고 생각하면 된다. 아래는 실제 테스트 예시이다. 공감수 0 댓글수 0 2022. 1. 9.
live server 들어가기 앞서, 코드를 작성하면서 바로바로 페이지에 반영되는 모습을 확인할 수 있게 임시로 로컬 서버를 오픈할 수 있다. 이를 가능하게 해주는 확장기능이 Live Server 기능이다. (실제 제품은 실제 호스팅 서버에 업로드해야한다.) Live Server 설치 Extensions에서 live server를 검색하면 첫 번째로 나오는 Live Server라는 확장기능을 설치한다. Live Server 사용 오른쪽 하단에 Go Live가 추가된 것을 확인할 수 있을 것이다. 기본 코드에 Hello world!를 찍는 위 html 코드를 작성한 후 go live를 클릭하면 go live부분이 Port로 바뀌고 위와 같은 페이지가 출력되는 것을 확인할 수 있다. 이제 코드를 수정하고 저장하면 바로바로 이 페.. 공감수 0 댓글수 0 2022. 1. 7.
Beautify 코드 정리 기능 들어가기 앞서, 코드를 작성하다보면 어지럽게 정리가 안된 상태로 코드를 작성하는 경우가 있다. 이때 Beautify를 활용하여 단축키로 코드를 정리할 수 있다. 보기 좋은 코드가 이해하기도 좋다. Beautify 설치 Extensions에서 beautify를 검색하면 첫 번째로 나오는 Beautify라는 확장기능을 설치한다. Beautify 설정 그리고 기능 기여도에서 명령부분에 HookyQR.beautify를 복사해준다. 이제 명령창(Crtl+Shift+p)에서 '바로 가기 키'를 검색해 '기본 설정: 바로 가기 키 열기'를 클릭한다. 여기서 아까 복사해둔 HookyQR.beautify를 붙여 넣어 Beautify selection을 더블클릭하여 단축키 설정을 해주고 사용하면된다. Beautify 사용.. 공감수 0 댓글수 0 2022. 1. 6.
<html>, <head>, <body> 들어가기 앞서, HTML의 구조는 html, head, body의 시작태그''와 종료태그''로 이루어져있다. 문서의 전체 범위로 HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을 수행한다. 문서의 정보를 나타내는 범위로 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위이다. 문서의 구조를 나타내는 범위로 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위이다. 공감수 0 댓글수 0 2022. 1. 6.
상대경로, 절대경로 들어가기 앞서, 상대 경로는 현재 위치를 기준으로 한 경로이고 절대 경로는 변하지 않는 고유한 경로이다. 예를 들면 친구A(1), 친구B(2), 나(3), 친구C(4), 친구D(5) 순서로 줄을 서 있다고 하자. 친구C(4)의 위치를 절대경로로 표현하면 앞에서부터 네 번째에 있다고 표현할 수 있을 것이다. 이번에는 나를 기준으로 친구C(4)의 위치를 상대경로로 표현하면 나의 뒤 첫 번째에 있다고 표현할 수 있을 것이다. 이처럼 절대경로는 고유한 경로이고 상대경로는 현재 위치를 알고있다는 가정하에 상대적인 경로를 나타낸 것이다. 상대 경로 ./ : 현재 디렉토리 ../ : 상위 디렉토리 절대 경로 http(https) : 완성된 주소 /(//) : 최상위(root) 디렉토리 공감수 0 댓글수 0 2022. 1. 5.
HTML, CSS, JS 들어가기 앞서, HTML, CSS, JS는 프론트엔드 개발에서 사용되며 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것이다. HTML(Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다. CSS(Cascading Style Sheets) 실제 화면에 표시되는 방법(색생, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다. JS(JavaScript) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다. 공감수 0 댓글수 0 2022. 1. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.