[React.js] Cannot find module 'sass' node-sass 버전과 node 버전 맞추기 맥북으로 프로젝트를 개발할때 node-sass 버전에는 아무런 문제가 없었는데,윈도우로 프로젝트를 pull 하고, node-sass를 설치했을때 아래와 같은 에러가 발생하였다.npm ERR! gyp ERR! node -v v20.9.0 검색하여 찾아보니 현재 설치된 node버전이 지원하는 node-sass 버전이 아니여서 발생하는 문제였다.https://stackoverflow.com/questions/70281346/node-js-sass-version-7-0-0-is-incompatible-with-4-0-0-5-0-0-6-0-0 Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0I used Node.js v16.13.. [React.js] Cannot find module 'img/full.mp4' or its corresponding type declarations. : React.js video 사용하기 로컬 안에 있는 이미지를 import 하는 것처럼 mp4도 import하여 사용하려고 했으나 빨간 색으로 밑줄이 보였다. mp4를 사용하기 위해선 React.js에서 몇가지 설정이 필요하다. 1. 아래의 npm 명령을 이용하여 url-loader 설치npm i -D file-loader url-loader 2. src 폴더 내부에 @types/videos.d.ts 파일 생성 및 설정@types/videos.d.tsdeclare module '*.mp4'; 다시 img를 import 하는 것처럼 시도하면 빨간 줄이 안보이는 것을 확인 할 수 있다.아래와 같이 최종으로 mp4를 muted, autoplay, loop 옵션을 주어 코드를 짜보았다.import fullMp4 from 'img/full.mp4';.. [VScode] react styled component 색상 구별 React.js 로 개발을 하다보면 스타일을 입힐때 styled component 사용시 에디터 안에서 색상 구별이 되지 않아 불편함이 있다.이 떄 VScode Plugin "vscode-styled-components" 하나로 해결된다. 색상 뿐만 아니라 자동완성 기능까지 함께 추가된다! [VScode] Next.js에서 Tailwind 사용시 주황색 에러 밑줄 제거 하기 next.js 프레임워크나 react.js 라이브러리를 사용하여 작업할 때 tailwind와 함께 사용을 선택했다면 아래 tailwind를 연결시 주황색 구불구불 밑줄을 발견한다. 그럴땐 VScode 플러그인 중에 PostCSS Language Support 를 설치하면 바로 주황 밑줄이 안 보일것이다. 심각한 오류는 아니나 작업 내내 보일 주황밑줄이라면 코드를 작성하면서 계속 거슬릴 것 같아서 이런 요소들은 시간을 내서 제거해 주는것이 한결 마음 편하게 작업할 수 있다. 여담으로 Next.js 를 지금 살펴보고 있는데 React.js를 베이스를 한 프레임워크라 그런지 익숙하면서도 재밌다.리액트 하나만으로는 CSR이라 보안에 상당히 취약한 것을 포트폴리오 작업 내내 피부를 느꼈었는데 SSG, SSR, .. [Javascript] IOS 대응을 위한 webm <-> mp4 변환 스크립트 HTML// 비디오 디폴트 값은 webm이여야함. Javascriptvar utils = {checkOS: (os) => {return new RegExp(os, 'i').test(navigator.userAgent);},};$(function () {// 페이지 로드시 실행adjustVideoSources();// 비디오 태그 재생const videoElements = document.querySelectorAll('video');videoElements.forEach((videoElement) => {if (videoElement.paused) {videoElement.play();}});});// 아이폰,아이패드, 매킨토시로 접속 시 HTML안에 모든 비디오 태그 확장자 mp4 로 변경functio.. [VSCode] minimap에서 현재 위치 알리는 주석 만들기 VSCode 플러그인 중 주석을 기깔나게 만들어주는 Convert To ASCII Art 를 소개한다. 예시로는 그럼 미니 맵에서 이렇게 보인다. https://marketplace.visualstudio.com/items?itemName=BitBelt.converttoasciiart Convert To ASCII Art - Visual Studio MarketplaceExtension for Visual Studio Code - Utility extension to convert text to ASCII art.marketplace.visualstudio.com 설정1. VSCode ctrl + alt + P > settings(json) 선택2. "convertToAsciiArt.favoriteF.. React.js) react already included file name 기존 프로젝트 로컬 셋팅 시 저 오류를 뿜었다.React.js를 타입스크립트로 개발을 했었는데 tsconfig.json 파일 안의 아래 해당 값을 false로 변경하면 된다. "forceConsistentCasingInFileNames": false React.js 기존 프로젝트 다른 로컬 설치 및 실행 package.json 파일에 설치된 버전 대로 npm 명령어를 사용하여 그대로 설치한다.다른 버전으로 할경우 충돌날 가능성이 있다. 예를 들어 한 React.js 프로젝트에서 styled-components, react-router-dom를 설치 해야 한다면각각 버전이 5.1, 5.3.3 이면npm install styled-components@5.1npm install react-router-dom@5.3.3 이전 1 2 3 4 ··· 31 다음
