나만의 컴퓨터 공학

Vue 애플리케이션의 실행 과정에서 package.json, index.html, main.js, App.vue는 각기 다른 역할을 맡으면서 유기적으로 연결되어 애플리케이션을 구동합니다. 그에 대해 앞선 글에서 뷰 애플리케이션의 기본 구조를 설명했습니다.그렇다면 이것들이 어떻게 동작하는지 실행 흐름에 맞춰 설명해 보겠습니다. 1. package.json과 개발 서버 실행역할 : package.json은 Vue 애플리케이션의 메타 정보와 스크립트를 정의한 파일입니다.연관 : npm run dev 명령어를 실행하면 package.json 파일의 scripts에 정의된 serve 명령어(vue-cli-service serve)가 호출됩니다. 이 명령어는 개발 서버를 구동하고, 소스 파일을 감시하며 변경 사항을..

Vue.js 애플리케이션의 기본 구조는 package.json, index.html, main.js, App.vue 파일들로 구성되어 있으며, 이 파일들은 서로 유기적으로 연관되어 애플리케이션을 구동하는 중요한 역할을 합니다. 각 파일을 자세하게 설명하고, 이들이 어떻게 연결되어 있는지 설명하겠습니다. package.json뷰 애플리케이션에서 가장 중심이 되는 파일은 package.json입니다.package.json 파일은 뷰 애플리케이션에서 사용하는 기본 정보, 의존성 모듈 정보, 스크립트 명령어 정보 등을 담고 있습니다.{"name": "vue-project","version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vi..

설치 방식CDN : Vue.js를 HTML 파일에 태그를 사용해 외부 URL로 직접 포함합니다. 별도의 설치 과정 없이 바로 사용할 수 있습니다.NPM : Node.js 패키지 매니저(NPM)를 사용해 Vue.js 라이브러리를 로컬에 설치한 후, 빌드 시스템(Webpack, Vite 등)을 통해 프로젝트에 포함합니다.사용 용도CDN : 작은 프로젝트나 테스트용으로 빠르게 Vue.js를 적용할 때 사용됩니다. 빌드 도구 없이 간단하게 사용 가능합니다.NPM : 대규모 애플리케이션, 프로덕션 환경에서는 NPM을 통해 패키지 관리 및 빌드 과정을 거쳐 사용합니다. 여러 패키지와 통합해 확장성을 높일 수 있습니다.번들링 및 성능CDN : Vue.js가 외부 서버에서 제공되기 때문에 로컬 번들링이 없으며, 캐싱..

Vue란?뷰 : 사용자 인터페이스(UI, User Interface)를 만드는데 사용하는 자바 스크립트 기반 오픈 소스 프로그레시브 프레임 워크대부분 오픈 소스 프레임워크는 모두 특정 소프트웨어 아키텍처 패턴에 기반을 둠.뷰는 MVVM(Model - View - ViewModel) 아키텍처 패턴을 따름.MVVM 패턴 : 데이터를 보여주는 뷰와 데이터를 처리하는 모델 사이에 데이터를 중개하는 뷰 모델을 두어 UI와 데이터 처리 로직의 상호 의존성을 줄이는 아키텍처 패턴Vue의 배경?프론트엔드 개방 시장을 이미 앵귤러, 리액트, 엠버, 백본과 같은 프레임워크가 이미 장악.특히 앵귤러와 리액트는 웹 어플리케이션 개발 과정에서 발생하는 여러 문제를 해결할 수 있는 여러 기능을 포함.기능이 많으면 다양한 문제에 ..

Node.js의 아키텍처는 이벤트 기반, 논블로킹 I/O, 그리고 싱글 스레드를 사용하는 V8 JavaScript 엔진을 기반으로 설계되었습니다. 이를 통해 Node.js는 대규모 동시성을 효율적으로 처리할 수 있습니다. 이러한 아키텍처는 서버 측에서 고성능을 발휘하며 특히 많은 요청을 처리해야 하는 네트워크 애플리케이션에 적합합니다.Node.js 아키텍처의 주요 구성 요소싱글 스레드 이벤트 루프 (Single-threaded Event Loop)Node.js는 단일 스레드를 사용하여 모든 작업을 처리합니다. 하지만, 이 단일 스레드는 많은 요청을 논블로킹 방식으로 처리할 수 있도록 설계되어 효율성을 극대화합니다.Node.js에서 들어오는 요청들은 이벤트 큐에 쌓이고, 이벤트 루프가 이 큐를 순회하면서 ..