FrontEnd/React (14) 썸네일형 리스트형 cannot appear as a descendant of 에러 Warning: validateDOMNesting(...): cannot appear as a descendant of 에러 확인 1. 에러 발생 원인 form 안에 form 이 중복적을 선언 되어 있을때 발생한다. return ( 작성자 : title : { // You can store the "editor" and use when it is needed. // console.log('Editor is ready to use!', editor); }} onChange={(event, editor) => { const data = editor.getData(); console.log("data : ", data) // console.log({ event, editor, data }); setFormDa.. [React] 구조분해 할당 이용한 useState() 리팩토링 Form Data 더 쉽게 다루기 적용한 토이 프로젝트 https://github.com/JEONGHWANMIN/raect-json-server 평소 내가 작성하던 방식 평소에는 각각의 useState()를 작성해 놓고 나서 onChange() 를 이용해서 각각 setWriter , setTitle , setText 이런식으로 이벤트를 다뤘었는데 오늘 좀더 새로운 방식을 공부 했는데 신선하고 좀 더 가독성이 좋은거 같아서 정리해 보려고 한다. const [writer, setWriter] = useState("") const [title, setTitle] = useState("") const [text, setText] = useState("") const onChange = (e) => { const.. [React] styled-components , styled-reset 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.. React 에서 JsonServer 사용 , axios로 데이터 넣기 프로젝트 : 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 모듈을 통해서 데이터를 추가할 수 있다. .. [React] react-router-dom 설치 (Ing...) 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.. [React] 리액트 프로젝트 생성 및 NPM 버전 업데이트 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 명령어 통해서 설치하니 .. 이전 1 2 다음
