본문 바로가기

DEVELOP

 (150)
[CSS3] iOS object 떨림 현상 + 스크롤 바운드 해결 반응형 작업 후에 실제 기기로 테스트 했을 경우 부분적으로 달라보이는 현상이 있다.iOS로 테스트 중이였는데 스크롤시, 다음 이미지와 설명이 올라오는 모션을 코딩해둔 부분에서 미세하게 이미지 떨림현상이 발견되었다. AOS로 테스트할때에는 별다른 이상이 없었는데 역시... 더 꼼꼼히 봐야하는 환경.. 오른쪽에 미세한 버벅임 ㄷㄷㄷ구글링을 하다 Chapt GPT에게 물어봤는데 역시나 명쾌하게 해답을 해줬다.해당 버벅이는 대상인 img 태그에 아래와 같은 스타일을 먹여준다./* ? TODO IOS 이미지 떨림 현상 */.value .screen.m .imgs>li .imgs__bg { display: block; width: 100%; will-change: transform; backface-visibili..
[Node.js] node -v 인식 안됨 nodejs 를 초기에 윈도우에 설치할때 잡아주는 기본 경로는 아래와 같다.C:\Program Files\nodejs 하지만 임의로 변경해두고 나중에 fnm(fast nodejs manger)나 해당 프로젝트 노드버전을 설치할때 node -v 이 명령어 자체가 인식이 안될 수도 있다.그래서 윈도우 시작 버튼에서 "오른쪽 마우스 > 시스템 > 고급 시스템 설정 > 시스템 변수" 를 통해 수정을 하거나 node를 제거하고 다시 설치하거나 해야한다.둘 다 해봤는데 시간 아끼려면 제거 후 재 설치를 추천한다. 제어판 > 프로그램 제거 ) node를 찾아 제거한 후 재설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript r..
[Node.js] nvm 대신 fnm을 써보자 nvm는 node version manger로서 프로젝트마다 노드버전을 달리할 때 프로젝트 별 맞는 버전을 그때그때 변환하기 쉽게 관리하는데 도움을 준다.최근에(?) 알게된 노드 관리자로서 fnm을 알게되었는데 nvm 보다는 속도도 빠르고 가볍다고 한다. 사실 차이를 잘 모르겠지만 nvm이랑 거의 비슷한거 같다. 프로젝트 중에 node version이 16.18.32 인 플젝이 있어서 새로운 로컬에 설치할 상황이 생겨 테스트겸 fnm을 사용해 보았다.1. fnm download# fnm 다운로드 및 설치winget install Schniz.fnm 2. fnm 으로 원하는 버전 설치fnm i 16.18.32 위와 같이 입력하면 윈도우 64비트일 경우, 아래와 같은 에러가 나올 것이다. Installing..
[SCSS, CSS] Format 종류에 관하여 CSS 전처리기인 SCSS를 통하여 작업을 한 후 해당 SCSS 파일을 CSS로 컴파일하게 된다.이때 컨파일하는 CSS 파일 포맷 종류를 정할 수 있다.Format의 종류에는 Expanded, Compact, Compressed(minify), Nested가 있다. 1. Expanded하나의 라인에는 하나의 속성이 존재한다. 가독성이 좋고 유지보수하기 쉽다. 하지만 코드줄이 많아저 로딩 속도가 느려질 수 있다..styled-example { width: 100vw; heght: 100%;} 2. Compact하나의 라인에 모든 속성이  존재한다. 여러 속성이 하나 라인에 존재하기 때문에 유지보수하기 어렵고 가독성이 부족하다..styled-example { width: 100vw; heght: 100%..
[React.js] style-component와 framer-motion 컴포넌트화 하기 페이지별 공통으로 사용하는 스크립트나 scss는 import를 시키면 코드를 효율적으로 줄일 수 있다. 이처럼 style-comonponent와 framer-motion 또한 공통 파일로 꾸려서 import 하면 효과적으로 코드를 작성할 수 있다. 예를 들어 270줄이였던 한 페이지를 94줄로 줄였었다. 방법은 간단하다.1. src 폴더 안에 js/styled.js 라는 임의의 js 파일을 생성2. 공통으로 사용하는 스타일 컴포넌트와 프레이머 모션을 다 가져와서 styled.js에 저장한다. 그후 사용하려는 페이지에 import 시킨다.  주의할 점은 styled.js 파일 안에 const 변수를 꼭 export 시켜야 외부에서도 사용이 가능하다. [src/js/styled.js]import styled..
[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';..
[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..

티스토리툴바