새로운세계

2024.12.11 - [Vue.js 를 배워보자] - Nuxt.js가 설치되었는지 확인 Nuxt.js가 설치되었는지 확인Nuxt.js가 설치되었는지 확인하려면 다음 단계를 따라 하실 수 있습니다:프로젝트 디렉토리에서 확인Nuxt.js가 설치된 경우 node_modules 폴더 안에 Nuxt 관련 패키지가 포함되어 있습니다.또는 Windows에notion4570.tistory.com  Nuxt.js 프로젝트에서 package.json 자동 생성 방법Nuxt.js 프로젝트의 package.json 파일은 일반적으로 수동으로 생성하지 않습니다. Nuxt.js 프로젝트 생성 시, create-nuxt-app 명령어를 실행하면 필요한 모든 파일과 함께 자동으로 생성됩니다. npx create-nuxt-app  ..

Nuxt.js에서 TypeScript를 사용하면 더욱 안전하고 효율적인 개발이 가능합니다. .ts 파일을 활용하여 정적 타입 검사, 코드 자동 완성, 재사용 가능한 유틸리티 함수 생성 등 다양한 기능을 활용할 수 있습니다. 특히, Nuxt.js의 파일 시스템 기반 라우팅과의 원활한 통합을 통해 개발 생산성을 높일 수 있습니다.Nuxt.js에서 .ts 파일은 TypeScript로 작성된 파일을 의미합니다. TypeScript는 JavaScript의 상위 언어로, 정적 타입 검사와 향상된 개발 경험을 제공합니다. Nuxt.js는 JavaScript로 작성된 프레임워크지만, TypeScript를 공식적으로 지원하며 .ts 파일을 사용하면 다음과 같은 장점이 있습니다:1. 정적 타입 검사TypeScript를 사..

Nuxt.js가 설치되었는지 확인하려면 다음 단계를 따라 하실 수 있습니다:프로젝트 디렉토리에서 확인Nuxt.js가 설치된 경우 node_modules 폴더 안에 Nuxt 관련 패키지가 포함되어 있습니다.또는 Windows에서는:dir node_modules | findstr nuxtls node_modules | grep nuxtpackage.json 파일 확인프로젝트 루트 디렉토리에 있는 package.json 파일에서 Nuxt.js가 dependencies 또는 devDependencies에 포함되어 있는지 확인하세요.예를 들어:"dependencies": { "nuxt": "^3.0.0" }cat package.jsonNuxt CLI 명령어 확인Nuxt CLI가 설치되어 있으면 다음 명령어가 작동..

2024.12.10 - [Vue.js 를 배워보자] - Vue.js 애플리케이션 포트 설정: 유연하고 효율적인 개발 환경 구축 가이드 Vue.js 애플리케이션 포트 설정: 유연하고 효율적인 개발 환경 구축 가이드vue가 실행될때 포트번호가 어떻게 되는지 어떻게 알수있지? Vue.js 애플리케이션이 실행될 때 사용되는 포트 번호는 기본적으로 8080번 포트이며, 설정이나 환경에 따라 달라질 수 있습니다.notion4570.tistory.com 웹 개발 환경에서 webpack devServer를 사용하여 개발 서버를 구축하는 것은 매우 일반적입니다. 하지만, localhost 환경에서 정상적으로 작동하던 개발 서버를 외부에서 접근하려 할 때 Invalid Host header 오류가 발생하는 경우가 있습니다..

vue가 실행될때 포트번호가 어떻게 되는지 어떻게 알수있지? Vue.js 애플리케이션이 실행될 때 사용되는 포트 번호는 기본적으로 8080번 포트이며, 설정이나 환경에 따라 달라질 수 있습니다. 이를 확인하는 방법은 다음과 같습니다.1. 실행 로그 확인npm run serve 명령을 실행하면 터미널에 출력된 로그에서 포트 번호를 확인할 수 있습니다. 예를 들어: DONE Compiled successfully in 887ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.10:8080/위 로그에서 8080번 포트가 사용 중임을 알 수 있습니다.2. vue.config.js 파일 확인프로젝트 디렉토리에 vu..

npm run serve 명령으로 시작한 서버를 정지하려면 실행 중인 터미널에서 아래 방법 중 하나를 사용하시면 됩니다.1. Ctrl + C 키 조합 사용대부분의 경우, 터미널에서 실행 중인 프로세스를 정지하려면 Ctrl + C를 누르면 됩니다.Windows/Linux/MacOS 공통:실행 중인 터미널 창에서 Ctrl + C를 누르면 현재 실행 중인 프로세스가 종료됩니다.2. 실행 중인 프로세스를 강제로 종료만약 Ctrl + C로 프로세스를 정지하지 못하는 경우, 프로세스를 수동으로 종료해야 합니다.1) 실행 중인 포트 확인npm run serve는 기본적으로 localhost:8080 또는 localhost:8000에서 실행됩니다. 해당 포트를 사용하는 프로세스를 찾아야 합니다.Linux/MacOS:l..

2024.11.24 - [Vue.js 를 배워보자] - Nuxt(Pinia) 게시판 페이징, 검색, RESTful API (Node.js, MySQL) 예제 Nuxt(Pinia) 게시판 페이징, 검색, RESTful API (Node.js, MySQL) 예제1. 프로젝트 설정# Nuxt 프로젝트 생성npx create-nuxt-app my-board# Pinia 설치cd my-boardnpm install pinia 2. Pinia Store 설정 (store/board.js)import { defineStore } from 'pinia'import axios from 'axios'export const useBoardStore = defineStonotion4570.tistory.com 기존의 게시판 ..

Nuxt.js는 Vue.js 기반의 서버 사이드 렌더링(SSR) 프레임워크로, 풍부한 사용자 경험을 제공하는 웹 애플리케이션 개발에 매우 유용합니다. 특히, 대량의 데이터를 효율적으로 관리하고 사용자에게 제공하기 위해 페이징 기능은 필수적입니다. 이번 글에서는 Nuxt.js에서 Pinia를 활용하여 페이징된 그리드 데이터를 바인딩하는 방법에 대해 자세히 알아보고, 실제 구현 예시를 통해 이해를 돕겠습니다.왜 Pinia를 사용해야 할까요?Pinia는 Vue.js용 상태 관리 라이브러리로, Vuex의 단점을 보완하고 더욱 간결하고 직관적인 API를 제공합니다. Nuxt.js 3에서는 Pinia가 기본 상태 관리 라이브러리로 채택되어, Vuex를 대체하고 있습니다. Pinia를 사용하면 다음과 같은 장점이 있..

Vue와 Vue CLI는 서로 밀접한 관련이 있지만, 역할과 목적이 다릅니다. 다음은 두 개념의 관계와 차이를 설명한 내용입니다.Vue.jsVue.js는 프론트엔드 프레임워크로, 주로 사용자 인터페이스(UI)를 개발하는 데 사용됩니다.단일 파일 컴포넌트(Single File Components, SFC)를 기반으로 컴포넌트를 작성하고, 반응형 데이터 바인딩 및 뷰 렌더링 등을 제공합니다.핵심 라이브러리로써, 가볍고 유연하며, Vue를 설치한 후 바로 사용할 수 있습니다.  와 같은 방식으로 간단히 웹 페이지에 추가 가능.Vue CLIVue CLI는 Vue 애플리케이션 개발을 위한 도구 및 프로젝트 생성 툴입니다.복잡한 Vue 프로젝트를 쉽게 시작하고 관리할 수 있도록 돕습니다.역할:프로젝트 생성: 초기 ..

간단한 예를 들어 {}의 유무와 named export 및 default export의 차이를 설명하겠습니다.예제 1: Fruit 모듈fruit.js라는 파일이 있다고 가정합니다. 이 파일에서 과일 정보를 export한다고 해볼게요.1. Named Export// fruit.jsexport const apple = '🍎';export const banana = '🍌';fruit.js에서 apple과 banana는 각각 named export로 정의되어 있습니다.이 경우, import할 때 반드시 이름을 정확히 매칭해서 가져와야 합니다:// main.jsimport { apple, banana } from './fruit.js';console.log(apple); // 출력: 🍎console.log..