Programming (64) 썸네일형 리스트형 [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. 운영.. [React] 로컬 폰트 적용하기(.ttf/.otf) 기존 폰트가 아닌 다른 폰트를 적용하게 되어 기록. 1. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 등을 통해 폰트를 다운받는다. 2. 원하는 경로에 font관련 폴더를 만들어 해당 폰트를 넣는다. 3. .css 파일에서 폰트를 불러온다. 나는 default.css 파일을 따로 만들어 폰트를 관리하도록 했다. @font-face {}를 통해 해당 폰트를 불러올 이름을 font-family로 지정하고, src: url();를 통해 폰트를 저장한 경로를 불러온다. 4. font 사용법 위처럼 해당 폰트를 사용할 부분에 3번의 font-family로 설정한 이름을 불러온다... 이전 1 ··· 3 4 5 6 7 8 다음
