컴포넌트와 모듈 시스템

오늘은 컴포넌트와 모듈 시스템에 대해 학습하고, 앞으로 만들 웹 페이지를 분석했다.

특히 SPA 개발을 위한 컴포넌트 기반 설계에 초점을 맞추어보았다.

컴포넌트란?

컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, UI의 일부분을 구성한다.

 

컴포넌트 기반 설계의 장점:

• 재사용성: 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있다.
• 유지보수성: 각 컴포넌트는 독립적이므로 변경 사항이 다른 부분에 영향을 미치지 않는다.
• 가독성: 코드가 논리적인 단위로 분리되어 가독성이 향상된다.

 

리액트와 같은 프레임워크는 컴포넌트 기반 개발을 핵심으로 하지만, 바닐라 자바스크립트로도 컴포넌트 패턴을 구현할 수 있다.

 

모듈 시스템

모듈 시스템은 자바스크립트 코드를 여러 파일로 분리하고 필요에 따라 불러오는 방식이다.

 

ES6에서 도입된 모듈 시스템의 특징:

• import/export: 모듈 간에 변수, 함수, 클래스 등을 주고받을 수 있다.
• 스코프 분리: 각 모듈은 자체 스코프를 가져 전역 네임스페이스 오염을 방지한다.
• 코드 구조화: 관련 기능을 하나의 모듈로 그룹화하여 코드를 더 구조적으로 관리할 수 있다.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8

 

웹 페이지 설계 분석

앞으로 만들 웹 사이트는 포켓몬 정보를 보여주는 포켓몬 도감 웹 애플리케이션이다.

URL 구조

• '/': 모든 포켓몬 목록
• '/type': 타입별 포켓몬 목록
• '/?search=word': 검색어 word를 포함한 포켓몬 목록
• '/type?search=word': 지정 타입 중 검색어 word를 포함한 포켓몬 목록
• '/detail/id': id에 해당하는 포켓몬의 상세 정보

 

웹 페이지 동작

• 로고를 클릭하면 메인페이지('/')로 이동
• 메인페이지의 검색창에 키워드를 입력하고 검색 버튼을 누르면 해당 키워드가 포함된 포켓몬 목록을 표시
• 포켓몬 카드의 타입 태그를 클릭하면 해당 타입의 포켓몬 목록을 표시
• 포켓몬 카드를 클릭하면 해당 포켓몬의 상세 페이지로 이동

 

컴포넌트 설계

Header 컴포넌트

• 기본: 로고, 검색 바
• 포켓몬 상세 페이지: 로고만

 

PokemonList 컴포넌트

• 기본: 전체 포켓몬 정보
• 태그나 검색에 따른 필터링된 정보를 보여줄 수 있음

 

PokemonDetail 컴포넌트

• 포켓몬의 상세 정보를 개별적으로 보여주는 컴포넌트

 

회고

프로젝트를 시작하기 전에 URL 구조, API 요청 방식, 화면에 보여질 정보를 미리 설계해보는 것이 중요하다는 걸 배웠다.

특히 프로젝트 기획에 맞게 컴포넌트를 나누어 설계하니 전체 구조가 더 명확해졌고, 바닐라 자바스크립트로도 컴포넌트 기반의 개발이 가능하다는 점도 새로웠다.