본문 바로가기

전체 글

 (153)
프로미스(Promise)와 async/await의 차이 Promise와 async/await은 JavaScript에서 비동기 처리를 위한 패턴Promise비동기 작업의 최종 완료나 실패를 나타내는 객체.then(), .catch(), .finally() 메서드를 통해 결과 처리 async/awaitPromise를 기반으로 하는 신택스 슈가(=더 쉽게 코드를 작성할 수 있도록 설계된 문법)비동기 코드를 마치 동기 코드처럼 작성 가능async 함수 내에서 await 키워드를 사용하여 Promise의 결과를 기다릴 수 있음 주요 차이점1. 코드 스타일: async/await이 더 동기적으로 보이는 코드 작성 가능2. 에러 처리: Promise는 .catch()를 사용, async/await은 try/catch 사용// PromisefetchData() .th..
클로저(Closure) 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합함수가 자신이 생성될 때의 환경(스코프)을 기억하여 나중에도 그 환경에 접근할 수 있는 특성실제로 클로저는 다음과 같은 상황에서 유용하게 사용데이터 프라이버시 구현 : 변수를 private하게 관리할 수 있습니다.상태 유지: 함수가 호출될 때마다 이전 상태를 기억할 수 있습니다.부분 적용 함수 생성: 함수의 일부 인자를 미리 고정할 수 있습니다.다만, 클로저를 사용할 때는 메모리 관리에 주의, 클로저가 참조하는 환경이 메모리에 계속 유지되기 때문에 메모리 누수 발생 가능성 function makeCounter() { let count = 0; // 외부 함수의 변수 return function() { return count++;..
let, const, var의 차이점 var함수 스코프재선언 및 재할당 가능호이스팅에 의해 선언 전에 접근 시 undefined 반환함수 스코프와 호이스팅으로 인한 예상치 못한 버그 발생 가능성 let블록 스코프재선언 불가, 재할당 가능호이스팅은 일어나지만, 선언 전에 접근 시 에러 발생의도치 않은 재할당 방지코드의 안정성 향상   const블록 스코프재선언 및 재할당 불가호이스팅은 일어나지만, 선언 전에 접근 시 에러 발생의도치 않은 재할당 방지코드의 안정성 향상 Ex. 함수 스코프와 블록 스코프의 주요 차이점변수의 유효범위를 결정하는 단위함수 스코프함수 단위로 변수의 유효 범위가 지정됨var 키워드로 선언된 변수에 적용 함수만이 새로운 스코프를 생성블록({})은 새로운 스코프를 생성하지 않음같은 함수 내의 var 변수는 모두 같은 스코프..
JavaScript에서 this JavaScript에서 this는 현재 실행 컨텍스트를 가리키는 키워드this의 값은 함수가 호출되는 방식에 따라 동적으로 결정주로 메서드가 속한 객체를 참조하는 데 사용4가지 상황에서 각각 다르게 동작,일반 함수 호출메서드 호출생성자 함수 호출화살표 함수에서의 사용this가 결정되는 상황일반 함수 호출function show() { console.log(this); } show(); // window 객체 (브라우저 기준) 일반 함수로 호출될 때 this는 전역 객체를 가리킴. 브라우저에서는 window, Node.js에서는 global 객체메서드 호출const user = { name: 'Kim', greet() { console.log(`Hello, ${this.name}`); ..
프레임워크, 라이브러리 프레임워크와 라이브러리의 차이 => 제어 흐름라이브러리 필요한 기능을 직접 호출하여 사용하는 도구개발자가 원하는 대로 코드를 작성하고, 필요할 때 라이브러리의 기능을 가져다 씀=> 개발자가 흐름을 제어프레임워크애플리케이션의 구조 제공, 개발자가 그 안에서 코드 작성프레임워크가 전체 흐름을 제어하고, 개발자가 특정 부분을 채워 넣음 => 프레임워크가 개발자의 코드를 호출주요 차이는 제어권라이브러리: 개발자가 필요할 때 호출.프레임워크: 전체 구조를 제공하고, 개발자의 코드를 호출.  Ex. IOC(제어의 역전, Inversion of Control)객체지향 프로그래밍에서 객체의 제어 권한을 개발자가 아닌 외부 주체(보통 프레임워크)가 담당 즉, 프레임워크가 흐름을 제어하고, 개발자는 필요한 로직 구현일반적..
동기 처리, 비동기 처리 동기 처리작업이 순차적으로 실행되는 방식하나의 작업이 완료된 후에야 다음 작업 실행, 앞선 작업이 끝날 때까지 프로그램이 대기 비동기 처리작업이 병렬로 실행되는 방식특정 작업이 완료될 때까지 기다리지 않고, 다른 작업 동시에 진행JavaScript에서는 콜백, Promise, async/await 같은 메커니즘을 사용해 비동기 처리예를 들어, 서버 요청을 보내고 그 응답을 기다리는 동안 다른 코드를 실행 정리동기: 작업이 순차적으로 실행되며, 대기 시간이 발생합니다.비동기: 대기하지 않고 다른 작업을 병렬로 실행할 수 있습니다.
JavaScript의 객체지향 프로그래밍 JavaScript는 객체지향 프로그래밍(OOP)을 지원하는 언어로, 객체를 기반으로 프로그램을 구성객체는 속성(데이터)과 메서드(동작)를 포함OOP의 주요 개념캡슐화: 객체의 속성과 메서드를 하나의 단위로 묶어 외부에서 직접 접근하지 못하도록 보호합니다.상속: 클래스가 다른 클래스의 속성과 메서드를 물려받아 재사용성을 높입니다.다형성: 상속받은 클래스들이 같은 메서드를 각자 다르게 구현할 수 있습니다.추상화: 복잡한 세부 사항을 감추고, 중요한 것만 노출하는 방식으로 시스템을 단순화합니다.JavaScript는 ES6 이후 클래스 문법을 도입하여 객체지향 패턴을 더욱 쉽게 구현할 수 있게 되었으며, 프로토타입 기반 상속을 통해 객체 간 상속을 구현합니다.  Ex. "클래스와 추상화?"추상화 : 복잡한 시..
JavaScript의 데이터 타입, TypeScript의 데이터 타입 Type (타입) : 가능한 값의 집합JavaScript의 데이터 타입동적 타입변수를 선언할 때 명시적으로 타입을 지정하지 않고, 런타임에 변수의 타입 결정원시형 타입Number : 숫자String : 문자열Boolean : 불리언 Undefined : 정의되지 않은 값Null : 의도적으로 '없음' 의미Symbol : 고유한 값BigInt : 매우 큰 수참조형 타입Array : 배열Object : 객체Function : 함수TypeScript의 데이터 타입정적 타입 변수를 선언할 때 타입을 지정할 수 있으며, 컴파일 시점에 타입 오류를 잡아낼 수 있습니다.기본 타입Number : 숫자String : 문자열Boolean : 불리언 Undefined : 정의되지 않은 값Null : 의도적으로 '없음' 의미..

티스토리툴바