Programming (65) 썸네일형 리스트형 [React] Resize event / 화면 가로 사이즈 변경 감지 이벤트 import { useState, useEffect } from "react"; import { debounce } from 'lodash'; const App = () => { // window width 사이즈 const [windowSize, setWindowSize] = useState(window.innerWidth); // 무한 로딩 방지하고 1초에 한번씩 사이즈 측정 const handleResize = debounce(() => { setWindowSize(window.innerWidth); }, 1000); // window width 사이즈 변경 감지 useEffect(() => { window.addEventListener('resize', handleResize); return ().. [node.js] \node_modules\node-sass command failed 해결 Sass/SCSS 가 사용된 프로젝트를 다운받아 실행시키려고 하면 발생하는 오류인 error C:{프로젝트}\node_modules\node-sass command failed 에 대해서 하단의 stackoverflow에서 Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0 I'm using Node.js 16.13.1 and created a React application and try used Sass, but when I try to run it, I get this error: Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0 stack.. [Javascript] Scroll API, 스크롤 현재 위치, 디바이스 세로 사이즈 찾기 1. 스크롤 최상위 강제 이동 window.scrollTo(0); 2. 현재 스크롤의 위치 window.scrollY 3. 사용하는 디바이스 화면 세로 사이즈 document.documentElement.clientHeight 4. 웹 페이지의 스크롤을 포함한 세로 사이즈 document.documentElement.scrollHeight 5. 스크롤 최하위 위치 document.documentElement.scrollHeight - document.documentElement.clientHeight [CSS] 이미지 최적화 코드 추가(chrome) 유난히 크롬과 아이폰에서 이미지 해상도 문제가 생겨서 이미지 해상도 최적화를 위해 몇가지 방법을 찾았다. 해당 코드를 background: url()을 통해 넣은 CSS 코드에 함께 넣어주면 된다. 1. image-rendering: -webkit-optimize-contrast; 이미지의 랜더링 방식을 선명하게 하도록 설정 2. backface-visibility: hidden; 이미지의 뒷면을 숨김으로서 입체감 방지 div { background: url(../이미지경로) no-repeat 0 0; background-size: contain; /* 밑의 내용 추가 */ image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; } [CSS] 텍스트 드래그 방지 홈페이지 텍스트 드래그 방지용 CSS 코드 div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 드래그 재활성화를 원하거나 일부분 드래그를 허용하기 위해선 아래의 내용을 넣으면 된다. div { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } [React] React-Router-Dom V6에서 useLocation(); 불러오기 오류 React Router Dom 사용 중 현재 열린 링크의 위치를 알아내기 위해 useLocation을 사용해야 하는데, React js: Error: useLocation() may be used only in the context of a component 위의 오류가 콘솔에 뜨고 화면 전체가 날아가서 안 보이는 현상이 발생. 기존 상태 Index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); App.js import React, {.. [React] favicon.ico 파비콘 바꾸기 파비콘을 바꾸는 작업이 필요해서 나중에 또 보려고 기록. 우선 가지고 있는 이미지(png, jpeg 등) 파일을 Convertio 홈페이지에서 ico 파일로 변환시켜주어야 함. 1. 하단 사이트 방문 Convertio — 파일 변환기 300가지 이상의 포맷 지원 저희는 300가지 이상의 서로 다른 파일 포맷 간의 25600가지 이상의 서로 다른 변환을 지원합니다. 다른 어떤 변환기보다 많은 수입니다. 신속 및 간단 페이지에 간단히 convertio.co 2. 파일 선택 클릭 후 ico 로 바꿀 이미지 선택 3. 영상 > ico 선택 4. 변환 클릭 5. 변환 후 다운로드 6. React 프로젝트의 public 폴더에 있는 favicon.ico와 교체해준다. 7. 적용 확인하기 [Git] 불필요한 파일이 git에 올라가지 않도록 방지 .gitignore 설정 React 프로젝트를 git에 올리는 도중 cache파일들이 자꾸 함께 올라가려고 하길래 해당 사항을 방지하기 위해 .gitignore의 설정이 필요하게 되었다. .gitignore에는 git에는 공개하지 않을 중요한 데이터를 가졌거나 올리지 않고 싶은 파일, 폴더 등을 정의하면, git에 push할 때 제외하고 올라가도록 한다. 프로젝트 진행에 맞춰 필요없는 폴더나 파일을 하나 둘 넣을 수도 있겠지만, 초기에 개발 언어 별, 프레임워크, 운영체제 등 기본 값에 맞춰 .gitignore의 값을 제공해주는 사이트가 있다. 1. gitignore.io 사이트 방문 gitignore.io Create useful .gitignore files for your project www.toptal.com 2. 운영.. 이전 1 ··· 3 4 5 6 7 8 9 다음
