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

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

강지원 28일 전

따라하며 배우는 자바스크립트 A~Z (1~7강)

 

Day 1 (OT)

프론트엔드가 꼭 알아야 하는 기술들과 포트폴리오를 만들 때는 어떤 프로젝트 위주로 넣는 것이 좋은지 알 수 있었다. 도움이 되는 정보를 많이 주셔서 좋았고 스터디도 기대가 됐다.

오티 때 가졌던 마음 가짐 그대로 완주까지 열심히 할 수 있으면 좋겠다.

 

Day 2 (자바스크립트 기초)

  • 변수의 참조 범위

 * var : 함수 레벨 스코프
 * 함수 내에서 선언된 변수는 함수 내에서만 유효
 * 함수 외부에서 참조할 수 없음
 
 * let, const : 블록 레벨 스코프

  • 호이스팅

 * var
 * 호이스팅이 됨 (선언 당시에 undefined을 할당)
 * 이후 할당 되었을 때 hello라는 값이 들어감
 * 초기화 되기 전에 값을 사용할 수 있음
 
 * let, const
 * 호이스팅은 되지만 초기화 되기 전에 어떤 값도 할당해주지 않음
 * TDZ : Temporal Dead Zone (변수를 사용할 수 없는 일시적인 비활성 상태)
 * TDZ가 존재하기 때문에 초기화 되기 전에 값을 사용할 수 없음

  • DOM

 * 웹 페이지 빌드 과정 (Critical Rendering Path - CRP)
 * html 분석 -> dom tree 생성 -> css dom tree 생성 -> 합쳐서 렌더링 트리 생성
 * -> 레이아웃 단계 : 배치할 요소의 위치와 크기를 계산 -> Paint : 실제로 그려짐
 * 렌더링 트리 생성, 위치 계산과 그리는 단계의 비용이 큼
 * 리액트는 이러한 부분의 성능을 개선하기 위해 virtual DOM을 이용함

  • 이벤트

 * 비동기 작업인 setTimeout은 WebAPI에서 처리해줌
 * setTimeout이 일정 초를 기다리면 콜백 큐로 함수가 이동함
 * 비동기 작업이 Callback Queue에 쌓이고
 * 이벤트 loop는 콜스택과 콜백큐를 모두 주시하고 있다가
 * 콜스택이 비게 되면 콜백큐에서 하나씩 꺼내서 콜스택에 넣어줌

  • 이벤트 버블링, 이벤트 캡쳐링

 * 이벤트의 흐름은 3단계를 거치게 됨
 * 1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
 * 2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계
 * 3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계
 
 * 이벤트 버블링
 * 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것
 * 위로 전달되면서 상위 요소의 event handler가 차례로 실행됨
 
 * 이벤트 캡쳐링
 * 이벤트가 위에서 아래로 내려가는 것

 

Day 3 (자바스크립트 중급 1)

  • this

 * this
 * 메소드(객체안에 있는 함수)에서 this 사용 => 해당 객체를 가리킴(참조)
 * 함수에서 this 사용 => window 객체를 가리킴
 * strict 모드에서는 함수에서 this 사용 => undefined을 가리킴
 * constructor 함수에서 this 사용 => 빈 객체를 가리킴
 
// 화살표 함수 this => 항상 상위 scope의 this
// Lexical this
const my_audio = {
  title: "audio",
  categories: ["rock", "pop", "hiphop"],
  displayCategories() {
    // 여기서 this는 이 객체를 가리킴
    this.categories.forEach((category) => {
      // 여기서 this는 상위 scope에 있는 this를 가리킴. 즉, 이 객체
      console.log(`title: ${this.title} category: ${category}`);
    });
  },
};

 * forEach의 두번째 매개변수 => thisArg
 * 콜백 함수에서 this로 참조할 수 있게 됨

const my_audio2 = {
  title: "audio",
  categories: ["rock", "pop", "hiphop"],
  displayCategories() {
    this.categories.forEach(
      function (category) {
        // 이 this는 함수안에 있기 때문에 window를 가리킴
        console.log(`title: ${this.title} category: ${category}`);
      },
      { title: "audio" } // 두번째 매개 변수를 작성하게 되면 this가 이 object를 가리킴
      // this // 여기에 this를 작성하게 되면 이 this는 메소드 안에 있는 것이 됨. 따라서 이 객체를 참조함
    );
  },
};

  • closure

 // 예시 함수
 function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log("Outer Variable: " + outerVariable);
    console.log("Inner Variable: " + innerVariable);
  };
}

const newFunction = outerFunction("outside");
newFunction("inside");
 
 * 순서
 * 1. outerFunction("outside")는 newFunction에 할당되는 즉시 호출됨
 * 2. 호출되면 newFunction에는 innerFunction(innerVariable)이 할당됨
 * 3. newFunction("inside")을 호출하면 innerFunction("inside")이 호출되고
      이때 클로저는 innerFunction이 outerVariable이 "outside"였다는 것을 기억하고 엑세스 할 수 있다는 것을 말함
 
 * Closure 정리
 * 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고
 * 해당 변수가 해당 함수 외부에서 더 이상 엑세스할 수 없는 경우에도
 * 해당 내부 함수는 외부 함수의 변수 및 범위에 엑세스할 수 있다.

this와 closure는 어렴풋이 이해만 하고 막상 설명을 하려고 하면 말이 잘 안나오던 개념이었다. 강의를 2, 3번 반복해서 듣고 다른 자료도 같이 찾아보면서 공부했더니 이번 기회에 확실히 설명할 수 있을 정도로 이해할 수 있었다. 뿌듯하다.

 

Day 4 (자바스크립트 중급 2)

  • undefined vs null

* 공통점
* 둘 다 원시 자료형, 각 타입(undefined, null)에서 각 값이 유일함

* undefined
* 아무 값도 할당받지 않은 상태
* js 엔진이 변수를 초기화하기 위한 용도
* 개발자가 의도적으로 값이 없음을 표현하고 싶다면 null이 적절함

* null
* 비어있는, 존재하지 않는 값을 의미
* null이 할당 되면 가비지 콜렉션이 수행됨

  • 얕은 비교 vs 깊은 비교

* 얕은 비교
* 원시 자료형 -> 값을 비교
* 참조 자료형 -> 참조되는 위치 비교

* 깊은 비교
* 원시, 참조 자료형 -> 값을 비교

  • 얕은 복사, 얕은 동결 vs 깊은 복사, 깊은 동결

* 얕은 복사
* Object.assign(target, source), spread operator
* 첫번째 depth 즉, 얕은 부분만 복사가 되기 때문에 얕은 복사

* 얕은 동결
* Object.freeze(object)
* 역시 얕은 동결이기 때문에 깊은 곳은 동결이 일어나지 않음

* 깊은 복사
* JSON.parse(JSON.stringify())
* spread operator : 얕은 복사를 여러번 반복하는 것과 동일한 효과
* structuredClone()
* deep copy는 주로 lodash, Ramda등 라이브러리를 이용함

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

* 함수 선언문은 호이스팅 영향 o
* 함수 표현식은 호이스팅 영향 x

  • IIFE (Immediately Invoked Function Expression)

* 정의되자마자 즉시 실행되는 함수
* 형태
( // 첫 번째 소괄호 -> 전역 선언을 막고, 함수 내부로 다른 변수 접근을 막음
	function () {
		// Do Something...
	}
)() // 두 번째 소괄호 -> IIFE를 생성하는 괄호

* 목적
* 전역 선언을 막고, 함수 내부로 다른 변수 접근을 막기 위함
* 이름 없는 함수를 만들기 위해 사용

* 연산자를 붙여서도 사용 가능하지만 화살표 함수는 (를 꼭 붙여야함

  • Pure Function

* 함수형 프로그래밍 패러다임의 한 부분

* 규칙
* 1. 같은 입력 값이 주어졌을 때, 언제나 같은 결과 값을 리턴함
* 2. 사이드 이펙트를 만들지 않음 (외부 상태에 영향을 받으면 안됨)

* 사용하는 이유
* 1. 클린 코드를 위해서
* 2. 테스트를 쉽게 하기 위해서
* 3. 디버그를 쉽게 하기 위해서
* 4. 독립적인 코드를 위해서 (decoupled / independent)

* 장점
* 1. 특정 함수가 다른 함수에 미치는 예기치 못한 영향을 최소화
* 2. 함수가 어떤 결과 값을 리턴할지 예측할 수 있음

  • currying

// curring function
// static (매개 변수를 동적으로 늘리지 못함)
function curry(f) {
  return function (a) {
    return function (b) {
      return function (c) {
        return f(a)(b)(c);
      };
    };
  };
}

// dynamic
// 매개 변수가 몇개든 curry로 바꿔줄 수 있음
function curry2(func) {
  return function curried(...args) {
    if (args.length >= func.length) {
      return func.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

 

Day 5 (OOP, 비동기)

  • prototype

* prototype
* 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속 받는 메커니즘
* prototype chain이라고도 함
* 더 적은 메모리, 코드 재사용성 증가

* 반복해서 사용되는 메소드가 있다면 prototype에 넣어주는 것이 좋음
* ObjectName.prototype.mathodName = ~~
* Object.create(함수 이름)
// 사용 예시
function Person(name, email, birthday) {
  const person = Object.create(personPrototype);
  person.name = name;
  person.email = email;
  person.birthday = birthday;
  return person;
}

const personPrototype = {
  calculateAge() {
    const diff = Date.new() - this.birthday.getTime();
    const ageDate = new Date(diff);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  },
};

  • ES6 class

* 문법은 OOP방식을 이용하지만 내부에서는 prototype을 사용하여 작동
* 메소드가 자동으로 prototype에 들어감

* static을 사용하면 prototype에 들어가지 않고 constructor에 들어감
* 사용할 때는 인스턴스가 아닌 class 이름을 이용해서 사용해야 함

* static을 사용하는 경우
* 클래스의 필드를 사용하지 않는 독립적인 것을 생성할 때 사용

  • super

* super
* 부모 클래스의 생성자를 호출할 때 사용
* 부모 클래스의 메소드를 호춯할 때 사용

  • CallBack, Promise, Async Await

* JS는 싱글스레드 : 한번에 하나의 일 밖에 못함
* 비동기를 사용하면 병렬적으로 작업을 수행할 수 있음

* 비동기 작업이 어떠한 비동기 작업을 의존하고 있을 경우
* -> CallBack, Promise, Async Await을 사용해서 처리할 수 있음

* Callback
* 단점
* 1. 가독성이 떨어짐
* 2. 모든 콜백에서 각각 에러 핸들링을 해줘야 함

* Promise (ES6)
* 3가지의 상태로 나뉨
* pending(대기) : 비동기 로직을 처리 중인 상태
* fulfilled : 처리가 완료되어 결과값을 반환한 상태
* rejected : 비동기 처리가 실패하거나 오류가 발생한 상태

* Promise.all([]) : 배열 안에 있는 모든 작업이 fulfilled 상태가 되어야 성공으로 침
* 하나라도 rejected될 경우 첫 번째로 실패한 작업의 이유가 반환됨

* Promise.race([]) : Promise
* 배열 안에 있는 작업 중 가장 먼저 완료된 것의 결과 값을 그대로 이행하거나 거부

* Async Await (ES7)
* 비동기 요청을 동기식으로 작성 가능하게 해줌
* 가독성이 좋음

 

일주일 회고

  • 단순한 JS 문법이 아닌 내부에서 JS가 어떻게 동작하는지, 개념의 정확한 설명이 무엇인지 등을 깊게 공부할 수 있던 시간이었습니다.

  • 제가 JS의 어떤 부분이 부족한지 뼈저리게 느낄 수 있었고, 앞으로 더 성장할 수 있다는 생각으로 열심히 공부해보려고 합니다.

  • 강의를 수동적으로 듣지 않고 코드도 작성해보고 추가적으로 궁금한 부분을 찾아보면서 능동적으로 공부했더니 더 머리에 잘 남은 것 같습니다.

  • 앞으로의 스터디도 능동적으로 참여해서 강의 내용을 제 것으로 만드는 것이 목표입니다.

  • 과제를 만들면서 js에 대한 이해도가 정말 많이 높아진 것이 스스로 느껴집니다.

 아쉬운 점

  • 스터디 첫 주이다 보니 정말 기억하고 싶은 부분만 작성을 해두었는데도 내용이 너무 길어진 것 같아 아쉽습니다.

  • 2주차부터는 조금 더 가독성 있는 회고를 작성하고 싶습니다.

 

강의 출처

강의 주소 : https://www.inflearn.com/course/따라하며-배우는-자바스크립트/

코치님 성함 : John Ahn

 

댓글을 작성해보세요.

채널톡 아이콘