[데브코스/TIL] DAY26 - SPA와 Node.js(1) window 객체와 이벤트

📄 SPA

🔎 SPA(Single Page Application)이란?

단일 페이지로 구성된 웹 애플리케이션

• 한 번만 페이지를 로드하고 이후에는 필요한 데이터만 서버에서 가져와 업데이트
• 빠르고 부드러운 사용자 경험 제공
• 페이지 이동이 발생할 때마다 서버로부터 전체 HTML 페이지를 다시 로드하는 전통적인 웹 애플리케이션 방식과 다름

1. SPA 구현

• BOM의 history 객체를 이용해야 함

페이지 이동

history.pushState(브라우저 히스토리에 저장할 데이터, 타이틀(빈문자열), 변경할 url); 

history.pushState({ page: page, custom: "test" }, "", 'page');

페이지마다 다른 데이터 보여주기

• 객체를 이용 (url: 데이터)
• 현재 url로 객체에 접근하여 innerHTML, textContent 등으로 변경

브라우저의 뒤로, 앞으로 클릭 감지

• 발생하는 이벤트 popstate

window.addEventListener("popstate", function (e) {
  const page = e.state?.page || "home;
  document.getElementById("page").innerHTML = pages[page];
});

뒤로 보내기, 앞으로 보내기

history.back() // 한 단계 뒤로 이동
history.forward() // 한 단계 앞으로 이동
history.go(숫자) // 음수는 back, 양수는 forward (원하는 스텝 숫자)

🌲 Node.js

1. REPL

🔎 REPL이란?

Node.js에서 제공하는 JavaScript 코드를 즉시 실행하고 결과를 확인할 수 있는 환경

• 실행 방법 : 명령 프롬프트/터미널에서 node 명령어 입력
• 종료 방법 : 명령 프롬프트/터미널에서 .exit 명령어 입력
• 일반 콘솔창처럼 JS 코드 입력하고 실행시키면 됨

2. JavaScript 파일 실행

• 준비 : cd 명령어를 통해 JS 파일이 있는 폴더로 이동
  • 현재 경로에서 절대경로든, 상대경로든 입력한다면 이동 안해도 됨
• 파일 실행 : node 파일명.js
• 인수 전달 : node 파일명.js 다음으로 인수를 함께 입력 (띄어쓰기로 구분)
  • 명령어로 입력하는 모든 것을 process.argv로 확인 가능
  • process.argv는 [node, 파일명.js, 인수1, ...] 형식
  • 인수만을 사용하길 원한다면 process.argv.slice(2)로 사용

node app.js arg1 arg2 arg3

process.argv는 다음과 같음

[ 'node', 'app.js', 'arg1', 'arg2', 'arg3' ]

3. 모듈 사용

Node.js에는 기본 내장 모듈이 존재한다.

🔎 모듈이란?

모듈은 관련된 코드와 기능을 그룹화하여 재사용성을 높이고, 코드의 가독성과 관리성을 향상시키기 위해 사용됨. Node.js에서는 모듈을 통해 여러 파일로 코드를 나눌 수 있음.

• 미리 만들어둔 함수들의 집합
• 독립된 기능을 갖는 함수 또는 파일들의 모임
• 모든 모듈은 독립된 스코프 소유

파일 시스템 작업

// fs : 파일 시스템 관련 작업을 하는 내장 모듈
// require : 내장 모듈 호출
const fs = require('fs');

// readFile : 비동기적으로 파일 읽어오는 함수
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log(data);
});

// promises : fs 모듈의 Promise 버전
// 콜백 함수 대신, Promise를 반환하는 메서드 사용 가능
const fs = require('fs').promises;

// async await 사용으로 깔끔한 비동기 코드 작성
async function readFileAsync() { // Promise 반환
  try {
    // await를 통해 Promise가 해결될 때까지 대기
    // fs.promises.readFile : Promise 반환
    const data = await fs.readFile('example.txt', 'utf8');
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

readFileAsync();

첫번째 코드는 일반 fs 사용은 콜백 기반 비동기 함수를 제공하는 것.
두번째 코드는 Promise 기반의 비동기 함수를 제공하는 것이다.

const fs = require("fs");
const content = fs.readFileSync(filePath, "utf-8");

동기적으로도 읽을 수 있다.

파일 경로 작업

const path = require("path");
const filePath = path.resolve(file);

4. 모듈 생성 및 사용

모듈 생성

• 모듈로 만들고 싶은 기능(함수)을 정의
• module.exports로 기능을 외부로 내보냄

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

module.exports = {
  add,
  subtract
};

모듈 사용

• require() 함수를 사용해 모듈 가져옴

// app.js
const math = require('./math');

const sum = math.add(5, 3);
const difference = math.subtract(5, 3);

내장 모듈과 사용자 정의 모듈 호출의 차이

const fs = require('fs')
const path = require('path')
const math = require('./math')

• 내장 모듈 : 특별한 경로 없이, 모듈 이름만으로 호출 가능
• 사용자 정의 모듈 : Node.js가 자동으로 찾을 수 없기 때문에 파일 경로로 명시
• 외부 모듈 : 내장 모듈과 동일
  • 외부 모듈은 npm을 통해 설치한 모듈 (node_modules 폴더에 위치)

5. 패키지 모듈 생성

Node.js에서 npm을 사용하여 패키지 생성 가능

(1) 패키지 초기화

• 배포할 패키지 폴더에 npm init으로 package.json 파일 생성

mkdir greet-module
cd greet-module
npm init -y

(2) 모듈 파일 작성

// index.js
const greet = (name) => `Hello, ${name}!`;
module.exports = greet;

(3) 패키지 배포

1. npm 세팅

• npm 로그인(npm login 명령어) -> 조직 생성
  • 로그인 여부 확인 => npm whoami

2. package.json 수정

• name 값을 조직_이름/모듈_이름로 변경

3. 패키지 배포

• npm publish --access public 명령어로 패키지 배포

(4) 패키지 사용

• 패키지 설치

npm install 배포한_이름

• 패키지 사용

const greet = require('@minhadev/greet-module');
console.log(greet('Alice')); // hello, Alice!

🩻 노드 내장 객체

• global : 전역 객체
  • 모듈 간의 의존성 문제가 발생할 수 있기 때문에 중요한 값은 등록하지 말 것
• console : 출력 및 디버깅 도구
• setTimeout : 일정 시간 후 1회 실행
  • clearTimeout : 타이머 취소
• setInterval : 일정 시간마다 반복 실행
  • clearInterval : 반복 중지
• setImmediate : 이벤트 루프의 현재 작업이 끝난 직후 실행
• __filename : 현재 파일의 절대 경로
• __dirname : 현재 파일의 디렉터리 경로
  • __filename과 함께 파일 경로 조작에 사용
• module : 현재 모듈 객체
• exports : 모듈 내보내기 객체
  • module.exports = { ... } : module(현재 파일/모듈에 대한 정보를 담고있는 객체)를 exports(내보낸다)
• require : 모듈 가져오기
  • 캐싱되므로, 여러번 호출해도 처음 한 번만 로드
• process : 현재 실행 중인 Node.js 프로세스 관련 정보 제공 및 제어
• process.env : 환경 변수 접근
• process.exit : 프로세스 종료

process 객체

• process.env : 환경 변수 접근
  • 환경 변수는 애플리케이션의 설정을 외부에서 제어할 수 있는 방법
• process.cwd : 현재 작업 디렉터리
• process.platform : 운영체제 확인
• process.nextTick() : 현재 이벤트 루프가 끝난 후 실행
• process.exit() : 프로세스 종료

🦴 노드 내장 모듈

• os : 운영 체제 관련 정보 제공
  • 서버 환경의 CPU와 메모리 정보를 확인하여 서버 최적화에 사용
• path : 파일 및 디렉터리 경로를 조작하는 유틸리티
  • 파일 및 디렉터리 경로를 동적으로 생성하고 조작할 때 사용
• url : URL 문자열을 파싱하고 조작
  • 웹 서버에서 URL 파라미터(https://ex.com/path?name=Jay#fragment)를 쉽게 추출
  • url 문자열로 host, pathname, searchParams, hash 추출 용이
• querystring : 쿼리 문자열을 파싱하고 조작
  • GET 요청의 쿼리 파라미터(?name=Jay&age=20)를 처리할 때 유용
• crypto : 암호화와 해싱 기능 제공
  • 비밀번호 해싱과 데이터 암호화에 사용
• util : 다양한 유틸리티 함수와 메서드 제공
  • 콜백 기반 API를 Promise로 변환할 때 유용
• worker_threads : Node.js 애플리케이션에 멀티스레딩 기능 추가
  • CPU 집약적인 작업을 백그라운드 스레드에서 처리
  • CPU 리소스를 많이 소모하는 작업을 메인 스레드가 아닌 별도의 백그라운드 스레드에서 처리 -> 메인 스레드가 다른 작업을 계속 처리할 수 있도록
• child_process : 자식 프로세스를 생성하고 외부 명령 실행
  • exec (외부 명령 실행)
  • spawn (스트림 기반 자식 프로세스)
  • 다른 스크립트를 실행하거나 시스템 명령을 실행할 때 사용

📌 출처

수코딩(https://www.sucoding.kr)