Netlify 배포시 Fail 해결방법 일단 잘 build 되고 배포될 줄 알았다... Deploy Settings 클릭 Build Command 부분을 수정해줄 것이다. CI= yarn build

작성시 높은 순서대로 작성 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ @media all and (min-width:480px) and (max-width:7..

Media Query : 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 미디어 쿼리 사용법 /* 미디어쿼리 구문은 대소문자 구별 X */ @media [only 또는 not] [meida type] [and 또는 콤마(,)] (미디어 특성 = 조건문) { CSS 작성... } 논리연산자 and : 모든 쿼리가 참이여야 적용 not : 모든 쿼리가 거짓이여야 적용 not tv : tv를 제외한 모든 미디어 유형에만 적용 only : 미디어쿼리를 지원하는 브라우저에서만 적용 IE 6,7,8 버전에 미디어쿼리 미지원 -> 그래서 only 키워드 작성안함 [media type] screen (화면대상) tv (티비) print (인쇄물) all (모든 디바이스 대상) projection, handheld..

코드를 이쁘게 꾸며서 이미지로 저장할 수 있는 사이트들 모음 블로그 쓸 때 은근 유용했다. 1. SNIPPET SHOT Snippet Shot: Beautiful code screenshots www.snippetshot.com 2. CodeZen 3. Ray.so 4. Carbon 5. 그 외 추천 사이트들 https://ourcodeworld.com/articles/read/1451/top-7-best-online-tools-to-create-elegant-code-screenshots Top 7: Best Online Tools To Create Elegant Code Screenshots See our review of 7 of the Best Online Tools To Create Elegan..

yarn berry를 쓰면서 아래와 같은 에러가 났을 때 해결방법 1. 터미널에 아래 명령어 입력한다. yarn add -D eslint-config-react-app 2. 젤 상위 폴더에 .yarnrc.yml 파일을 생성한다. 3. 해당 파일에 아래 내용을 띄어쓰기 주의해서 작성해준다. (파일명만 바꾸면 됨 맨앞에 점 붙이기) packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' 4. 위에 과정 후 계속 에러가 난다면 터미널에 아래 명령어를 차례대로 입력해준다. yarn cache clean yarn install yarn start

react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..

참고 문서 https://www.chartjs.org/docs/latest/samples/legend/html.html HTML Legend | Chart.js HTML Legend This example shows how to create a custom HTML legend using a plugin and connect it to the chart in lieu of the default on-canvas legend. const getOrCreateLegendList = (chart, id) => { const legendContainer = document.getElementById(id); let li www.chartjs.org https://www.chartjs.org/docs/latest..

chart.js tooltip custom 하기 기본 공식문서 https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 참고한 공식문서 부분 발췌 https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips Tooltip | Chart.js Names..

loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.