Library & Framework (7) 썸네일형 리스트형 [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'.. [AnyChart] AnyChart Trial Version (체험판 문구) 지우는 방법(JQeury) AnyChart를 이용하여 차트를 구현했는데 하단에 있는 AnyChart Trial Version이라고 써져있는 체험판 문구를 지우고 싶었다. chart.getCredits().setEnabled(false);을 넣으라는 글을 깃허브에서 보긴 했으나 full version을 구매한 후 가능한 얘기인 것 같았다. 그래서 나는 아주 간단한 방법으로 체험판 문구를 삭제했다. F12를 눌러 체험판 문구가 있는 곳의 코드를 확인해보니, 클래스 명이 "anychart-credits"으로 되어있었다. 클래스명도 알았겠다, 나는 JQuery의 remove()를 활용하여 체험판 문구를 삭제했다. remove()는 선택한 요소를 제거하는 메소드다. // initiate drawing the chart chart.draw(.. [Anychart] tag cloud 생성 시 글자 크기가 일정한 문제 해결한 과정 Anychart(자바스크립트 라이브러리)로 tag cloud 생성했을 때 다음과 같은 문제가 발생했다. value 값의 크기에 따라 글자 크기가 달라야 하는데 모두 글자 크기가 일정한 것이다. 공식문서에 나온 샘플을 그대로 복붙하면 해결되지 않을까란 생각에 아래와 같이 수정 및 추가를 했다. 다음 코드를 JSP에 수정 및 추가 JS에 아래 코드를 추가 // set chart title chart .title( 'Top 200 word\'s in "Alice\'s Adventures in Wonderland" by Lewis Carroll' ) // set array of angles, by which words will be placed .angles([0]) // enabled color range ... [Kendo UI] Grid에 row numbers 추가하는 방법 (JQuery) Grid에 row numbers를 어떻게 추가하나 검색해보니, 공식문서에는 다음과 같이 설명이 되어있다. 주요 내용을 요약하자면, 1. record 변수를 선언해준다(var record = 0;). 2. columns 안에 template: "#= ++record #"을 추가해준다. 3. 아래를 추가해준다. dataBinding: function() { record = (this.dataSource.page() -1) * this.dataSource.pageSize();} 전체코드(출처: Kendo UI 공식문서) 그런데 내가 직접 했을 때 문제가 생겼다. var record = 0;과 같이 변수 선언을 했는데 record 변수가 한번도 안 읽혔다는 안내가 나왔다. 그리고 서버에 실행했을 때에 테이블에 .. 이전 1 다음
