나만의 컴퓨터 공학

뷰에서는 복잡한 구조를 보다 심플하고 유연하게 제공하기 위해 컴포넌트, 슬롯, 데이터 공유 기술을 제공하고 있다.유연하고, 모듈화된 구조로 개발하고 관리하기 좋다. 코드의 재사용성과 유지보수성 향상도 가능하다. 컴포넌트(Componet)자바스크립트 기반 프레임워크에서의 애플리케이션을 구성하고 관리하는 방식.특정 기능이나 작업을 독립적으로 수행하기 위한, 논리적으로 구분된 코드 단위.컴포넌트 기반 아키텍처(CBA, Component-Based Architecture)한 웹 어플리케이션을 여러 컴포넌트로 구분해, 페이지 단위가 아니라 컴포넌트 단위로 설계하는 방식.Vue.JS --> 컴포넌트 기반 아키텍처컴포넌트 기반 아키텍처 설계 방식의 장점재사용성(reusability) : 컴포넌트를 같은 기능이나 작업..

Vue.Js를 사용하여 간단한 Calculator를 만들어 보았다.script> export default { // Vue 컴포넌트를 정의하는 부분 data() { // 컴포넌트에서 사용하는 데이터 반환 return { output: null, // 현재 출력될 값을 저장 prev: null, // 이전에 입력한 숫자 또는 계산 결과를 저장 cur: null, // 현재 입력 중인 숫자를 저장 operator: null, // 선택된 연산자를 저장 (+, -, *, / 등) } }, methods: { operation(e) { // 버튼 클릭 시 호출되는 메서드 (계산 처리) const number = e.currentTarget.value; // 클릭된 버튼의 value 값을 가져옴 (숫자 또는 연..

폼(form) : 사용자로부터 데이터를 입력받는 요소들의 그룹이며 서버로 전송하기 위해 사용 프론트에서 서버로 데이터를 전송하는 방법 2가지form action="/login_process">form>form 태그에 action 속성을 이용해서 지정된 경로로 전송하여 처리하는 방법.form id="loginForm"> form> script> document.getElementById("loginForm".addEventListener('submit', function(event){ //자바스크립트로 사용자로부터 입력받은 값을 받아온다. const id = document.getElementById("id").value;  //사용자 입력 데이터를 서버에 전송하기 위한 AJAX 요청 만들기 const ..

자바스크립트에서 이벤트를 다룰때 document객체의 여러 속성과 메서드를 조합해서 사용한다.이벤트는 사용자와 상호작용해서 발생하는 사건(마우스 클릭, 더블 클릭, 드래그 앤 드롭, 키보드)1. v-on 디렉티브 : methods 옵션 속성으로 이벤트 연결. 이벤트 타입(click, keyup, keydown, doubleclick)2. 이벤트 핸들러에 이벤트 객체를 전달하지 않으면, 이벤트 객체를 이벤트 핸들러가 처리하지 못한다. 이벤트 객체와 값을 함께 사ㅛㅇ하려면 $event와 값을 함께 넘겨주어야 한다. 3. modifier는 이벤트 처리 방식을 제어하는데 사용하는 기능. modifier를 사용하면 DOM이벤트 동작을 변경하거나 기능을 추가할 수 있다. 예제 : keyup 이벤트로 enter(숫자..

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에서 들어오는 요청들은 이벤트 큐에 쌓이고, 이벤트 루프가 이 큐를 순회하면서 ..

콜백(callback)요청이 끝난 후, 실행할 함수를 매개변수로 추가하는 방식프로미스(promise)promise 객체를 반환하는 방식(이행, 거절, 대기)이 코드는 미래의 어느 시점에 실행할 것이다라고 약속하는 객체.어싱크 어웨이트(async await)promise 객체를 더욱 간단하게 async await 구문으로 변경한 문법(가독성)동기(Synchronous)프로그래밍에서 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 새로 시작하지 않고, 기다렸다가 기존의 작업이 다 끝나면 새로운 작업을 시작하는 방식.작업이 직렬로 배치되어 실행되며, 작업 실행의 순서가 확실히 정해져 있음.비동기(Asynchronous)먼저 시작되었던 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식.작업이 병렬로..