FrontEnd (31) 썸네일형 리스트형 [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.. [CSS] Gradient 효과 쉽게 만드는 사이트 그레디언트 효과 눈으로 쉽게 확인하는 사이트 가끔 혼자 사이트를 만들다 보면 그레디 언트 효과를 사용할 때가 있는데 그럴 때마다 코드 값을 변경하면서 그레디언트 효과를 찾기는 불편하기 때문에 그레디언트 효과를 한눈에 보기 쉽게 만들어 주는 사이트를 소개할까 한다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 위 사이트에서 좀더 쉽게 그.. 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 명령어 통해서 설치하니 .. font-size 62.5% 사용하는 이유 CSS 코드들을 보다보면 간혹 font-size : 62.5%가 적용되어 있는걸 확인할 수 있다. html { font-size: 62.5%; } 62.5%란 무엇인가 ? 대부분 기본 브라우저는 16px 기본값으로 사용한다. font-size : 62.5% , 적용하면 10px로 바뀐다. 10px로 작업하는 이유가 나중에 미디어 쿼리등 반응형 웹을 만들다 보면 웹페이지 크기에 맞춰서 폰트도 바꿔야 하는 경우가 생긴다. 이때 10px로 바뀌어 있으면 rem 단위로 작업할 때 좀 더 수월히 적용할 수 있기때문에 10px로 바꿔서 사용한다. 이전 1 2 3 4 다음
