본문 바로가기
반응형

Programming Language/Javascript10

[Javascript] MVC, MVP, MVVM 간단히 비교하기 MVC전통적인 방식뷰에서 모델을 직접 참고함 -> 뷰에서 렌더링 시 모델의 정보를 사용컨트롤러는 뷰로부터 이벤트를 받아서 모델을 업데이트 해주는 역할// Model (데이터 및 로직 관리)class Model { constructor() { this.text = "Hello, MVC!"; } updateText(newText) { this.text = newText; }}// View (UI, Model 직접 참조)class View { constructor(model) { this.model = model; // ✅ View가 Model을 직접 참조 this.button = document.createElement("butt.. 2025. 3. 6.
[Javacript] 동기와 비동기, 이벤트 루프와 태스크 큐 동기 처리코드를 순차적으로 실행하는 방식앞의 작업이 완료될 때까지 다음 작업은 실행되지 않고 대기함직관적이고 코드 흐름을 이해하기 쉬우나, 오래 걸리는 작업이 전체 프로그램을 차단할 수 있음console.log("A");function syncTask() { for (let i = 0; i 비동기 처리특정 코드의 실행이 끝날 때까지 기다리지 않고 다음 코드를 즉시 실행하는 방식오래 걸리는 작업(네트워크 요청, 타이머 등)을 백그라운드로 넘기고, 그동안 다른 작업이 실행됨코드 흐름이 멈추지 않아 전체 프로그램의 성능이 향상됨console.log("A");setTimeout(() => { console.log("B");}, 1000); // 1초 후 실행console.log("C");// 출력 결과://.. 2025. 2. 23.
[자바스크립트] DOM과 이벤트 DOM이란- 웹 페이지를 트리 구조로 표현한 객체 모델- 브라우저는 HTML 문서를 파싱하여 DOM을 생성하고, 자바스크립트는 DOM을 통해 웹 페이지의 구조와 내용을 조작함DOM의 구조 Hello, DOM! This is a paragraph. Document ├── ├── │ └── └── ├── └── - Document: DOM 트리의 최상위 객체- 각 HTML 요소(, , 등)을 노드로 표현- JavaScript를 통해 이 노드들을 조작DOM 조작 메서드- getElementById: 특정 id를 가진 요소를 찾는다.const title = document.getElementById("titl.. 2025. 1. 5.
[자바스크립트] 배열과 객체 다루기 1. 배열 메서드1.1 map배열의 각 요소를 순회하며, 주어진 콜백 함수의 결과를 새로운 배열로 반환합니다.기존 배열은 변경되지 않습니다.const numbers = [1, 2, 3, 4, 5];const squared = numbers.map((num) => num ** 2);console.log(squared); // [1, 4, 9, 16, 25]console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)1.2 filter배열의 각 요소를 순회하며, 주어진 조건에 일치하는 요소들로만 새로운 배열을 반환합니다.기존 배열은 변경되지 않습니다.const numbers = [1, 2, 3, 4, 5];const evenNumbers = numbers.filter.. 2025. 1. 5.
[자바스크립트] 프로토타입과 상속 1. 객체 생성의 두 가지 방법a. 객체 리터럴 방식  - 간단한 객체 생성에는 편리하나 동일 구조를 가진 객체를 만드려고 할 때 비효율적임(코드 중복)const person = { name: "Alice", greet() { console.log(`Hello, my name is ${this.name}`); },};console.log(person.name); // "Alice"person.greet(); // "Hello, my name is Alice" b. 생성자 함수 방식- new 키워드를 사용하여 생성자 함수를 호출- 새로운 객체를 생성하고 초기화하는 로직을 재사용 가능function Person(name) { this.name = name; this.greet = functio.. 2025. 1. 4.
[자바스크립트] 비동기 프로그래밍? 프로미스(Promise)? 쉽고 완벽하게 파헤치기! 1. 비동기 프로그래밍- 비동기 프로그래밍은 시간 소모가 큰 작업(예: 네트워크 요청, 타이머 대기)을 효율적으로 처리하기 위한 방법- 비동기 작업은 JavaScript 엔진이 아닌 이벤트 루프를 통해 관리되며, 프로그램 실행이 멈추지 않고 계속 진행될 수 있게 함(이벤트 루프에 대한 글 참고: https://yiyj1030.tistory.com/592) 2. 콜백 헬(hell)비동기 처리 후에 후속 처리에 대한 작업을 어떻게 해줘야할까?function fetchData() { let data; setTimeout(() => { data = "Hello, World!"; }, 1000); return data;}const result = fetchData();console.log(result.. 2025. 1. 3.
반응형

티스토리툴바