반응형 React3 [CSS] mobile address bar 포함하여 100vh 적용하기 + React, SCSS [ 문제점 ] 일반적으로 css 에서 100vh를 사용하면 데스크탑에서는 문제가 되지 않는다. 그냥 창 전체 크기로 알아서 맞추어 주지만, 모바일에서는 url 주소창이 있기 때문에 문제가 생긴다. 주소창의 형태와 크기는 safari, chrome 에 따라 다르고, 버전에 따라서도 다르기 때문에 각각의 경우를 나누어서 계산하기는 힘들다. [ 해결 방법 ] 찾아보니 CSS에서 height: -webkit-fill-available; height: fill-acaiable; 이런저런 속성들이 있다고 했다. 그래서 적용시켜보니 safari에서는 돌아가는데 chrome에서는 또 적용이 안되는 오류가 있었다. 그래서 chrome에서는 또 따로 분기를 나누어서 처리하고 하려고 하다가 다음과 같은 방법을 발견하고 해결.. 2022. 9. 5. [NextJS] npm run build errno -4048, ELIFECYCLE 오류 해결 [문제점] npm run build를 하면 아래와 같은 오류가 나면서 빌드가 정상적으로 되지 않았다. Error: EPERM: operation not permitted, open 'C:\Users\***\.next\trace' Emitted 'error' event on WriteStream instance at: at internal/fs/streams.js:335:14 at FSReqCallback.oncomplete (fs.js:180:23) { errno: -4048, code: 'EPERM', syscall: 'open', path: 'C:\\Users\\***\\.next\\trace' } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! music-.. 2022. 2. 1. [React] react에서 local image file 불러오기 [문제점] react에서는 웹링크로 이미지 url을 한 경우에는 정상적으로 보이지만, 다음과 같이 일반적인 경로를 사용하여서 local에 저장되어있는 image를 불어오면 정상적으로 보이지 않는다. 이러한 문제를 해결하기 위한 방법으로는 총 3가지가 있다. 1. Public folder 사용하기 public 폴더 안에 이미지를 저장하는 img 폴더를 만든 뒤에 이미지들이 해당 폴더 안에 모두 저장한다. 그러면 절대경로를 사용하여서 이미지를 불러올 수 있다. 2. import 사용하기 import imgfile from './imgfile.png'; 첫번째는 import를 하여서 이미지를 불러오는 방법이다. 3. require 사용하기 두번째는 require을 사용하는 방법으로 import와 같이 src폴.. 2021. 6. 30. 이전 1 다음 반응형
