Library & Framework/ReactJS (4) 썸네일형 리스트형 [ReactJS] CSS module 사용할 때, className 여러 개 지정 및 className에 변수 넣는 방법 내가 구현하고 싶었던 것 나는 Button 컴포넌트를 따로 만들었고, Button의 background와 border의 색을 전역 변수로 지정해둔 상태였다. 그런데 '구글로 시작하기'와 '카카오로 시작하기' 버튼을 만들 때, Button 컴포넌트를 사용하되, background와 border의 색을 다르게 만들고 싶었다. 처음에 짠 코드(잘못된 코드) Button.module.css /* color */ .basicColor { background: rgba(var(--btn-rgb), 0.5); border: 1px solid rgba(var(--btn-border-rgb), 0.5); } /* google color */ .google { background: rgba(256, 256, 256, 0... [ReactJS] .eslintcache는 그냥 gitignore에 넣자 react로 과제를 했을 때였다. master 브랜치에 과제를 한 브랜치를 merge하려고 보니 .eslintcache에 관한 에러가 떴다. 결국엔 머지하다가 .eslintcache에서 충돌이 일어났다. 그래서 나는 앞으로 .eslintcache를 .gitignore파일에 넣기로 했다. 그런데 그전에 앞서 나는 .eslintcache 파일이 정확히 뭔지 몰랐다. 그래서 이참에 알아봤다. .eslintcache란? CRA를 설치하면 생기는, CRA 번들의 일부이다. 여기서 잠깐! CRA란? 더보기 Create React App (CRA) 손쉽게 최신 리액트 앱을 설정할 수 있도록 하는 명령이다. npx create-react-app '프로젝트명' 출처: https://velog.io/@gkj8963/cra.. [ReactJS] SKIP_PREFLIGHT_CHECK=true 하는 법 리액트 강의를 듣고 있는데, 첨부된 프로젝트 파일을 다운로드 받고 npm install 후 npm start를 하니 이런 것이 떴다. 나는 이 check를 무시하고 싶어서 SKIP_PREFLIGHT_CHECK=true를 추가하기로 했다. 방법은 아주 간단하다. 1. 루트 디렉토리에 .env 파일을 생성한다. 2. .env 파일 안에 SKIP_PREFLIGHT_CHECK=true를 추가하고 저장해주자. 이렇게만 하면 끝이다! 그후에 npm start를 하면 잘 구동된다. [ReactJS] react_dom_client__WEBPACK_IMPORTED_MODULE_1___default.a.render is not a function 오류 해결 상황 npm start해서 서버를 돌리는데 빈 화면이 뜨는 것이었다. 그래서 콘솔을 확인해보니 다음과 같은 오류가 떴다. react_dom_client__WEBPACK_IMPORTED_MODULE_1___default.a.render is not a function 그리고 내 index.js 코드는 다음과 같았다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; ReactDOM.render(, document.getElementById('root')); 해결 index.js 코드를 다음과 같이 바꿔주자. import React from 'react'.. 이전 1 다음
