🖥 백엔드

Cotuber에 도입된 AI 자막 생성 기능이 어떤 과정을 거쳐 만들어졌는지 공유합니다.

우리 팀이 자동으로 자막을 생성하기까지

<h1><strong>들어가기 전에</strong></h1><p>Nest.js는 Node.js 진영에서 널리 쓰이고 있는 서버 프레임워크이다.</p><p>그리고 이런 서버를 클라우드 환경에 배포하기 위해서는 AWS EC2, Oracle Cloud 등의 컴퓨팅 인스턴스 위에 올리는 방법이 정석이겠다.</p><p>&nbsp;</p><p>하지만 Nest.js는 서버리스를 지원하고, Vercel은 서버리스를 지원한다.<br>이를 이용해서 무료로 간단히 Vercel에 서버를 배포할 수 있다.</p><p></p><h1>방법</h1><p>방법 자체는 간단하다. 프로젝트 최상단에&nbsp;<code spellcheck="false">vercel.json</code>을 만들고 다음과 같이 작성한다.</p><pre spellcheck="false"><code class="language-json">{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE"
      ]
    }
  ]
}</code></pre><p><span>그 후 </span><code spellcheck="false">npm install -g vercel</code><span> 을 실행한 후, 프로젝트 최상단 경로에서 </span><code spellcheck="false">vercel .</code><span>를 실행하면 완성된다.</span></p><p></p><h1>트러블 슈팅</h1><h2>Cannot find module</h2><img src="https://image.until.blog/octoping/article/1730787106060.png" data-width="75%" data-align="center" alt="1972"><p><span>배포를 했지만 다음과 같은 오류가 떠서 처음에 큰 고생을 했다.</span></p><p><span>Vercel에서 로그를 확인해보니 아래와 같은 에러 로그가 있었다.</span></p><pre spellcheck="false"><code class="language-log">2023-08-18T17:52:14.322Z	undefined	ERROR	Cannot find module 'src/infra/prisma/PrismaService'
Require stack:
- /var/task/src/feed/feed.module.js
- /var/task/src/app.module.js
- /var/task/src/main.js
2023-08-18T17:52:14.323Z	undefined	ERROR	Did you forget to add it to "dependencies" in `package.json`?
RequestId: 059dec36-4319-4851-9c23-3ecf01978f18 Error: Runtime exited with error: exit status 1
Runtime.ExitError</code></pre><img src="https://image.until.blog/octoping/article/1730787132600.png" data-width="100%" data-align="center" alt="1974"><p>분명 잘 존재하는 모듈을 발견하지 못하고 있다고 에러가 떴다.</p><p>왜;;인지 도저히 알기가 어려워 많이 헤맸는데, 문제는 내 import 문에 있었다.</p><pre spellcheck="false"><code class="language-typescript">import { PrismaService } from '@/infra/prisma/PrismaService';</code></pre><p>다음과 같이 path alias를 사용해서 절대 경로로 import 하는 경우 Vercel이 경로를 인식을 못하는 이슈였다.</p><p></p><p><code spellcheck="false">src/infra/prisma/PrismaService</code>&nbsp;처럼 @를 안 쓰고 절대경로로 쓰더라도 마찬가지였다. 상대경로로 작성해야 한다!</p><p></p><h2>Swagger 페이지 404 에러 (검증 못 해봄)</h2><p><span>다른 페이지는 잘 나오지만 Swagger 페이지만 아무것도 안 나오는 이슈 (404 에러)가 발생한다.</span></p><pre spellcheck="false"><code>Uncaught ReferenceError: SwaggerUIBundle is not defined
    at window.onload</code></pre><p>개발자 도구를 켜보면 이런 로그가 나온다.</p><p>C# 쪽 스웨거에서도 한번 제보된 문제이긴 하다. swagger ui 파일이 서버리스에 올라가기에는 너무 크다는 이슈다.</p><a data-type="bookmark" href="https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb" target="_blank"><div class="content"><div><div class="title">swagger-ui-bundle.js too large for AWS Lambda and ALB</div><div class="description">Updated to .NET Core 3.1 and the latest version of Swashbuckle but found the swagger UI wasn't working correctly.  The swagger-ui-bundle.js was failing to load with a 502.  Tracked this down to a A...</div></div><div class="href">https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb</div></div><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"></a><p>따로 CDN에 swagger js나 css를 올려놓고, 서버리스에 올리는 대신 받아오는 방식으로 사용해볼 수 있겠다는 생각인데.</p><p></p><pre spellcheck="false"><code class="language-typescript">const CSS_URL = "cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css";
swaggerUI.setup(specs, { customCssUrl: CSS_URL })</code></pre><p>이런 방식으로 사용해볼 수 있다는 듯 하다.</p><a data-type="bookmark" href="https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943" target="_blank"><div class="content"><div><div class="title">When deploying swagger on vercel on nodejs it does not show UI · Issue #8461 · swagger-api/swagger-ui</div><div class="description">This is How it does look like this and I do not know how to fix this issue. Q&amp;A (please complete the following information) OS: M1 Pro Browser" Chrome, Safari Version: 22 Method of installation: np...</div></div><div class="href">https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943</div></div><img src="https://opengraph.githubassets.com/3d796af99bd52776acde541aa8b0f43379af9c671dc58fe420ea1314dd1a51a4/swagger-api/swagger-ui/issues/8461"></a><p></p><h1>TMI</h1><p>실제로 until을 처음 개발할 당시에 서버비를 줄이기 위해 다음 방법으로 한동안 개발했었다..</p><p>지금은 AWS + Kotlin Spring으로 넘어갔지만, 그래도 당시에 고려했던 점들을 몇 가지 적어본다.</p><p></p><ol><li><p>NestJS의 경우 서버 실행 초기에 bootstrap하는 과정을 거치는데, 이걸 api가 들어올 때마다 해야한다면 꽤 무거운 작업일 수밖에?</p><p></p></li><li><p>서버리스로 구성할 경우 api가 들어올 때마다 함수가 실행되는 꼴이므로, 트래픽이 몰리는 경우 DB의 커넥션 풀을 굉장히 잡아먹을 가능성이 높다. 이는 서버리스의 고질적 문제이긴 하다.</p><ul><li><p>프로젝트의 persistence 라이브러리로 채택한 Prisma의 경우 이런 문제를 해결해준다고 공식 사이트에 적혀는 있다. 하지만 좀 걱정된다</p><img src="https://image.until.blog/octoping/article/1730788287259.png" data-width="100%" data-align="center" alt="1976"></li></ul></li></ol><p><br></p><p></p>

NestJS를 서버리스로 배포해서 무료로 사용해봅시다

NestJS 서버를 서버리스로 Vercel에 배포하기

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/1977">1977.완전제곱수</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 하</p></li><li><p>풀이시간 : 8m 8s</p></li><li><p>유형 : 브루트포스, 수학</p><p></p></li></ul><h2>문제</h2><p>M과 N이 주어질 때 M이상 N이하의 자연수 중 완전제곱수인 것을 모두 골라 그 합을 구하고 그 중 최솟값을 찾는 프로그램을 작성하시오. 예를 들어 M=60, N=100인 경우&nbsp;60이상 100이하의 자연수 중 완전제곱수는&nbsp;64,&nbsp;81, 100&nbsp;이렇게 총 3개가 있으므로 그 합은 245가 되고 이 중 최솟값은 64가 된다.</p><h2>입력</h2><p>첫째 줄에 M이, 둘째 줄에 N이 주어진다. M과 N은 10000이하의 자연수이며 M은 N보다 같거나 작다.</p><h2>출력</h2><p>M이상 N이하의 자연수 중 완전제곱수인 것을 모두 찾아 첫째 줄에 그 합을, 둘째 줄에 그 중 최솟값을 출력한다. 단, M이상 N이하의 자연수 중 완전제곱수가 없을 경우는 첫째 줄에 -1을 출력한다.</p><h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>60
100
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>245
64
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>75
80
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>-1
</code></pre><h3>문제 풀이 접근</h3><p>이 문제는 완전 제곱수의 개념을 알면 쉽게 풀 수 있다.<br>- 완전 제곱수 : 어떤 자연수를 제곱하여 만들어 지는 수 <br>즉, 1, 2, 4, 9 , 16, 25, 36 ... 등으로 계속 나아가는 숫자를 완전 제곱수 라고 한다.</p><p>이 문제에서 요구하는 수는 범위 내 완전 제곱수의 합, 그리고 완전 제곱수 중 최솟값이다.<br>문제를 풀기 위해 범위를 정확하게 알 수 없으니 while 문을 통해 루프를 돌리도록하고, idx 의 값이 m의 값을 넘을 때 종료하도록 하는 것으로 코드를 작성했더니, 풀렸다.</p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code class="language-csharp">using System;
using System.Collections;
using System.Collections.Generic;
using System.Xml.Linq;
using static CodingTestProj.Program;

///*
// * Difficulty : Easy
// * URL : https://www.acmicpc.net/problem/1977
//  * Time : 8m 8s
// */

namespace CodingTestProj
{
    internal class Program
    {
        static void Main(string[] args)
        {
            Solution solu = new Solution();
            solu.solve();
        }
    }

    public class Solution
    {
        public List&lt;int&gt; _retList = new List&lt;int&gt;(); // 완전제곱수 모음

        public int _retSum;
        public int _retSmall;

        public int _n;
        public int _m;

        public void solve()
        {
            _retSmall = int.MaxValue;
            _n = int.Parse(Console.ReadLine());
            _m = int.Parse(Console.ReadLine());

            int idx = 0;
            while (true)
            {
                int _pow = (int)Math.Pow(idx, 2);

                if (_pow &gt; _m)
                    break;

                if(_pow &gt;= _n &amp;&amp; _pow &lt;= _m)
                {
                    _retList.Add(_pow);
                    _retSum += _pow;

                    if (_retSmall &gt;= _pow)
                        _retSmall = _pow;


                }

                idx++;
            }

            if(_retList.Count &gt; 0 )
            {
                Console.WriteLine(_retSum);
                Console.WriteLine(_retSmall);
            }
            else
            {
                Console.WriteLine(-1);
            }
        }
    }
}
</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1730652435227.png" data-width="100%" data-align="center" alt="1963"><p></p>

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

코딩테스트 준비 - 완전제곱수

<img src="https://image.until.blog/morethanmin/article/1732336770711.png" data-width="100%" data-align="center" alt="2246"><p>안녕하세요! 몰댄민입니다.</p><p>지난 한달간 어떤 기능들이 추가되었는지 공유해드릴게요!</p><p></p><h2>블로그 통계 기능</h2><p>우선 블로그 통계 기능이 추가되었어요.</p><p>기존 <code spellcheck="false">설정</code> 페이지가 <code spellcheck="false">블로그 관리</code> 페이지로 개편되었고, 블로그 관리 페이지 하위에 <code spellcheck="false">블로그 통계</code> 메뉴가 추가되었어요.</p><img src="https://image.until.blog/morethanmin/article/1732337501426.png" data-width="100%" data-align="center" alt="2250"><p>블로그 통계 페이지에서는 한달간의 조회수 추이와 함께 조회수가 많은 아티클이 무엇인지 확인할 수 있어요. (제 블로그는 일 평균 150~200 조회수가 발생하고 있네요..👀)</p><p>그리고 본인 아티클 상세페이지에서 메뉴를 클릭해 통계를 누르면, 해당 아티클의 조회수 추이를 살펴볼 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1732337480265.png" data-width="100%" data-align="center" alt="2249"><p>통계기능은 추후 유입 키워드, 브라우저 등등 더 많은 기능들을 추가하며 고도화 해나갈 예정이에요.</p><p></p><h2>에디터 동영상 업로드 기능</h2><p>아티클에 동영상을 업로드하는 기능이 추가되었어요.</p><img src="https://image.until.blog/morethanmin/article/1732337757785.png" data-width="100%" data-align="center" alt="2251"><p>슬래시(<code spellcheck="false">/</code>)를 입력해서 동영상 메뉴를 클릭하거나,</p><img src="https://image.until.blog/morethanmin/article/1732337805778.png" data-width="50%" data-align="center" alt="2253"><p>동영상 링크를 붙여넣기해서 동영상을 선택할 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1732337863433.png" data-width="50%" data-align="center" alt="2255"><p>참고로 아직 유튜브 영상만 임베드 할 수 있어요. 추후 다른 영상도 업로드할 수 있도록 고도화해볼게요!</p><p></p><h2>그 외 수정사항</h2><ul><li><p>피드 인기 아티클 평가 기준에 조회수가 추가되었어요.</p></li><li><p>에디터 하단을 클릭했을 때 새 줄이 추가되도록 개선했어요.</p></li><li><p>에디터 임베드 컨텐츠 (이미지, 동영상, 북마크) 의 업로드 UI를 개선했어요.</p></li></ul><img src="https://image.until.blog/morethanmin/article/1732338203844.png" data-width="75%" data-align="center" alt="2256"><ul><li><p>에디터에서 여러 줄 줄바꿈을 해도 적용되지 않던 이슈를 해결했어요.</p></li></ul><p></p><h2>기능 제안 &amp; 오류 제보 해주세요!</h2><p>언틸은 유저분들의 피드백을 바탕으로 개발되고 있어요. 필요한 기능이나 오류가 있다면 댓글, 이메일 또는 커뮤니티로 제보해주세요. 그 외에 궁금한 부분들도 편하게 여쭤봐주세요. 감사합니다!</p><p></p>

통계 기능이 추가되었어요. 📈

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71"><p>항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.</p><h2>fnm이란?</h2><p>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.</p><h2>winget으로 fnm 설치하기</h2><p>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.</p><pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3><p>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3><p>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.</p><p><code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.</p><pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3><p>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.</p><p>관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.</p><pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3><p>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.</p><pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr><p>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.</p><p></p><p></p><p></p><p></p>

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

Java 기술면접

<h3>🥅 목표</h3><p>📝 <strong>Java 개념 Review &amp; 관련 기술 면접 질문에 대비해 보자</strong></p><blockquote><p>(1) JVM이 뭘까요? <br>(2) JDK, JVM, JRE 의 차이점을 말해주세요</p></blockquote><h3>Java의 동작구조</h3><img src="https://image.until.blog/woonideveloper423/article/1718544207971" alt="until-526"><p><strong>JDK</strong>, <strong>JVM</strong>, <strong>JRE</strong> 에 대해 자세히 살펴보기 전에 Java의 동작 구조를 한 번 살펴 보자</p><ol><li><p>개발자는 사람이 이해할 수 있는 언어로 소스 코드를 작성한다.(.java)</p></li><li><p>자바 컴파일러<strong>(javac.exe)</strong>가 자바 소스코드를 읽어서 가상 머신이 이해할 수 있는 바이트 코드로 변환한다.(.class)</p></li><li><p><strong>Class Loader </strong>를 통해 .class 파일이 JVM 메모리에 적재된다.</p></li><li><p><strong>JVM</strong> 이 JAVA Interpreter<strong>(java.exe)</strong> 및 JIT 컴파일러 를 이용하여 바이트 코드를 실행한다.</p></li><li><p><strong>JVM</strong> 이 메모리 관리,스레드 관리 등 런타임 환경을 제공한다.</p></li></ol><h3>JVM(Java Virtual Machine)이란?</h3><p>위 자바 코드의 동작 순서에서 JVM이 대략적으로 어떤 역할을 하는지 알 수 있었다. JVM 이란 자바 가상 머신으로 자바 프로그램을 실행하기 위한 가상 컴퓨터 역할을 한다. 여기서 가장 중요한 점은 JVM은 <strong>자바와 운영 체제 사이에서 중계 역할을 하여, 자바가 플랫폼 독립적 으로 실행 가능하게 해준다</strong>는 것이다. 정리하면 다음과 같다.</p><ul><li><p>JVM 은 자바 가상 머신을 자바 바이트코드를 실행하는 플랫폼 독립적인 실행 환경을 제공한다.</p></li><li><p>JVM은 컴파일된 바이트 코드를 해당 운영 체제가 이해할 수 있는 기계어로 변환하고 실행한다.</p></li><li><p>JVM의 존재로 같은 자바 프로그램을 한 번 작성하면 어느 운영체제에서나 실행된다.(Write Once, Run Any where)</p></li></ul><h3>JDK&amp;JRE 와의 차이점</h3><p>JDK와 JRE 또한 JVM 과 마찬가지로 자바 개발 및 실행에 있어 필수적인 구성요소이다. 구조는 대략적으로 다음과 같다.</p><img src="https://image.until.blog/woonideveloper423/article/1718544367014" alt="until-527"><p><strong>JRE(Java Runtime Environment)</strong>는 자바 실행 환경으로 자바 프로그램을 실행하기 위해 필요한 JVM 과 자바 클래스 라이브러리, 그리고 다른 지원 파일들을 포함한다. JRE만으로는 Java 프로그램 실행은 가능하지만 컴파일러가 없기 떄문에 자바 프로그램 개발은 불가능하다. 정리하면 <strong>JRE는 JVM을 동작하기 위한 자바 실행 환경</strong>이라 보면 되겠다.<br><br><strong>JDK(Java Development Kit)</strong> 은 자바 개발 키트로 자바로 프로그램까지 개발하고 싶다면 JDK를 설치해야만 한다. 보통 자바를 설치한다고 할 떄 이는 JDK 를 설치한다는 뜻과 거의 동일하다. JDK는 JRE(JVM)의 기능을 포함하고 있으며 <strong>.java 파일들을 .class 파일들로 변환하는 JavaCompiler(javac) 기능이 있다.</strong><br>JDK는 jdb 개발 도구를 통해 디버깅 기능도 제공한다.</p><h3>🔚 결론</h3><p>자 이제 관련 면접 예상 질문을 바탕으로 정리해보자</p><ol><li><p><strong>JVM이란?</strong><br>⏩ JVM은 컴파일된 바이트 코드를 운영체제가 이해할 수 있는 기계어로 번역해 실행하는 가상 머신이다.</p></li><li><p><strong>JDK 와 JRE의 차이점은?</strong><br>⏩ JRE는 JVM을 포함하여 자바 프로그램을 실행하기 위해 필요한 자바 클래스 라이브러리, 그 밖에 다른 지원파일을 포함하는 자바 실행 환경이다. (컴파일러가 없기 때문에 오직 실행만 가능하다.)<br>JDK는 자바 컴파일러를 포함해 자바로 프로그램을 개발하기 위해 필요한 모든 도구를 포함한 키트이다. 자바로 프로그램을 개발하려면 JDK를 설치하여야 한다.</p></li></ol><h3>📚 참고자료</h3><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://wonyong-jang.github.io/java/2020/11/08/Java-JVM.html">https://wonyong-jang.github.io/java/2020/11/08/Java-JVM.html</a><br><br><br><br><br><br></p></li></ul>

[Java&기술면접] JVM의 개념 및 JDK JRE 와의 차이점

<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

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

<p>요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣</p><p>그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 Tomcat을 사용하는데도 불구하고 Nginx를 사용한 이유가 있을까요?’</p><p>이러한 질문을 주셨는데 당시 많이 긴장되어 있는 상황이기도 하였고, 당장 생각나는 것은</p><p>"저희가 프로젝트 환경상, EC2 한 대에서 프론트엔드와 백엔드를 함께 배포해야 하는 상황이었습니다. 따라서 하나의 도메인으로 모든 요청과 응답이 이루어지는데, 요청이 들어올 때 리버스 프록시 기능을 사용하기 위해 Nginx가 필요하기도 하였고, 보안적인 측면에서도 HTTPS를 사용해야 하기 때문에 Nginx를 사용했습니다."</p><p>지금은 글로 작성하니까 나름 그럴싸하게 작성했지만, 실제로 대답할 때는 조금 어색하게 표현한 것 같아 후회가 듭니다.😅</p><p>면접을 볼 때에는 당장 생각나는 것이 이것밖에 없었지만, 뒤늦게 면접관님의 의도를 떠올릴 수 있었습니다. 아마도 <strong>Nginx를 사용한 이유, 즉 웹 서버(WS)와 웹 애플리케이션 서버(WAS)의 차이점을 분명하게 이해하고 사용한 것인지</strong>를 물어보려고 하셨던 게 아닐까 하는 생각이 들었습니다.</p><p>그래서 이제는 비슷한 질문을 받더라도 더 이상 실수하지 않게 다시 한 번 학습하고 리마인드를 해보려고 합니다.</p><hr><p>웹 서버(Web Server)는 웹 클라이언트(예: 웹 브라우저)로부터 HTTP 요청을 받아 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 제공하는 소프트웨어입니다.</p><p></p><h2>웹 서버의 주요 역할</h2><h3>주요 기능</h3><ol><li><p><strong>정적 콘텐츠 제공</strong>:</p><ul><li><p>HTML, CSS, JavaScript 파일 및 이미지 등과 같은 정적 파일을 클라이언트에 제공합니다.<br></p><p><u>Q. 프론트엔드, 백엔드가 구분되어 사용되는 것이 보통입니다. HTML, CSS, JS 파일은 웹 서버에서 언제 어떤 상황에서 클라이언트에게 제공되는가 ?</u><br></p><ul><li><p><strong>상황</strong>: 사용자가 웹 브라우저를 통해 특정 웹 페이지를 요청하는 경우</p><ul><li><p>사용자가 브라우저에서 <code spellcheck="false">http://example.com</code>을 입력하면, 브라우저는 해당 URL에 대한 HTTP 요청을 웹 서버로 보냅니다.</p></li><li><p>웹 서버(ex. Nginx)는 요청된 URL을 기반으로 적절한 파일을 찾아 클라이언트에 반환합니다. 여기서 정적 파일 제공이 이루어집니다.</p></li><li><p>예를 들어, Nginx와 같은 웹 서버가 <code spellcheck="false">/usr/share/nginx/html</code> 디렉토리에 웹페이지 파일을 저장하고 있다면, 다음과 같은 과정이 진행됩니다:</p><ul><li><p>사용자가 <code spellcheck="false">http://example.com/index.html</code>을 요청합니다.</p></li><li><p>웹 서버는 요청된 파일 경로를 확인하고, <code spellcheck="false">/var/www/html/index.html</code> 파일을 찾아 응답으로 반환합니다.</p></li></ul></li><li><p>HTML 파일 반환: 웹 서버는 <code spellcheck="false">index.html</code> 파일을 클라이언트(브라우저)에 반환합니다. 브라우저는 HTML 파일을 파싱하여 페이지의 기본 구조를 렌더링합니다.</p></li><li><p>CSS와 JavaScript 파일 요청: HTML 파일이 로드되면서, 페이지 내에 포함된 CSS 및 JavaScript 파일에 대한 추가 요청이 발생합니다. 예를 들어, HTML 파일에 다음과 같은 링크가 포함되어 있을 수 있습니다:</p><pre spellcheck="false"><code class="language-html">&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;</code></pre><ul><li><p>브라우저는 <code spellcheck="false">styles.css</code>와 <code spellcheck="false">app.js</code> 파일을 추가로 요청합니다.</p></li><li><p>웹 서버는 동일한 방식으로 이 파일들을 찾아 클라이언트에 반환합니다.<br></p></li></ul></li></ul></li><li><p><strong>구체적인 예시</strong></p><p>사용자가 <code spellcheck="false">http://example.com</code>에 접속하면 다음과 같은 요청과 응답 흐름이 발생합니다:</p><ol><li><p><strong>브라우저 요청</strong>: <code spellcheck="false">GET /index.html</code></p></li><li><p><strong>웹 서버 응답</strong>: <code spellcheck="false">/var/www/html/index.html</code> 파일 반환</p></li><li><p><strong>브라우저 요청</strong>: <code spellcheck="false">GET /styles.css</code></p></li><li><p><strong>웹 서버 응답</strong>: <code spellcheck="false">/var/www/html/styles.css</code> 파일 반환</p></li><li><p><strong>브라우저 요청</strong>: <code spellcheck="false">GET /app.js</code></p></li><li><p><strong>웹 서버 응답</strong>: <code spellcheck="false">/var/www/html/app.js</code> 파일 반환<br></p></li></ol></li></ul><p>이 과정을 통해 사용자는 웹 페이지를 볼 수 있게 되며, CSS로 스타일링된 페이지와 JavaScript로 동작하는 기능을 사용할 수 있게 됩니다.<br></p></li></ul></li><li><p><strong>HTTP 요청 처리 및 응답</strong>:</p><ul><li><p>클라이언트의 HTTP 요청을 처리하고, 적절한 응답을 생성하여 반환합니다.<br></p></li></ul></li><li><p><strong>URL 매핑 및 라우팅</strong>:</p><ul><li><p>요청 URL을 기반으로 적절한 파일이나 서비스로 요청을 라우팅합니다. 이는 리버스 프록시의 역할로, 클라이언트의 요청을 받아 적합한 백엔드 서버로 전달하고 결과를 다시 클라이언트에게 반환합니다.<br></p></li></ul></li><li><p><strong>로드 밸런싱</strong>:</p><ul><li><p>여러 서버 간에 트래픽을 분산시켜 고가용성을 유지하고 성능을 향상시킵니다.<br></p></li></ul></li><li><p><strong>보안 기능</strong>:</p><ul><li><p>SSL/TLS를 통한 데이터 암호화, IP 필터링, 사용자 인증 등 다양한 보안 기능을 제공합니다.</p><p></p></li></ul></li></ol><h3>웹 서버의 예시</h3><ul><li><p><strong>Apache HTTP Server</strong>:</p><ul><li><p>오픈 소스 웹 서버로, 다양한 플랫폼에서 사용되며, 매우 널리 사용됩니다.</p></li></ul></li><li><p><strong>Nginx</strong>:</p><ul><li><p>고성능 웹 서버로, 특히 높은 동시 연결 수를 처리할 수 있어 정적 파일 제공 및 리버스 프록시로 자주 사용됩니다.</p></li></ul></li></ul><hr><p><strong>웹 애플리케이션 서버(Web Application Server, WAS)</strong>는 웹 서버와는 달리, 동적 콘텐츠를 생성하고 웹 애플리케이션의 비즈니스 로직을 처리하는 소프트웨어입니다. WAS는 클라이언트의 요청을 받아들여 데이터베이스와 상호 작용하고, 그 결과를 동적 웹 페이지 형태로 클라이언트에 반환합니다.</p><h2>웹 애플리케이션 서버의 주요 역할</h2><ol><li><p><strong>비즈니스 로직 처리</strong>:</p><ul><li><p>클라이언트 요청을 처리하는 비즈니스 로직을 실행합니다. 예를 들어, 사용자의 로그인, 상품 검색, 주문 처리 등의 작업을 수행합니다. → 서블릿 기반<br></p></li></ul></li><li><p><strong>동적 콘텐츠 생성</strong>:</p><ul><li><p>JSP, 서블릿, EJB 등과 같은 기술을 사용하여 동적인 웹 페이지를 생성합니다. 클라이언트의 요청에 따라 실시간으로 콘텐츠를 생성하여 응답합니다.<br></p></li></ul></li><li><p><strong>데이터베이스 연동</strong>:</p><ul><li><p>데이터베이스와 상호 작용하여 데이터를 조회, 삽입, 업데이트, 삭제하는 작업을 수행합니다. 이를 통해 클라이언트가 요청한 데이터를 처리하고 반환합니다.<br></p></li></ul></li><li><p><strong>세션 관리</strong>:</p><ul><li><p>사용자 세션을 관리하여 사용자 상태를 유지하고, 인증 및 권한 부여를 처리합니다. 이를 통해 사용자의 로그인 상태를 유지하거나, 사용자별로 다른 콘텐츠를 제공할 수 있습니다.<br></p></li></ul></li><li><p><strong>트랜잭션 관리</strong>:</p><ul><li><p>데이터베이스 트랜잭션을 관리하여 데이터의 일관성과 무결성을 보장합니다. 여러 작업이 하나의 트랜잭션으로 묶여 일관성 있게 처리되도록 합니다.<br></p></li></ul></li></ol><h3>웹 애플리케이션 서버의 예시</h3><ul><li><p><strong>Apache Tomcat</strong>:</p><ul><li><p>오픈 소스 서블릿 컨테이너로, 서블릿과 JSP 기반의 웹 애플리케이션을 실행합니다.</p></li></ul></li></ul><hr><h2>정리</h2><img src="https://image.until.blog/thingk0/article/1716860951310" alt="until-318"><h3>이유 1: 정적 콘텐츠 제공</h3><ul><li><p><strong>Nginx</strong>는 정적 콘텐츠(예: 이미지, CSS, JavaScript 파일 등)를 매우 효율적으로 제공할 수 있습니다. 이를 통해 스프링 부트 애플리케이션이 정적 리소스를 제공하는 부담을 줄이고, 동적 콘텐츠 제공에 집중할 수 있게 합니다.</p><blockquote><p><em>하지만, 보통 프론트엔드와 API 서버 조합으로 많이 사용하기 때문에, 사실상 정적 콘텐츠 제공에는 큰 메리트를 느끼기 어려웠습니다. 그러나 프론트엔드가 SPA일 경우에는 매우 유용하다고 생각합니다.</em></p></blockquote></li></ul><p></p><h3>이유 2: 리버스 프록시</h3><ul><li><p><strong>리버스 프록시</strong>로서 Nginx는 클라이언트 요청을 스프링 부트 애플리케이션으로 전달합니다. 이를 통해 애플리케이션 서버를 보호하고, 로드 밸런싱 및 SSL 종료(SSL termination) 등의 기능을 제공합니다.</p><blockquote><p><em>실제로 제가 Nginx를 사용하는 가장 주된 이유는, 보통 프로젝트를 진행할 때 서버 인스턴스를 하나만 사용할 수 있는 상황이 많아서, 어쩔 수 없이 서버 안에서 프론트엔드, 인프라, 백엔드를 모두 배포해야 했기 때문입니다.</em></p><p><em>이러한 이유로 Nginx의 리버스 프록시 기능은 매우 유용하고 필요했습니다. 그래서 다행히도 면접에서 가장 먼저 떠올린 리버스 프록시를 답변할 수 있었습니다 !!</em></p></blockquote><p></p></li></ul><h3>이유 3: 로드 밸런싱</h3><ul><li><p><strong>로드 밸런싱</strong>을 통해 여러 대의 스프링부트 인스턴스에 트래픽을 분산시킬 수 있습니다. 이를 통해 고가용성과 성능을 향상시킬 수 있습니다.</p><blockquote><p><em>면접 중 로드 밸런싱 관련 질문을 받았고, 당연히 Nginx를 통해 로드 밸런싱이 가능하다는 것은 알고 있었습니다.</em></p><p><em>하지만 더 좋은 답변을 위해서는 추후에 블루-그린 배포를 적용하거나 스케일 아웃을 염두에 두었을 때, 로드 밸런싱 기능이 필요하기 때문에 Nginx가 필요하다는 답변을 떠올리지 못했다는 것이 뒤늦은 후회로 남네요..🥲</em></p></blockquote><p></p></li></ul><h3>이유 4: SSL/TLS 처리</h3><ul><li><p><strong>SSL/TLS 처리</strong>를 Nginx가 담당함으로써 스프링부트 애플리케이션은 암호화된 트래픽을 직접 처리하지 않아도 되므로, 성능과 보안 측면에서 유리합니다.</p></li></ul><p></p><h3>이유 5: 보안</h3><ul><li><p><strong>보안 설정</strong> 및 접근 제어를 Nginx 레벨에서 관리함으로써 애플리케이션의 보안성을 향상시킬 수 있습니다. IP 제한, DDoS 방어, WAF(Web Application Firewall) 등을 설정할 수 있습니다.</p></li></ul><p></p><h3>이유 6: 고성능</h3><ul><li><p><strong>고성능</strong>의 Nginx는 적은 리소스로 많은 요청을 처리할 수 있어, 특히 많은 동시 접속이 발생하는 상황에서 유리합니다.</p><blockquote><p><em>“ Nginx는 비동기 이벤트 기반으로 설계되어, 적은 리소스로도 많은 수의 동시 연결을 효율적으로 처리할 수 있고 다중 워커 프로세스를 통해 병렬로 작업을 수행하여 성능을 극대화하며 메모리를 효율적으로 사용하여 더 많은 요청을 처리할 수 있습니다. "</em></p><p><em>라고도 대답할 수 있다면 아마 만점짜리 답변이겠죠..?</em></p></blockquote></li></ul><hr><p>즉, 저는 리버스 프록시와 보안 부분에서는 어느 정도 정답에 가까운 대답을 했다고 생각해요 ! 하지만 기억을 되돌려보면, 로드 밸런싱 부분에 대해서도 잠깐 질문을 받았는데, 급히 다른 질문으로 넘어갔던 것이 아쉽고... Nginx를 통해 로드 밸런싱, 성능, 그리고 정적 콘텐츠 제공에 대해서도 답변을 할 수 있었다면 더 좋았을 것 같아요.</p><p></p><p>다음에 비슷한 질문을 받는다면, 기존 답변에 보완해서 더욱 멋진 답변을 해보도록 하겠습니다. 😃</p>

최근 게임 회사 면접에서 스프링 부트와 Nginx 사용 이유에 대한 질문을 받았습니다. 이번 포스팅에서는 웹 서버와 웹 애플리케이션 서버의 차이를 명확히 이해하고, Nginx 사용 이유를 깊이 있게 다뤄봅니다.

WAS가 있음에도 불구하고, 웹서버인 Nginx 를 사용하는 이유 - 개발자 면접 리마인드

프로그래밍언어

<h1>JDK 21</h1><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://openjdk.org/projects/jdk/21/">openJDK 공식 페이지</a>도 확인해보면 좋다. 조금이나마 공식문서를 읽는 연습을 계속 하는 중인데, 그 이유는 <strong>아예 정보가 공개되지않은 기술일 때, 우리는 스스로 생각하며 설계</strong>해야한다. 이때 가장 먼저 확인할 수 있는 것은 공식문서이기 때문이다. 인턴 생활 중 CTO님이 중요하게 생각하셨던 1가지이다.</p><p>(수정예정)</p><blockquote><p>JDK21은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.gradle.org/8.4/release-notes.html?_gl=1*ot1md0*_gcl_au*MTQ2MTIwNDI1OC4xNzIzMjg3NzA5*_ga*MTcxMzM1MjcwLjE3MTUxMzk3OTA.*_ga_7W7NC6YNPT*MTcyOTE1MTg1MS45LjEuMTcyOTE1MjQzNi4yMi4wLjA."><strong>Gradle Version 8.4</strong></a>이상 이여야 돌아간다!</p></blockquote>