본문 바로가기

Web Development/Front-end

 (22)
[Error, React-Hook] props.history가 없어요! (useHistory) 리액트 개발을 하던 중, props.history가 자식 컴포넌트에서 동작하지 않는 상황에 마주했습니다. App.js에서 { withRouter } from "react-router"로 묶어주고, App을 withRouter로 감싸줍니다. 그리고, index.js에서 { BrowserRouter } from "react-router-dom"으로 묶어주면, props에 history 객체가 생성되는데요. 이를 이용해서, 뒤로가기, Link걸기 등의 작업을 할 수 있습니다. 그런데, App.js -> Home -> Header -> Menu 이런식으로 자식의 자식의 자식 컴포넌트로 이어지면, props.hisotry객체가 전달되지 않았습니다. 이런 경우 해결할 수 있는 방법으로 useHistory를 이용하면..
Reset CSS File /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption..
2. CSS 안녕하세요, 깨비도입니다. 저번 HTML에 이어 이번에는 CSS를 설명해보겠습니다. 1. CSS란? CSS는 HTML을 꾸며주는 요소들을 말합니다. 아무변화 없는 화면구성은 보는 이에게도, 만드는 이에게도 지루하기만 하죠. 글씨색부터, 글씨체와 크기, 백그라운드 색상과 이미지 크기를 조절하는 등의 모든 디자인적인 요소는 CSS에서 관할합니다. 2. CSS 태그 분석 css는 html을 통해 관리하는데요. html의 클래스이름은 image이구요. 임의로 가로는 300px, 세로는 500px로 주어봤습니다. 이미지가 비율이 맞지 않고 제가 조절한 값 그대로 줄어들어 심하게 일그러진 것을 볼 수 있습니다. 하지만 이미지 크기를 조절할 때마다 매번 이렇게 하나하나 맞춰가면 힘들겠죠. 이럴 때는 가로 또는 세로 ..
[Javascript] 곱등이게임 Javascript로 음.. 두더지게임을 만들어봤습니다. 그런데, 맥북에 두더지 아이콘을 못찾겠어서, 곱등이로.. 아이콘을 바꿧으니, 곱등이게임이되겠죠?ㅋㅋ 아무튼 ! 살펴봅시다 ! 0. 곱등이게임영상 1. 순서도 처음에, 틱택토 응용해서 3x3칸을 만들려고했습니다. 그런데, 생각해보니 HTML로 화면을 만들면 훨씬 간편하잖아요? 그래서 굳이, JS로 만들 필요성을 못느껴서, HTML로 직접 만들어주고, 시작했습니다. 2. humble.html (곱등이 = humble); 점수표 1 2 3 4 5 6 7 8 9 게임시작 ! 3 X 3 칸과, 점수를 넣을 칸, 그리고, 게임시작버튼 등을 만들고 humble.js를 임포트 + humble.css를 임포트해왔습니다. 2. humble.js let score =..

티스토리툴바