반응형 Front-End25 [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. [HTML] GNB, LNB, SNB, FNB 용어정리 GNB (Global Navigation Bar) 모든 페이지에 동일하게 적용되는 메뉴로 최상위 공통 네비게이션이다. 메인메뉴, 대분류 메뉴로 사용되며 보통 페이지 상위에 위치합니다. LNB (Local Navigation Bar) GNB 메뉴의 서브 메뉴형식으로 나오는 형태의 네비게이션 바이다. 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 특정 지역으로 가는 네비게이션 바입니다. 보통 메인페이지에서 GNB에 hover되었을 때 GNB 밑에 나타납니다. SNB (Sub Navigation Bar) 사이트의 Sub페이지로 가기 위해서 사용되는 네비게이션 바이다. 대메뉴를 통해서 특정 페이지로 들어왔다면 그 페이지에서 다른 세부 페이지로 가기위해서 사용된다. 보통 페이지 왼쪽에 위치한다. FNB (Fo.. 2021. 7. 17. [CSS][웹 폰트] google font, 눈누 적용하기 웹폰트 웹에서 폰트를 적용하기 위해서는 크게 두가지 방법이 있다. TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장을 시키고, 이 파일을 불러와서 적용하는 방식과 다운받는 것 없이 url을 이용해서 웹 폰트를 적용하는 방식이다. 이 두가지 방법 중에서 두번째 방법인 웹 폰트를 적용하는 방법에 대해서 알아보자. 웹 폰트 종류 가장 많이 사용하는 웹 폰트에는 구글 폰트와 눈누가 있다. 구글 폰트에는 영어, 한국어 모두 있고, 눈누에는 한국어 폰트가 주로 있다. 이 웹사이트에 가보면 많은 폰트가 있으니 만드는 웹사이트에 어울리는 폰트를 골라서 사용하면 된다. 구글 폰트 적용하기 Google Fonts Making the web more beautiful, fast, and open through.. 2021. 7. 17. [JS] mouse event, drag drop algorithm JavaScripts에서 마우스의 이벤트를 처리하는 함수 click - 마우스를 클릭할 때 발생 dbclick - 마우스를 더블 클릭할 때 발생 mousedown - 마우스 버튼을 누를 때 발생 mouseenter - 마우스 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave - 마우스 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove - 마우스를 움직일 때 발생 mouseout - 마우스가 요소를 벗어날 때 발생 mouseover - 마우스를 요소안에 들어올 때 발생 Drag and Drop Algorithm 일반적인 알고리즘과 box를 드래그 앤 드롭으로 움직이는 경우의 어떠한 기능을 해야 하는지 설명하도록 하겠습니다. mousedown에서는 움직임이 필요한 요소를 준비합니다.. 2021. 7. 11. [오류][vscode] html ! 등 자동완성이 되지 않을 때 문제점 html파일에서 ! + Tab을 하면 기본구조가 자동완성으로 만들어 져야 하는데 만들어지지 않았다. 해결방법 vscode에서 현재 파일의 형식이 잘못되어 있어서 !을 입력하여도 자동완성이 되지 않았던 것이다. vscode 밑에 이렇게 되어있는 부분이 있다. 현재 파일은 "Django HTML"으로 설정이 되어 있다. 이렇게 HTML이 아닌 다른 형식으로 설정이 되어 있으면 자동완성이 되지 않는다. 그러니 이 부분을 클릭해 주자. 그러면 언어 모드를 선택할 수 있는 메뉴가 나오게 된다. 여기서 내가 만드는 프로그램의 언어에 맞는 것을 고르면 된다. 지금은 html을 만들고 있으니 HTML을 선택한다. 그러면 !+Tab이 정상적으로 작동되는 모습을 볼 수 있다. 2021. 7. 11. [CSS] CSS적용 안되는 경우, 크롬 강력 새로 고침 문제점 CSS파일을 수정하였는데도 실제 웹페이지에서는 적용이 안되는 경우가 있다. 해결방법 CSS를 수정해도 적용이 안되는 이유는 브라우저에 캐시가 남아있기 때문이다. 그래서 남아있는 캐시를 모두 지우고 새로고침을 하면 수정된 CSS가 웹페이지에 적용이 된다. 크롬브라우저에서 F5를 누르면 일반적인 새로고침이 된다. 이 경우 캐시는 남아 있어서 강력한 새로고침을 하기 위해서는 개발자 도구를 연다. 개발자도구가 열린 상태에서 새로고침 버튼을 우클릭 해준다. 그러면 아래에 "일반 새로고침", "강력 새로고침", "캐시 비우기 및 강력 새로고침" 3가지 메뉴가 나타난다. 이중에서 가장 아래인 "캐시 비우기 및 강력 새로고침"을 누르면 캐시가 비워지도 CSS가 적용됨을 알 수 있다. 하지만 이렇게까지 않아도 ".. 2021. 7. 10. [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 2 3 다음 반응형
