2025.03.12 - [Frontend/JS] - 화살표 함수 & 비동기 처리 에서 간략하게 화살표 함수를 설명했다.화살표 함수에서 `this` 키워드를 사용하는 방법을 작성하려 한다.JS의 this화살표 함수와 전통적인 함수는 서로 다른  `this` 값이 바인딩될 수 있다.JS에서의 this는 메서드, 함수가 호출될 때마다 현재 호출중인 메서드를 보유한 객체가 this로 연결됨만일, 현재 호출 중인 메서드를 보유한 객체가 없다면, 전역 객체 (Global Obj, window)가 연결된다.let obj = { result: 0 };obj.add = function (x, y) { this.result = x + y;};obj.add(3, 4);console.log(obj); // { result:..

화살표 함수 (Arrow Function)ECMA Script 2015부터 함수를 선언할 때 `화살표 (=>)`를 사용해서 표현할 수 있게 됨.`function` 예약어를 사용하지 않고, 함수 이름도 없다.기본형:  `() => {...}`, `(매개변수) => {...}`화살표 함수에서 실행할 명령줄이 한 줄이라면 중괄호 & return을 생략할 수 있음let add = (a, b) => {return a+b;}add(10,20) // 30// 생략let add = (a, b) => a + b;add(10,20) // 30JS 비동기 처리동기 처리 & 동기 프로그래밍 (Synchronous)코드가 위에서 아래로 순차적으로 실행됨하나의 작업이 끝날 때까지 다음 코드가 실행되지 않으므로 작업이 `블로킹` ..

문서 객체 모델(DOM, Document Object Model)?웹 페이지 (HTML, XML)의 콘텐츠, 구조 그리고 스타일 요소를 구조화 시켜 표현하여프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 `인터페이스`문서 객체: HTML 태그를 JS에서 사용할 수 있는 `객체`로 만든 것DOM은 어떻게 생성되고 어떻게 보여지는가DOM은 HTML 문서를 계층적 구조 & 정보로 표현하며, 이를 제어할 수 있는 트리 자료구조임∴  HTML DOM 혹은 HTML DOM Tree로 칭함트리 자료구조는 노드들의 `계층 구조`로 이루어짐따라서 부모-자식 & 형제 관계를 표현하는 비선형적 자료구조를 나타냄 hello world! 노드 종류설명Document NodeDOM의..

표현식 & 문장표현식(expression): 값을 만들어 내는 간단한 코드문장(statement): 프로그래밍 언어에 실행하 룻 있는 코드의 최소 단위문장 마지막에 `세미콜론` 또는 `줄 바꿈`을 넣어 종결을 나타냄 표현식 ∈ 문장`표현식`+`세미콜론` =  문장// 문장273;10 + 20 + 30 * 2;var name = '0w'+'oy';alter('Hello world!');// 표현식27810 + 20 + 30 * 2'Js'식별자js에서 변수나 함수 등에 이름을 붙일 때 사용관례클래스 외 생성자 함수 이름은 항상 대문자로 시작변수, 인스턴스, 함수 & 메서드의 이름은 항상 소문자로 시작여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로  함식별자 표기법식별자 표기법설명예시주로 사용되는 곳s..