Next Dev Gil

vue.config.js Vue CLI 3 버전부터는 vue.config.js로 웹팩 설정을 관리 https://cli.vuejs.org/guide/ Usage 개발환경과 build환경의 root경로를 각각 지정을 위한 설정 module.exports = defineConfig({ transpileDependencies: true, publicPath: process.env.NODE_ENV === 'production' ? '/vue/' //npm run build : '/' //npm run serve })

node.js 최신버전 업데이트 이후 Gulp 빌드가 되지 않는 이슈가 발생 Gulp에 설치되어있는 플러그인들의 버전도 최신 버전으로 업데이트 후 빌드 성공 npm-check-updates npm-check-updates는 package.json의 패키지들을 최신버전으로 업데이트 시켜줌 Installation npm install -g npm-check-updates Usage npm-check-updates -u 업데이트 필요한 패키지 버전 리스트 확인 후 npm install 진행 npm install 다시 버전 확인 하면 완료! 패키지가 최신버전으로 업데이트 되면서 패키지별 명령어가 변경된 경우 수정 필요.

Next.js란 무엇인가요? Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. React 구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행합니다. 내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있습니다. 개인 개발자이든 대규모 팀의 일원이든 Next.js는 대화형의 동적이며 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다. 1. node js 18버전 이상 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runti..

React Snippet { "reactFunction": { "prefix": "rfc", "body": "import React from 'react';export default function ${1:${TM_FILENAME_BASE}}() {return ();}", "description": "Creates a React Function component" }, "reactStatelessImplicitReturn": { "prefix": "rsi", "body": "import React from 'react';export const ${1:${TM_FILENAME_BASE}} = (props) => ();", "description": "Creates a React Function compon..

npm install -D sass Next js는 sass, scss 역시 내재된 방식(CSSModule)으로 지원하기에 패키지 하나 받으면 이후에는 [name].module.scss 형식을 사용할 수 있다. CSSModule 방식은 같은 클래스명이라도 특정 컴포넌트에만 영향을 주는 방법이다. 파일명, 클래스명, 해시값을 이용해 고유한 클래스명을 자동으로 만들어내기 때문에 다른 파일에 존재하는 클래스명과 충돌을 걱정할 필요가 없음. 빌드 타임에 이러한 CSS 모듈 파일들은 자동으로 여러 개의 축약된 CSS 파일들로 번들링 된다. 여러 개인 이유는 Next.js(정확히는 Webpack)의 코드 분할에 의해 각 페이지에서 필요한 CSS 파일들이 분리되기 때문이다. 타입스크립트 style 자동완성 플러그인 ..