2024-11-01

내일배움캠프 Node.js 트랙 5일차

1. ZEP에서 이루어진 팀단위 프로젝트

오늘은 프로젝트 발표가 있었던 날이다. 우리가 어떻게 이 프로젝트를 기획했고, 어떤 시행착오를 겪었으며, 문제를 어떠한 방식으로 극복했는지는 충분히 기록으로 남겨두었기 때문에 TIL에는 보다 학습에 관련된 내용을 정리해두려고 한다.

(1) 지난 시간 복기 및 자바스크립트 개념 정리

지난 시간에는 Firebase를 모듈화하는 방법에 대해 언급한 바 있다. db의 정보와 메서드를 export하는 방식으로 방명록 기능을 구현할 수 있었다. 그러나 시간에 쫓겨서 대충 그러한 게 있다는 정도로만 이해하고 넘어갔던 터라 제대로 정리해두면 좋겠다는 생각이 들었다.

 

---

 

자바스크립트 모듈이란?
코드를 재사용이 가능한 단위로 만드는 방법이다. 이를 테면 main.js라는 이름의 스크립트 파일과 index.html이라는 html파일이 분리되어 있다고 가정하자.

<!-- index.html -->
<script src="./modules/main.js"></script>

// modules/main.js
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

console.log(add(1, 2)); // 3
console.log(sub(3, 1)); // 2
console.log(mul(4, 2)); // 8
console.log(div(6, 3)); // 2

위와 같은 코드를 모듈화하여 html파일에 임포트한 경우, 별다른 스크립트가 적혀 있지 않아도 html파일을 live server로 실행해보면 로그들이 출력된다.

 

Export와 import를 사용하여 자바스크립트 파일 모듈화하기
export 키워드를 사용하면 함수, 변수 또는 클래스를 해당 스크립트 파일 외부로 내보낼 수 있다.
import 키워드를 사용하면 외부 스크립트 파일로부터 함수, 변수 또는 클래스를 가져올 수 있다.(import로 한번에 여러 개를 가져올 때는 구조체 형식으로 가져오면 된다.)

// modules/main.js
import { add, div, mul, sub } from "./math.js";

console.log(add(1, 2)); // 3
console.log(sub(3, 1)); // 2
console.log(mul(4, 2)); // 8
console.log(div(6, 3)); // 2

 

index.html에서 모듈 가져오기
자바스크립트 모듈을 html 파일에서 가져오려면 type 속성을 "module"로 지정해줘야 한다.

<!-- index.html -->
<script type="module" src="./modules/main.js"></script>

 

실제 내가 어떻게 모듈화를 사용했는지를 되돌아 보자. Firebase가 제공하는 변수와 메서드를 사용하기 위해 새로운 JS파일을 만들었고, 다음과 같이 export를 해주었었다.

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export {app, db, collection, addDoc, getDocs, serverTimestamp, query, orderBy, limit};

 

지난 TIL에 언급하진 않았지만, 실제 내가 작성한 html파일에서 Firebase를 import했을 때, script 태그의 타입을 "module"로 설정해주었었다.

 

 

import { app, db, collection, addDoc, getDocs, serverTimestamp, query, orderBy, limit } from './test.js';

$("#B2").click(async function () {
    let comment = $('#guestbook').val();
    if (comment) {
        let doc = { comment: comment, timestamp: serverTimestamp() };
        await addDoc(collection(db, "guestbook-choi"), doc);
        alert('저장 완료');
        $('#guestbook').val('');
    } else {
        console.log("값이 없습니다.");
    }

    let q = query(collection(db, "guestbook-choi"), orderBy("timestamp", "desc"), limit(10));

    let docs = await getDocs(q);

    docs.forEach((doc) => {
        let row = doc.data();
        let getComment = row['comment'];
        console.log(getComment);

        if (getComment) {
            let temp_html = `<div><p>${getComment}</p><div>`;
            $('.modal-content').append(temp_html);
        }
    });

 

개념을 확실히 정리하고 이전에 썼던 코드를 다시 복기해 보았더니, 막연하던 글자들의 조합이 비로소 내가 작성한 코드로서 느껴지기 시작한다. 이번엔 순서가 바뀌긴 했지만, 이론에 그치는 게 아니라 목적성을 가진 실습이 뒤따랐을 때 더 많은 것을 느낄 수 있는 게 아닐까?

 

다음 주부터 <로그라이크 게임 개발> 프로젝트가 진행된다고 하는데, 이를 기대하게 되는 이유도 위와 같다. 단순히 강의만 듣는 주차로만 이루어져 있었다면 '과연 내가 성장할 수 있을까?' 머릿속에 이런 물음표가 떠올랐겠지만, 분명한 이정표가 주어졌기 때문에 방향을 잃지 않고 공부할 수 있으리란 생각이 들기 때문이다.

 

게임 속 기능을 구현하기 위해 고민하고 탐구할 기회가 더욱 많아질 테니, 이제부터 배우게 될 자바스크립트 문법을 기반으로 끊임없이 도전해봐야겠다.