REACT (15) 썸네일형 리스트형 [ REACT ] CRA로 프로젝트 생성하기 ( Create React App ) CRA : Create React App CRA로 리액트 프로젝트를 생성하면, 웹팩,바벨의 설치 및 설정과정을 생략하고 바로 프로젝트 작업 환경을 구축 할 수 있다. 1. CRA로 프로젝트 생성하기 // yarn $ yarn create react-app 프로젝트이름 // npx $ npx create-react-app 프로젝트이름 ex ) $ yarn create react-app NewProject $ npx create-react-app NewProject --use-npm 옵션 사용하기 yarn이 설치된 컴퓨터에서 npx create-react-app OOO 를 실행하면 자동으로 npm을 패키지 매니저로 사용하는것이 아닌 yarn을 패키지 매니저로 사용하는 형태로 설치가 된다고 한다. 이럴때는 아.. [ REACT ] 작업환경 설정, 설치하기 (node.js | npm | nvm 간단정리) 작업환경 설정하기 제 맥북에는 설정이 다 되어있어 CRA만 하면 됐지만, 혹시 따라 진행하실 분들이 있을까 해서 작업환경설정 순서는 책 내용 보면서 정리했고, 관련해서 설명은 되어있지 않앗지만 간단한 내용도 함께 정리해두었습니다. 1. Node.js , npm , nvm 설치 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치. Node.js를 설치하면 npm이 같이 설치되고 이로 패키지를 설치하고 설치한 패키지의 버전을 관리 할 수 있다. 또한 node의 version을 관리 할수 있는 nvm을 설치해준다. Nods.js Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임( 프로그래밍 언어가 구동되는 환경)이다. - Node.j.. [ REACT ] 리액트 이해, 렌더링과 Virtual DOM 한동안 뷰만 사용했고, 잠깐 사용했던 리액트 공부를 다시 시작할 예정이라 구매한 책을 싹 처음부터 훑어볼예정입니다. 책보면서 정리하면서 블로그에 올리려고 합니다 : ) 리액트는 라이브러리고, 오직 뷰만 담당한다. 리액트는 프레임워크가 아니라 라이브러리고, 다른 프레임 워크가 라우팅등의 기능을 내장한 반면, 리액트는 오직 뷰만 신경 쓰는 라이브러리로 기타 기능은 라이브러리 등으로 구현해서 사용해야 한다. 그래서 원하는 라이브러리를 선택해서 사용할수 있지만 동시에 여러 라이브러리를 다루어야하는 단점이 있다. 그리고 리액트는 라이브러리기 떄문에 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있다. 컴포넌트 재사용이 가능한 API로 수많은 기능들을 내장하고 있다. 컴포넌트 하나에서 해당 컴포넌트의 생김새.. [Meterial-UI] DatePiker Api 모아놓은 곳 input type=month 을 사용해서 YYYY-MM 순으로 날짜를 선택하게 만들어야 하는 부분이 있었다. 아래 사진처럼 년도와 날짜를 선택하는 것인데, 편리하다고 신나서 코딩하다가 무심코 사파리를 켯는데 사파리는 지원이 안되어서 직접 키보드로 입력을 해야했다.. 날짜 중 하나는 빈칸으로 가야하는 점과 , 시작일, 종료일 중 종료일이 시작일보다 앞서면안되고 하는 등의 조건을 걸어주어야하는데, 이렇게 되다보니 모든 조건을 이중으로 걸어줘야해서 material ui로 변경해서 진행하기로 했다. DatePicker API Here you can find the full list and description for DatePicker props. material-ui-pickers.dev material-u.. [ react 모달 종료 제어 ] cannot read property 'contains' of undefined cannot read property 'contains' of undefined ! useRef이용해서 modal 제어 구현 중 오류 modal이외의 부분을 눌렀을 때, modal창이 사라지도록 하는 부분 구현중에 cannot read property 'contains' of undefined 라는 오류가 뜨면서 실행이 안되는 오류가 생겼다. 를 이용해 이 영역 외의 다른 부분을 눌럿을때 창이 사라지게 해야하는 가장 상위의 태그에 ref를 적용해주고, node를 console에 찍어보면 원래대로라면 current값이 떠야하고 위와같이 지금 눌리는 부분이 나와야하는데 계속 undefined가 떠서 안됐었다.. 이유 :: 삼항연산자로 조건을 주어서 Modals이 클릭했을때 나타나야하므로 state값을 주고 .. 이전 1 2 다음
