오늘은 자바스크립트의 this 개념을 복습하고, 자바스크립트로 간단한 멀티 페이지 애플리케이션(MPA)을 구현했다.

자바스크립트의 this 이해하기

자바스크립트에서 this는 호출 방식에 따라 참조하는 대상이 달라진다.

// 일반 함수에서의 this

function normalFunction() {
  console.log(this); // window 객체(브라우저 환경)
}
// 메서드에서의 this

const obj = {
  name: '객체',
  method: function() {
    console.log(this); // obj 객체 자신을 가리킴
  }
};
// 이벤트 핸들러에서의 this

button.addEventListener('click', function() {
  console.log(this); // 이벤트가 발생한 요소(button)
});
// 화살표 함수에서의 this

const arrowFunc = () => {
  console.log(this); // 상위 스코프의 this를 그대로 사용
};

 

 

this의 동작

아래 코드에서 함수 regularFunction과 arrowFunction의 this는 어떻게 동작할까?

const obj = {
    value: 42,
    regularFunction: function () {
        console.log(this.value); // 1. 여기서 this는 무엇을 가리킬까?
    },
    arrowFunction: () => {
        console.log(this.value); // 2. 여기서 this는 무엇을 가리킬까?
    },
};

obj.regularFunction(); // 출력: 42
obj.arrowFunction(); // 출력: undefined (3. 이유가 뭘까?)

 

  1. obj를 가리킨다.
    regularFunction은 일반 함수로 선언되었고, 메서드로 호출되었기 때문에 해당 메서드를 소유한 객체 obj를 this로 가리킨다.
  2. 전역 객체를 가리킨다.
    arrowFunction은 화살표 함수로 선언되었고, 화살표 함수는 자신만의 this 바인딩을 생성하는 것이 아닌 렉시컬 스코프의 this를 사용하기 때문에 함수가 선언된 객체 obj의 상위 스코프인 전역 스코프의 this를 참조한다.
  3. 전역 객체에는 value라는 프로퍼티가 정의되어 있지 않기 때문에 undefined를 반환한다.

 

MPA 구현하기

바닐라 자바스크립트만으로 SPA를 구현해보기에 앞서, 전통적인 멀티 페이지 방식으로 웹사이트를 만들어 보았다.

 

자바스크립트, HTML, CSS를 사용하여 동물 이미지 갤러리 웹사이트를 구현했다. 각 동물 카테고리마다 별도의 HTML 페이지를 만들고, API에서 데이터를 가져와 화면에 표시했다.

메인 페이지

<!-- 앱의 전체 컨테이너 -->
<div id="app">
  <!-- 탭 메뉴 - 각 탭은 다른 HTML 페이지로 연결 -->
  <div class="tab-bar">
    <a href="/"><div class="clicked">전체</div></a>
    <a href="/penguin.html"><div>펭귄</div></a>
    <a href="/koala.html"><div>코알라</div></a>
    <a href="/panda.html"><div>판다</div></a>
  </div>
  <!-- 동물 이미지가 표시될 컨텐츠 영역 -->
  <div class="content"></div>
</div>

 

특정 동물 페이지

<!-- 코알라 페이지 -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <link rel="stylesheet" href="./src/styles.css" />
    <title>동물 앨범</title>
  </head>
  <body>
    <div id="app">
      <div class="tab-bar">
        <a href="/"><div>전체</div></a>
        <a href="/penguin.html"><div>펭귄</div></a>
        <!-- 현재 페이지(코알라)에 clicked 클래스 적용 -->
        <a href="/koala.html"><div class="clicked">코알라</div></a>
        <a href="/panda.html"><div>판다</div></a>
      </div>
      <div class="content"></div>
    </div>
    <!-- 코알라 페이지만의 전용 JS 파일 로드 -->
    <script src="./src/koala.js"></script>
  </body>
</html>

각 동물 페이지는 별도의 HTML 파일로 구성되며, 현재 활성화된 탭에 clicked 클래스를 적용하여 시각적으로 표시한다.

 

메인 페이지 데이터 처리

// 이미지를 표시할 컨테이너 요소 선택
const content = document.querySelector("div.content");
let template = [];

// 모든 동물 데이터를 가져오는 함수
const getData = async () => {
  let res = await fetch(API_URL);
  try {
    const data = await res.json();
    // 받아온 데이터의 각 항목에서 이미지 URL 추출하여 HTML 생성
    data.photos.forEach((el) => {
      template += `<img src=${el.url} />`;
    });
    // 생성된 HTML을 컨테이너에 삽입하여 화면에 표시
    content.innerHTML = template;
  } catch (err) {
    console.log(err);
  }
};

// 함수 실행하여 모든 동물 데이터 로드
getData();

API에서 데이터를 가져와 동적으로 이미지를 생성하고 화면에 표시한다.

 

동물별 페이지 데이터 처리

특정 동물 페이지(koala.js, penguin.js, panda.js)는 index.js와 유사한 구조를 가지지만, 특정 동물 데이터만 필터링하여 보여주는 차이점이 있다.

 

각 동물 페이지에서는 getData 함수가 동물 이름을 매개변수로 받아 API 요청 URL에 추가하여 해당 동물의 데이터만 가져온다.

예를 들어 koala.js에서는 다음과 같이 "koala"를 매개변수로 전달하여 코알라 이미지만 표시한다.

const getData = async (name) => {
  let res = await fetch(`${API_URL}${name}`);
  // ...
};

getData("koala");

 

 

회고

자바스크립트의 this는 다른 언어와 달리 호출 컨텍스트에 따라 값이 결정되는 특성이 있어 예전에는 헷갈렸지만, 각 상황별로 어떻게 동작하는지 이해하며 복습하니 더 명확해졌다.

 

MPA를 구현하며 페이지 전환마다 새로고침이 발생하는 전통적인 방식의 한계를 체감했다. 이런 불편함과 중복 코드 문제를 개선하기 위해 SPA 개념이 등장했다는 것을 이해할 수 있었다.

 

오늘 구현한 MPA는 바닐라 자바스크립트로 SPA를 구현해보기 위한 준비 단계였다. 전통적인 동작 방식을 구현해봤으니 이제는 프레임워크를 사용하지 않고 SPA를 구현해보면서 리액트가 해결해왔던 문제들을 더 깊이 이해할 수 있을 것이라고 기대해본다.

'TIL' 카테고리의 다른 글

상태 관리 설계  (0) 2025.11.10
컴포넌트와 모듈 시스템  (0) 2025.11.10
innterHTML, innerText, textContent의 차이  (0) 2025.11.10
DOM 조작  (0) 2025.11.10
생성자 함수  (0) 2025.11.09

티스토리툴바