개발을항해

[Softeer] Lv.2 나무 공격 + 입출력 방법

yeonDev — Mon, 27 Jan 2025 21:22:30 +0900

Softeer - 현대자동차그룹 SW인재확보플랫폼

softeer.ai

Node.js 입출력

소프티어에서는 우측 상단의 공식 문서를 참고하여 문제 풀이를 할 수 있습니다. 입출력 방법은 여기 예시를 참고해주세요.

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});
// ...

// 한 줄씩 입력받기
rl.on('line', (line) => {
  switch (line.trim()) {
    case 'hello':
      console.log('world!');
      break;
    default:
      console.log(`Say what? I might have heard '${line.trim()}'`);
      break;
  }
  // ...
}).on('close', () => {
  // readline 이벤트 종료
  console.log('Have a great day!');
  process.exit(0);
});

문제 풀이

공격을 할 때마다 일일이 그래프를 탐색하면 비효율적이라고 생각했습니다. 중요한 건 위치가 아니라 환경 파괴범의 수이므로, 행마다 환경 파괴범이 명 몇인지 저장해두고 공격이 진행되는 행에 저장된 수를 감소시키는 방향으로 풀이했습니다.

단계:

행마다 환경 파괴범이 몇 명인지 배열에 저장합니다. (인덱스가 0이면 첫 번째 행을 뜻함)
L ~ R에 해당하는 행의 개수를 배열에서 찾아 1씩 감소시킵니다. (단, 0 이하는 0으로 유지합니다)
공격을 모두 수행한 후, 배열의 개수를 모두 더해서 정답을 출력합니다.

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

const inputs = [];

// 입력하기
rl.on('line', (input) => {
    inputs.push(input);
});

// 출력하기
rl.on('close', () => {
    const [n, m] = inputs[0].split(" ").map(Number);
    const graph = inputs.slice(1, n + 1).map(line => line.split(" ").map(Number));
    const attacks = inputs.slice(n + 1).map(line => line.split(" ").map(Number));
    
    const countPerRow = Array(n).fill(0); // 각 행의 환경 파괴범 수

    for (let i = 0; i < n; i++) {
        for (let j = 0; j < m; j++) {
            if (graph[i][j] === 1) countPerRow[i]++; // 카운트
        }
    }

    // 공격 진행
    for (const [L, R] of attacks) {
        for (let i = L - 1; i < R; i++) {
            countPerRow[i] = countPerRow[i] > 0 ? countPerRow[i] - 1 : 0;
        }
    }

    const answer = countPerRow.reduce((acc, curr) => acc + curr); // 합계
    console.log(answer);
    
    process.exit(0);
});

textarea에 링크 삽입 기능 만들기 (with React)

yeonDev — Fri, 3 Jan 2025 22:38:12 +0900

어느 평화로운 날, 새로운 요구사항이 생겼습니다.

관리자 코멘트 입력란에 '링크 삽입' 기능 추가해 주세요.

코멘트 입력란은 textarea를 사용 중이었는데, 말 그대로 텍스트만 입력됩니다. 어떻게 구현해야 될지 몰랐지만 일단 안된다고 대답하고 좀 더 고민해 봤습니다.

링크를 삽입하는 방법이 여러 가지 떠올랐는데,

링크를 a 태그로 감싸서 텍스트로 저장한 후, HTML로 파싱하여 보여준다.
코멘트 입력란을 현재 블로그 기능에 사용 중인 웹 에디터로 교체한다.
마크다운으로 입력 후 JSX로 변환한다.

위의 방법 모두 검색해 보면 관련 라이브러리가 있습니다. 하지만 짧은 코멘트를 위해 라이브러리를 설치한다고? 링크 많이 넣어봤자 2, 3개일 텐데, 마크다운이나 HTML 파싱 기능을 통째로 넣는 걸 납득할 수 있습니까?

차마 그러지 못해서 링크 삽입을 직접 구현했습니다.

✏️ 기능 구체화

코멘트를 입력할 때는 textarea를 사용하고, 코멘트를 저장한 후 보여줄 때는 div를 사용했습니다.

사용자가 텍스트를 붙여넣기(Paste)하면, 입력된 텍스트가 URL인지 아닌지 판단한다.
1. URL이 아니면 그냥 입력한다.
2. URL이면 마크다운 문법처럼 (Caption)[URL] 형태로 변환하여 입력한다.
붙여넣기 시, 사용자가 선택한 텍스트가 있는지 확인한다.
1. 선택한 텍스트가 있으면, 현재 커서 위치에 (선택한 텍스트)[URL] 형태로 변환하여 입력하고 선택한 텍스트는 삭제한다.
2. 선택한 텍스트가 없으면, 현재 커서 위치에 (URL)[URL] 형태로 변환하여 입력한다.
USER 단에서 (Caption)[URL]를 Link로 변환하여 보여준다.

구현하기

1️⃣ URL인지 아닌지 판단하기

URL 판단은 URL() 생성자를 사용했습니다. URL 생성자에 URL이 아닌 텍스트를 넣으면 에러를 던지기 때문에 다음과 같이 try-catch문을 사용하여 일반 텍스트일 때와 링크일 때 서로 다른 작업을 할 수 있습니다.

입력한 값은 event.nativeEvent.data에서 가져왔습니다.

<textarea
    value={comment}
    onChange={(e) => {
      try {
        const input = (e.nativeEvent as InputEvent).data;
        new URL(input);
        // URL이면 링크 삽입
      } catch (error) {
        // URL이 아니면
        setComment(e.target.value);
      }
    }}
/>

2️⃣ URL 삽입하기

입력한 텍스트가 URL 형태이면 마크다운에서 링크를 나타내는 문법처럼 텍스트를 입력합니다.

문법: (Caption)[URL]
예시: (네이버)[https://www.naver.com/]

변환한 텍스트를 현재 커서 위치에 입력하기 위해 event.currentTarget.selectionStart 값을 사용했습니다. 텍스트가 랜더링되지 않았어도 selectionStart 값은 입력값의 길이를 포함하고 있기 때문에 그 길이를 뺀 값을 커서 위치로 사용했습니다.

<textarea
    value={comment}
    onChange={(e) => {
      try {
        const input = (e.nativeEvent as InputEvent).data;
        new URL(input);

        // URL이면 링크 삽입
        const inputLength = input?.length ?? 0;
        const link = `(${input})[${input}]`;
        const cursorPosition = e.currentTarget.selectionStart - inputLength;

        setComment(
          (prev) =>
            prev.substring(0, cursorPosition) +
            link +
            prev.substring(cursorPosition),
        );
      } catch (error) {
        // URL이 아니면
        setComment(e.target.value);
      }
    }}
/>

textarea에 입력한 모습

3️⃣ 커서 위치 되돌리기

textarea에 URL을 붙여 넣으면 마크다운 문법처럼 잘 입력됐습니다. 하지만 substring을 사용하여 전체 텍스트를 다시 랜더링하니 커서가 맨 마지막으로 이동했습니다. 다음은 커서가 입력한 URL 뒤에 오도록 수정한 과정입니다.

useRef를 사용하여 커서 위치를 담을 변수(cursorPositionRef)를 생성합니다. Change 이벤트가 발생하면 이전 커서 위치를 해당 변수에 저장합니다. 그 다음 useEffect를 사용하여 cursorPositionRef 값을 textarea 커서 위치로 설정해줍니다.

URL이 아닌 일반 텍스트를 입력할 때도 있으니, 커서 위치를 설정한 후에는 ref를 undefined로 초기화했습니다.

const cursorPositionRef = useRef<number>();

/** 링크 삽입 후 커서가 맨 마지막으로 이동하는 것을 방지 */
useEffect(() => {
    if (!cursorPositionRef.current) return;

    const textarea = document.activeElement; // focused element
    
    (textarea as HTMLTextAreaElement).setSelectionRange(
      cursorPositionRef.current,
      cursorPositionRef.current,
    );
    cursorPositionRef.current = undefined;
}, [editingComment]);
//...

return <textarea
    value={comment}
    onChange={(e) => {
      try {
        const input = (e.nativeEvent as InputEvent).data;
        new URL(input);

        // URL이면 링크 삽입
        const inputLength = input?.length ?? 0;
        const link = `(${input})[${input}]`;
        const cursorPosition = e.currentTarget.selectionStart - inputLength;
        // 커서 위치 저장
        cursorPositionRef.current = cursorPosition + inputLength * 2 + 4;

        setComment(
          (prev) =>
            prev.substring(0, cursorPosition) +
            link +
            prev.substring(cursorPosition),
        );
      } catch (error) {
        // URL이 아니면
        setComment(e.target.value);
      }
    }}
/>

4️⃣ 선택한 텍스트 가져오기

다음은 텍스트를 선택하고 URL을 붙여넣으면 선택한 텍스트가 캡션에 입력되도록 구현한 과정입니다. 사용자의 선택을 감지하기 위해 Select 이벤트를 사용하였습니다.

 const selectionRef = useRef<string>();
 
 return <textarea
    onSelect={() => {
      // 사용자가 선택한 텍스트 저장
      const selected = window.getSelection()?.toString();

      if (selected) selectionRef.current = selected;
      if (selected?.trim() === '') {
        selectionRef.current = undefined;
      }
    }}
    //...
/>

선택한 텍스트를 Change 이벤트가 발생했을 때 사용해야 되기 때문에 커서 위치와 마찬가지로 useRef에 선택한 텍스트를 저장했습니다.

Select 이벤트는 입력 필드를 그냥 클릭했을 때도 발생하는데, 이때는 선택한 텍스트가 빈 문자열로 넘어옵니다. 그러면 selectionRef에 undefined를 저장하여 빈 캡션에 URL이 들어가지 않도록 방지했습니다.

선택한 텍스트는 Change 핸들러에서 다음과 같이 사용했습니다.

<textarea
    onSelect={() => {
      // 사용자가 선택한 텍스트 저장
      const selected = window.getSelection()?.toString();

      if (selected) selectionRef.current = selected;
      if (selected?.trim() === '') {
        selectionRef.current = undefined;
      }
    }}
    onChange={(e) => {
      try {
        const input = (e.nativeEvent as InputEvent).data;
        new URL(input ?? '');
        
        const inputLength = input?.length ?? 0;
        const cursorPosition =
          e.currentTarget.selectionStart - inputLength;
        let link = '';
		
        // 선택한 텍스트가 있으면
        if (selectionRef.current) {
          link = `(${selectionRef.current})[${input}]`;
          // 이전 커서 위치 저장
          cursorPositionRef.current =
            cursorPosition +
            inputLength +
            selectionRef.current.length +
            4;
        } else {
          link = `(${input})[${input}]`;
          cursorPositionRef.current =
            cursorPosition + inputLength * 2 + 4;
        }

        setEditingComment(
          (prev) =>
            prev.substring(0, cursorPosition) +
            link +
            prev.substring(
              cursorPosition +
                (selectionRef.current?.length ?? 0),
            ),
        );
      } catch (error) {
        // URL이 아니면
        setEditingComment(e.target.value);
      }
    }}
/>

선택한 텍스트가 있으면 캡션에 input 대신 선택한 텍스트를 넣어서 링크를 만들어줬습니다. 커서 위치도 input 길이 대신 선택한 텍스트 길이를 반영하여 cursorPosition에 저장하였습니다.

아래처럼 텍스트가 캡션에 잘 들어가는 걸 확인할 수 있습니다.

텍스트에 링크 삽입

5️⃣ Link로 변환하기

관리자가 입력한 URL을 (Caption)[URL] 형태로 변환하여 저장했으니, 사용자에게 보여줄 때는 (Caption)[URL]를 Link로 변환하여 보여줬습니다. 아래는 String.replace 메소드로 URL을 찾아 Link로 변환하는 함수입니다.

/** 링크는 Link element로 변경 */
const parseLink = (text: string) => {
  const regex = /\((.*?)\)\[(.*?)\]/g; // (Caption)[URL] 형태
  let startIndex = 0;
  const result = [];

  text.replace(regex, (match, caption, url, offset, string) => {
    const element = (
      <Link
      	key={offset}
        to={url}
        className="text-primary underline"
        target="_blank"
        rel="noopener noreferrer"
      >
        {caption}
      </Link>
    );

    result.push(string.substring(startIndex, offset), element);
    startIndex = offset + match.length; // 다음 시작 인덱스 갱신
    return '';
  });
  result.push(text.substring(startIndex)); // 마지막 텍스트 저장

  return result;
};

//...

return <div>{parseLink(comment)}</div>

String.replace 메소드를 사용하여 전체 텍스트에서 (Caption)[URL] 부분을 찾습니다.
replace로 받은 caption과 url로 Link element를 생성하고,
이전 텍스트와 element를 순서대로 배열에 저장합니다.
이때 다음 시작 인덱스를 replace의 offset과 match 길이를 더하여 갱신합니다.

'아니, replace에 이런 arguments가 있었어?'라는 생각이 들 정도로 replace가 많은 값들을 넘겨주더라고요. MDN 문서를 살펴보면 replace의 arguments는 다음과 같습니다.

function replacer(match, p1, p2, /* …, */ pN, offset, string, groups) {
  return replacement;
}

match: 매칭된 문자열 (예: (네이버)[https://www.naver.com/])
p1, p2, /* …, */ pN: regex에 매칭된 문자열에서 n번째 문자열 (예: p1 = 네이버, p2 = https://www.naver.com/)
offset: 매칭된 문자열의 시작 인덱스
string: 전체 문자열

✨ 결과

위의 과정을 거쳐 관리자가 입력한 링크가 텍스트에 잘 삽입되었습니다. 다른 에디터에 비하면 허접한 링크 삽입 기능이지만, 관리자분들이 불편함 없이 잘 사용하길 바라며.. 이만 줄이겠습니다. 읽어주셔서 감사합니다 :)

USER 페이지 코멘트

[백준] 16235 나무 재테크 - Node.js

yeonDev — Sun, 1 Dec 2024 12:26:54 +0900

문제: https://www.acmicpc.net/problem/16235

문제 풀이

나무 위치와 나이를 별도로 저장하지 않고, 주어지는 배열을 그대로 사용하자. trees[x, y ,z]
나이가 어린 나무부터 양분을 섭취하므로, trees 배열을 나이를 기준으로 오름차순 정렬한다.
반복문을 통해 K번 봄, 여름, 가을, 겨울을 거친다.
죽은 나무 deadTrees, 살아있는 나무 aliveTrees로 배열을 생성하여 한 해를 보낸다.
trees 배열을 비우고, 가을에 새로 번식한 나무와 함께 살아있는 나무 aliveTrees를 trees 배열에 저장한다.
(이때, 번식한 나무의 나이가 1이고 aliveTrees는 이미 오름차순 정렬되어 있으므로, 다시 정렬할 필요가 없다)

전체 코드

const fs = require("fs");
const [[n, m, k], ...data] = fs.readFileSync("/dev/stdin").toString().trim().split("\n")
    .map(line => line.split(" ").map(Number));
const A = data.slice(0, n);
let trees = data.slice(n);
const graph = Array.from(new Array(n), () => Array(n).fill(5)); // 현재 양분
const dr = [-1, -1, -1, 0, 1, 1, 1, 0];
const dc = [-1, 0, 1, 1, 1, 0, -1, -1];

// 나이 오름차순 정렬
trees.sort((a, b) => {
    return a[2] - b[2];
})

// K년 후
for (let i = 0; i < k; i++) {
    const aliveTrees = [];
    const deadTrees = [];
    
    /* 봄 */
    for (const [r, c, a] of trees) {
        // 죽은 나무
        if (graph[r-1][c-1] < a) {
            deadTrees.push([r, c, a]);
            continue;
        }
        // 나무 양분 섭취
        graph[r-1][c-1] -= a;
        aliveTrees.push([r, c, a+1]);
    }
    trees = []; // 기존 배열 비우기
    
    /* 여름 */
    for (const [r, c, a] of deadTrees) {
        graph[r-1][c-1] += Math.floor(a / 2); // 죽은 나무 양분 저장
    }
    
    /* 가을 */
    for (const [r, c, a] of aliveTrees) {
        if (a % 5 !== 0) continue; // 번식할 수 없는 나무
        
        for (let d = 0; d < 8; d++) {
            const nr = r + dr[d];
            const nc = c + dc[d];
            
            // 땅을 벗어나면 패스
            if (nr < 1 || nr > n || nc < 1 || nc > n) continue;
            trees.push([nr, nc, 1]); // 새 나무 번식
        }
    }
    trees.push(...aliveTrees); // 살아있는 나무 저장
    
    /* 겨울 */
    for (let r = 0; r < n; r++) {
        for (let c = 0; c < n; c++) {
            graph[r][c] += A[r][c]; // 양분 추가
        }
    }
}

console.log(trees.length);

[프로그래머스] 연도별 대장균 크기의 편차 구하기 - SQL

yeonDev — Fri, 29 Nov 2024 10:41:39 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/299310

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

문제풀이

1. 먼저 연도별 가장 큰 대장균의 크기(MAX_SIZE)를 구한다.

SELECT MAX(SIZE_OF_COLONY) AS MAX_SIZE, YEAR(DIFFERENTIATION_DATE) AS YEAR
FROM ECOLI_DATA 
GROUP BY YEAR

2. 1번 테이블(T)과 ECOLI_DATA 테이블을 조인하여, 각 대장균의 크기 편차를 구한다.

ECOLI_DATA 테이블에 없는 연도로 조인해야 하므로, LEFT JOIN을 사용하자.

SELECT T.YEAR, (T.MAX_SIZE - SIZE_OF_COLONY) AS YEAR_DEV, ID
FROM ECOLI_DATA E
LEFT JOIN T
ON YEAR(E.DIFFERENTIATION_DATE) = T.YEAR

3. 연도(YEAR)와 편차(YEAR_DEV)로 오름차순 정렬한다.

SELECT T.YEAR, (T.MAX_SIZE - SIZE_OF_COLONY) AS YEAR_DEV, ID
FROM ECOLI_DATA E
LEFT JOIN T
ON YEAR(E.DIFFERENTIATION_DATE) = T.YEAR
ORDER BY T.YEAR, YEAR_DEV; -- 정렬 추가

전체 코드

SELECT T.YEAR, (T.MAX_SIZE - SIZE_OF_COLONY) AS YEAR_DEV, ID
FROM ECOLI_DATA E
LEFT JOIN 
    (SELECT MAX(SIZE_OF_COLONY) AS MAX_SIZE, YEAR(DIFFERENTIATION_DATE) AS YEAR
    FROM ECOLI_DATA 
    GROUP BY YEAR) T
ON YEAR(E.DIFFERENTIATION_DATE) = T.YEAR
ORDER BY T.YEAR, YEAR_DEV;

[백준] 15686 치킨 배달 - Node.js

yeonDev — Sat, 23 Nov 2024 12:08:29 +0900

문제

https://www.acmicpc.net/problem/15686

문제 풀이

n, m의 크기가 작으므로, 완전 탐색 가능
집과 치킨집만 확인하면 되므로, 그래프를 순회하며 집과 치킨집 좌표를 별도의 배열에 저장해둔다.
백트래킹으로 치킨집을 M개 선택하는 모든 경우를 구한다. 선택한 치킨집은 별도의 배열에 저장한다.
치킨집 M개를 모두 선택했을 때, 선택한 치킨집을 기반으로 각 집마다 치킨 거리를 계산하고, 도시의 치킨 거리를 구한다.

const fs = require("fs");
const [[n, m], ...graph] = fs.readFileSync("/dev/stdin").toString().trim().split("\n")
    .map(line => line.split(" ").map(Number));
const houses = []; // 집의 좌표 배열
const chickens = []; // 치킨 좌표 배열
const selectedChickens = []; // 선택된 치킨집
let answer = Infinity;

// 집, 치킨 좌표 저장
for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
        if (graph[r][c] === 1) houses.push([r, c]);
        if (graph[r][c] === 2) chickens.push([r, c]);        
    }
}

// 완전 탐색 수행하고 정답 출력
dfs(0, 0);
console.log(answer);

function dfs(count, startIndex) {
    // M개를 모두 선택했으면 정답 갱신 및 종료
    if (count === m) {
        answer = Math.min(answer, calculateCityChickenDist());
        return;
    }
    
    for (let i = startIndex; i < chickens.length; i++) {
        // M개를 선택할 수 없으면 종료
        if (chickens.length - i + count < m) return;
        // 백트래킹
        selectedChickens.push(chickens[i]);
        dfs(count + 1, i + 1);
        selectedChickens.pop();
    }
}

// 선택한 치킨집으로 기반으로, 도시의 치킨 거리 계산
function calculateCityChickenDist() {
    let sum = 0;
    for (const [hr, hc] of houses) {
        let dist = Infinity;
        for (const [cr, cc] of selectedChickens) {
            dist = Math.min(dist, calculateDist(hr, hc, cr, cc));
        }
        sum += dist;
    }
    
    return sum;
}

// 두 좌표 사이의 거리 계산
function calculateDist(r1, c1, r2, c2) {
    return Math.abs(r1-r2) + Math.abs(c1-c2);
}

이미지 크기를 조정하고 Base64로 인코딩하기

yeonDev — Fri, 1 Nov 2024 14:35:08 +0900

사용자가 이미지 주소나 이미지 파일을 업로드했을 때, 이미지 크기를 조정하고 Base64로 인코딩하는 과정을 알아보겠습니다.

개발 환경

클라이언트: Typescript
서버: Node.js + Express + Typescript

상황

사용자가 업로드 한 이미지를 서버에서 Base64로 인코딩해야 한다.

이미지 가로x세로 크기 조정을 서버와 클라이언트 중 어디에서 할까?
- 사용자가 용량이 큰 이미지를 업로드했을 때를 고려하여, 클라이언트에서 크기를 조정하고 용량을 줄인 후 서버로 전송하겠습니다.
클라이언트에서 서버로 이미지를 전송할 때 어떤 형태로 전송할까? (이미지 주소, 파일, Blob, Base64 등)
- 클라이언트에서 Canvas를 사용하여 이미지 크기를 줄일 수 있습니다.
- Canvas의 toBlob 함수를 사용하여 크기를 줄인 이미지를 이진 데이터 형태로 받을 수 있기 때문에 Blob을 서버에 전송하겠습니다.

+) 클라이언트에서 Base64로 인코딩해도 되지 않을까?

FileReader 객체로 이미지를 읽은 후 Base64로 인코딩할 수 있습니다.
하지만 어차피 서버에 이미지를 전달해야 하는 상황이고, 미미한 차이지만 Base64로 인코딩하면 사이즈가 기존보다 4/3 (약 33%) 증가하기 때문에 서버에서 인코딩하도록 하겠습니다.
참고 자료: Why is a base 64 encoded file 33% larger than the original?

Why is a base 64 encoded file 33% larger than the original?

Understanding what is base64 encoding & how it works

bharatkalluri.com

목표

클라이언트에서 이미지 크기를 조정한다 (with Canvas)
이미지 주소와 파일을 Blob 데이터로 변환하여 서버에 전송한다.
서버에서 Blob 데이터를 Base64로 인코딩한다. (with Buffer)

캔버스로 이미지 크기 조정하고 Blob으로 반환

사용자는 이미지 주소를 제출하거나 드롭다운으로 이미지 파일을 업로드합니다. 이미지 주소일 경우 img src 속성에 바로 넘기면 되고, 이미지 파일일 경우 URL.createObjectURL() 함수를 사용하여 url로 변환 후 img src 속성에 넘겨줍니다. 캔버스를 활용한 이미지 크기 조정 코드는 다음과 같습니다.

function resizeImage(
  fileOrUrl: File | string,
  width: number,
  height: number
): Promise<Blob | null> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 외부 데이터를 캔버스에 그리고 Blob으로 변환할 경우 CORS 에러가 발생한다.
    // 이를 허용하기 위해 crossOrigin 속성을 사용한다.
    // 출처: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
    img.crossOrigin = "anonymous"; 

    // 이미지 주소인 경우
    if (typeof fileOrUrl === "string") img.src = fileOrUrl;
    // 파일인 경우
    else img.src = URL.createObjectURL(fileOrUrl as Blob);

    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext("2d");
      ctx?.drawImage(img, 0, 0, width, height);
      
      // 크기를 조정한 이미지를 blob으로 반환
      canvas.toBlob((blob) => {
        resolve(blob);
      }, "image/png");
    };
    
    // [에러 처리] 이미지 주소가 아닌 주소를 넘기면 에러가 발생
    img.onerror = (error) => reject(error); 
  });
}

Blob 데이터 서버로 전송하기

Blob은 이진데이터를 다루는 객체입니다. 이진 데이터를 서버로 전송하려면 Content-Type을 application/octet-stream 으로 설정합니다.

출처: https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types#application

본인이 구현한 api 주소로 POST 요청을 날려줍니다. 코드는 아래와 같이 작성했습니다.

async function postImage(blob: Blob) {
  return await fetch("your api url", {
    method: "POST",
    headers: { "Content-Type": "application/octet-stream" },
    body: blob,
  });
}

서버에서 이진 데이터를 Base64로 인코딩하기

request body에 담긴 blob을 Buffer로 응답받습니다. 클라이언트에서 이진 데이터를 다루는 객체가 Blob이라면, 서버에서 이진 데이터를 다루는 객체는 Buffer라고 합니다. Buffer 객체에 toString 메소드를 사용하여 base64로 쉽게 인코딩할 수 있습니다.

apiRouter.post("your api url", encodeBase64);

async function encodeBase64(req: Request, res: Response) {
  const buffer = req.body as Buffer; // Buffer 타입 지정
  const base64 = buffer.toString("base64"); // 인코딩 완료
  //...
  res.send("ok");
}

원래 이미지 크기 조정, 인코딩 모두 서버에서 하는 방식으로 구현했었습니다. 이미지 크기가 작으면 문제가 없었지만, 이미지 크기가 클 경우 인코딩할 때까지 7~8초의 시간이 걸리기도 했습니다 그러다 생각한 방법이 Canvas로 클라이언트에서 이미지 크기를 조정하고 서버로 전송하는 것이었습니다. 그 결과 이미지 크기가 커도 (너비가 약 1300~2000px 정도 되는 이미지여도) 2초대에서 이미지 전송 및 인코딩을 마칠 수 있었습니다. (+ 이렇게 하면 디스크에 이미지를 저장하는 Multer와 이미지 크기 조정에 필요한 Sharp 라이브러리도 필요하지 않더라고요!)

이미지 크기 조정, 이미지 전송할 일이 있으면 이 방법이 도움이 되었으면 합니다. 읽어주셔서 감사합니다 :)

백준 14503 로봇 청소기 - Node.js

yeonDev — Tue, 15 Oct 2024 11:55:41 +0900

문제

문제는 여기에서 확인

문제풀이

N, M의 크기가 크지 않고 모든 방향을 탐색해야 하므로 완전 탐색을 사용한다. 청소 가능한 방향을 우선으로 깊이 탐색하므로 DFS를 사용했다.

1.청소한 곳을 방문 처리할 visited 배열을 생성한다.

2. 문제에 적힌 대로 북동남서(0, 1, 2, 3) 방향 배열을 생성한다.

// 북, 동, 남, 서
const dr = [-1, 0, 1, 0];
const dc = [0, 1, 0, -1];

3. 현재 위치를 방문처리 하고 DFS를 수행한다.

POINT

반시계 방향으로 회전하므로 방향은 +1이 아닌 +3으로 계산해야 한다.
네 방향 모두 청소하여 후진할 때는 방향을 유지한 채로 이동한다.

전체 코드

const fs = require("fs");
const [[n, m], [r, c, d], ...graph] = fs.readFileSync("/dev/stdin").toString().trim().split("\n")
    .map(line => line.split(" ").map(Number));
const visited = Array.from(new Array(n), () => Array(m).fill(false));
// 북동남서
const dr = [-1, 0, 1, 0];
const dc = [0, 1, 0, -1];
let answer = 1; // 현재 위치 카운트

visited[r][c] = true; // 현재 위치 방문 처리
dfs(r, c, d);
console.log(answer);
        
function dfs(r, c, d) {    
    for (let i = 0; i < 4; i++) {
        d = (d + 3) % 4; // 반시계 방향으로 90도 회전
        const nr = r + dr[d];
        const nc = c + dc[d];
        
        // 범위를 벗어나면 패스
        if (nr < 0 || nr >= n || nc < 0 || nc >= m) continue;
        // 벽이면 패스
        if (graph[nr][nc] === 1) continue;
        // 아직 청소하지 않았으면
        if (graph[nr][nc] === 0 && !visited[nr][nc]) {
            visited[nr][nc] = true;
            answer++;
            dfs(nr, nc, d);
            return; // 네 방향 탐색 종료
        }
    }
    
    // 네 방향 모두 이미 청소했으면
    d = (d + 2) % 4; // 후진 방향
    const nr = r + dr[d];
    const nc = c + dc[d];

    // 범위를 벗어나면 종료
    if (nr < 0 || nr >= n || nc < 0 || nc >= m) return;
    // 벽이면 종료
    if (graph[nr][nc] === 1) return;
    // 빈 칸이면 후진
    if (graph[nr][nc] === 0) dfs(nr, nc, (d + 2) % 4); // 방향을 유지한 채로 후진
}

이벤트 루프(Event Loop)를 알면 좋은 점

yeonDev — Sun, 6 Oct 2024 17:00:08 +0900

1️⃣ 이벤트 루프란?

Javascript가 브라우저에서 동작하는 방식입니다. 브라우저 JS 런타임은 이벤트 루프에 기반하여 실행되며, 구성은 다음과 같습니다.

Call Stack: 스택에 함수가 저장되었다가 순차적으로 실행된다.
Web API 컨테이너: 브라우저에서 제공하는 API가 콜 스택에서 호출되면, 함수가 Web API 컨테이너에 저장된다. 함수 실행 시점이 되면 함수(callback)를 콜백 큐로 이동시킨다.
Callback Queue: 콜백 큐에 저장된 함수(callback)는 이벤트 루프에 의해 순차적으로 콜 스택으로 이동한다.
Event Loop: 콜 스택이 모두 비어있을 때 콜백 큐에 저장된 함수를 콜 스택으로 이동시킨다.

출처: ✨♻️ JavaScript Visualized: Event Loop (https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

2️⃣ 왜 이벤트 루프를 만들었을까?

싱글 스레드인 Javascript가 브라우저에서 동시성(Concurrency)을 갖기 위해서 입니다.

동시성(Concurrency)이란?

시간을 잘게 나누어 각 시간마다 서로 다른 일을 번갈아 작업한다. 마치 동시에 여러 작업을 처리하는 것 같지만 실제로는 한 번에 하나의 일만 한다.

병렬성/평행성(Parallelism)이란?

같은 시간 동안 여러 작업을 처리하는 것으로, 멀티스레드가 병렬성을 가진다.

API를 통해 데이터를 가져오거나 이벤트 처리 등 웹 서비스에서 비동기로 처리해야 하는 작업이 있습니다. 하지만 싱글 스레드인 JS는 한 번에 하나의 일만 순차적으로 할 수 있습니다. 즉, 중간에 긴 시간을 소요하는 작업이 있다면 JS는 다음 작업으로 넘어가지 못하고, 사용자 입장에서 웹이 멈췄다고 생각할 겁니다.

console.log("시작");
runLongTask();
console.log("긴 시간 뒤에 실행");

function runLongTask() {
    let count = 0;
    for (let i = 0; i < 1e9; i++) {
    	count++;
    }
}

// 시작
// (긴 시간 소요)
// 긴 시간 뒤에 실행

다행히도 Event Loop와 브라우저에서 제공하는 Web APIs 덕분에 JS는 복잡하고 긴 작업을 비동기로 처리할 수 있습니다.

3️⃣ 이벤트 루프 동작 방식

출처: How JavaScript Works: Web APIs, Callback Queue, and Event Loop (https://dev.to/bipinrajbhar/how-javascript-works-web-apis-callback-queue-and-event-loop-2p3e)

위 그림에 보이는 코드를 실행하면 다음과 같은 결과가 나옵니다.

start
end
I sec delay

JS는 콜 스택에 저장된 함수를 순차적으로 실행하며, setTimeout도 순서에 맞게 실행됩니다. 다만 Web API 함수는 콜 스택에서 빠져나와 Web API 컨테이너에 저장되며, JS는 callback이 실행되길 기다리지 않고 바로 다음 작업을 합니다. 타이머를 체크하고 delay 만큼 대기하는 작업을 브라우저가 대신하며, 대기가 끝나면 setTimeout에 연결된 callback은 콜백 큐로 이동합니다. 이때 콜 스택이 비어있다면 ,이벤트 루프에 의해 콜백 큐에 저장된 함수를 실행합니다.

4️⃣ 이벤트 루프를 알면 좋은 점

이벤트 루프 덕분에 JS가 브라우저에서 비동기 작업을 처리할 수 있다는 건 알겠습니다. 하지만 이 개념이 실전에서 어떻게 사용될 수 있을까요? 그건 콜백 큐를 더 자세히 살펴봐야 합니다.

콜백 큐는 실제로 세 가지 큐로 구성되어 있습니다.

(Macro)Task Queue: setTimeout, setInterval, DOM, URL 등
Animation Frame Queue
Microtask Queue: Promise callback, Mutation observer API, await/async callback 등

Web APIs 콜백은 우선순위를 가지며, 아래로 갈 수록 우선 순위가 높습니다 (Micro > Animation > Macro). Microtask는 큐를 모두 비울 때까지 작업을 수행합니다. 즉, Microtask를 완료하기 전까지는 랜더링(Animation)과 Macrotask가 실행되지 않습니다.

각 태스크의 우선순위와 동작 방식을 알고 함수를 작성해야 웹이 멈춰버리는 문제를 줄일 수 있습니다. Microtask를 처리하느라 다른 큐의 작업이 지연되는 예시를 보면 다음과 같습니다.

// 출처: Claude로 생성 및 수정

let frameCount = 0;

function animateElement() {
  const element = document.getElementById("animatedElement");
  element.style.transform = `translateX(${frameCount}px)`;
  frameCount++;

  requestAnimationFrame(animateElement);
}

function createMicrotasks() {
  Promise.resolve().then(() => {
    let result = 0;
    for (let i = 0; i < 1e9; i++) {
      result += Math.random();
    }
  });
}

function badMicrotaskOverflow() {
  console.log("Starting animation and creating microtasks...");

  // Start the animation
  animateElement();

  // Create a large number of microtasks
  createMicrotasks();

  // Microtask 때문에 지연되는 Macrotask Queue
  setTimeout(() => {
    console.log("Animation frame count:", frameCount);
    console.log("This message is delayed!");
  }, 0);
}

badMicrotaskOverflow();

버튼이 오른쪽으로 계속 이동하는 애니메이션을 구현했습니다. 하지만 Promise의 콜백을 처리 중일 때는 translateX 작업이 지연되며, 로딩이 끝난 후에야 translateX와 setTimeout이 수행됩니다. 위 코드를 실행하면 아래 이미지에서 보이는 것처럼 Microtask를 수행하느라 버튼이 표시되지 않는 것을 확인할 수 있습니다.

Event Loop 데모: Microtask를 처리하느라 로딩 중인 걸 탭에서 확인할 수 있다.

작업의 지연을 막기 위해 위 코드를 수정해보겠습니다. Microtask 작업을 한 번에 처리하지 않고 나눠서 작업하면, 그 동안 Animation Frame과 Macrotask도 수행할 수 있습니다.

// 출처: Claude로 생성 및 수정

let frameCount = 0;

function animateElement() {
  const element = document.getElementById("animatedElement");
  element.style.transform = `translateX(${frameCount}px)`;
  frameCount++;

  requestAnimationFrame(animateElement);
}

function createMicrotasks(
  totalIterations,
  batchSize = 1000000,
  currentIteration = 0
) {
  return new Promise((resolve) => {
    let result = 0;
    const endIteration = Math.min(
      currentIteration + batchSize,
      totalIterations
    );

    for (let i = currentIteration; i < endIteration; i++) {
      result += Math.random();
    }

    if (endIteration < totalIterations) {
      // Use setTimeout to create next microtask
      setTimeout(() => {
        createMicrotasks(totalIterations, batchSize, endIteration);
      }, 0);
      console.log("Microtask created for iteration:", endIteration);
    } else {
      console.log("All microtasks completed!");
      resolve(result);
    }
  });
}

function improvedMicrotaskHandling() {
  console.log("Starting animation and creating microtasks...");

  // Start the animation
  animateElement();

  // Divide a large number of microtasks
  const totalIterations = 1e9;
  createMicrotasks(totalIterations);

  setTimeout(() => {
    console.log("Animation frame count:", frameCount);
  }, 0);
}

// Call the function to start the process
improvedMicrotaskHandling();

위 코드를 실행하면 버튼이 움직이면서 Microtask도 수행하고 있음을 확인할 수 있습니다.

Microtask를 나눠서 작업 중...

1e9번의 작업을 모두 수행한 후에 완료 메시지도 표시되었습니다 :)

모든 Microtask 작업 완료!

여기까지 이벤트 루프의 개념을 알아봤습니다. 우연히 책이나 강의를 통해 기술 지식을 얻고나면 '이걸 알면 뭐가 좋을까?'가 가장 궁금한데, 원티드에서는 그 부분도 다뤄줘서 좋았습니다 이벤트 루프를 모르면 발생할 수 있는 문제와 이를 해결하기 위한 방법까지 정리해봤습니다.

이전에 추천드린 대로 아래 유튜브가 개념을 자세하게 다루고 있으니 한 번 보셔도 좋을 것 같습니다. 틀린 부분 있으면 댓글 부탁드립니다. 읽어주셔서 감사합니다 ‍♀️

참고자료

[후기] 면접 단골 질문 - 이벤트 루프 다시 돌아보기

yeonDev — Mon, 30 Sep 2024 16:52:14 +0900

[공지] 프리온보딩 FE 챌린지 9월 | 원티드

이력서, 채용 공고, 연봉 정보는 물론 프리랜서 프로젝트까지! 신입 취업 및 경력직 이직, 커리어 성장에 필요한 모든 것을 만나보세요.

www.wanted.co.kr

취업 준비 중인 0년차 신입으로서, 자기소개서 쓰는 것도 쉽지 않지만 제일 두려운 건 면접입니다 오늘도 어김없이 취업사이트를 둘러보다가 원티드에서 세션을 진행하길래 냅다 신청했습니다.

취업 준비를 하다보면 문득 '교육을 받고 싶긴한데, 부트 캠프만 몇 개월 듣기는 부담스럽다'라고 생각한 적이 많았습니다. 원티드에서 진행하는 세션은 신입뿐만 아니라 주니어 개발자도 대상으로 하기 때문에 하루 종일 진행하는 교육이 아니었습니다. 게다가 돈을 내야하는 것도 아닙니다. 완전 혜자아니야? 이건 신청할 수 밖에 없었습니다.

일정도 부담스럽지 않은데 심지어 공짜라고?!

주 2회 주말에 3시간씩, 총 2주 동안 진행되었습니다. 줌에서 실시간으로 진행되고, 디스코드나 줌 채팅을 통해 마음껏 질문할 수 있습니다. 혹시 일정 때문에 강의를 놓치더라도 '다시보기'를 신청하여 3개월 동안 영상을 볼 수 있습니다. 다시보기는 단돈 1만원으로 신청할 수 있고, 신청 방법은 때가 되면 이메일과 디스코드로 친절히 안내해주십니다.

친절한 다시보기 안내

그래서 무엇을 배웠습니까❓

제목 그대로 '이벤트 루프'에 대해서 배웠습니다. 난생 처음 들은 단어였는데(머쓱), 이벤트 루프를 알기 위해서 결국 아래 기술 개념을 모두 알아야 하더라고요.

비동기/동기
블로킹/논블로킹
Callback Queue
Call Stack
실행컨텍스트
클로저
Promise
Async/Await

그래서 이번 세션이 파편적으로 알고 있던 기술 개념을 복습해보는 시간이기도 했습니다. 기술 면접 준비를 위해 기술 개념을 공부하다보면 '이걸 그래서 실전에 어떻게 활용하는거지? 무슨 도움이 되는 거지?'하고 궁금할 때가 많았습니다. 그 부분을 박박 긁어준 세션이었습니다.

강사님의 알찬 수업으로 유용한 지식을 얻었으니 기술 블로그에 개념을 하나씩 정리하며 복습하려고 합니다. 의지 박약으로 글쓰기를 더 이상 미루지 않기 위해 먼저 여기에 선언합니다

노션에 소중하게 정리한 강의

추가로 이벤트 루프에 대해 더 찾아보다가, 이 개념을 아주아주 쉽게 설명한 유튜브 영상 하나 공유합니다. 이미 위에 적어놓은 개념을 알고 계시다면, 바로 영상을 봐주시길 바랍니다.

그럼 곧 다시 돌아오겠습니다. 원티드가 10월에도 세션을 열었으니 관심 있는 분들은 뭐가 있는지 둘러보세요! 주제가 매번 다른 거 같은데 진작 알았으면 좋았을 걸.. 세션은 원티드 커리어 탭에서 확인하실 수 있습니다.

비동기 처리 : 콜백 패턴부터 async/await까지 (with TMDB)

yeonDev — Sun, 4 Feb 2024 23:16:04 +0900

콜백 패턴부터 async/await 사용법을 TMDB API (V3)에서 인기 영화 목록을 가져오는 사례와 함께 알아봅시다. 모던 자바스크립트 Deep Dive의 비동기 처리 내용을 읽고 테스트 한 내용입니다.

도마뱀 책에게 감사를!

먼저 TMDB에 로그인하고 API key를 발급받습니다. 반복적으로 사용하는 URL과 Params, API key는 아래와 같이 상수로 정리했습니다.

// constant.js
const BASE_URL = "https://api.themoviedb.org/3";
const API_KEY = "your API key";
const BASE_PARAMS = "language=ko-KR&region=410";

export { BASE_URL, API_KEY, BASE_PARAMS };

이제 TMDB에서 인기 영화 목록을 가져와 아래처럼 화면에 나타내고, 영화 이미지를 클릭하면 모달에 영화 상세 정보를 표시할 겁니다. (모달 닫기 버튼은 안 만들었습니다..)

(좌)영화 목록 / (우)영화 상세 정보

HTML과 CSS는 다음처럼 작성했습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Asynchronous with TMDB</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <div id="movieList"></div>
    </main>
    <div id="modal"></div>
  </body>
  <script type="module" src="index.js"></script>
</html>

/* style.css */
body {
  margin: 0;
  background-color: #252744;
}

main {
  display: flex;
  justify-content: center;
}

main #movieList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#movieList img {
  width: 200px;
  height: 300px;
  background-color: grey;
  cursor: pointer;
}

#modal {
  z-index: 10;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}

1️⃣ 콜백 패턴 with XMLHttpRequest

콜백 패턴은 비동기 처리가 완료된 후 실행할 함수를 콜백 함수로 전달하는 방법입니다. 콜백 함수를 사용하는 이유는 다른 동기 함수가 종료된 후에 비동기 함수가 실행되기 때문입니다. 즉, 아래처럼 비동기 처리의 결과를 외부(상위 스코프)에 전달하려고 해도, 전역 컨텍스트가 종료된 후 setTimeout의 콜백 함수가 실행되기 때문에 원하는 결과를 얻을 수 없습니다.

let result = 0;

setTimeout(() => {
  result = 100;
  console.log(`내부: ${result}`);
}, 0);

console.log(`외부: ${result}`);

다음처럼 외부 함수가 먼저 실행된 후, 콜백 함수가 실행된 것을 확인할 수 있습니다.

외부 console.log 실행 후 비동기 처리

그러니 영화 목록을 가져오는 get 함수를 실행 한 후 화면에 영화 목록을 생성하려면, 영화 목록을 생성하는 작업을 콜백 함수로 전달하여 영화 데이터를 받은 후 사용해야합니다. 콜백 함수로 받은 json을 출력해 보면 영화 정보가 담겨 있는 것을 확인할 수 있습니다.

// index.js
import { BASE_URL, API_KEY, BASE_PARAMS } from "./constant.js";

const url = `${BASE_URL}/movie/popular?${BASE_PARAMS}&page=1`;

get(url, (json) => {
  console.log(json);
  // 응답 받은 json으로 화면에 영화 목록을 생성한다.
});

/* url에 GET 요청을 보내고, 처리 결과를 callback에 전달한다. */
function get(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);

  // header 설정
  xhr.setRequestHeader("Authorization", `Bearer ${API_KEY}`);
  xhr.setRequestHeader("accept", "application/json");

  xhr.send();
  xhr.onload = function () {
    if (xhr.status === 200) {
      // callback에 결과 전달
      callback(JSON.parse(xhr.response));
    } else {
      console.error("Error", xhr.status, xhr.statusText);
    }
  };
}

JSON: 인기 영화 목록

화면에 영화 목록을 생성한 후에는 각 영화 img마다 클릭 이벤트를 추가해야 합니다. 사용자가 영화 img를 클릭하면, HTTP 요청을 보내 영화 id로 상세 정보를 가져오고, 그 정보를 모달에 추가하여 화면에 표시해야 합니다. 그러면 위 코드에서 최초로 실행한 get 함수는 다음과 같은 구조가 됩니다.

get(url, (json) => {
  // 응답 받은 json으로 화면에 영화 목록을 생성한다...
  // 각 영화 img에 클릭 이벤트를 추가한다...
  // 클릭 이벤트가 발생하면 영화 id로 상세 정보를 불러온다.
  get(`${BASE_URL}/movie/${movieId}?${BASE_PARAMS}`, (json) => {
      // ...
    });
});
// ...

지금은 간단한 기능만 구현하여 복잡하지 않지만 프로그램 규모가 커지고 기능이 복잡해지면, 콜백 함수를 받는 get 함수가 중첩되면서 코드 또한 복잡해지게 됩니다. 이런 현상을 콜백 지옥(Callback Hell)이라고 합니다. 하지만 복잡한 콜백 패턴은 후속 처리 메소드를 사용하는 Promise로 해결할 수 있게 되었습니다.

아래는 콜백 패턴을 사용한 전체 코드입니다.

import { BASE_URL, API_KEY, BASE_PARAMS } from "./constant.js";

const url = `${BASE_URL}/movie/popular?${BASE_PARAMS}&page=1`;

get(url, (json) => {
  createMovieList(json);

  // 각 영화 img에 클릭 이벤트를 추가한다.
  const imgs = document.querySelectorAll("img");
  imgs.forEach((img) => img.addEventListener("click", handleClick));

  /* 영화 목록을 화면에 표시한다. */
  function createMovieList(json) {
    const list = document.querySelector("#movieList");

    json.results.forEach((movie) => {
      const img = document.createElement("img");
      img.src = `https://image.tmdb.org/t/p/w200${movie.poster_path}`;
      img.alt = movie.title;
      img.dataset.id = movie.id;
      list.appendChild(img);
    });
  }

  /* 영화 img의 클릭 이벤트를 처리한다. */
  function handleClick(event) {
    const movieId = event.target.dataset.id;

    get(`${BASE_URL}/movie/${movieId}?${BASE_PARAMS}`, (json) => {
      // 모달을 생성하고 body에 추가한다.
      const modal = createModal();
      const body = document.querySelector("body");
      body.appendChild(modal);
    });
  }

  /* 영화 정보를 담은 모달을 생성하고 반환한다. */
  function createModal() {
    const modal = document.querySelector("#modal");
    const h2 = document.createElement("h2");
    const overview = document.createElement("p");

    modal.innerHTML = "";
    h2.innerText = json.title;
    overview.innerText = json.overview;
    modal.appendChild(h2);
    modal.appendChild(overview);

    modal.style.width = "60%";
    modal.style.height = "40%";
    modal.style.padding = "24px 32px";
    modal.style.borderRadius = "24px";

    return modal;
  }
});

/* url에 GET 요청을 보내고, 처리 결과를 callback에 전달한다. */
function get(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);

  // header 설정
  xhr.setRequestHeader("Authorization", `Bearer ${API_KEY}`);
  xhr.setRequestHeader("accept", "application/json");

  xhr.send();
  xhr.onload = function () {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.response));
    } else {
      console.error("Error", xhr.status, xhr.statusText);
    }
  };
}

2️⃣ 콜백 패턴 with Promise

Promise는 ES6에서 등장한 생성자 함수입니다. Promise를 사용하면 비동기 작업을 동기처럼 처리할 수 있습니다. 앞서 살펴본 콜백 패턴은 비동기 처리 결과를 외부 변수에 전달할 수 없었지만, 비동기 함수가 Promise를 반환하도록 하면 외부에서 비동기 처리 결과를 받을 수 있습니다. 아래처럼 기존 get 함수가 Promise를 반환하도록 만들고 결과를 출력해 보면,

const promise = get(`${BASE_URL}/movie/popular?${BASE_PARAMS}&page=1`);
console.log(promise);

/* url에 GET 요청을 보내고, 처리 결과를 Promise로 반환한다. */
function get(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);

    // header 설정
    xhr.setRequestHeader("Authorization", `Bearer ${API_KEY}`);
    xhr.setRequestHeader("accept", "application/json");

    xhr.send();
    xhr.onload = function () {
      if (xhr.status === 200) {
      	// 응답을 성공적으로 받으면 resolve에 json(처리 결과)을 넘긴다.
        resolve(JSON.parse(xhr.response));
      } else {
      	// 실패하면 reject에 실패 이유를 전달한다.
        reject(`Error ${xhr.status}: ${xhr.statusText}`);
      }
    };
  });
}

아래처럼 Promise 객체를 받은 것을 확인할 수 있습니다. PromiseState는 비동기 처리 상태를 나타내며, 처리 전이 "pending", 성공적으로 처리하면 "fullfilled", 에러가 발생하면 "rejected"가 됩니다.

Promise 반환 결과

후속 처리 메소드

인기 영화 목록을 Promise로 받아왔으니, 영화 상세 정보를 모달에 입력하여 화면에 표시해야 합니다. Promise의 then, catch 메소드로 응답 결과를 처리하거나 에러에 대응할 수 있습니다.

이전과 마찬가지로 인기 영화 목록을 화면에 표시하는 코드입니다. 함수를 분리하기 위해 Image Element를 중간에 프로미스로 반환했습니다.

const popular = get(`${BASE_URL}/movie/popular?${BASE_PARAMS}&page=1`);
const imgsPromise = popular
  .then((json) => {
    createMovieList(json);
    // Image element[] 반환 (프로미스로 반환됨)
    return document.querySelectorAll("img");

    function createMovieList(json) {
      const list = document.querySelector("#movieList");

      json.results.forEach((movie) => {
        const img = document.createElement("img");
        img.src = `https://image.tmdb.org/t/p/w200${movie.poster_path}`;
        img.alt = movie.title;
        img.dataset.id = movie.id;
        list.appendChild(img);
      });
    }
  })
  .catch(console.error);

원래는 get이 두 번 중첩되었으나 비동기 함수가 Promise를 반환하도록 만들었기 때문에, 다음처럼 각 영화 img에 클릭 이벤트를 이전 get 함수와 중첩 없이 추가할 수 있습니다.

//...
// 각 영화 img에 클릭 이벤트를 추가한다.
imgsPromise.then((imgs) => {
  imgs.forEach((img) => img.addEventListener("click", handleClick));

  function handleClick(event) {
    const id = event.target.dataset.id;
    const detail = get(`${BASE_URL}/movie/${id}?${BASE_PARAMS}`);

    detail
      .then((json) => {
        // 영화 정보를 담은 모달을 생성하고 body에 추가한다.
        const modal = createModal(json);
        const body = document.querySelector("body");
        body.appendChild(modal);
      })
      .catch(console.error);
  }

  function createModal(detail) {
    //...
  }
});

지금은 get 함수가 프로미스를 반환하도록 직접 구현했지만 HTTP 요청할 때는 프로미스를 반환하는 fetch 함수를 사용할 수 있습니다.

3️⃣ fetch

fetch 함수는 위에서 구현한 get 함수처럼 HTTP 응답을 프로미스로 반환합니다. 즉, fetch도 프로미스의 후속 처리 메소드를 사용할 수 있습니다. 아래는 fetch 함수를 사용하여 get 함수를 새로 정의한 코드입니다.

function get(url) {
  const options = {
    method: "GET",
    headers: {
      Authorization: `Bearer ${API_KEY}`,
      accept: "application/json",
    },
  };
  return fetch(url, options)
    .then((res) => {
      if (res.ok) return res.json();
      throw new Error(res.statusText);
    })
}

fetch가 반환한 Response 객체의 구조는 다음과 같습니다.

fetch가 반환한 Response

fetch는 Response 객체를 반환하고, ok 속성에 응답 성공 여부를 나타냅니다. 응답 결과는 json 메소드를 사용하여 JSON으로 파싱할 수 있습니다. 이때, json도 프로미스를 반환하므로, 중간에 then 메소드를 사용하여 JSON을 반환하는 과정이 필요합니다.

ok로 응답 성공 여부를 확인했음에도 catch 메소드를 사용하는 이유는 fetch가 HTTP 에러는 reject 하지 않기 때문입니다. 따라서 then에서 한 번, catch에서 한 번 에러를 확인해줘야 합니다.

fetch does not reject on HTTP errors (출처: MDN)

아래처럼 Response.ok가 false면 에러를 던져서 catch에 전달해 줍시다.

// fetch 기본 구조
fetch(url)
    .then((res) => {
      if (res.ok) return res.json();
      throw new Error(); // HTTP 에러 던지기
    })
    .catch((error) => {
      // 에러 처리
});

4️⃣ async / await

프로미스의 후속 처리 메소드로 콜백 지옥에서 벗어났지만, 실행 결과 뒤로 계속 이어지는 콜백 패턴은 여전히 복잡해 보입니다. 이를 위해 후속 처리 메소드 없이도 비동기를 처리할 수 있는 async / await가 ES8에서 등장하게 됩니다.

async를 앞에 붙여서 함수를 정의하면, 해당 함수는 비동기로 작동하며 프로미스를 반환합니다. await는 async로 정의된 함수 내부에서 사용하며, 프로미스를 반환하는 함수가 resolve 한 값을 받아올 수 있습니다. 즉, 프로미스가 아니라 비동기 처리되어 fullfilled나 rejected 된 결과를 받게 됩니다.

이전에 작성한 get 함수에 async / await를 사용하면 아래와 같습니다.

async function get(url) {
  const options = {
    method: "GET",
    headers: {
      Authorization: `Bearer ${API_KEY}`,
      accept: "application/json",
    },
  };

  try {
    // fetch가 resolve 한 Response를 받아온다.
    const res = await fetch(url, options);
    return res.json();
  } catch (error) {
    console.error(error);
  }
}

에러 처리는 후속 처리 메소드 catch 대신 try...catch 문을 사용하면 됩니다. catch는 try 블록에서 예외가 발생하면 실행되며, 후속 처리 메소드와 달리 HTTP 에러도 처리합니다.

아래는 async로 정의한 get 함수를 사용하여 인기 영화 목록을 생성하는 코드입니다. 콜백 패턴을 사용하지 않아서 가독성이 더 좋아진 모습입니다.

(async function () {
  // 인기 영화 정보를 받아온다.
  const popular = await get(`${BASE_URL}/movie/popular?${BASE_PARAMS}&page=1`);
  createMovieList(popular);

  const imgs = document.querySelectorAll("img");
  imgs.forEach((img) => img.addEventListener("click", handleClick));

  function createMovieList(json) {
    // ...
  }

  async function handleClick(event) {
    const id = event.target.dataset.id;
    // 영화 상세 정보를 받아온다.
    const detail = await get(`${BASE_URL}/movie/${id}?${BASE_PARAMS}`);
    const modal = createModal(detail);
    const body = document.querySelector("body");
    body.appendChild(modal);
  }

  function createModal(detail) {
    // ...
  }
})();

5️⃣ 인기 영화 무한 스크롤 with Generator

XMLHttpRequest부터 async / await를 사용하여 비동기를 처리하는 방법을 알아봤습니다. 여기까지 온 김에 Generator를 사용하여 반복적으로 HTTP 요청을 보내 무한 스크롤을 만들어보겠습니다.

제너레이터 함수는 yield 표현식을 사용하여, 특정 시점에 코드를 실행했다가 일시정지 할 수 있습니다. MDN에 나와있는 Generator 함수의 예시를 보면, next 메소드를 실행할 때마다 yield 표현식을 실행하며, 차례대로 1, 2, 3을 반환하고 일시정지 하는 것을 확인할 수 있습니다.

// 출처: MDN
function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

인기 영화 목록을 보여주는 무한 스크롤을 만들려면, 사용자가 현재 영화 목록을 끝까지 스크롤했을 때(특정 시점) 영화 목록을 추가로 불러와야 합니다(yield). 즉, 스크롤 위치(scrollY)와 창의 내 높이(innerHeight)를 더한 값이 웹 콘텐츠 전체 길이(body.scrollHeight)와 같아지면, 다음 페이지의 영화 목록을 표시합니다.

무한 스크롤에 필요한 값 확인!

이전에 작성한 코드에 다음 제너레이터 함수를 추가합니다. 특정 시점이 되어 yield 표현식을 실행할 때마다 page 값을 증가시키며 인기 영화 목록을 요청합니다.

const popularGenerator = (async function* () {
  let page = 1;

  while (true) {
    if (page > 500) break; // page는 500 이하의 자연수
    // 다음 페이지 인기 영화 목록 가져오기
    yield await get(`${BASE_URL}/movie/popular?${BASE_PARAMS}&page=${++page}`);
  }
  return; // 종료
})();

사용자가 창을 스크롤했을 때 스크롤이 끝까지 내려갔는지 확인하기 위해, window에 scroll 이벤트 리스너를 추가합니다. 특정 시점은 앞서 설명한 대로 scrollY + innerHeight === body.scrollHeight 가 되었을 때입니다.

window.addEventListener("scroll", handleScroll);

async function handleScroll() {
  const body = document.querySelector("body");

  if (window.innerHeight + window.scrollY >= body.scrollHeight) {
    const { done, value } = await popularGenerator.next();
    
    // 영화 목록이 남아있으면
    if (!done) createMovieList(value);
  }
}

done을 통해 generator 함수가 종료(return)되었는지 확인할 수 있습니다. 함수가 종료되지 않았으면 done이 false이고, next 메소드로 전달받은 인기 영화 목록을 화면에 표시합니다.

사이트를 확인해보면 스크롤이 끝에 다다를 때마다 새로운 영화가 추가되고 있습니다!