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

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

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

<img src="https://image.until.blog/steady/article/1727346269489.png" alt="until-1565"><h2>어디에 쓰이나?</h2><hr>한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우의 데이터 처리가 모호해져 우선 무작위 닉네임을 지정하고 추후 변경하는 프로세스를 생각하게 되었다.그때 필요했던 기능이 이 무작위 닉네임 생성 기능이었다.<h2>개발 과정</h2><hr>가장 먼저 떠올랐던 예시는 썸네일에 사용한 블리자드의 무작위 작명이었다. 무작위로 주어진 단어들을 조합하여 특정한 닉네임을 만들어내는 단순한 기능이였다.우선 내가 개발하는 서비스는 반려동물과 관련된 서비스였기 때문에 동물과 관련된 닉네임을 생성하기로 했고 앞쪽에는 형용사를 뒤쪽에는 동물 이름을 사용해 닉네임을 만들어 보았다.<pre spellcheck="false"><code class="language-java">public class NicknameGenerator {

 // 형용사 배열
 private static final String[] adjectives = {
 "귀여운", "발랄한", "사랑스러운", "똑똑한", "활발한", "졸린", "장난꾸러기", "용감한", "상냥한", "행복한",
 "느긋한", "온화한", "믿음직한", "애교 많은", "웃음 가득한", "엉뚱한", "당당한", "재빠른", "고요한", "부드러운"
 };

 // 동물 이름 배열
 private static final String[] animals = {
 "강아지", "고양이", "햄스터", "토끼", "앵무새", "거북이", "고슴도치", "말티즈", "푸들", "치와와",
 "골든리트리버", "페르시안", "스피츠", "요크셔테리어", "러시안블루", "코뉴어", "페럿", "다람쥐", "이구아나", "비글"
 };

 // 랜덤 닉네임 생성 함수
 public String generateNickname() {
 Random random = new Random();

 // 배열의 길이에 맞춰 랜덤으로 배열 값을 조회
 String adjective = adjectives[random.nextInt(adjectives.length)];
 String animal = animals[random.nextInt(animals.length)];
 // 추가적으로 닉네임 중복을 방지하기 위해 1~999까지의 무작위 숫자 조회
 int number = random.nextInt(1000);

 return adjective + animal + number;
 }
}</code></pre>위 처럼 간단한 무작위 닉네임 생성기를 만들어 보았다.하지만 이걸로는 유저의 닉네임 중복을 완벽히 막을 수는 없어서 DB를 통해 해당 닉네임이 존재하는 지 확인 후 재생성하는 과정도 포함시켜야 한다.<h2></h2><h2>돌아보며</h2><hr><blockquote>개발 후 코드를 보면 간단하지만 차근차근 생각해 나가는 과정이 중요한 것 같다.코드 자동화 기술이 워낙 많이 발전해서 이 정도는 간단하게 작성해주겠지만 백지 상태에서 스스로 생각하면서 만들어봐야 더 기억에 오래 남아 추후에 시간을 절약하게 되는 것 같다.모든 코드를 백지에서 부터 천천히 만들 순 없겠지만, 미래를 위해 자동으로 작성된 코드라면 천천히 작동 방식을 생각해보며 머릿속에 남기며 공부해 나가보자</blockquote>

어디에 쓰이나?한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우

[Java] 무작위 닉네임 생성기

<img src="https://image.until.blog/elicetrack/article/1726726926575.png" alt="until-1384"><h2>IT 역량을 강화한 테크니컬 기획자 22주 실무 트레이닝</h2>● 커리큘럼Part1. 프로덕트 매니징&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Part2. IT리터러시와 데이터 기반 서비스 기획&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Part3. 프로그래밍과 데이터 분석&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Part4. SQL을 통한 서비스 성장 전략수립● 모집 기간24년 9월 9일 (월) ~ 10월 4일 (금) 오후 6시까지● 교육 대상선착순 50명 (내일배움카드 발급이 가능하신 분)● 교육비전액 무료● 교육 혜택실무 팀 프로젝트 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;100% 실시간 온라인 수업 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;성수 / 부산 엘리스랩 제공 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;분야별 전문 현직자 소수정예 코칭 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;직무특강, 멘토링, 이력서 첨삭 커리어 코칭 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;유망 IT 기업 채용 매칭● 접수 방법사이트를 통해 접수<a target="_blank" rel="noopener noreferrer nofollow" href="https://elice.training/track/pm?utm_source=image&amp;utm_medium=community&amp;utm_campaign=tpm_conversion_2409_ing&amp;utm_term=postergreen">엘리스 서비스 기획 트랙 접수하러 가기</a>● 문의 사항메일:&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="mailto:kdt@elice.io">kdt@elice.io</a>고객센터:&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://elicetrack.channel.io/support-bots/69276">https://elicetrack.channel.io/support-bots/69276</a>

서비스 기획자가 되고 싶은 분들을 위한 22주 실무 트레이닝

2025년 상반기 PM에 지원하실 분을 찾습니다

<img src="https://image.until.blog/steady/article/1729509585305.jpeg" data-width="100%" data-align="center" alt="until-1839"><h2>어디에 쓰이나?</h2><hr>예상한대로 역시 비디오 파일도 다루게 되었고, 이건 비디오 파일의 용량을 줄여 트래픽을 줄이기 위해 시도한 방법들을 적어보려고 한다.<h2>비디오 용량에 영향을 끼치는 요인</h2><hr><h4>1. 해상도</h4>: 비디오는 초당 많은 수의 이미지를 출력해 보여주는 방식으로 이미지의 해상도(픽셀 수)에 따라 용량에 영향을 끼치며, 이미지 파일을 다룰때와 마찬가지다.<h4>2. 프레임 수</h4>: 1초당 출력되는 이미지의 수를 뜻하고 1초에 몇장이 출력되느냐에 따라 24프레임(초당 24장) 등으로 표기되며 프레임 수가 늘어날수록 영상이 매끄럽지만 용량이 늘어나게 된다.<h4>3. 비트레이트</h4>: 비디오 데이터를 1초당 전송되는 비트의 양을 뜻하며 1초에 1000kb를 전송한다면 1000kbps 와 같은 방식으로 표기되면 초당 사용된 비트레이트를 프레임별로 나눠서 사용하게 된다.<h2>그럼 어떻게 할까?</h2><hr>Java에서 비디오 파일을 처리할때 주로 사용하는 라이브러리는 FFmpeg 이라는 라이브러리로 해상도와 프레임 수를 지정하면 FFmpeg이 적절한 비트레이트로 설정해 준다고 한다.따라서 해상도와 프레임 수를 통해 동영상 파일의 용량을 줄여보도록 하겠다.<h2>개발</h2><hr><ul><li>Grabber는 파일을 읽어들여 프레임 단위로 이미지를 다루고</li><li>Recorder는 Grabber로 읽어들인 프레임들로 비디오 파일을 생성한다.</li></ul><pre spellcheck="false"><code class="language-java">public class VideoUtil {

 //Post 요청으로 전달받은 Multipart 파일을 리사이징 처리해 반환
 public MultipartFile resizeVideo(MultipartFile file) throws IOException {

 // 원본 파일과 동일한 확장자로 임시파일 생성
 String extension = Objects.requireNonNull(file.getOriginalFilename()).split("\\.")[1];
 File tempFile = File.createTempFile(UUID.randomUUID()+LocalDate.now().toString(), "."+extension);

 // 파일 읽어들이기
 FFmpegFrameGrabber grabber = new FFmpegFrameGrabber(file.getInputStream());
 grabber.start();

 FFmpegFrameRecorder recorder = getRecorder(grabber, tempFile, extension);

 // 프레임 단위로 영상 리사이즈 후 기록
 Frame frame;
 while ((frame = grabber.grabFrame()) != null) {
 recorder.record(frame);
 }

 // 리소스 정리
 recorder.stop();
 recorder.release();
 grabber.stop();
 grabber.release();

 FileInputStream input = new FileInputStream(tempFile);

 // 리사이징된 영상을 MultipartFile로 변환
 MultipartFile resizedFile = new MockMultipartFile(
 file.getName(), // 원본 파일 이름 유지
 file.getOriginalFilename(),
 file.getContentType(), // 원본 파일 타입 유지 (예: "video/mp4")
 input);

 input.close();
 tempFile.delete();

 return resizedFile;
 }

 private FFmpegFrameRecorder getRecorder(FFmpegFrameGrabber grabber, File tempFile, String extension) throws FFmpegFrameRecorder.Exception {
 // 영상의 종횡비를 확인
 BigInteger width = BigInteger.valueOf(grabber.getImageWidth());
 BigInteger height = BigInteger.valueOf(grabber.getImageHeight());
 int gcd = width.gcd(height).intValue();

 int widthRatio = grabber.getImageWidth() / gcd;
 int heightRatio = grabber.getImageHeight() / gcd;
 int pixels = 360; //(360 ~ 1440)

 // 영상의 종횡비에 따라 해상도를 제한
 if(widthRatio &gt; 400) pixels = 1; // (400 ~)
 else if (widthRatio &gt; 100) pixels = 5; //(404 ~ 1600)
 else if (widthRatio &gt; 50) pixels = 12; //(612 ~ 1200)
 else if (widthRatio &gt; 20) pixels = 30; //(630 ~ 1500)
 else if (widthRatio &gt; 5) pixels = 80; //(480 ~ 1600)

 int targetWidth = widthRatio * pixels;
 int targetHeight = heightRatio * pixels;

 // FFmpegFrameRecorder로 영상을 리사이즈하여 저장
 FFmpegFrameRecorder recorder = new FFmpegFrameRecorder(tempFile, targetWidth, targetHeight);
 recorder.setFormat(extension); // 출력 포맷
 recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264); // H.264 코덱 사용
 recorder.setFrameRate(24); // 24 프레임으로 고정

 // 오디오 채널 설정 (필요 없으면 0으로 설정)
 if (grabber.getAudioChannels() &gt; 0) {
 recorder.setAudioChannels(grabber.getAudioChannels());
 } else {
 recorder.setAudioChannels(0); // 오디오 없는 경우
 }

 recorder.start();
 return recorder;
 }
}</code></pre><h2>돌아보며</h2><hr><blockquote>깊게 생각해보지 않았던 비디오 파일에 대해 조금이나마 알아가게 된 시간이였다.개발 이후 알게 된 사실로는<ul><li>FFmpeg이 비트레이트를 자동으로 설정해주지만, 직접 지정하는 것이 더 효율적이라는 사실</li><li>새로운 코덱과 확장자를 이용해 더 효율적으로 용량을 줄이는 방법이 있다는 사실</li></ul>들을 알게 되었다. 다음에 해당 내용들을 포함해 코드를 개선해보도록 하겠다.</blockquote>

어디에 쓰이나?예상한대로 역시 비디오 파일도 다루게 되었고, 이건 비디오 파일의 용량을 줄여 트래픽을 줄이기 위해 시도한 방법들을 적어보려고 한다.비디오 용량에 영향을 끼치는 요인1. 해상도: 비디오는 초당 많은 수의 이미지를 출력해 보여주는 방식으로 이미지의 해상도(픽셀 수)에 따라 용량에 영향을 끼치며, 이미지 파일을 다룰때와 마찬가지다.2. 프레임 수

[Java] 동영상 용량을 줄여보자

🎨 프론트엔드

<blockquote>클래스 컴포넌트에 대한 글이 아님을 먼저 남깁니다</blockquote>자바스크립트는 ES6 환경에서 클래스 문법을 지원하기 시작했다. 물론 그 전에도 클래스처럼 객체를 사용하는 것이 가능했지만..아무튼 그럼에도 NestJS 같은 백엔드 환경에선 클래스를 적극적으로 쓰는 것과 별개로, 프론트 환경에서는 클래스를 딱히 쓰지 않고 있는 것 같다.왜일까? React에서는 불변성을 중요하게 생각하고 있고, 그렇기 때문에 <code spellcheck="false">useState</code> 같은 상태값에 클래스를 이용하기 어려운 실정이다.<h1>useState에 클래스 객체?</h1><pre spellcheck="false"><code class="language-javascript">function Component() {
 const [cart, setCart] = useState(new ShoppingCart())

 const onClick = (e) =&gt; {
 cart.addItem(e.target.name)
 }

 return (
 &lt;button onClick={onClick}&gt;
 카트에 담기
 &lt;/button&gt;
 )
}

class ShoppingCart {
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 this.items.push(item)
 }
}</code></pre>리액트 사용자라면 이 코드가 제대로 동작하지 않을 것임을 알 것이다. <code spellcheck="false">useState</code>로 선언한 상태값은 반드시 <code spellcheck="false">setState</code>로 상태값을 바꿔야하니까.<pre spellcheck="false"><code class="language-javascript">function Component() {
 const [cart, setCart] = useState(new ShoppingCart())

 const onClick = (e) =&gt; {
 cart.addItem(e.target.name)
 setCart(cart)
 }

 return (
 &lt;button onClick={onClick}&gt;
 카트에 담기
 &lt;/button&gt;
 )
}

class ShoppingCart {
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 this.items.push(item)
 }
}</code></pre>이러면 어떨까? 물론 제대로 작동하지 않을 것이다. cart의 <code spellcheck="false">addItem</code> 메소드로 cart의 값을 바꿨지만, 이전의 cart와 동등한 값 ( <code spellcheck="false">Object.is</code> 로 비교했을 때)이기 때문이다.따라서 정말 이렇게 써먹고 싶다면 <code spellcheck="false">ShoppingCart</code> 클래스는 새로운 객체를 반환하도록 변경되어야 할 것이다.<pre spellcheck="false"><code class="language-javascript">class ShoppingCart {
 items
 
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 return new ShoppingCart([...this.items, item])
 }
}</code></pre>하지만 매번 코드를 이렇게 쓰는건 좀 어렵다.<h2>반려생활에서는...</h2>반려생활에서는 이런 문제를 해결하기 위해 <code spellcheck="false">valtio</code>라는 라이브러리를 사용한다고 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a>프록시를 이용해서 객체에 값이 바뀔 때에 setState로 전파를 해주는 기능으로 보이는데.역시나 외부 라이브러리를 사용하는 방법인지라 접근성이 그렇게 좋지는 않고, 원래 쓰던 방식이 있는데 클래스를 사용하기 위해 굳이 이렇게까지 해야할까 라는 생각이 들기도 한다.그렇다면 클래스는 리액트에서 쓸 일이 없는 도구인걸까?<h1>문제 제기</h1>예시를 위해 언틸의 프론트엔드 코드를 조금 가져와보자.다음은 언틸의 댓글을 쓸 때 내용을 적는 input form 컴포넌트의 코드다.<pre spellcheck="false"><code class="language-typescript">type Props = {
 commentId?: number;
 replyToCommentId?: number;
 initialContent: string;
 onCancel?: () =&gt; void;
}

const WriteForm = ({
 commentId,
 replyToCommentId,
 initialContent = "",
 onCancel = () =&gt; {},
}: Props) =&gt; {
 const { isLoggedIn } = useAuthInfo()
 const [content, setContent] = useState(initialContent)

 const handleSubmit: FormEventHandler = async (e) =&gt; {
 e.preventDefault()

 if (!isLoggedIn || !content) return

 if (!commentId) {
 await postComment({ content, replyToCommentId })
 setContent("")
 }

 if (commentId) {
 await putComment({ content })
 }

 onCancel()
 }

 const submitBtnText = (() =&gt; {
 if (commentId) {
 return "수정하기"
 }

 if (replyToCommentId) {
 return "답글 등록"
 }

 return "댓글 등록"
 })()

 return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;textarea
 autoFocus={!!(commentId || replyToCommentId)}
 disabled={!isLoggedIn}
 value={content}
 onChange={(e) =&gt; setContent(e.target.value)}
 /&gt;
 &lt;div&gt;
 {(commentId || replyToCommentId) &amp;&amp; (
 &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
 )}
 &lt;button type="submit"&gt;{submitBtnText}&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 )
}
</code></pre>이 컴포넌트에서는 다양한 데이터들이 사용되고 있고, 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다. <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..그런데, 왜 <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없는걸까? 왜 <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'일까?코드를 읽다보면 동작 방식은 알 수 있어도 자세한 이유와 의미를 생각해보는 데에는 시간이 좀 들게 된다. 결국 이런 코드들이 많아질 수록 코드는 점점 읽기 힘들어지고 의미를 이해하기 힘들어진다.<h2>메소드 분리?</h2>클린코드에서는 어떤 함수가 한 가지 일만 하는 것이 아니게 되었다면 함수를 분리해보라고 권장한다.하지만 리액트의 컴포넌트에서는 자바의 클래스와 다르게, private 메소드 같은 것이 없다.<code spellcheck="false">WriteForm</code> 컴포넌트의 <code spellcheck="false">handleSubmit</code>의 로직이 복잡하다고 해서 함수를 분리해봐야 결국 그 함수도 <code spellcheck="false">WriteForm</code>에 생겨날 뿐이다. 결국 컴포넌트만 뚱뚱해지는 셈이다.<h1>클래스는 상태와, 상태와 연관된 동작을 정의한다</h1><blockquote><code spellcheck="false">commentId</code>, <code spellcheck="false">replyToCommentId</code>, <code spellcheck="false">isLoggedIn</code> 등등.. 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다.<code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..</blockquote>우리는 이럴 때에 클래스를 사용해볼 수 있다. 클래스는 상태들과, 그 상태들과 연관된 동작을 정의할 때 쓰는 틀이다.위에 적은 내용을 클래스를 이용해서 맥락이 드러나도록 코드를 만들어볼 수 있지 않을까?<pre spellcheck="false"><code class="language-typescript">class CommentWriteStatus {
 constructor(
 private readonly isLoggedIn: boolean,
 private readonly commentId: number | undefined,
 private readonly replyToCommentId: number | undefined,
 private readonly content: string
 ) {}

 isNewComment() {
 return !this.commentId
 }

 isReply() {
 return this.replyToCommentId !== undefined
 }

 canPublish() {
 return this.isLoggedIn &amp;&amp; this.content
 }

 getSubmitBtnText() {
 if (!this.isNewComment()) {
 return "수정하기"
 }

 if (this.isReply()) {
 return "답글 등록"
 }

 return "댓글 등록"
 }
}</code></pre>각 상태값들을 받아서, 댓글 입력창에서 취할 수 있는 행동들을 정의했다.<h2>리액트에 클래스 적용하기</h2><pre spellcheck="false"><code class="language-typescript">const WriteForm = ({
 commentId,
 replyToCommentId,
 initialContent = "",
 onCancel = () =&gt; {},
}: Props) =&gt; {
 const { isLoggedIn } = useAuthInfo()
 const [content, setContent] = useState(initialContent)

 const status = new CommentWriteStatus(
 isLoggedIn,
 commentId,
 replyToCommentId,
 content
 )

 // ...
}</code></pre>아까 언급한 대로, state에 클래스를 쓰거나 하는 용도는 어렵다. 하지만 state는 원래의 방식대로 <code spellcheck="false">useState</code>를 이용해서 정의하고, 비즈니스 로직을 위한 함수 발사대의 용도로 불변 클래스를 활용해주자.원래도 객체지향에서 중요한 것은 변수값이 아닌, 메소드들이었으니까.<pre spellcheck="false"><code class="language-typescript">const handleSubmit: FormEventHandler = async (e) =&gt; {
 e.preventDefault()

 if (!status.canPublish()) return

 if (status.isNewComment()) {
 await postComment({ content, replyToCommentId })
 setContent("")
 }

 if (!status.isNewComment()) {
 await putComment({ content })
 }

 onCancel()
};</code></pre>클래스의 메소드를 이용해서 코드를 교체해줬다.우리는 어떤 변수가 true고, 어떤 변수가 빈 문자열이 아닐 때 return을 한다~ 따위의 것이 궁금했던게 아니다. 그 대신에 비즈니스의 의미가 잘 드러날 수 있도록 코드를 변경해주니 누구라도 이해할 수 있게 되었다.<pre spellcheck="false"><code class="language-typescript"> return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;textarea
 autoFocus={!status.isNewComment() || status.isReply()}
 disabled={!isLoggedIn}
 value={content}
 onChange={(e) =&gt; setContent(e.target.value)}
 /&gt;
 &lt;div&gt;
 {(!status.isNewComment() || status.isReply()) &amp;&amp; (
 &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
 )}
 &lt;button type="submit"&gt;{status.getSubmitBtnText()}&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
);</code></pre>return 문 쪽도 더 의미가 잘 드러나게 변경된 것 같다.<h2>예시 2</h2>언틸에서는 블로그에 유저 블로그와 그룹 블로그라는 두 가지 종류가 있다. 그와 함께 방문하는 유저도 타입이 여러 개 존재하게 되는데.<pre spellcheck="false"><code class="language-typescript"> userType:
 | 'guest' // 비로그인
 | 'owner' // 본인
 | 'user' // 다른 유저
 | 'member' // 그룹 멤버
 | 'admin' // 그룹 관리자</code></pre>이렇게 blogType과 userType이 여러 개 존재함에 따라 각 타입 별로 권한도 다양하게 존재한다.<pre spellcheck="false"><code class="language-typescript">const FollowButton = () =&gt; {
 const { username, isFollowing, blogType, userType } = useBlogQuery()

 if (blogType === "user" &amp;&amp; userType === "owner") {
 return (
 &lt;Link href={`/@${username}/setting`}&gt;
 &lt;button&gt;프로필 수정&lt;/button&gt;
 &lt;/Link&gt;
 )
 }

 return (
 &lt;LoginDialogWrapper
 onClick={() =&gt; {
 isFollowing ? postUnfollow() : postFollow()
 }}
 &gt;
 &lt;button&gt;{isFollowing ? "팔로잉" : "팔로우"}&lt;/button&gt;
 &lt;/LoginDialogWrapper&gt;
 )
}</code></pre>유저 블로그면서 자신이 그 블로그의 주인일 경우, 팔로우를 할 이유가 없기 때문에 팔로우 버튼 대신에 '프로필 수정' 버튼을 보여주게 된다.애플리케이션 전체에서 이와 비슷하게 유저/블로그 타입을 통한 로직이 많은데, 이 경우 권한에 대한 내용이 한 곳에 뭉쳐있지 않고 이곳 저곳에 혼재되어 있게 된다.따라서 실수로 변경 누락을 하거나 잘못 설정하는 일이 발생할 수도 있다.<pre spellcheck="false"><code class="language-typescript">class BlogUserType {
 constructor(
 private readonly userType:
 | "guest" // 비로그인
 | "owner" // 본인
 | "user" // 다른 유저
 | "member" // 그룹 멤버
 | "admin", // 그룹 관리자
 private readonly blogType: "user" | "group"
 ) {}

 canFollow() {
 return !this.isMyUserBlog()
 }

 canEditAbout() {
 return this.isMyUserBlog() || this.isAdmin()
 }

 private isMyUserBlog() {
 return this.isUserBlog() &amp;&amp; this.userType === "owner"
 }

 private isUserBlog() {
 return this.blogType === "user"
 }

 private isAdmin() {
 return this.userType === "admin" || this.userType === "owner"
 }
}</code></pre>이런 느낌으로 권한을 좀 정리해볼 수 있지 않을까.<h1>커스텀 훅</h1>물론 예제로 들었던 이것들, 커스텀 훅으로 만들 수 있다. 상태값을 받아서 함수 or 값을 뱉는 것이라면 클래스나 훅이나 똑같다.<pre spellcheck="false"><code class="language-typescript">function useCommentWriteStatus(
 isLoggedIn: boolean,
 commentId: number | undefined,
 replyToCommentId: number | undefined,
 content: string
) {
 const isNewComment = !commentId
 const isReply = replyToCommentId !== undefined
 const canPublish = isLoggedIn &amp;&amp; content

 function getSubmitBtnText() {
 if (!isNewComment) {
 return "수정하기"
 }

 if (isReply) {
 return "답글 등록"
 }

 return "댓글 등록"
 }

 return {
 isNewComment,
 isReply,
 canPublish,
 getSubmitBtnText,
 }
}

// 사용 예시
const { canPublish } = useCommentWriteStatus(true, 1, 2, "content")</code></pre>사실 리액트를 처음 공부하면서 훅에 대해서 배울 때, "아, 이게 리액트에서 제공하는 클래스구나"라는 생각이 들었다.변수값들을 생성자처럼 받아서 훅 내부에서 함수들을 생성한 후 public으로 공개하고 싶은 녀석들만 return하면 그게 클래스지.하... 하지만 클래스 쓰는게 멋있잖아?? 리액트에서 클래스 쓰는 힙한 사람처럼 보일 수 있다는 점에서 장점이 있는 것 같다.농담이고, 이런 커스텀 훅을 만들어서 비즈니스 로직을 묶는 것도 좋은 방법이지만 클래스 쪽이 private 메소드 등을 이용해서 좀 더 가독성 있는 코드를 쓸 수 있는 것 같다는 개인적인 생각이 들어서 적절한 때에 잘 이용하고 있다. 살짝 테스트하기도 더 쉬운 것 같기도 하고..

클래스로 뚱뚱한 컴포넌트를 정리해보기

React에서 Class 사용해보기

⚛️ React

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.<img src="https://image.until.blog/morethanmin/article/1726644394473.png" alt="until-1368">이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 <code spellcheck="false">display:none</code> 을 걸어주거나, 대체 이미지를 보여줄 수도 있다. 언틸에서는 기본 아바타를 보여주는 방식으로 대응했다. 아래는 예시이다.<pre spellcheck="false"><code class="language-typescript">const Avatar = forwardRef&lt;HTMLDivElement, Props&gt;(
 (
 { type = 'user', size, src, loading = false, ...props },
 ref,
 ) =&gt; {
 const [isError, setIsError] = useState(false)

 if (loading)
 return (
 &lt;Skeleton /&gt;
 )

 if (!src || isError) {
 return (
 &lt;div
 ref={ref}
 css={[wrapperStyle, sizeStyle]}
 className={className}
 onClick={onClick}
 {...props}
 &gt;
 &lt;CgUserlane /&gt;
 &lt;/div&gt;
 )
 }

 return (
 &lt;div
 ref={ref}
 css={[wrapperStyle, sizeStyle]}
 {...props}
 &gt;
 &lt;Image src={src} fill alt="avatar" onError={() =&gt; setIsError(true)} /&gt;
 &lt;/div&gt;
 )
 },
)

export default Avatar</code></pre>

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 display:none 을 걸어주거