기술을 뜯고, 사고를 담다.

3 분 소요

서론

프론트엔드 개발을 하다 보면 “기초만 알고 있다고 끝이 아니다”라는 것을 실감할 때가 있습니다.

저도 HTML,css, JS를 꾸준히 다시 보면서 기초를 다지고 있지만, 어느 순간 부터 코드를 짤 때 “ 왜 이게 이렇게 동작할까?”, “이 구조는 어떻게 더 잘 정리하지?”, “더 효율적인 방법은 없을까?” 같은 질문이 쌓이게 됐습니다.

특히 프로젝트를 경험하면서 스프레드 연산자, 구조 분해 할당, Rest 파라미터, 모듈, 클래스 같은 문법들이 자주 사용되고 있는 것을 느꼈습니다.

그런데 그 의미를 정확히 이해하지 못하고 사용할 때가 많았고, 결국 나중에 생기는 버그나 비효율의 원인이 되기도 했습니다.

그래서 이런 ES6이후의 문법들을 정리하지 않고는 안정적인 개발이 어렵겠다고 판단했습니다.

✦ 자주 마주치지만 정확히 설명하기 어려운 문법들
✦ 프론트에서 진짜 자주 쓰이지만 흐릿하게 넘기기 쉬운 개념들

위의 것들을 정리하여 꺼내보기 위해 글을 작성합니다.

스프레드 연산자

✅ 스프레드 연산자란?

스프레드 연산자(Spread Operator)는 배열이나 객체의 값을 하나씩 펼쳐서 복사하거나 병합할 수 있게 해주는 문법입니다. 형태는 세 개의 점, ...으로 표현합니다.

배열이나 객체 안의 값을 펼쳐서 넣는 이미지로 이해!

배열 복사 및 병합

const tortkd = ["빨강", "파랑"];
const 더많은색 = [...색상, "노랑"];
console.log(더많은색);

>>> ["빨강", "파랑", "노랑"]

...색상은 "빨강", "파랑"같이 값이 펼쳐지면서 새로운 배열에 삽입됩니다.

객체 복사 및 병합

const 기본 = {font: "Arial", size: 12};
const 사용자설정 = {...기본, size: 14};
console.log(사용자설정);

>>> {font: "Arial", size: 14}

기존 객체를 복사하면서 size를 덮어씁니다. 나중에 오는 속성이 우선 적용됩니다.

📌 프론트엔드 관점

컴포넌트 스타일 덮어쓰기, 상태(state) 업데이트 시 아주 자주 사용

Rest 파라미터

✅ Rest 파라미터란?

Rest(나머지) 파라미터는 함수의 매개변수 중 몇 개가 들어올지 모를 때, 나머지를 묶어서 받는 문법입니다.

function 합계(...숫자들) {
  return 숫자들.reduce((합, n) => 합 + n, 0);
}

console.log(합계(1, 2, 3, 4)); // 10

...숫자들은 인자를 모두 모아서 하나의 배열로 받습니다.

클래스와 객체 지향

✅클래스란?

클래스(Class)는 객체(데이터와 메서드)의 틀(template)입니다. 여러 개의 비슷한 객체를 쉽게 만들 수 있게 해줍니다.

class Person{
    constructor(name) {
        this.name = name;
    }
    hi() {
        console.log(`안녕하세요, ${this.name}입니다.`);
    }
}
const me = new Person("언");
me.hi();

>>> 안녕하세요, 언입니다.

✅ 객체 지향이란?

객체 지향(Object-Oriented)은 데이터를 중심으로 관련된 동작(함수)을 함께 묶어서 다루는 프로그래밍 방식입니다. 유지보수와 재사용에 유리합니다.

📌 프론트엔드 관점

React에서 클래스형 컴포넌트를 만들거나, 복잡한 유틸 객체를 구성할 때 등장합니다.

모듈 시스템 (import/export)

✅ 모듈이란?

모듈(Module)은 독립적으로 동작할 수 있는 코드 단위입니다. 자바스크립트에서는 하나의 .js파일이 모듈이 될 수 있습니다. ➡️ 재사용 가능한 코드 조각, 특정 기능을 독립적으로 분리한 파일 또는 코드 단위

모듈의 단위는 어떻게 정하는 걸까?

정의를 보면 하나의 .js파일이 모듈이 된다고 합니다. 그런데 일반적으로 사용할 때 utils.js와 같은 파일에서 여러 모듈을 생성해서 사용 했습니다.

모듈의 단위는 어떻게 정하는 걸까??

자바스트립트에서 하나의 .js파일이 하나의 모듈이라는 말은, 파일 단위로 모듈 시스템이 동작한다는 의미입니다.

즉, 파일 = 모듈이라는 정의는 모듈의 물리적인 단위를 말하는 것이고, 그 안에 여러 함수, 변수, 클래스가 있더라도 모두 그 모듈에 속한다라는 뜻입니다.

예시

//utils.js
export function add(a, b) {return a + b;}
export function subtract(a, b) {return a - b;}
export const PI = 3.1415;

이 utils.js파일 전체가 하나의 모듈입니다.

add, subtract, PI는 그 모듈의 내부 멤버(exported parts)입니다.

// main.js
import {add, PI} from './utils.js';

➡️ utils.js라는 모듈로부터 add, PI를 가져오는 것입니다.

🎯 포인트

  1. 모듈은 파일 단위로 스코프가 구분됨

    • .js파일마다 자기만의 범위를 갖음
    • utils.js안의 변수는 main.js에서 직접 접근 불가
    • export해야만 밖에서 import

  2. 파일은 모듈이지만, 모듈 안에는 여러 개의 기능이 있을 수 있음

    • utils.js하나의 파일은 모듈이지만, 그 안에는 여러 작은 기능들(함수, 변수, 상수..)이 들어갈 수 있음

      이 작은 기능들은 모듈의 구성요소일 뿐이고, 전체 파일이 하나의 모듈이라는 구조는 변하지 않음

➡️ utils.js는 도구 상자, 그 안에 함수,변수, 상수는 도구

모듈화를 하면 재사용성과 유지보수성이 좋아집니다.

  • 한 번 작성하고, 여러 곳에서 import해서 사용해서 재사용성이 높아집니다.
  • 중복 코드 제거로 생산성을 증가시킵니다.
  • 공통 기능을 모듈로 빼면, 다른 컴포넌트/페이지에서도 그대로 활용 가능합니다.
  • 코드가 기능별로 분리되어 있어 수정/확장/디버깅이 쉽습니다.

내보내기 export

// utils.js
export const PI = 3.14;
export function 더하기(a, b){
    return a + b;
}

가져오기 import

// main.js
import {PI, 더하기} from "./utils.js";
console.log(더하기(2, 3));

>>> 5

📌 프론트엔드 관점

컴포넌트 분리, 헬퍼 함수 재사용 등 모듈 시스템은 React, Vue 같은 프레임 워크에서 기본

ES6 이후 주요 문법 요약하기

✅ ES6란?

ES6(ECMAScript 2015)는 자바스크립트에 큰 변화를 가져온 버전입니다. 이후 문법의 기반이 되었고, 대부분의 JS 코드는 이 문법을 바탕으로 작성됩니다.

문법 설명 예시
let/const 블록 스코프 변수 선언 let x = 1;
화살표 함수 function대신 간결한 함수 표현 const fn = () => {}
템플릿 리터럴 백틱(``)을 사용한 문자열 내 변수 삽입 안녕${name}
구조 분해 할당 객체/배열의 값 꺼내기 const {name} = obj
기본 매개변수 함수 매개변수에 기본값 설정 function f(x = 0) {}
스프레드 연산자 객체/배열을 펼침 const newArr = [...arr]
Rest 파라미터 나머지 인자 수집 function f(...arg) {}
클래스 객체 지향 문법 class Car {}
모듈 시스템 코드 분리 및 재사용 import/export

카테고리:

업데이트:

댓글남기기

참고