< HwanLog />

React 코드를 짜다보면 기본 CSS margin값 들이 들어있는 경우가 있다. 위쪽에 마진값때문에 header 영역이 위 끝에 공간을 남기고 있는 현상이 발견됬다. styled-components 는 JS in CSS 방식이기 때문에 따로 CSS 영역이 없어서 * { margin : 0 ; padding : 0 } 이런식이 안되기 때문에 다른 방법이 있다. 1. styled-components 설치 npm install --save styled-components 2. styled-reset 설치 npm i styled-reset 3. GlobalStyles.js 파일 만들어서 reset을 이용해서 초기화 시켜준다. 1. GlobalStyles.js 파일 생성 import { createGlobalS..

프로젝트 : https://github.com/JEONGHWANMIN/raect-json-server React 에서 JsonServer 사용하기 npx json-server ./data.json --port 4000 port 4000번으로 json 서버를 연다. { "posts": [ { "id": 1, "writer": "HwanMin", "title": "첫 메모 제목", "body": "첫 메모 내용" }, { "writer": "json", "title": "hi", "text": "hello", "id": 2 } ] } 아까 처음에 json-server를 띄운 port에 posts로 데이터가 들어있는걸 볼 수 있다. id는 자동생성 해준다. axios 모듈을 통해서 데이터를 추가할 수 있다. ..

1. npm install npm install react-router-dom 2. 기본 route 형식 import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./routes/Home"; function App() { return ( ); } export default App; 자세한건 공식문서 참고 https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Overview Declarative routing for React apps at any scale reactrouter.com ...Ing 공부하면서 계속 업데이트 될 페이지 p..

npm이 설치되어 있다는 전제하에 설치가 됩니다. 1. 설치 npx create-react-app appname npx 명령어를 사용해서 설치합니다. * npx : npm@5.2.0 이상버전에서 지원하는 npm을 좀더 편하게 사용하기 위해 제공되는 하나의 도구 appname 대문자나 특수기호를 넣게 되면 네이밍 오류가 발생한다. 설치중 이런 오류가 뜬다면 npm버젼을 업그레이드 시켜주면 오류가 뜨지 않는다. npm 버젼 업그레이드 방법 1. node -v 2. npm cache clean -f 3. npm install -g n -> node 버젼 관리인 n이라는 모듈 설치 4. n 모듈 사용해서 node.js 설치 // 그냥 설치하면 permission denied 뜸 sudo 명령어 통해서 설치하니 ..