JS - Scope

1. 학습 목표JS에서의 스코프의 개념을 이해하고, 여러 스코프 종류간의 차이를 알아보자. 스코프는 렉시컬 환경, 실행 컨텍스트, 클로저와 같은 JS 주요 개념들을 이해하는데 큰 도움이 된다. 2. 핵심 개념 요약 스코프(scope) 스코프란 식별자(변수, 함수, 클래스 이름 등)가 유효한 범위를 의미합니다. 즉, 변수는 자신이 선언된 위치에 따라 다른 코드가 자신을 참조할 수 있는 범위가 결정된다. 렉시컬 스코프위에서 언급한 것처럼 코드를 작성한 위치에 따라 스코프가 정해지는 규칙을 의미한다. JS는 렉시컬 스코프 기반이며, 함수,변수가 어디서 정의 되었는지에 따라 상위 스코프가 결정된다. 스코프와 관련된 개념 중 렉시컬 환경과 실행 컨텍스트에 관해선 다음 글에서 다루겠다. 아무튼, 스코프를 잘 활용하..

TS 상수다루기 enum, as const(const assertion)

1. 학습 목표 enum과 as const의 개념을 이해하고 둘의 차이를 알아본다. 그 후, 각 요소들이 어울리는 상황에 대해 알아본다. 2. 핵심 개념 요약 enum, as const 모두 Typescript에서 상수를 다룰 때 사용하는 기능으로 비슷하지만 동작원리와 사용되는 곳이 다르다. enum enum은 아래와 같이 열거형 상수를 정의하는 TS 전용 문법이다. 숫자, 문자열의 값을 가지며 런타임에도 존재한다는 특징이 있다. 또한 역참조가 가능하다는 특징이 있어 두 가지 방법으로 참조가 가능하다.enum ContentsType { All, // 여기서 부터0, 1, 2, 3으로 자동 할당 YOUTUBE, ARTICLE, PODCAST,}const status: ContentsType = C..

1. 학습 목표AJAX의 정의를 이해AJAX 구현 방법에 대한 이해AJAX의 예시AJAX를 통한 사용자 경험 향상 사례 2. 핵심 개념 요약 기존의 HTTP 통신 방식에서는 사용자가 특정 요청을 보내면 서버가 전체 HTML 페이지를 다시 보내주기 때문에,단순히 일부 데이터만 갱신하려는 상황에서도 불필요하게 모든 리소스를 다시 받아와야 했다. 예시로, 자동완성을 구현 한다면, 사용자의 입력이 변경될 때마다 새로운 페이지를 렌더링 해 응답하기해 이는 네트워크 트래픽과 서버 부하를 증가시키며, 사용자 경험도 저하시킨다. AJAX는 이런 불편한 상황을 해결한다. AJAX : 서버와 비동기적으로 데이터를 교환할 수 있는 기술 사용자 이벤트 발생 시, 서버로의 요청을 보내고, 응답 데이터로 웹 페이지의 특정 부분만..

1. 학습 목표콜백 함수의 개념과 사용 목적을 이해한다.콜백 지옥이 무엇이고, 왜 발생하는지 파악한다.Promise와 async/await를 활용해 콜백 지옥을 해결하는 방법을 익힌다.실제 코드에서 비동기 처리를 깔끔하게 작성할 수 있다. 2. 핵심 개념 요약콜백 함수란?콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수이다. 주로 비동기 처리, 이벤트 처리, 타이머 등에서 사용되며, 특정 작업이 끝난 후에 다음 동작을 실행하는 데 유용하다. function greet(name, callback) { console.log("Hi " + name); callback();}function callMe() { console.log("I am callback function");}greet("Peter..