나만의 컴퓨터 공학

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의 배경?프론트엔드 개방 시장을 이미 앵귤러, 리액트, 엠버, 백본과 같은 프레임워크가 이미 장악.특히 앵귤러와 리액트는 웹 어플리케이션 개발 과정에서 발생하는 여러 문제를 해결할 수 있는 여러 기능을 포함.기능이 많으면 다양한 문제에 ..

HTML에서 margin, border, padding은 요소의 배치와 크기를 조정하는 데 중요한 CSS 속성입니다. 이 속성들은 박스 모델(Box Model)이라는 개념을 통해 요소의 크기와 위치를 제어하는 데 사용됩니다.박스 모델(Box Model)박스 모델은 HTML 요소를 사각형 박스로 표현하는 개념입니다. 박스 모델은 네 가지 주요 구성 요소로 이루어져 있습니다.콘텐츠(Content): 요소의 실제 내용(텍스트, 이미지 등)이 들어가는 영역입니다.패딩(Padding): 콘텐츠와 요소의 테두리(Border) 사이의 여백입니다. 패딩은 요소의 배경색을 적용받습니다.테두리(Border): 패딩과 콘텐츠 주변을 감싸는 선입니다. 테두리는 스타일과 두께를 가질 수 있습니다.마진(Margin): 요소의 가..

웹 표준 기술현대 웹 페이지에 사용되는 표준 기술은 HTML5 표준, CSS3 표준, ECMAScript 표준HTML5 : 웹 페이지 구성 -> CSS3 : 스타일 적용 -> color : black자바스크립트 : 사용자 반응 처리 -> const onClick = ~~~;HTML5큰 의미로 CSS3와 자바스크립트를 모두 포함하는 웹 표준 기술을 총칭.작은 의미로 웹 페이지를 구성하는 HTML 마크업 언어 자체.마크업(markup) : 웹 페이지의 서식이나 구조를 표현하는 정보.CSS3(Cascading Style Sheets)HTML 페이지에 스타일 지정하는 스타일 시트를 작성할 때 사용하는 언어.단순한 웹 문서에 스타일 시트를 적용해야 익숙한 메인 페이지로 완성됨.자바스크립트HTML 페이지에 사용자 ..