리액트훅 useState에서 setState함수의 인자값에 대하여 요즘엔 컴포넌트방식이 아닌 Hook방식의 리액트가 표준으로 권장되고 있다. 그래서 기존에 MaterialUI같은 유명한 리액트 UI Framework들도 함수형으로 샘플코드를 바꾸었다. 이때 useState와 useEffect를 동시에 사용하는 방식으로 운용이 된다. 로딩 애니메이션을 넣어주는 코드이다. import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > * + *.. node modules와 gitignore, package.json의 관계 node module을 사용하는 자바스크립트, 노드js, 리액트 관련 프로젝트를 할때 Create React App으로 프로젝트를 생성을 하면 기본적으로 gitignore파일에 node modules 경로가 잡히게 된다. 변경사항을 추적하지 말라는 뜻이다. 스테이징 자체를 하지 않기 때문에, 실제로 꼭 필요한 소스만 깃을 통해 관리할수 있게 된다. npm install yarn add 이런 명령어들로 필요한 모듈들을 설치해서 쓰면 로컬 환경에서는 이것들과 관련된 파일들이 다운로드되어 파일이 생성되지만 이 경로를 스테이징하지 않기 때문에 다른곳에서 그 상태의 소스를 Pull이나 Clone을 받은후에 실행을 해보려하면 실행이 되지 않는다. 이럴때는 clone한 경로 또는 Push받은 그 경로에서 터미널을 열.. @media 쿼리 min, max 활용 @media (max-width: 1024px) { width: 768px; } @media (max-width: 768px) { width: 100%; } 이런식으로 미디어쿼리를 잡곤한다. 일단 max는 최대값의 개념이다. 괄호안이 조건이 되는데, 최대가 1024다? 별로 와닿지가 않는다. 어쩌라는 말인가. 부등호로 생각하면 쉽다. 당연히 맥스는 큰넘이니까. 크기의 변수를 a라고 생각하면 a < 맥스 이렇게 생각하면 된다. 즉, 1024px보다 작으면 이거해라. 이런말이다. 거꾸로 min은 작은넘이니까. min < a 이렇게 생각하면 된다. 저기선 a < 1024이면 저걸 적용하라고 미리 선언한후에 마치 덮어쓰기 처럼, 추가조건으로 a < 1024면 전부다 이조건으로 스타일이 적용되는데 그와중에 특히 .. 이전 1 2 3 4 5 다음