1주차 발자국

📍2024.04.26 ~ 2024.05.02

🏁1주차 미션

강의 요약

#1 자바스크립트 기초

console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다.

변수 선언 시 var, let, const 를 사용한다. var는 함수 레벨, let/const 는 블록 레벨의 스코프를 가진다.

자바스크립트 인터프리터는 선언과 할당을 분할하여 처리되므로 var, let, const, 함수가 선언 단계에서 호이스팅된다.

하지만 var 는 할당 시에 undefined 가 할당되는데 let/const 는 아무것도 할당되지 않아 할당 전에 출력하려고 하면 에러가 발생한다.

자바스크립트 타입에는 원시타입과 참조 타입이 있는데 자바스크립트는 느슨한 타입의 동적 언어이므로 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않고 모든 타입의 값으로 할당 가능하다.

자바스크립트 변수는 자바스크립트 함수를 사용하거나, 자바스크립트 자체에 의해 자동으로 다른 데이터의 유형으로 변환할 수 있다.

백틱 문자를 사용하여 문자를 표현한 것을 템플릿 리터럴이라고 한다. 템플릿 리터럴을 사용하면 줄 바꿈이 쉽고 문자열 내부에 표현식을 사용할 수 있다.

자바스크립트에서 루프를 사용하면 코드 블록을 여러 번 실행할 수 있다. 종류로는 for, for/in, while, do/while 이 있다.

#2 Window 객체 및 DOM

윈도우 객체는 브라우저에 의해 자동으로 생성된다. 윈도우 객체를 이용해서 브라우저 창의 정보를 알거나 제어할 수 있다. var 키워드로 선언된 변수나 함수는 윈도우 객체의 프로퍼티가 된다.

DOM 이란 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게 브라우저가 트리 구조로 만든 객체 모델이다.

DOM 에서 제공해주는 API 를 이용해 DOM 트리를 조작할 수 있다. DOM 에 수행되는 모든 연산의 시작은 document 객체에서 시작한다. childNodes 는 유사 배열 객체인 컬렉션이다. 컬렉션은 for/of, forEach 를 사용할 수 있으나 배열이 아니므로 배열 메서드를 사용할 수 없다. 배열 메서드를 사용하고 싶다면 Array.from 을 사용해 배열로 만드는 과정이 필요하다.

요소 생성/제거/교체는 createElement/removeChild/replaceChild 를 사용한다.

#3 Event

이벤트는 웹 브라우저에서 발생하는 동작이다. 이벤트가 발생할 때 이벤트 객체를 가져올 수 있는데 이벤트 객체는 이벤트 리스너 내에서만 접근할 수 있다.

이벤트 리스너는 이벤트가 발생했을 때 함수를 호출한다. addEventListener 를 이용해 이벤트 리스너를 객체나 요소에 등록할 수 있다.

이벤트 종류로는 UI, 키보드, 마우스, 포커스, 폼이 있다.

이벤트의 흐름에는 이벤트 버블링과 이벤트 캡처링이 있다.

이벤트 버블링은 이벤트가 상위 요소로 전파되는 것이다. 타겟 이벤트에서 시작해서 document 객체를 만날 때까지 모두 발생한다. event.stopPropagation 메소드를 사용하면 버블링을 중단할 수 있다. preventDefault 메서드는 이벤트의 기본 동작을 방지하지만 이벤트 흐름을 중지하지는 않는다.

이벤트 캡처링은 이벤트가 하위 요소로 전파되는 것이다.

이벤트 위임은 하위 요소의 이벤트를 상위 요소에 위임하여 하위 요소의 이벤트를 상위에서 제어하는 것이다.

#4 자바스크립트 중급

메소드의 this 는 해당 객체이다. 함수에서의 this 는 window 객체이다. 생성자에서의 this 는 빈 객체이다. 화살표 함수에서의 this 는 상위 스코프의 this 이다.

bind, call, apply 를 사용해서 this 를 바꿀 수 있다. 조건부 삼항 연산자는 if-else 문을 한 줄로 사용할 수 있게 한다.

자바스크립트는 동기 언어이나 도움을 받아 비동기처럼 사용할 수 있다.

이벤트 루프는 콜 스택과 콜백 큐를 주시하고 있다가 콜 스택이 비게 되면 콜백 큐의 함수를 콜 스택으로 이동시킨다.

클로저는 함수 내부에 정의된 내부 함수가 있는 경우 함수가 실행이 완료되어 함수의 변수에 더 이상 접근할 수 없는 경우에도 내부 함수가 함수의 변수에 접근할 수 있는 것을 말한다.

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 자바스크립트 표현식이다. 구조 분해 할당을 사용하면 코드가 깔끔해진다.

전개 연산자(...)는 특정 개체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다.

map 메서드는 배열 내의 모든 요소 각각에 주어진 함수를 적용한 결과들을 새로운 배열로 반환한다.

filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소들을 새로운 배열로 반환한다.

reduce 메서드는 각 요소에 주어진 리듀서 함수를 실행하여 하나의 결과 값을 반환한다.

원시 타입인 undefined / null 은 아무 값도 할당받지 않은 상태 / 존재하지 않는 값을 의미한다.

null 은 자바스크립트 엔진이 이 변수에 대해 가비지 콜렉션을 수행한다.

얕은 비교는 원시 자료형은 값, 참조 자료형은 참조 위치를 비교한다.

깊은 비교는 모두 값으로 비교한다.

깊은 복사와 달리 얕은 복사나 얕은 동결은 중첩된 부분은 복사, 동결되지 않는다.

함수 선언문은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향 받지 않는다.

Intersection Observer 는 뷰포트와 설정한 요소의 교차점을 관찰한다.

순수 함수는 same input - same output, no side effects 의 규칙을 가지는 함수형 프로그래밍 패러다임의 한 부분이다. 순수 함수는 클린 코드, 쉬운 테스트, 쉬운 디버그, 독립적인 코드를 위해 사용한다.

커링은 함수와 함께 사용하는 고급 기술이며 자바스크립트 외의 언어에도 존재하며 f(a, b, c) 를 f(a)(b)(c) 로 변환한다.

strict mode 는 기존에 무시되던 에러를 쓰로우하고 자바스크립트 엔진의 최적화 작업을 방해하는 실수를 바로잡아 비엄격 모드의 코드보다 더 빨리 작동하게 만든다.

자바스크립트 엔진은 자바스크립트 코드를 실행하는 소프트웨어 구성 요소이며 초기 엔진은 인터프리터였으나 최신 엔진은 Just-In-Time 컴파일을 사용한다.

즉시 실행 함수 표현(IIFE)은 정의되자마자 즉시 실행되는 자바스크립트 함수이다. 변수의 전역 선언과 즉시 실행 함수 내부에 다른 변수의 접근을 피하기 위해 사용한다. IIFE 를 변수에 할당하면 함수가 실행된 결과만 저장된다.

#5 OOP (Object Oriented Programming)

여러 개의 독립된 단위인 객체의 모임으로 컴퓨터 프로그램을 파악하는 프로그래밍 패러다임이다.

명령어의 나열인 절차 지향에 비해 알아보기 쉽고 재사용성이 높다.

객체 지향 프로그래밍의 특징으로는 자료 추상화, 상속, 다형성, 캡슐화가 있다.

자료 추상화 - 불필요한 정보는 숨시고 중요한 정보만을 표현하여 프로그램을 간단히 만든다.

상속 - 새로운 클래스가 기존 클래스의 자료와 연산을 이용할 수 있다.

다형성 - 같은 메소드여도 인스턴스에 따라 다양한 형태를 가질 수 있다.

캡슐화 - 클래스 안의 메서드, 변수를 하나로 묶어 보안이 강화되고 관리가 용이한 코드를 만든다.

프로토타입은 자바스크립트 객체가 다른 객체로부터 메소드와 속성을 상속받는 매커니즘이다.

ES6 의 Class 문법은 객체 지향 방식을 이용하지만 내부에서는 프로토타입을 사용해 작동된다. static 을 사용해 클래스 함수 자체에 설정된 정적 메서드를 만들 수 있다.

extends 키워드를 사용하면 부모 클래스를 상속 받은 자식 클래스(sub class)를 만들 수 있다.

super 키워드는 자식 클래스 내에서 부모 클래스의 생성자, 메서드를 호출할 때 사용한다.

#6 비동기

 자바스크립트는 싱글 스레드이므로 빠른 수행을 위해 비동기를 사용한다.

비동기 요청이 여러 개인데 한 요청이 다른 요청에 의존하는 경우를 처리하기 위해 Callback 함수, Promise, Async await 을 사용한다.

콜백 함수는 특정 함수에 매개변수로 전달된 함수이다.

Promise 객체는 두 개의 실행 함수를 매개변수로 사용한다. 첫번째 함수는 작업이 성공적으로 완료했을 때 결과 값을 반환할 때 호출하고, 두 번째 함수는 작업이 실패하여 오류를 반환할 때 호출된다.

Promise 의 상태로는 대기 - 비동기 처리 로직이 완료되지 않음, 이행 - 비동기 처리가 완료되어 프로미스가 결과 값을 반환함, 거부 - 비동기 처리가 실패하거나 오류가 발생한 상태가 있다.

Promise.all 은 순회 가능한 객체에 주어진 모든 프로미스가 이행된 경우 이행한다.

Promise.race 는 순회 가능한 객체에 주어진 모든 프로미스 중에 가장 먼저 완료된 것의 결과값으로 이행, 거부한다.

async await 은 비동기 코드를 동기처럼 보이게 하고 promise-then 보다 가독성이 좋다. await 은 async 함수 내부에서만 사용할 수 있다.

ECMAScript 는 ECMA-262 기술 규격에 정의된 범용 스크립트 언어이다. 자바스크립트는 ECMAScript 사양을 준수한다.

느낀 점

1주차는 기존에 알고 있지만 명확하지 않았던 개념들을 정리할 수 있었다.

특히 this 의 스코프 부분을 배우며 왜 함수 선언식에서는 접근할 수 없던 변수가 화살표 함수에서는 접근이 가능했는지 알게 되어 좋았다. 배운 이론들을 미션에 적용시켜 확실하게 이해할 수 있도록 노력해야겠다. 시간이 부족하여 강의 요약이 가독성이 떨어지는데 이후에 깔끔하게 정리하여 복습하기 편하게 만들어야겠다.