🔍 프론트엔드 데브코스 5기 TIL 231004 - 231010 WIL

💻 Intro

3주차 과제와 함께 본격적으로 Vanilla JS를 통해 프로그래밍하는 법에 대한 강의를 수강하니 시간이 엄청 부족했다. 매일 TIL을 작성할 여력이 없어 3주차 과제를 마무리하고 배운 내용을 복기한다.

🧐 이번 주 새롭게 배운 것

JavaScript 사전 퀴즈

사전 퀴즈를 통해 JavaScript로 프로그래밍하면서 놓칠 수 있는 사소하지만 중요한 포인트들을 배웠다.

this

• 실행자 함수 내에서 this
  생성자 함수에서 new 연산자를 붙이지 않고 호출하게 되면 this가 전역 객체에 바인딩되어 버린다. 아래 예시에서는 전역객체에 this가 바인딩 되므로 속성을 찾을 수 없어 에러가 발생한다.
  

function Person(name, age) {
 this.name = name;
 this.age = age;
}
const person1 = Person('ikjun', 11); // this가 전역 객체에 바인딩
console.log(person1.name);
/*
 Uncaught TypeError: Cannot read properties of undefined (reading 'name') 
 전역객체에는 name 속성이 없으므로 에러가 발생
*/

이것을 방지하기 위해서는 생성자 함수에 new 키워드를 붙여 새로운 객체에 this를 바인딩해줘야 한다.

const person1 = new Person('ikjun', 11); // this가 Person 객체에 바인딩
console.log(person1.name); // ikjun, 정상 출력

• 메서드 안에서의 this
  함수가 객체의 속성 값이면 메소드로 호출된다. 이때 메소드 내부의 this는 본인을 소유한 객체에 바인딩된다.

const obj1 = {
  name: 'Cho',
  sayName: function () {
    console.log(this.name); // 여기서 this는 obj1
  },
};
const obj2 = {
  name: 'ikjun',
  member: {
    frontend: {
      sayName: function () {
        console.log(this.name); // 여기서 this는 member
      },
    },
  },
};
obj1.sayName(); // Cho
obj2.member.frontend.sayName(); // undefined

• arrow function에서의 this
  화살표 함수의 this는 상위 스코프의 this를 가르킨다. 다시 말해서 화살표 함수 내부에 this가 설정되지 않는다는 의미이다.
  아래의 예시에서 this는 person 객체가 아닌 상위 스코프인 전역 객체이므로 this를 출력하면 {}가 나온다.

const person = {
  name: 'ikjun',
  sayHi: () => console.log(`Hi ${this.name}`),
};
person.sayHi(); // Hi undefined
console.log(this); // {}

즉시실행함수(IIFE, Immediately Invoke Function)

이전에도 다루었던 즉시실행함수를 다시 활용하는 법을 배웠다.
즉시실행함수는 최초 1번만 호출되며 정의와 동시에 실행된다. 따라서 환경 초기화나 전역 변수 오염(충돌)을 방지하기 위해 사용한다. 클로저의 private 효과를 동일하게 얻을 수 있다.

(function iife(name) {
  const value = 12;
  console.log(`hello! ${name}`);
})('ikjun'); // hello! ikjun

console.log(value);
// ReferenceError: value is not defined, 내부 변수 접근 불가능

선언형 프로그래밍

기존 코딩 테스트를 하면서는 거의 명령형 프로그래밍을 했던 것 같지만 실제 서비스를 개발할 때는 선언형 프로그래밍 습관을 가져야 한다.
아래 예시와 같이 어떻게 처리하는지 컴퓨터에게 일일히 명령을 내리는 것이 아니라 무엇을 원하는지에 초점을 맞춰 적절한 고차 함수(map, filter, forEach 등)나 메서드를 사용하면 코드 가독성도 높아지고 실수할 가능성이 줄어든다.

// 명령형 프로그래밍
function double1(arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    results.push(arr[i] * 2);
  }
  console.log(results);
}
// 선언형 프로그래밍
function double2(arr) {
  console.log(arr.map((number) => number * 2));
}
const arr = [1, 2, 3];
double1(arr); // [ 2, 4, 6 ]
double2(arr); // [ 2, 4, 6 ]

비동기 처리 프로세스

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JavaScript의 고유한 특성이다.
ex) addEventListener, setInterval, setTimeout, XMLHttpRequest

XHR(XMLHttpRequest)

데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리한다.

function request(url, successCallback, failCallback) {
  const xhr = new XMLHttpRequest();
  xhr.addEventListener('load', (e) => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        successCallback(JSON.parse(xhr.responseText));
      } else {
        failCallback(xhr.statusText);
      }
    }
  });
  xhr.addEventListener('error', (e) => failCallback(xhr.statusText));
  xhr.open('GET', url);
  xhr.send();
}

Callback

데이터를 요청하고 해당 데이터가 정상적으로 조회했다면 callback 함수를 통해 데이터를 넘겨받고 다음 조건에 맞는 데이터를 요청해나간다. 아래는 위의 request 함수로 데이터를 요청하고 callback 함수로 넘겨받는 예시 코드이다.

const API_URL = 'https://ikjun.todoList';
request(`${API_URL}/todos`, (todos) => {
  const completedTodo = todos.find((todo) => todo.isCompleted);
  if (completedTodo) {
    request(`${API_URL}/comments?todo.id=${completedTodo.id}`, (comments) => {
      comments.forEach((comment) => console.log(comment.content));
    });
  }
});

일반적인 callback 패턴의 경우에는 중첩되어 나간다. 순차적으로 처리해야 하는 비동기 작업이 너무 많게 되면 callback hell에 빠지게 된다.

그럼 비동기로 처리하려고 하면 코드가 길어지니 동기로 처리하도록 하면 코드 가독성도 좋아지는거 아닌가?
하겠지만 동기 방식으로 처리하게 프로그래밍하면 데이터 요청 받는 동안 사용자는 응답이 오기 전까지 손가락 쪽쪽 빨아야 한다. 데이터를 불러오는 동안 브라우저가 멈춰버리가 때문에 UX에 큰 악영향을 미친다. (비동기 비동기 하는데는 이유가 있다!)

Promise

async-await

fetch API

🙄 알고 있었지만 더 공부해야 할 것

this의 실질적 사용법

이론적으로는 70~80% 정도 이해한 것 같으나 실제 사이드 프로젝트나 과제를 하면서 this를 적절하게 사용하고 있는지 체크해봐야 할 것 같다. 항상 this가 어디를 가르키고 있는지 확인하여 코딩하는 습관을 들여나갈 것이다.

선언형 프로그래밍 적용

마찬가지로 앞으로 진행할 과제나 프로젝트에 선언형 프로그래밍을 지향하여 코딩을 해보려고 한다. 현재 3주차 과제에 적용해보았는데 생각보다 익숙해지니 크게 어렵지는 않았다.

LocalStorage 사용법

단순히 setItem, getItem, clear 메서드로만 데이터를 다룰 줄만 알았다. 강사님이 로컬 스토리지를 다루는 함수를 따로 파일로 만들어 데이터 유효성 검사도 진행하도록 분기하는 것을 보고 스토리지를 모듈화하여 사용할 수 있다는 것을 깨달았다. 앞으로 프로젝트에서 로컬 스토리지를 다룰 때는 따로 모듈화하여 사용해야겠다.

👀 느낀점

• JavaScript 사전 퀴즈를 통해 코드를 짜면서 실수할 만한 포인트를 짚어 보았고 명령형 프로그래밍과 선언형 프로그래밍의 정의와 그 차이점을 알 수있었다.
  그리고 서비스를 개발할 때는 선언형 프로그래밍을 통해 코드 가독성과 생산성을 높일 수 있도록 습관을 들여야 한다는 것을 깨달았다.
  
  
• Local Storage 및 모듈화 사용법, 비동기 프로세스에 대해 배웠다.
  비동기 작업 수행을 위한 Promise, async-await, fetch api에 대해 실제 Todo List 어플리케이션을 구현하면서 공부하니까 훨씬 습득이 잘 되었다.
  
  
• 아직 강사님이 구현한 코드를 따라친 것에 불과하다고 생각하기에 실제 진행하고 있는 팀 사이드 프로젝트에도 적용해볼 예정이다. 비동기 프로세스에 대한 공부를 추가적으로 더 깊게 해놓아야 앞으로 api를 통해 데이터 바인딩을 할 때 헤메지 않을 것 같다.

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.

관련 레퍼런스
poiemaweb : this
poiemaweb : IIFE