[인프런 워밍업 스터디 클럽 2기 FE] 정지형 1주차 발자국

💡 1주차 회고

강의를 듣기만 하고 따로 적어두진 않아서 정리하는데 오래걸렸다...! 다음주부터는 들으면서 해야겠다.

미션같은 경우 순수 js로 구현해본적이 없어서 어려울거라 생각했는데 막상 해보니 괜찮았다.

단 효율적인 코드로 작성한건지는 모르겠다...!

 

일단 기능만 구현하고 스타일은 꾸미지 않았는데 시간 나는 대로 틈틈히 스타일도 추가로 작업해야겠다.

역시 스타일이 안들어가니 허전해.. 🤔

 

직장인이라서 진도를 따라갈 수 있을까 했는데 이번주와 다음주에 공휴일이 있어서 다행이다. 럭키비키잖아🍀

다음주도 열심히 뚠뚠 🐜 가보자고!

📝 강의 내용 요약

• 섹션 2 자바스크립트 기초

  • console객체

    • 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공

    • log뿐만 아닌 time, table, clear...다양한 메서드가 있음.
      

  • var, let, const

    • 변수 선언 방식

      • var - 중복 선언과 재할당 가능

         

      • let(ES6) - 중복 선언 불가, 재할당 가능

      • const(ES6) - 중복 선언과 재할당 불가

    • 유효한 참조 범위(scope)

      • 함수 레벨 스코프(function-level scope) - var

      • 블록 레벨 스코프(block-level-scope) - let, const

    • 호이스팅(Hoisting)

      • 코드가 실행되기 전 변수 및 함수 선언이 로컬 범위의 맨 위로 끌어올려지는 경우를 말함.
        

      • 변수생성 과정

        • 선언단계 =[ TDZ(일시적 사각지대) ] => 초기화단계(undefined값 할당) => 할당 단계 (값 할당)
          

      • 타입별 변수 호이스팅

        • var - 선언, 초기화

        • 함수 선언문 : 선언, 초기화, 할당

        • let, const - 선언 (선언 전 접근시 TDZ로 오류발생)
          

  • 자바스크립트 타입 (동적 타입)

    • 원시 타입 (number

      , string

      , boolean,

      undefined

      , null

      , symbol

      • bigInt)

      • 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당

    • 참조 타입 (object

      , arrays

      , functions, classes, ...

      )

      • 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당

       

  • 타입변환

    • js 변수는 새 변수 및 다른 데이터 유형으로 변환할 수 있습니다.

      
      1. js 함수를 사용하여,
      2. js 자체에 의해 자동으로
      • 문자열과 숫자: + 연산 시 숫자가 문자열로 변환됨.

       

       

      • 숫자 연산: -, *, /에서 문자열이 숫자로 변환됨.

      
      • 비교: == 연산 시 두 값 중 하나가 다른 타입으로 변환됨.

       

       

      • Boolean 컨텍스트: if나 while 같은 논리적 평가 시 다양한 값이 true나 false로 변환됨.

       

       

      • 숫자와 불리언: 숫자 연산 시 true는 1, false는 0으로 변환됨.
      

  • Math객체

  • Template Literals - backtick(`) 줄바꿈을 쉽게할 수 있고 문자열 내부에 표현식 포함할 수 있게됨.

  • Loops

    • 루프의 종류

      • for - 코드 블록 여러번 반복

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

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

      • do/while - 조건이 true인지 검사하기 전 코드 블록 한 번 실행 이후 조건이 true인 동안 루프 반복
        

• 섹션 3 Window 객체 및 DOM

  • window Object

    • 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)를 나타냅니다.

    • 또한 window는 브라우저의 객체이지 js의 객체가 아닙니다.
      이 window 객체를 이용해서
      1.

      이 브라우저 창에 대한 정보와 제어를 할 수 있고
      2.

      var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 됨.

  • dom(문서 객체 모델) - 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌.

  • 웹 페이지 빌드 과정(Critical Rendering Path CRP)

    • 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정

  • document object

    • 브라우저 내에서 콘텐츠를 보여주는 웹페이지 자체

    • 객체 사용시 웹 페이지의 상태와 모든 HTML 태그에 접근 가능

    • 요소 탐색
      

    • 요소 생성 createElement

    • 요소 삭제 removeChild

    • 요소 교체 replaceChild

• 섹션 4 Event

  • EventListener - 이벤트가 발생했을때 어떠한 액션을 위한 함수를 호출. 해당 함수가 이벤트 리스너

  • addEventListerner() - 이벤트 리스너를 객체나 요소에 등록해야 사용가능. 등록해주는 함수

  • Event 종류

    • UI 이벤트

    • 키보드 이벤트

    • 마우스 이벤트

    • 포커스 이벤트

    • 폼 이벤트

  • Event Bubbling

    • 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것
      [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]
      

  • Event Capturing

    • 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것
      [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]
      

  • 이벤트의 3단계 흐름

    
    1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
    2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계
    3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계
    [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]
    

  • Event Delegation - 하위요소의 이벤트를 상위 요소에 위임(제어)하는 것
    
    [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]
    

• 섹션 5 자바스크립트 중급

• 자바스크립트 this

  • 함수에서 this 사용 => Window 객체를 가리킴

  • 메소드에서 this 사용=>해당 객체를 가리킴

  • constructor 함수에서 this 사용 =>빈 객체를 가리킴

  • forEach(callback, thisArg)

  • 화살표 함수에서 this 사용 => 상위 스코프의 this를 가리킴(Lexical this)

• bind, call, apply 메소드

  • 함수의 this 컨텍스트를 제어

const person1 = {
	firstName: “John”,
	lastName: “Doe”
}
-------------------------------------
const fullName = function() {
  console.log(this.firstName + “ “ + this.lastName);
}
//call()
fullName.call(person1);
-------------------------------------
const fullName = function (city, country) {
	console.log(`${this.firstName}, ${this.lastName}, ${city}, ${country}`);
}

fullName.call(person1, "Oslo", "Norway"); // 인수 넣어 사용 가능
//apply()
fullName.apply(person1, ["Oslo", "Norway"]); // call 메서드와 비슷하지만 인수에 배열넣어야 함.
-------------------------------------
//bind()
function func(language) {
	if (language === “kor”) {
		console.log(`language: ${this.korGreeting}`);
	} else {
		console.log( (`language: ${this.engGreeting}`);
	}
}


Const greeting = {
	korGreeting: “안녕 “,
	engGreeting: “Hello “,
};

Const boundFunc = func.bind(greeting);
boundFunc(‘kor’); //call, apply와 다른 점 직접 함수를 실행하지 않고 반환 ㅁ

• 조건부 삼항 연산자 (result ? result = "" : result = "")

• Event Loop

  • 자바 스크립트 동기 코드인데 비동기 코드를 작성하기 위해
    브라우저에서 사용한다면 브라우저 api (window object)
    Node에서 사용한다면 Node api(global object) 사용.

  • web API 실행시 내부 진행
    [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #4 자바스크립트 중급, 인프런 강의]

  • 자바스크립트 엔진

    • 메모리 힙 - 메모리 할당이 발생 (변수를 정의하면 저장되는 창고)

    • 호출 스택 - 코드가 실행될 때 스택들이 이곳에 쌓임.
      [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #4 자바스크립트 중급, 인프런 강의]

• undefined vs null

  • 둘다 원시 자료형

  • undefined = 아무 값도 할당받지 않은 상태

  • null = 비어있는, 존재하지 않는 값

     

• Map, Filter, Reduce

• Closure

  • 다른 함수 내부에 정의딘 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있음.

• Destucturing

  • 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식

  • let { accessory, animal, color } = animalData;

• 전개 연산자

  • 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용.

  • const arr = [...arr1, ...arr2];

• 얕은 비교 vs 깊은 비교

  • 얕은 비교

    • 숫자, 문자열 등 원시 자료형은 값을 비교

    • 배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조디는 위치를 비교

  • 깊은 비교

    • 객체의 경우에도 값으로 비교

      • Object depth가 깊지 않은 경우 : JSON.stringfy() 사용

      • Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용

• 얕은 복사 vs 깊은 복사

  • 얕은 복사

    • 중첩된 배열이나 객체가 있다면 따라서 변경됨.

    • spread operator, Object assign, Array.from(), slice, shallow copy

    • Object.freeze() - 얕은 동결 : 객체를 동결합니다. 중첩된 구조에서 올바른 역할을 수행하지 못함.

  • 깊은 복사

    • 중첨된 곳에 따로 spread operator 사용

    • lodash 라이브러리를 이용한 deepCopy

    • structuredClone

• const 참조 타입 데이터 변경

  • const array = ["A", "B", "C"];

  • array.push("D");

  • call stack에 reference ID는 같고 heap memory값만 바뀌어서 에러가 나지 않음.

• 함수 표현식 vs 함수 선언문

  • 예시

    // 함수 표현식
    function funcDeclaration() {
        return '함수 선언문';
    }
    // 함수 선언문
    let funcDeclaration = function () {
        return '함수 표현식';
    }

  • 함수 선언식은 호이스팅에 영향을 받지만 표현식은 받지 안음.

    
    

• strict mode

  • 엄격모드는 제한된 버전을 선택하여 암묵적인 느슨한 모드를 해제하기 위한 방법

  • 적용방법

    • 파일에 "use strict" 지시자 입력

    • 함수 안에 "use strict" 사용해서 그 함수만을 위해서 strict mode를 적용

    • class를 사용하면 자동으로 strict mode가 적용됨

• Intersection observer

  • 기본적으로 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별

• Pure Function

  • 순수 함수의 규칙

    • 1. 같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴한다. (same input => same output)

    • 2. 사이드 이펙트를 만들지 않는다. (no dise effects)

  • 사용하는 이유

    • 1. 클린 코드를 위해서

    • 2. 테스트를 쉽게하기 위해서

    • 3. 디버그를 쉽게 하기 위해서

    • 4. 독립적인 코드를 위해서(Decoupled / Independent)

• Curry function

  • f(a,b,c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것

• 자바스크립트 엔진

  • 자바스크립트를 실행하려면 자바스크립트 엔진이 필요.

  • 브라우저에는 자바스크립트 엔진이 있어서 실행 가능.

• IIFE(Immediately Invoked Function Expression)

  • 정의되자마자 즉시 실행되는 함수를 말한다.

  • 사용하는 주된 이유는 변수를 전역으로 선언하는 것을 피하기 위함.

  • 내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있음.

  • 첫 번째() 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근

  • 두번 째() 소괄호 => 즉시 실행 함수를 생성하는 괄호

( function() {
    // Do fun stuff
  }
)()

• 섹션 6 OOP ( 객체 지향 프로그래밍)

   

  • 하나의 문제 해결을 위한 독립된 단위 "객체"들의 모임

  • 알아보기 쉽고 재사용성이 높아짐

  • 특징

    • 자료 추상화

      • 불필요한 정보는 숨기고 중요한 정보만 표현해 프로그램 간단히 만드는 것

    • 상속

      • 기존 클래스의 자료와 연산을 이용할 수 있게 하는 기능

    • 다형성

      • 한 요소에 여러개념을 넣어 놓는 것

         

      • 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있는 것.

      • 클래스 & 오버 라이딩 - 자식 클래스의 메서드가 부모 클래스의 메서드와 다르게 동작하거나 변수가 다른 값으로 지정될 수 있음.

    • 캡슐화

      • 클래스 안에 관련 메서드, 변수를 하나로 묶어줌

      • 바깥에서의 접근을 막아 보안이 강화되고 잘 관리되는 코드 제공

  • prototype & prototype chain

    • 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘.

  • sub class(Inheritance) - extends 키워드를 사용해 부모클래스 기능 그대로 자식 클래스를 만들 수 있음

  • super() - 부모 생성자 호출

  • ES6 classes

    • static 정적 메서드 사용 - "prototype"이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있습니다.

    • 사용 예시

class Person {
  // 생성자(constructor)는 클래스의 인스턴스가 생성될 때 호출됩니다.
  constructor(name, age, job) {
    this.name = name;  // 클래스의 속성 설정
    this.email = email;
    this.birthday = new Date(birthday);
  }

  // 메서드 정의: 클래스 내의 함수
  introduce() {
    return `Hello my name is ${this.name}`;
  }
  
  static multipleNumbers(x, y) {
    return x * y;
  }
}

console.log(Person.multipleNumbers(2, 9);

• 섹션 7 비동기

  • 시간이 오래 걸리는 작업을 먼저 시작하고, 그 작업이 끝나지 않아도 다음 작업을 먼저 처리.

    
    (<->) 동기 - 작업이 순차적으로 진행되어, 앞선 작업이 끝날 때까지 다음 작업을 실행하지 않음.

     

  • callback, promise 그리고 Async/Await

    • 비동기 요청이 여러개 있을 때 하나의 요청이 다른 요청의 결과에 의존해야하는 경우 사용

      [출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #6 비동기,인프런 강의 ]

     

👩🏻‍💻 미션

1번 (Day2)
음식 메뉴 앱

2번 (Day3)
가위 바위 보 앱

3번(Day4)
퀴즈 앱

4번(Day5)

책 리스트 나열 앱

5번(Day5)

Github Finder 앱