현대 자바스크립트는 막강한 힘을 가진 언어와 생태계를 구성한다. 자바스크립트 언어의 기반은 항상 중요하며, 더 배워야 하는 뭔가가 끝없이 나온다.

코어 언어는 놀라울 정도로 정교하고 복잡하다. 변수, 컬렉션, 패러다임과 같은 보편적인 프로그래밍 기초를 마스터하면 언어를 탐색할 수 있게 된다. 이 기반 위에서 자바스크립트 환경을 구성하는 방대한 클라이언트 및 서버 측 툴과 플랫폼을 다룰 수 있다.

기초를 익히는 데 시간을 투자하기만 한다면 자바스크립트는 여러분의 프로그램과 경력을 뒷받침하는 강력한 토대가 된다. 현대 자바스크립트에서 가장 중요한 9가지 개념은 다음과 같다.

컬렉션 탐색 : 함수형 프로그래밍과 화살표 연산자

프로그래밍 기초와 현대 자바스크립트가 만나는 핵심 지점은 컬렉션이다. 자바스크립트는 데이터 컬렉션 모델링에 여전히 배열을 주로 사용하지만 이제는 Set 객체도 지원한다.

배열은 단순하다.

let books = ["The Supreme Yoga", "The Transcendent Unity of Religions", "The Tao of Physics"];

함수형 프로그래밍과 화살표 함수를 사용해서 이 컬렉션을 반복 처리할 수 있다.

books.map(x => x.length);

이렇게 하면 필자가 좋아하는 책의 제목 길이를 보여주는 새 배열이 생성된다. map 연산과 filter, forEach 같은 관련 연산을 사용해서 루프를 명시하지 않고도 컬렉션을 반복 처리할 수 있다.

화살표 연산자는 현대 자바스크립트에서 가장 유용하고 중요한 구문 개선 사항 중 하나다. 화살표 연산자를 사용하면 함수를 매우 간결한 형태로 정의할 수 있으며, 이 간결함은 함수형 연산과 아주 잘 맞는다.

스코프와 클로저

화살표 연산자를 함수형 연산의 인자로 사용하면 익명 함수, 즉 이름이 없는 함수가 생성된다. 명명된 함수를 생성하는 데에도 사용할 수 있다:

let bookList = (book) = > console.log(book.length);

이 명명된 함수는 다음 코드와 동일한 기능을 수행한다.

let bookList = function (book) { console.log(book.length) }

두 경우 모두, 그리고 익명 버전에서도 클로저가 생성된다. 즉, 함수는 호출될 때 스코프에 있는 변수가 아니라 해당 함수가 포함된 코드에 의해 정의된 변수에 대한 액세스 권한을 갖게 된다.

예를 들어 또 다른 함수를 생성하는 함수, 함수형 프로그래밍 용어로는 고차 함수(higher-order function)를 만들 수 있다.

const createBookFilter = (bookCollection) => {   return (searchQuery) => {     return bookCollection.filter(book => book.includes(searchQuery));   }; };

이제 생성된 함수에 대한 참조를 만들 수 있다.

const filterMetaphysics = createBookFilter(books);

여기에는 createBookFilter()가 반환한 내부 함수에 대한 참조가 포함된다. 핵심은 해당 함수가 다른 컨텍스트에서 호출되는 경우에도 bookCollection에 대한 참조를 유지한다는 점이다.

const results = filterMetaphysics ("Unity");  // Output: [ "The Transcendent Unity of Religions" ]

컨텍스트와 this

화살표 연산자의 또 다른 이점은 예측 가능하고 합리적인 this 키워드의 해석이다. 과거에는 this를 다른 변수에 할당해 보존해야 했지만 이제는 화살표 연산자를 사용해 처리할 수 있다.

이는 UI 컴포넌트의 이벤트 핸들러에서 보편적이다. 여기서 this는 컴포넌트가 아닌 DOM 요소로 해석된다. 다음은 가상의 예시다.

class MyComponent {  constructor() {    this.name = 'Component';    this.button = document.getElementById('my-button');    this.button.addEventListener('click', () => {      console.log(`Hello from ${this.name}`);    });  }}

click 핸들러는 this를 컴포넌트로 올바르게 해석하여, this.name에 액세스할 수 있다. function 키워드를 사용해 선언할 경우 this는 버튼 요소로 해석된다.

컴포넌트와 반응성

UI를 컴포넌트로 모델링한다는 것은 새로운 개념은 아니지만 이 개념을 반응성과 결합하면 현대 클라이언트 측 아키텍처의 중심 축이 된다.

반응성의 본질은 단순한 개념이다. 핵심은 변수와 그 변수의 변화에 반응하는 코드를 연결하는 것이다. 즉, 상태를 동작에 바인딩한다. 이렇게 하면 그 관계 관리의 세부 사항은 개발자가 아닌 프레임워크가 맡게 된다.

예를 들어 리액트(React)에서 다음과 같이 상태 변수와 동작을 선언한다.

import { useState } from 'react';function Counter() {  const [count, setCount] = useState(0);  const increment = () => {    setCount(count + 1);  };  return (    

이것이 반응성의 기본적인 패턴이며 모든 프레임워크에 공통적으로 적용된다. 예를 들어 스벨트(Svelte)에서는 다음과 같이 구현된다.

You clicked {count} times

count 변수는 상태이며, 마크업은 컴포넌트의 뷰를 정의하고 함수는 동작을 정의한다. 그러면 프레임워크가 이들을 연결하고 결과를 표시한다.

풀스택 프레임워크와 빌드 체인

리액티브 프레임워크와 엔터프라이즈 자바스크립트로 이뤄진 현대 개발 환경에서 대부분의 애플리케이션은 개발 및 배포를 위해 빌드 체인에 의존한다. 이를 통해 여러가지가 가능한데, 그 중 하나는 리액티브 프레임워크를 웹 애플리케이션에 최적화된 브라우저에서 소비할 수 있는 양식으로 변환하는 것이다. 여기서 널리 사용되는 툴로 웹팩(webpack)과 비트(Vite)가 있다.

빌드 체인이 널리 보급되면서 프레임워크들은 자체 풀스택 버전을 내놓기 시작했다. 또한 프론트 엔드와 함께 사용할 수 있는 서버 측 API를 정의하는 기능 등 새로운 역량도 추가했다. Next.js가 이 개념을 처음 대중화했으며, 넉스트(Nuxt)와 스벨트킷(SvelteKit) 등이 그 뒤를 따랐다. 앵귤러는 이 개념을 자체 프레임워크에 직접 통합했다.

여기서 가장 중요한 개념은 엔터프라이즈 자바스크립트에 많은 인프라가 따른다는 점이다. 이러한 인프라에 대한 이해는 언어 자체에서 시작해 다양한 다른 툴을 포괄하는 방향으로 확장된다.

CI/CD와 서버리스 배포

CI는 지속적 통합, CD는 지속적 배포를 각각 의미한다. 일반적으로 CI/CD는 소프트웨어를 빌드하고 배포하는 방식을 자동화한다. 구체적으로, 지속적 통합은 개발자가 코드를 체크인하면 해당 코드가 빌드에 통합돼 자동화된 테스트 모음을 거친다는 것을 의미한다. 지속적 배포는 여기서 한 걸음 더 나아가 빌드를 프로덕션과 같은 배포 환경으로 푸시하기 위한 간소화된 프로세스를 구축한다. 이러한 프로세스 파이프라인은 현대 자바스크립트에서 피할 수 없는 요소다.

버셀(Vercel), 넷리파이(Netlify)와 같은 배포 환경(서버리스 플랫폼)은 자동화 프로세스 개념을 더 다듬어 웹 콘솔이나 CLI에서 프로젝트를 정의하고 조율할 수 있는 관리형 서비스에도 구현한다. 이러한 플랫폼은 코드 리포지토리를 실행 가능한 소프트웨어로 변환하는 과정을 간소화해서 비교적 쉽게 처리할 수 있게 해준다.

순수 자바스크립트 스택으로 구축된 애플리케이션의 경우 서버리스 배포 플랫폼은 인프라에서 발생하는 마찰을 대폭 줄여둔다. 물론 이것이 만능 해결책은 아니며, 특히 프로젝트가 더 복잡해지고 장기화될수록 미세한 차이점과 표준을 벗어난 구성이 발생한다. 그럼에도 불구하고 서버리스 플랫폼은 현대 자바스크립트의 핵심 요소다.

서버 측 자바스크립트

자바스크립트는 서버 측의 주요 언어이므로 서버 측 자바스크립트가 어떻게 작동하는지 알아두는 것이 중요하다. 우선 짚고 넘어갈 점은 노드js가 서버리스 자바스크립트를 위한 유일한 옵션은 아니라는 것이다. 대안으로, 많은 장점을 제공하는 데노(Deno)와 번(Bu)도 있다. 세 플랫폼을 모두 살펴보면서 차이점과 각 플랫폼이 제공하는 기능을 파악하는 것이 좋다. 또한 이들이 서버리스 런타임과 어떻게 관련되는지도 이해해야 한다.

다양한 패키지 관리자가 있지만 NPM과 package.json 매니페스트 파일이 여전히 표준으로 간주된다.

어느 런타임 환경이든 자바스크립트는 서버에서 이벤트 루프를 사용한다. 이는 애플리케이션 확장성과 비동기 작업의 작동 방식에 영향을 미친다. 병렬 프로그래밍(비동기 작업)과 동시성(동시에 진행 가능한 작업)의 차이를 이해해야 한다.

HTTP 요청/응답, JSON의 기본과 익스프레스(Express)와 같은 서버에서 API가 어떻게 매핑되는지도 반드시 이해해야 한다.

app.get('/', (req, res) => { res.json({ message: 'Hello, InfoWorld!' }); });

각 컴포넌트는 대체로 이해하기 쉬우며, 이를 종합하면 웹 환경의 많은 부분을 명확히 파악할 수 있게 된다.

ECMAScript

자바스크립트는 항상 발전하는 언어인 만큼 최신 개발 상황을 파악하는 것이 중요하다. 최신 정보를 얻는 가장 좋은 방법은 ECMAScript 사양이다. 매년 새로운 사양이 발표되며, 해당 연도에 추가된 변경 사항이 설명된 문서도 함께 제공된다. 필자는 최근 올해의 사양에 대한 분석 기사를 작성한 바 있다.

ECMAScript 25의 가장 큰 특징은 새로운 전역 Iterator 객체다.

Iterator.from()

더 성능이 좋은 Iterator로 배열을 래핑할 수 있어 map, filter와 같은 함수형 연산자가 지연 평가된다. 또한 다른 반복자들도 동일한 방식으로 변환해서 성능 향상과 함수형 연산자의 이점을 활용할 수 있다.

반복자는 평소에 사양에 관심을 갖지 않으면 놓치기 쉬운 부분이다. ECMAScript에 항상 관심을 두면 언어의 최신 개선 사항을 파악할 수 있다.

자바스크립트와 AI

AI는 이제 개발자에게 피할 수 없는 현실이다. AI를 도우미로 사용하는 형태의 개발 작업은 많은 기업에서 표준적인 작업 방식이 됐다. 또한 애플리케이션에도 AI를 통합하고 있다. 자바스크립트는 AI 기반 개발을 다방면으로 지원한다.

가장 중요하고 포괄적인 AI용 자바스크립트 API는 동급 최고의 텐서플로우 프레임워크를 사용하기 위한 바인딩을 갖춘 TensorFlow.js일 것이다. 텐서플로우는 다양한 신경망 스타일과 사전 학습된 모델, 광범위한 맞춤 구성을 지원한다.

AI를 위한 자바스크립트는 API는 그 외에도 많다. Brain.js를 비롯한 몇몇 API는 클라이언트와 서버, 양쪽에서 모두 작동한다. 필자가 최근 소개한 루 코드(Roo Code)는 자바스크립트 호환 코딩 어시스턴트를 VS 코드와 결합하는 솔루션이다.

결론

결국 가장 중요한 개념은 자바스크립트 자체에 대한 이해와, 자바스크립트를 마스터하고 이를 통해 열리는 모든 길을 탐구하고자 하는 의지를 결합하면 오랜 기간 지속되는 보상을 얻을 수 있다는 것이다.
dl-itworldkorea@foundryco.com