CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42576">완주하지 못한 선수</a></p></li><li><p>사용언어 : C++</p></li><li><p>난이도 : 중 or 중하</p></li><li><p>풀이시간 : 15m</p></li><li><p>유형 : 해시 , 정렬</p></li></ul><h6><strong>문제 설명</strong></h6><p>수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.</p><p>마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.</p><h5>제한사항</h5><ul><li><p>마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.</p></li><li><p>completion의 길이는 participant의 길이보다 1 작습니다.</p></li><li><p>참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.</p></li><li><p>참가자 중에는 동명이인이 있을 수 있습니다.</p></li></ul><h5>입출력 예</h5><p>participant completion return<br>["leo", "kiki", "eden"] ["eden", "kiki"] "leo"<br>["marina", "josipa", "nikola", "vinko", "filipa"] ["josipa", "filipa", "marina", "nikola"] "vinko"["mislav", "stanko", "mislav", "ana"] ["stanko", "ana", "mislav"] "mislav"</p><h5>입출력 예 설명</h5><p>예제 #1<br>"leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.</p><p>예제 #2<br>"vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.</p><p>예제 #3<br>"mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.</p><h3>문제 풀이 접근</h3><p>이 문제는, 어제 풀었던 것과 같이 문자열의 정렬 기준만 알면 간단하게 풀 수 있다. <br>complete 의 길이가 participant 의 길이 보다 1 작아서 무조건 1명만 반환한다는 제약도 있고, 애초에 return 값이 문자열 하나다. 그래서 하나 작다고 유추할 수도 있다. </p><p>문자열의 정렬 기준을 이용해서 둘다 정렬하고, 각 index에 매칭되는 것이 있는지 체크를 한 후에 맞지 않는 Case 가 있다면 answer 에 저장하고 리턴하면 옳은 값을 도출해 낼 수 있다.</p><h3>정답 작성 코드 (C++) - 문제가 C# 지원 안한다.</h3><pre spellcheck="false"><code>#include &lt;string&gt;
#include &lt;vector&gt;
#include &lt;algorithm&gt;

using namespace std;

string solution(vector&lt;string&gt; participant, vector&lt;string&gt; completion) {
    string answer = "";
    
    sort(participant.begin(), participant.end());
    sort(completion.begin(), completion.end());
    
    
    string strParticipant = "";
    string strCompletion = "";
    
    for(int i = 0; i &lt; participant.size(); ++i)
    {
        if(answer != "")
        {
            return answer;
        }
                    
        if(i &lt; completion.size() &amp;&amp; participant[i] != completion[i])
            answer = participant[i];
    }
    
    if(answer == "")
    {
        answer = participant[participant.size()-1];
    }
    
    return answer;
}</code></pre><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><h3><br><br></h3>

혼자서 다시푸는 코딩테스트 준비 일지 - 3

코딩테스트 준비 - 완주하지 못한 선수

Firebase

<p>지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.</p><blockquote><p>이 글은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/tj87pFGqiWDiLl18LVXl">이 곳</a> 에서도 읽어 보실 수 있습니다.</p></blockquote><p>Google에서 제공하는 Firebase는 편리한 사용성과 높은 생산성을 갖춘 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 클라이언트 개발에 집중하고 싶었던 저에게 매력적인 선택지였습니다. 그러나 향후 다른 플랫폼으로의 이전 가능성을 고려하여 Firebase Client SDK 대신 Cloud Functions를 활용하여 API 서버를 구축하는 방식을 택했습니다.</p><h2>시작하기</h2><h3>Firebase 프로젝트 생성</h3><p>Google 계정으로 로그인 후 Firebase 콘솔(<a target="_blank" rel="noopener noreferrer nofollow" href="http://firebase.google.com/"><u>firebase.google.com</u></a>)에 접속하여 다음과 같이 프로젝트를 설정합니다.</p><p>1. 프로젝트 생성: '프로젝트 만들기' 버튼을 클릭하여 새 프로젝트를 생성합니다.<br>2. Hosting 활성화: 생성된 프로젝트의 사이드바에서 '빌드' &gt; 'Hosting'을 선택하여 Hosting 기능을 활성화합니다.<br>3. Blaze 요금제 선택: Cloud Functions 배포를 위해 Blaze 요금제를 선택하고 결제 수단을 등록합니다.</p><h3>Vite를 이용한 React 프로젝트 생성</h3><p>Firebase 프로젝트 설정을 완료했으므로, 이제 Vite를 사용하여 TypeScript 기반의 React 프로젝트를 생성해 보겠습니다. 터미널에서 다음 명령어를 실행합니다.</p><pre spellcheck="false"><code>$ yarn create vite your-project --template react-ts</code></pre><p>위 명령어 실행 후 안내에 따라 프로젝트 디렉토리로 이동하고, 기본 패키지를 설치한 후 개발 서버를 실행합니다.</p><pre spellcheck="false"><code>$ cd your-project
$ yarn
$ yarn dev</code></pre><p>이제 브라우저에서 <code spellcheck="false">http://localhost:5173/</code>로 접속하면 Vite에서 기본 제공하는 간단한 React 애플리케이션을 확인할 수 있습니다.</p><h3>Firebase 프로젝트와 연동하기</h3><p>이제 Firebase CLI를 사용하여 Firebase 프로젝트와 연동하는 과정을 안내해 드리겠습니다.</p><h4>1. Firebase CLI 설치</h4><p>터미널에서 다음 명령어를 실행하여 Firebase CLI를 전역적으로 설치합니다.</p><pre spellcheck="false"><code>$ npm install -g firebase-tools</code></pre><h4>2. Firebase에 로그인</h4><p>설치된 Firebase CLI를 사용하여 Firebase 계정에 로그인합니다.</p><pre spellcheck="false"><code>$ firebase login</code></pre><p>로그인 명령을 실행하면 브라우저 창이 열리고, Google 계정으로 로그인하라는 메시지가 표시됩니다. 화면의 지시에 따라 로그인을 진행하고, Firebase CLI에 대한 액세스를 허용해주세요.</p><h4>3. 프로젝트 목록 확인</h4><p>로그인이 완료되면 다음 명령어를 실행하여 현재 연결된 Firebase 프로젝트 목록을 확인할 수 있습니디.</p><pre spellcheck="false"><code>$ firebase projects:list</code></pre><p>만약 프로젝트 목록이 정상적으로 출력된다면 Firebase CLI가 올바르게 설치되었고, 계정과 연결되었다는 의미입니다.</p><p>(선택사항) 연결된 Firebase 프로젝트를 변경하고 싶다면 <code spellcheck="false">firebase use &lt;프로젝트 ID&gt;</code> 명령어를 이용해 변경할 수 있습니다.</p><h4>4. 프로젝트 초기화</h4><p>다음 명령어를 실행하여 프로젝트를 초기화합니다. 초기화 과정에서 사용할 Firebase 기능을 선택하고, 필요한 설정을 진행합니다.</p><pre spellcheck="false"><code>$ firebase init</code></pre><img src="https://image.until.blog/susmisc14/article/1722669914257" alt="until-1177"><h3>Cloud Functions 를 사용해 SSR 구현하기</h3><p>Firebase 설정이 완료되었으므로, 이제 Cloud Functions를 활용하여 서버 사이드 렌더링(SSR)을 구현해 보겠습니다. 이를 통해 SEO(검색 엔진 최적화)를 개선할 수 있습니다.</p><h4>1. 필수 라이브러리 설치</h4><p>루트 경로에 생성된 <code spellcheck="false">functions</code> 디렉토리를 삭제하고 다음 명령어를 통해 SSR에 필요한 라이브러리를 설치합니다.</p><pre spellcheck="false"><code>$ yarn add firebase-functions express cors compression isbot</code></pre><p>- <code spellcheck="false">firebase-functions</code>: Firebase Cloud Functions를 사용하기 위한 라이브러리입니다.<br>- <code spellcheck="false">express</code>: Node.js 웹 애플리케이션 프레임워크입니다.<br>- <code spellcheck="false">cors</code>: 다른 도메인에서 자원을 요청할 수 있도록 CORS(Cross-Origin Resource Sharing)를 설정합니다.<br>- <code spellcheck="false">compression</code>: HTTP 응답 데이터를 압축하여 전송 시간을 단축시켜줍니다.<br>- <code spellcheck="false">isbot</code>: 사용자 에이전트를 분석하여 봇 여부를 판단하는 데 사용됩니다.</p><h4>2. Cloud Functions 함수 작성</h4><p>프로젝트 루트 경로에 <code spellcheck="false">index.server.ts</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><pre spellcheck="false"><code>import compression from "compression";
import cors from "cors";
import express from "express";
import functions from "firebase-functions";
import { renderer } from "./src/entry-server";

const app = express();

const corsOptions = {
  origin: true,
  credentials: true,
};

app.use(cors(corsOptions));
app.use(compression());

app.get("*", renderer);

export const render = functions.https.onRequest(app);</code></pre><p><code spellcheck="false">src</code> 디렉토리에 <code spellcheck="false">entry-client.tsx</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><p><code spellcheck="false">entry-client.tsx</code> 파일은 클라이언트에서 React 애플리케이션을 렌더링하는 엔트리 포인트입니다. 기존의 <code spellcheck="false">root</code> 요소가 비어 있으면 <code spellcheck="false">createRoot</code>를 사용해 렌더링하고, 그렇지 않으면 <code spellcheck="false">hydrateRoot</code>를 사용해 기존 콘텐츠를 재사용합니다.</p><pre spellcheck="false"><code>// src/entry-client.tsx

import { StrictMode } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import App from '~app';

const root = document.getElementById('root')!;
const children = &lt;App /&gt;;

if (root.childElementCount === 0) {
  createRoot(root).render(&lt;StrictMode&gt;{children}&lt;/StrictMode&gt;);
} else {
  hydrateRoot(root, children);
}</code></pre><p>다음으로 <code spellcheck="false">src/entry-server.tsx</code> 파일을 생성하고 서버 사이드 렌더링을 위한 코드를 작성합니다.</p><p>이 코드는 Express 요청을 처리하여 React 애플리케이션을 서버에서 렌더링하고, 생성된 HTML을 클라이언트로 스트리밍합니다. <code spellcheck="false">isbot</code> 라이브러리를 사용하여 사용자 에이전트가 봇인지 확인하고, 봇일 경우 완성된 HTML을 한 번에 전송합니다.</p><pre spellcheck="false"><code>// src/entry-server.tsx

import { Transform } from "stream";
import { Request, Response } from "express";
import { renderToPipeableStream } from "react-dom/server";
import App from "./App";
import { isbot } from "isbot";

export async function renderer(req: Request, res: Response) {
  let isError = false;

  const stream = renderToPipeableStream(&lt;App /&gt;, {
    bootstrapModules: ["/index.js"],

    onShellReady() {
      if (!isbot(req.get("user-agent"))) { // 브라우저일 경우 스트리밍 방식으로 HTML 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onShellError() {
      res.statusCode = 500;

      res.setHeader("content-type", "text/html");
      res.send("&lt;h1&gt;Something went wrong&lt;/h1&gt;");
    },

    onAllReady() {
      if (isbot(req.get("user-agent"))) { // 봇일 경우 완성된 HTML을 한 번에 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onError(error) {
      isError = true;

      console.error(error);
    },
  });
}

function transformContent() {
  let content = "";

  const transform = new Transform({
    transform(chunk, _, callback) {
      content += chunk;

      callback();
    },

    flush(callback) {
      const data = `&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;&lt;title&gt;Vite + React + TS&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="root"&gt;${content}&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;`;

      callback(null, data);
    },
  });

  return transform;
}</code></pre><p>이 과정을 통해 서버 사이드 렌더링(SSR)을 구현할 수 있습니다. 이제 서버에서 렌더링된 HTML을 클라이언트에 전송하고, 클라이언트는 이를 재사용하여 빠르게 초기 로딩을 완료할 수 있습니다.</p><h4>3. index.html 수정</h4><p><code spellcheck="false">src/main.tsx</code> 파일을 삭제하고 <code spellcheck="false">index.html</code> 파일을 수정하여 클라이언트 사이드 엔트리 포인트를 변경합니다.</p><pre spellcheck="false"><code>// index.html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Vite + React + TS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="module" src="/src/entry-client.tsx"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h4>4. 빌드 설정</h4><p>Firebase에 배포를 위한 설정을 진행하겠습니다. 루트 경로의 <code spellcheck="false">vite.config.ts</code> <code spellcheck="false">package.json</code> <code spellcheck="false">firebase.json</code> 파일을 다음과 같이 수정합니다.</p><pre spellcheck="false"><code>// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
});</code></pre><pre spellcheck="false"><code>// firebase.json

{
  "functions": [
    {
      "runtime": "nodejs20",
      "source": "./dist/server",
      "codebase": "default"
    }
  ],
  "hosting": {
    "public": "dist/client",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "render"
      }
    ]
  }
}</code></pre><pre spellcheck="false"><code>// package.json

{
// ...생략
  "main": "dist/server/index.server.js",
  "scripts": {
    "dev": "vite",
    "build:client": "tsc &amp;&amp; vite build --outDir dist/client",
    "build:server": "tsc &amp;&amp; vite build --outDir dist/server --ssr index.server.ts &amp;&amp; cp ./package.json ./dist/server",
    "fb:serve": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase serve",
    "fb:deploy": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase deploy"
  }
}</code></pre><p>※ <code spellcheck="false">package.json</code> 파일 중 <code spellcheck="false">scripts</code> 구문에 빌드 후 <code spellcheck="false">index.html</code> 파일을 삭제하는 부분이 있습니다. <code spellcheck="false">index.html</code> 파일을 삭제하는 이유는 Firebase 호스팅의 경우 루트 경로에 HTML 파일이 있으면 <code spellcheck="false">firebase.json</code> 파일에서 설정한 <code spellcheck="false">rewrites</code> 구문이 무시되고 무조건 HTML 파일을 읽게 됩니다. 우리는 SSR이 적용된 프로젝트를 Firebase에 배포하는 것이 목적이므로, 호스팅 루트 경로에 있는 HTML 파일은 삭제해주어야 합니다.</p><h4>5. 배포</h4><p>이제 모든 과정이 끝났습니다. 콘솔에 <code spellcheck="false">yarn fb:serve</code>를 입력하고 개발 서버를 실행하면 SSR이 적용된 페이지를 볼 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668245260" alt="until-1174"><p>로컬 환경에서 SSR이 적용된 것을 확인했으면 터미널에서 <code spellcheck="false">yarn fb:deploy</code>를 입력합니다. 배포된 사이트에 접속하면 SSR이 적용된 페이지를 확인 할 수 있습니다.</p><p>배포된 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="http://react-ts-with-ssr.web.app">react-ts-with-ssr.web.app</a> 에서 확인 할 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668252177" alt="until-1175"><h2>마무리</h2><p>앞으로 Emotion JS를 사용해 SSR 환경에서 스타일을 주입하거나, react-helmet-async 라이브러리를 사용해 SEO 성능을 높이는 등의 활용이 가능합니다. 다음 글에서는 react-router-dom 라이브러리와 react-helmet-async 라이브러리를 활용해서 SEO 최적화하는 방법을 알아보겠습니다.</p><p>[ 다음글 ] <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/DdaMfA8nVvFun3RFsSX4"><u>React + Typescript 프로젝트에 SSR을 적용해 파이어베이스에 배포하기(2)</u></a></p>

지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.이 글은 이 곳 에서도 읽어 보실 수 있습니다.Google에서 제공하는 F