hanker

Single Thread 방식으로 실행되는 JavaScript에서 비동기 처리방법은 Promise와 async / await 가 있다. 이번 글에서는 매일 써도 어려운 비동기 프로그래밍에 대해서 알아보자. 1. 비동기 프로그래밍이란? JavaScript는 싱글 스레드 기반 언어이기 때문에 한 번에 하나의 작업만 실행이 가능하다.예외로 네트워크 요청, 파일 읽기, 타이머 같은 작업은 비동기 방식으로 실행된다.// 동기 코드 (순차 실행)console.log("Start");console.log("Processing...");console.log("End");// -- 출력 결과 --// Start// Processing...// End// 비동기 코드 (비순차 실행)console.log("Start");s..

이번 글에서는 JavaScript의 동작 원리를 깊이 이해하는 데 필수적인 개념인 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)에 대해 다뤄보자.이 개념을 이해하면 JavaScript의 호이스팅, 스코프, 클로저, 비동기 처리 등의 동작 방식을 보다 명확하게 파악할 수 있다. 1. 실행 컨텍스트란? 실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 의미한다.코드가 실행되는 동안 변수, 함수, this의 값 등을 추적하며, JavaScript 엔진이 코드를 실행하는 방식을 결정한다. * 실행 컨텍스트의 주요 역할 * - 코드 실행을 위한 환경 생성- 변수와 함수 선언 저장- 스코프와 this를 관리- 호이스팅 처리 2...

이번 글에서는 JavaScript에서 가장 많이 헷갈리는 개념 중 하나인 this 키워드에 대해서 알아보자. this는 실행 컨텍스트에 따라 다르게 동작하기 때문에 올바르게 이해하는 것이 중요하다! 1. this 란? this 는 현재 실행 중인 컨텍스트에 따라 다른 객체를 참조하는 키워드이다.즉, this 가 가리키는 대상은 코드가 실행되는 방식에 따라 달라진다. 2. this의 동작 - 기본적으로 전역 객체를 참조- 객체의 메서드 내부에서는 해당 객체를 참조- 화살표 함수에서는 부모 컨텍스트의 this를 상속- 생성자 함수에서는 새로 생성된 객체를 참조- call, apply, bind를 사용하면 this를 명시적으로 변경 가능 여기까지 정의를 알아보고 아래 코드에서 자세하게 알아보자.  2-1. 전..

이전 변수 선언에 대한 글에서 잠깐 호이스팅에 대한 내용이 나왔는데, 이번 글에서 좀 자세하고 알기 쉽게 정리해보려고 한다. 호이스팅은 이해가 없으면 JavaScript 코드를 작성할 때 혼란을 야기하니 꼭 이해하고 넘어가자! 1. 호이스팅이란? 호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 실행되기 전에 스코프의 최상단으로 끌어올려지는 동작을 말한다.즉, 코드가 실행되기 전에 JavaScript 엔진이 변수와 함수의 선언을 미리 처리한다. - 호이스팅의 기본 동작console.log(message); // undefinedvar message = "Hello, Hoisting!";console.log(message); // "Hello, Hoisting!"위 코드는 아래와 같이..

이번 글에서는 JavaScript에서 중요한 개념인 스코프와 클로저에 관해 알아보자 1. 스코프(Scope) 1-1. 스코프란?스코프는 변수와 함수에 접근할 수 있는 유효 범위를 의미한다. 즉, 변수가 어디에서 선언되고, 어디에서 사용할 수 있는지를 결정한다.  1-2. 스코프의 종류 전역 스코프 (Global Scope)모든 코드에서 접근 가능한 변수함수나 블록 밖에서 선언된 변수는 전역 변수로 취급된다.let globalVar = "Hanker!";function printGlobalVar() { console.log(globalVar); // "Hanker!"}printGlobalVar(); 전역 스코프 (Global Scope)함수 내부에서 선언된 변수는 해당 함수 안에서만 접근 가능 fun..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까?7. JavaScript에서 DOM 조작 방법8. JavaScript의 유용한 기능 feat. ES6+ 9. JavaScript의 디버깅과 개발도구 활용 JavaScript 코드를 작성하면서 예상치 못한 오류가 발생하거나 원하는 결과가 나오지 않을 때, 디버깅을 사용하게된다.개발자분들은 알겠지만 각 툴마다 디버깅 기능을 사용하지 않으면 개발할 때 정말 힘든데, 우리가 보는 뷰 단에서 디버깅 하는 방법에 대해서 작성하려한다. 디버깅의 기본 원칙과 함께 브러우저의 개발자 도구를 활용하는 방법을 알아..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까?7. JavaScript에서 DOM 조작 방법8. JavaScript의 유용한 기능 feat. ES6+  JavaScript에서 기본 문법 외에도 개발자에게 유용한 기능을 제공하는데, 이번글에서 알아보자. 템플릿 리터럴(Template Literals) 템플릿 리터럴은 문자들을 작성할 때 더 간결하고 가독성 좋게 만들 수 있는 기능이다.백틱(`) 기호를 사용하며, 변수와 표현식을 ${} 안에 넣어서 사용할 수 있다. 기존 문자열 결합과 템플릿 리터럴 사용할 경우 차이// 기존 문자열 결합let ..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까? JavaScript에서 객체와 배열은 데이터를 구조화하여 저장하고 관리하는 데 매우 중요한 역할을 한다. 이번 글에서는 객체와 배열의 기본 개념, 생성 및 사용법, 그리고 내장 메서드에 대해 살펴보자! 1. 객체(Object) 객체란?객체는 키-값 쌍(Key-Value Pair)으로 데이터를 저장하는 데이터 구조입니다. 각각의 키는 고유하며, 이를 통해 값을 참조할 수 있다. let person = { name: "Hanker", age: 32, isDeveloper: true..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까?  JavaScript에서 함수는 재사용 가능한 코드 블록으로, 특정 작업을 수행하기 위해 작성된다.함수는 프로그램을 구조화하고 코드의 반복을 줄이는 데 매우 유용하다. 이번 글에서는 함수의 선언과 호출, 매개변수와 반환값, 그리고 다양한 함수 형태를 살펴보자! 1. 함수 선언과 호출 함수 선언JavaScript에서 함수는 function 키워드를 사용해 선언한다.function say() { console.log("Hello, Hanker!");}  함수 호출정의한 함수를 호출하려면 함수..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문 이전 글에서는 JavaScript의 기본 문법에 대해서 알아보았는데, 이번 글에서는 프로그램의 흐름을 제어하는 제어문에 대해서 알아보자.https://hanke-r.tistory.com/entry/JavaScript-JavaScript%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95 JavaScript - JavaScript의 기본 문법1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법 https://hanke-r.tistory.com/entry/JavaScript-JavaScript..