새로운세계

Vue.js의 생산성과 유연성, 그리고 Electron의 강력한 데스크탑 앱 개발 기능을 결합하여, 웹 개발자라면 누구나 쉽고 빠르게 고품질의 데스크탑 앱을 만들 수 있습니다. 이 글에서는 Vue와 Electron을 활용하여 데스크탑 앱을 개발하는 방법에 대해 자세히 알아보고, 실제 개발 과정에서 필요한 다양한 기술과 노하우를 공유합니다.왜 Vue와 Electron일까요?Vue.js: 컴포넌트 기반의 아키텍처, 가볍고 빠른 성능, 뛰어난 문서화 등으로 웹 개발자들에게 많은 사랑을 받는 프레임워크입니다.Electron: Node.js와 Chromium을 기반으로 하여, 웹 기술을 사용하여 데스크탑 앱을 개발할 수 있도록 지원합니다. 즉, Vue로 개발한 웹 애플리케이션을 Electron으로 포장하여 mac..

Node.js는 비동기 이벤트 기반의 JavaScript 런타임 환경으로, 서버 사이드 개발에 널리 사용됩니다. Puppeteer는 Node.js를 위한 headless Chrome 또는 Chromium을 제어하는 라이브러리로, 웹 페이지를 프로그램 방식으로 조작하고 자동화하는 데 사용됩니다. 이 두 기술을 결합하면 강력한 웹 크롤링 도구를 만들 수 있습니다.왜 Node.js와 Puppeteer를 사용해야 할까요?JavaScript로 웹 개발: 웹 개발 경험이 있다면 JavaScript를 사용하여 웹 페이지를 조작하는 것이 자연스럽습니다.비동기 처리: Node.js의 비동기 특성 덕분에 여러 페이지를 빠르게 크롤링할 수 있습니다.Headless Chrome: 실제 브라우저 환경에서 웹 페이지를 렌더링하므..

맥 사용자라면 파인더를 통해 마치 로컬 파일처럼 원격 서버의 파일을 탐색하고 관리하고 싶은 경우가 많을 것입니다. 이는 개발 환경 구축, 데이터 백업, 협업 등 다양한 상황에서 매우 유용합니다. 이 글에서는 맥 파인더를 통해 SSH를 이용하여 원격 서버에 연결하고 파일을 관리하는 방법을 상세히 알려드립니다. 특히, SSHFS라는 강력한 도구를 활용하여 마치 로컬 파일 시스템처럼 원격 서버를 마운트하는 방법에 대해 집중적으로 다룰 것입니다.SSHFS란 무엇인가?SSHFS(SSH File System)는 SSH 프로토콜을 기반으로 원격 파일 시스템을 로컬 파일 시스템처럼 마운트할 수 있도록 해주는 오픈 소스 파일 시스템입니다. 즉, 맥에서 SSHFS를 사용하면 원격 서버의 디렉토리를 마치 자신의 컴퓨터에 있..

Nuxt.js에서 포트 고정값 설정하기: 개발 환경 설정 가이드Nuxt.js, 포트 설정, 개발 환경, nuxt.config.js, 서버, 클라이언트, 개발 편의성, 프로젝트 관리Nuxt.js는 Vue.js 기반의 유니버설(Universal) 애플리케이션 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 빠르고 효율적인 웹 애플리케이션 개발을 가능하게 합니다. Nuxt.js 프로젝트를 개발할 때, 특정 포트를 고정하여 개발 환경을 설정하면 여러 가지 이유로 유용합니다. 예를 들어, 다른 프로젝트와의 포트 충돌을 방지하거나, 특정 포트를 통해 접속하는 외부 서비스와 통신하기 위해 포트를 고정해야 할 수 있습니다. 이 글에서는 Nuxt.js에서 포트를 고정하는 방법과 그 이유..

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를 사..

맥OS 파인더에서 기본적으로 .(점)으로 시작하는 파일은 숨겨져 있지만, 아래 방법을 통해 이러한 숨김 파일을 표시할 수 있습니다.방법 1: 단축키를 사용파인더를 열어 원하는 폴더로 이동합니다.Command (⌘) + Shift (⇧) + . (점) 키를 누릅니다.숨겨진 파일과 폴더가 표시됩니다.동일한 단축키를 다시 누르면 숨김 처리가 복원됩니다.방법 2: 터미널 명령어를 사용하여 기본 설정 변경터미널을 열고 아래 명령어를 입력합니다:defaults write com.apple.finder AppleShowAllFiles -bool true파인더를 재시작하여 변경 사항을 적용합니다:killall Finder숨김 파일 다시 숨기기defaults write com.apple.finder AppleShowAl..

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..