패스트캠퍼스 환급챌린지 45일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250814(목) 45일차

개념과 구조 - 폴리필 / 순회 / 프로토콜

 

폴리필

브라우저가 최신 JS 문법을 지원하지 않는 경우

기존 자바스크립트로 동일한 기능을 구현해 브라우저에 주입하는 방식이 바로 폴리필

Babel이나 TypeScript 같은 트랜스파일러가 이러한 폴리필을 내부적으로 활용하며 대표적으로 core-js 라이브러리를 통해 하위 브라우저에서도 ES6+ 기능을 사용할 수 있게 해줌

Array.prototype.myMap = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};

// 사용 예시
[1, 2, 3].myMap(n => n * 2);  // [2, 4, 6]

위와 같은 방식으로, 기존에 존재하지 않던 기능을 마치 표준처럼 제공할 수 있다

 

배열 순회

배열 순회는 JS 개발에서 매우 빈번하게 등장하는 패턴

for, forEach와 같은 명령형 방식은 제어가 직관적인 반면

map, filter, reduce 등 함수형 스타일은 데이터 흐름을 선언적으로 구성할 수 있다

const arr = [1, 2, 3, 4];

const result = arr
  .map(n => n * 3)
  .filter(n => n % 2 !== 0)
  .map(n => `<li>${n}</li>`);

// 결과: ["<li>3</li>", "<li>9</li>"]

각 단계가 독립적인 연산 함수로 구성되어 있어 재사용 가능성과 가독성이 크게 향상된다

 

프로토콜

물리적인 HTTP, WebSocket처럼 눈에 보이는 프로토콜뿐 아니라

소프트웨어 내부의 설계 방식에서도 프로토콜 개념이 중요하게 작용
Webpack의 플러그인/로더, Express의 미들웨어, 추상 클래스나 인터페이스 기반 설계 모두가 특정 규약을 중심으로 확장 가능성을 열어둔 설계 방식

 

- Webpack의 로더는 특정 파일 유형을 처리할 수 있도록 설계된 모듈
- Express의 미들웨어는 요청 흐름을 제어하는 함수 체인
- 추상 클래스는 반드시 구현해야 할 메서드 목록을 제시하는 설계 규약

 

이번 강의를 통해 자바스크립트의 하위 호환성, 배열 순회 패턴, 그리고 소프트웨어 설계 관점의 프로토콜 개념까지 폭넓게 접할 수 있었다

단순히 기능을 사용하는 법을 넘어서 왜 이렇게 구현되어야 하는지, 어떻게 설계해야 재사용성과 확장성이 높아지는지에 대한 인사이트가 특히 유익했다