[ 인프런 워밍업 클럽 FE 0기 ] 1주차 발자국

2024 새로운 도전을 하기 위해 여러 사이트를 돌아다니던 중 인프런 워밍업 클럽을 발견하게 되었습니다. 마침 저는 취업 준비를 앞두고 있고 자바스크립트 기초 지식을 단단하게 다져 취업을 준비해야겠다는 생각이 들었고 이러한 좋은 기회를 놓칠 수 없어 바로 신청하게 되었습니다.

강의 요약

01. 자바스크립트 기초

[ console 객체 ]

• JavaScript에서 제공하는 내장 객체 중 하나이다.

• 이 객체를 사용하면 개발자는 브라우저의 콘솔이나 터미널에 다양한 정보를 출력하고 디버깅할 수 있다.

• 다양한 메서드를 제공하여 개발자가 원하는 정보를 출력하거나 디버깅할 때 유용하다.

console 객체 일부 메서드

• log(): 콘솔에 일반적인 로그 메시지를 출력

• error(): 콘솔에 에러 메시지를 출력

• warn(): 콘솔에 경고 메시지를 출력

   

• table(): 테이블 형태로 데이터를 출력

• time()과 timeEnd(): 특정 코드 블록의 실행 시간을 측정

   

   

  [ let, var, const]

1. let:

   • 블록 범위(block-scoped) 변수를 선언

   • 변수를 선언한 블록 내에서만 접근 가능

   • 변수의 값은 재할당이 가능

   • 같은 이름의 변수를 중복해서 선언할 수 없음

2. var:

   • 함수 범위(function-scoped) 변수를 선언

   • 변수를 선언한 함수 내에서만 접근 가능

   • 변수의 값은 재할당이 가능

   • 같은 이름의 변수를 중복해서 선언할 수 있음

   • 호이스팅(hoisting)이 발생하여 변수 선언이 해당 스코프의 최상단으로 끌어올려짐

3. const:

   • 블록 범위(block-scoped) 상수를 선언

   • 변수를 선언하고 초기값을 할당한 후, 재할당이 불가능

   • 변수의 값이 변하지 않아야 할 때 사용

   • 같은 이름의 변수를 중복해서 선언할 수 없음

[ 호이스팅 ]

JavaScript에서 변수 선언과 함수 선언을 해당 스코프의 최상단으로 끌어올리는 동작

변수 호이스팅의 예시

console.log(x); // undefined
var x = 5;
console.log(x); // 5

위 코드에서 var x = 5; 문장 이전에 console.log(x);를 호출하고 있다. 하지만 결과는 undefined가 출력된다. 이는 변수 x의 선언이 호이스팅에 의해 해당 스코프의 최상단으로 끌어올려진 후, 초기값이 할당되기 전까지 undefined로 초기화되기 때문이다.

함수 호이스팅의 예시

sayHello(); // "Hello!"
function sayHello() {
console.log("Hello!");
}

위 코드에서 sayHello() 함수를 호출하기 전에 함수를 선언하고 있다. 이는 함수 선언이 호이스팅에 의해 해당 스코프의 최상단으로 끌어올려진 후, 호출 위치와 상관없이 함수를 사용할 수 있게 된다.

[ 타입, 타입 변환 ]

자바스크립트의 타입은 다음과 같음

• 원시 타입: Boolean, String, Number, null, undefined, Symbol

• 참조 타입: Object, Array

   

   

  원시타입은 고정된 크기로 Call Stack 메모리에 저장되며 실제 데이터가 변수에 할당된다.

참조타입은 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장되며 데이터의 값이 Heap에 저장되며 메모리의 주소 값이 할당된다.

타입 변환 유형

• 명시적 데이터 변환: 직접 함수를 통한 변환

• 자동 데이터 변환: 자바스크립트 자체에 의해 자동으로 변환

   

[ 연산 및 Math Object ]

Math object에서 제공하는 다양한 메서드들을 이용해 다양한 연산을 할 수 있다.

Math 일부 메서드

1. Math.abs(x):

   • 주어진 숫자의 절댓값을 반환합니다.

   • 예: Math.abs(-5)는 5를 반환합니다.

2. Math.ceil(x):

   • 주어진 숫자보다 크거나 같은 정수 중 가장 작은 수를 반환합니다.

   • 예: Math.ceil(4.2)는 5를 반환합니다.

3. Math.floor(x):

   • 주어진 숫자보다 작거나 같은 정수 중 가장 큰 수를 반환합니다.

   • 예: Math.floor(4.8)는 4를 반환합니다.

[ Template Literals ]

Template literal은 JavaScript에서 문자열을 작성하는 방법으로, 백틱(``)을 사용한다. 이를 통해 변수나 표현식을 쉽게 삽입하고 멀티라인 문자열을 작성할 수 있으며, 특수 문자 처리에 용이하다. ${}를 활용하여 문자열에 변수를 할당할 수 있다.

[ Loops ]

• for: 코드 블록을 여러 번 반복

• for/in: 객체 속성을 따라 반복

• while: 지정된 조건이 true 인 동안 코드 블록을 반복

• do/while: 조건이 true인지 검사 전에, 코드 블록을 한 번 실행시킨다. 그 이후 while 반복문 실행

02. Window 객체 및 DOM

[ window 객체 ]

• window 객체는 웹 브라우저 창을 나타내는 전역 객체입니다.

• JavaScript에서 모든 전역 변수와 함수는 window 객체의 프로퍼티 또는 메서드로 접근할 수 있습니다. 예를 들어, window.alert()와 window.innerWidth와 같이 사용할 수 있습니다.

• 브라우저 창의 크기, URL 정보, 타이머, 팝업 창 등 다양한 기능을 제공합니다.

• window 객체는 생략 가능하므로, alert()와 innerWidth와 같이 사용하는 것도 가능합니다.

[ DOM ]

• DOM은 HTML, XML 또는 XHTML 문서의 구조를 표현하는 객체 지향적인 표현 방식입니다.

• 웹 페이지의 요소(element)들을 트리 구조로 표현하며, 각 요소는 노드(node)라고 불리는 객체로 표현됩니다.

• DOM을 통해 JavaScript는 문서의 구조, 스타일, 내용 등을 동적으로 조작할 수 있습니다.

• DOM은 HTML 요소에 접근하고 조작하기 위한 다양한 메서드와 속성을 제공합니다. 예를 들어, getElementById(), querySelector(), innerHTML 등을 사용하여 요소를 선택하거나 내용을 변경할 수 있습니다.

• DOM은 웹 페이지의 상호작용과 동적인 변경을 가능하게 해주는 핵심적인 요소로, JavaScript에서 웹 페이지와의 상호작용을 구현하는 데 사용됩니다.

03. Event

[ Event ]

JavaScript에서 이벤트는 웹 페이지나 애플리케이션에서 발생하는 사용자의 동작이나 시스템 상태 변화를 감지하고, 이에 대한 응답을 처리하는 메커니즘입니다. 이벤트는 HTML 요소나 JavaScript 객체에서 발생할 수 있으며, 특정 동작이나 상태 변화에 대응하여 코드를 실행할 수 있도록 도와줍니다.

[ Event Bubbling과 Event Capturing ]

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)은 HTML 요소 간에 중첩된 구조에서 이벤트가 전파되는 방식을 설명하는 개념입니다.

1. 이벤트 버블링 (Event Bubbling):

   • 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 현상을 의미합니다.

   • 예를 들어, <div> 요소 안에 <p> 요소가 있고, <p> 요소를 클릭할 때 해당 이벤트가 발생하면, 이벤트는 <p> 요소에서 시작하여 <div> 요소, 그리고 상위 요소들로 전파됩니다.

   • 이벤트 버블링은 부모 요소로 이벤트가 전파되므로, 상위 요소에서도 동일한 이벤트를 처리할 수 있습니다.

   • 이벤트 리스너를 상위 요소에 등록하면 하위 요소에서 발생한 이벤트도 감지할 수 있습니다.

2. 이벤트 캡처링 (Event Capturing):

   • 이벤트 캡처링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 현상과 반대로, 상위 요소에서 시작하여 이벤트가 발생한 요소까지 전파되는 현상을 의미합니다.

   • 이벤트 캡처링은 이벤트가 발생한 요소의 최상위 부모 요소부터 시작하여 하위 요소로 전파됩니다.

   • 이벤트 캡처링은 이벤트 리스너를 상위 요소에 등록하고, 하위 요소에서 발생한 이벤트를 상위 요소까지 전파하여 처리할 수 있습니다.

      

[ Event Delegation ]

이벤트 위임(Event Delegation)은 상위 요소에 이벤트 리스너를 등록하여 하위 요소들의 이벤트를 처리하는 방식

04. 자바스크립트 중급

[ this ]

• Method의 this: 해당 객체를 가리킨다.

• 함수에서 this: window 객체를 가리킨다.

• constructor의 this: 빈 객체를 가리킨다.

   

[ bind, call, apply]

• call():

  함수를 호출하는 함수.

  • 첫 번째 인자 값으로 어떠한 것을 전달해 주면 호출되는 함수의 this가 인자 값으로 지정

• apply(): call()과 유사하나 인수 부분에 배열을 넣어줘야함.

• bind(): 해당 함수가 지정한 인자 값을 가리키도록 하지만 call(), apply()와 다르게 직접 함수 실행 X

   

[ 삼항 연산자 ]

? 앞의 조건을 기준으로 조건이 참이면 : 앞의 있는 부분을 반환하고 거짓이면 뒷부분 반환 

[ Event Loop]

이벤트 루프(Event Loop)는 JavaScript에서 비동기 작업을 처리하는 동작 메커니즘입니다. 이벤트 루프는 단일 스레드 환경에서 비동기 작업을 효율적으로 처리하기 위해 사용됩니다.

[ Closure ]

다른 함수 내부에 정의된 함수가 있는 경우, 외부 함수가 실행을 완료하고 해당 변수가 해당 함수의 외부에서 더 이상 엑세스할 수 없는 경우에도, 해당 내부 함수는 외부 함수의 변수 및 액세스가 가능하다. 이 기능을 Closure라고 부른다.

[ 구조 분해 할당 ]

배열이나 객체의 속성을 분해하여 사용할 수 있는 형태로 만드는 것

[ Map, Filter, Reduce ]

Map, Filter, Reduce은 배열 메서드의 대표적인 예시이다.

• map(): 배열 내의 모든 요소 각각에 대하여 동작을 수행하고 나온 결과를 새로운 배열로 만들어 반환한다.

• filter(): 기존 배열의 필터를 통과하는 요소만을 새로운 배열로 반환한다.

• reduce(): 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환한다.

[ 얕은 복사 VS 깊은 복사 ]

깊은 복사(Deep Copy): 원본 객체의 모든 내용을 복사하여 새로운 객체를 생성합니다. 얕은 복사(Shallow Copy): 원본 객체의 참조만을 복사하여 동일한 객체를 가리키는 새로운 객체를 생성합니다.

[ 함수 표현식, 함수 선언문 ]

• 함수 선언문: 함수 선언은 함수를 만들고 이름을 지정하는 것이다.

  • 일반적인 함수 선언 방식으로 function 키워드와 식별자를 표기하여 사용한다.

• 함수 표현식은 함수를 만들고; 변수에 할당하는 것이다.

  • 익명 함수(function 키워드는 사용했으나 식별자 X), 화살표 함수 사용

05. OOP

객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 프로그래밍 패러다임 중 하나로, 현실 세계의 개념과 개체들을 프로그램의 구조로 모델링하는 방식입니다. OOP는 코드의 재사용성, 유지보수성, 확장성 등을 향상시킬 수 있는 다양한 개념과 기법을 제공합니다.

OOP의 주요 개념은 다음과 같습니다:

1. 클래스(Class):

   • 클래스는 객체를 생성하기 위한 설계도 또는 템플릿으로, 속성(멤버 변수)과 동작(메서드)을 포함합니다.

   • 예를 들어, '사람' 클래스는 '이름'과 '나이'라는 속성을 가지고 '인사하기'라는 동작을 수행할 수 있습니다.

2. 객체(Object):

   • 클래스의 인스턴스로, 실제로 메모리에 할당된 개체입니다.

   • 객체는 클래스에서 정의한 속성과 동작을 가지며, 각각의 객체는 독립적인 상태를 유지합니다.

   • '사람' 클래스의 객체로는 '철수'나 '영희' 등이 있을 수 있습니다.

3. 상속(Inheritance):

   • 상속은 클래스 간의 계층 구조를 구성하여 코드의 재사용성을 높이는 개념입니다.

   • 부모 클래스(상위 클래스)의 속성과 동작을 자식 클래스(하위 클래스)가 물려받아 사용할 수 있습니다.

   • 상속을 통해 일반적인 기능을 가진 부모 클래스를 정의하고, 이를 기반으로 특화된 자식 클래스를 만들 수 있습니다.

4. 다형성(Polymorphism):

   • 다형성은 동일한 메서드를 다양한 방식으로 호출할 수 있는 개념입니다.

   • 하나의 메서드가 다른 클래스의 객체에 따라 다른 동작을 수행할 수 있습니다.

   • 다형성은 상속과 함께 사용되어 코드의 유연성과 확장성을 높여줍니다.

5. 캡슐화(Encapsulation):

   • 캡슐화는 관련된 속성과 동작을 하나의 단위로 묶는 개념입니다.

   • 클래스는 내부의 속성과 동작을 외부로부터 숨기고, 외부에서는 제공된 인터페이스를 통해 클래스와 상호작용합니다.

   • 캡슐화는 데이터의 은닉과 코드의 모듈화를 가능하게 합니다.

06. 비동기

[ 동기 비동기 ]

동기(Synchronous)는 작업을 순차적으로 실행하고, 이전 작업이 완료될 때까지 다음 작업을 실행하지 않는 방식입니다. 작업이 순서대로 진행되기 때문에 실행 순서가 보장되며, 결과를 예측하기 쉽습니다. 하지만 작업이 완료될 때까지 대기해야 하므로 다른 작업을 처리하는 동안 시간이 지체될 수 있습니다.

비동기(Asynchronous)는 작업을 동시에 실행하고, 이전 작업의 완료 여부와 상관없이 다음 작업을 실행하는 방식입니다. 작업이 백그라운드에서 동시에 처리되기 때문에 실행 순서가 보장되지 않을 수 있습니다. 비동기 방식은 작업이 완료되기를 기다리지 않고 다른 작업을 처리할 수 있으므로 시간을 효율적으로 활용할 수 있습니다.

07. Iterator, Generator

[ Symbol ]

Symbol(심볼)은 ECMAScript 6에서 추가된 원시 데이터 타입입니다. 심볼은 고유하고 변경 불가능한 값으로, 주로 객체의 속성 키로 사용됩니다. 심볼은 Symbol() 함수를 통해 생성되며, 생성된 심볼은 다른 심볼과 절대로 동일하지 않습니다.

심볼은 유일성과 불변성을 보장하기 때문에 객체의 속성 키로 사용하면 충돌을 방지하고 예상치 못한 동작을 방지할 수 있습니다. 또한, 심볼은 접근할 수 없는 외부에서 속성을 덮어쓸 위험을 줄여줍니다. 예를 들어, 두 개의 객체가 동일한 심볼을 속성 키로 사용하더라도 실제로는 서로 다른 속성을 가지게 됩니다.

[ Iterator ]

Iterator(이터레이터)는 JavaScript의 내장 프로토콜 중 하나로, 반복 가능한 객체(Iterable)에서 요소를 차례대로 가져오는 방법을 제공하는 인터페이스입니다. 이터레이터는 next() 메서드를 사용하여 다음 요소를 반환하고, { value, done } 형태의 객체로 값을 전달합니다. value에는 다음 요소의 값이 들어있고, done은 이터레이터가 더 이상 요소를 가지고 있지 않을 때 true가 됩니다. Symbol.iterator 메서드를 사용하여 이터레이터를 반환하는 것이 일반적입니다.

[ Generator ]

Generator(제너레이터)는 이터레이터를 생성하는 함수입니다. 제너레이터 함수는 function* 키워드로 정의되며, 함수 내부에서 yield 키워드를 사용하여 값을 반환하고 일시적으로 실행을 중지하며, next() 메서드를 호출함으로써 다시 시작할 수 있습니다. 제너레이터 함수를 호출하면 제너레이터 객체가 반환되며, 이 객체는 이터레이터 프로토콜을 따르기 때문에 next() 메서드를 사용하여 값을 가져올 수 있습니다.

08. Design Pattern

디자인 패턴의 장점

• 재사용성과 유지보수성 향상

• 코드 가독성과 이해도 향상

• 소프트웨어의 확장성과 유연성

• 설계의 일관성과 표준화

• 문제 해결 과정의 가속화

• Singleton Pattern: 특정 클래스의 인스턴스를 전역에서 하나만 생성하고 접근할 수 있도록 하는 디자인 패턴입니다.

• Factory Pattern: 객체를 생성하는 인터페이스를 정의하고, 이를 서브 클래스에서 구현하여 객체 생성을 캡슐화하는 디자인 패턴입니다.

• Mediator Pattern: 객체들 간의 상호작용을 중재하는 중재자 객체를 도입하여 결합도를 낮추고, 객체 간의 직접적인 통신을 제어하는 디자인 패턴입니다.

• Observer Pattern: 한 객체의 상태 변화에 따라 다른 객체들에게 자동으로 변화를 알리고, 그에 따른 처리를 할 수 있도록 하는 디자인 패턴입니다.

• Module Pattern: 모듈화된 코드를 구성하여 캡슐화하고, 필요한 부분만 노출시키며 코드의 재사용성과 유지보수성을 향상시키는 디자인 패턴입니다.

   

  ---

느낀점 및 각오

자바스크립트의 중요성에 대하여 다시 한 번 크게 느낄 수 있었던 1주차였습니다. 자바스크립트 지식을 탄탄히 쌓고 배운 것들을 항상 이해하고 프로젝트에 적용까지 하며 기초를 상시 이해하며 면접준비까지 탄탄하게 해야겠다는 생각이 들었습니다. 남은 기간 동안에도 과제 수행을 열심히하며 저의 성장을 위해 최선을 다해보겠습니다! 감사합니다.