[영상처리프로그래밍]

백준

요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 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 class="tight" data-tight="true"><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 class="tight" data-tight="true"><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 class="tight" data-tight="true"><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 class="tight" data-tight="true"><li>클라이언트의 HTTP 요청을 처리하고, 적절한 응답을 생성하여 반환합니다. </li></ul></li><li>URL 매핑 및 라우팅:<ul class="tight" data-tight="true"><li>요청 URL을 기반으로 적절한 파일이나 서비스로 요청을 라우팅합니다. 이는 리버스 프록시의 역할로, 클라이언트의 요청을 받아 적합한 백엔드 서버로 전달하고 결과를 다시 클라이언트에게 반환합니다. </li></ul></li><li>로드 밸런싱:<ul class="tight" data-tight="true"><li>여러 서버 간에 트래픽을 분산시켜 고가용성을 유지하고 성능을 향상시킵니다. </li></ul></li><li>보안 기능:<ul class="tight" data-tight="true"><li>SSL/TLS를 통한 데이터 암호화, IP 필터링, 사용자 인증 등 다양한 보안 기능을 제공합니다.</li></ul></li></ol><h3>웹 서버의 예시</h3><ul class="tight" data-tight="true"><li>Apache HTTP Server:<ul class="tight" data-tight="true"><li>오픈 소스 웹 서버로, 다양한 플랫폼에서 사용되며, 매우 널리 사용됩니다.</li></ul></li><li>Nginx:<ul class="tight" data-tight="true"><li>고성능 웹 서버로, 특히 높은 동시 연결 수를 처리할 수 있어 정적 파일 제공 및 리버스 프록시로 자주 사용됩니다.</li></ul></li></ul><hr>웹 애플리케이션 서버(Web Application Server, WAS)는 웹 서버와는 달리, 동적 콘텐츠를 생성하고 웹 애플리케이션의 비즈니스 로직을 처리하는 소프트웨어입니다. WAS는 클라이언트의 요청을 받아들여 데이터베이스와 상호 작용하고, 그 결과를 동적 웹 페이지 형태로 클라이언트에 반환합니다.<h2>웹 애플리케이션 서버의 주요 역할</h2><ol class="tight" data-tight="true"><li>비즈니스 로직 처리:<ul class="tight" data-tight="true"><li>클라이언트 요청을 처리하는 비즈니스 로직을 실행합니다. 예를 들어, 사용자의 로그인, 상품 검색, 주문 처리 등의 작업을 수행합니다. → 서블릿 기반 </li></ul></li><li>동적 콘텐츠 생성:<ul class="tight" data-tight="true"><li>JSP, 서블릿, EJB 등과 같은 기술을 사용하여 동적인 웹 페이지를 생성합니다. 클라이언트의 요청에 따라 실시간으로 콘텐츠를 생성하여 응답합니다. </li></ul></li><li>데이터베이스 연동:<ul class="tight" data-tight="true"><li>데이터베이스와 상호 작용하여 데이터를 조회, 삽입, 업데이트, 삭제하는 작업을 수행합니다. 이를 통해 클라이언트가 요청한 데이터를 처리하고 반환합니다. </li></ul></li><li>세션 관리:<ul class="tight" data-tight="true"><li>사용자 세션을 관리하여 사용자 상태를 유지하고, 인증 및 권한 부여를 처리합니다. 이를 통해 사용자의 로그인 상태를 유지하거나, 사용자별로 다른 콘텐츠를 제공할 수 있습니다. </li></ul></li><li>트랜잭션 관리:<ul class="tight" data-tight="true"><li>데이터베이스 트랜잭션을 관리하여 데이터의 일관성과 무결성을 보장합니다. 여러 작업이 하나의 트랜잭션으로 묶여 일관성 있게 처리되도록 합니다. </li></ul></li></ol><h3>웹 애플리케이션 서버의 예시</h3><ul class="tight" data-tight="true"><li>Apache Tomcat:<ul class="tight" data-tight="true"><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 class="tight" data-tight="true"><li>SSL/TLS 처리를 Nginx가 담당함으로써 스프링부트 애플리케이션은 암호화된 트래픽을 직접 처리하지 않아도 되므로, 성능과 보안 측면에서 유리합니다.</li></ul><h3>이유 5: 보안</h3><ul class="tight" data-tight="true"><li>보안 설정 및 접근 제어를 Nginx 레벨에서 관리함으로써 애플리케이션의 보안성을 향상시킬 수 있습니다. IP 제한, DDoS 방어, WAF(Web Application Firewall) 등을 설정할 수 있습니다.</li></ul><h3>이유 6: 고성능</h3><ul><li>고성능의 Nginx는 적은 리소스로 많은 요청을 처리할 수 있어, 특히 많은 동시 접속이 발생하는 상황에서 유리합니다.<blockquote>“ Nginx는 비동기 이벤트 기반으로 설계되어, 적은 리소스로도 많은 수의 동시 연결을 효율적으로 처리할 수 있고 다중 워커 프로세스를 통해 병렬로 작업을 수행하여 성능을 극대화하며 메모리를 효율적으로 사용하여 더 많은 요청을 처리할 수 있습니다. "라고도 대답할 수 있다면 아마 만점짜리 답변이겠죠..?</blockquote></li></ul><hr>즉, 저는 리버스 프록시와 보안 부분에서는 어느 정도 정답에 가까운 대답을 했다고 생각해요 ! 하지만 기억을 되돌려보면, 로드 밸런싱 부분에 대해서도 잠깐 질문을 받았는데, 급히 다른 질문으로 넘어갔던 것이 아쉽고... Nginx를 통해 로드 밸런싱, 성능, 그리고 정적 콘텐츠 제공에 대해서도 답변을 할 수 있었다면 더 좋았을 것 같아요.다음에 비슷한 질문을 받는다면, 기존 답변에 보완해서 더욱 멋진 답변을 해보도록 하겠습니다. 😃<img src="https://image.until.blog/thingk0/article/1718793769616" alt="until-611">

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

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

<h1>Sidebar 개발</h1><ol class="tight" data-tight="true"><li>구글에서 <code spellcheck="false">shadcn-ui</code> 로 사이드바 개발하는 방법을 검색</li><li>검색 결과에 있는 유튜브 튜토리얼 영상 시청</li><li>유튜버가 <code spellcheck="false">command</code> 컴포넌트를 사용하는 것을 발견 <ol class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=mju7e6Cf6Nk">https://www.youtube.com/watch?v=mju7e6Cf6Nk</a></li></ol></li><li><code spellcheck="false">npx shadcn-ui add command</code> 명령어 실행</li><li><code spellcheck="false">pakcage.json</code> 에 <code spellcheck="false">cmdk</code> 라는 라이브러리가 설치되는 것을 확인<pre spellcheck="false"><code>import { Command as CommandPrimitive } from "cmdk"</code></pre></li><li><code spellcheck="false">cmdk</code> 라이브러리에 대해서 조사</li></ol><ol class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pacocoursey/cmdk">https://github.com/pacocoursey/cmdk</a></li><li>맥에서 Command + k 키 누르면 모달로 뜨는 검색창 라이브러리</li><li>사용방법은 위 깃허브 링크에서 확인</li><li>Command + K 키를 눌렀을때 검색창이 뜨게 하는 기능을 구현하려면 <code spellcheck="false">keydown</code> 이벤트 감지가 필요하다는 것을 알게됨</li><li>위 링크에는 자바스크립트 코드라서 타입 정의에 대한 안내가 없음</li><li>처음에는 <code spellcheck="false">e</code> 타입이 <code spellcheck="false">React.KeyboardEvent</code> 인줄 알았음</li><li>하지만 그렇게 하면 타입 에러가 발생</li><li>그냥 <code spellcheck="false">KeyboardEvent</code> 타입을 사용해야함<pre spellcheck="false"><code class="language-typescript"> React.useEffect(() =&gt; {
 const down = (e: KeyboardEvent) =&gt; {
 if (e.key === "k" &amp;&amp; (e.metaKey || e.ctrlKey)) {
 e.preventDefault();
 setOpen((open) =&gt; !open);
 }
 };

 document.addEventListener("keydown", down);
 return () =&gt; document.removeEventListener("keydown", down);
 }, []);
</code></pre></li><li> <code spellcheck="false">React.KeyboardEvent</code> 와 <code spellcheck="false">KeyboardEvent</code> 는 다른 타입<ol class="tight" data-tight="true"><li> <code spellcheck="false">React.KeyboardEvent</code> 가 내부적으로 <code spellcheck="false">NativeKeyboardEvent</code> <code spellcheck="false">KeyboardEvent</code> 타입을 상속하고 있지만 제네릭으로 사용하고 있어서 순수 <code spellcheck="false">KeyboardEvent</code> 타입과 같지는 않음</li></ol></li><li><code spellcheck="false">CommandDialog</code> 컴포넌트가 모달 역할 수행<pre spellcheck="false"><code class="language-typescript">&lt;CommandDialog open={open} onOpenChange={setOpen}&gt;</code></pre><ol class="tight" data-tight="true"><li><code spellcheck="false">Dialog</code> 컴포넌트는 현재 사용중이지 않으므로</li><li><code spellcheck="false">components/ui/dialog.tsx</code> 파일 제거하고 <code spellcheck="false">components/ui/command.tsx</code> 파일에서 <code spellcheck="false">Dialog</code> 관련 코드는 모두 제거</li></ol></li><li>사이드바 UI 구축<img src="https://image.until.blog/artemismars2/article/1718214780466" alt="until-473"></li></ol>

Sidebar 개발구글에서 shadcn-ui 로 사이드바 개발하는 방법을 검색검색 결과에 있는 유튜브 튜토리얼 영상 시청유튜버가 command 컴포넌트를 사용하는 것을 발견 https://www.youtube.com/watch?v=mju7e6Cf6Nknpx shadcn-ui add command 명령어 실행pakcage.json 에 cmdk 라는 라이브러리

Next.js 개발 일지 D1

🖥 백엔드

<h1>들어가기 앞서</h1>이런 상황이 있다고 합시다. 저는 API를 만들고 있고, request param으로 date값을 받고 싶습니다.<pre spellcheck="false"><code class="language-java">class Controller {
 @GetMapping("/hello")
 public void hello(
 @RequestParam(name = "date") LocalDate date
 ) {
 System.out.println("Hello, " + date);
 }
}</code></pre>이렇게 짜봤습니다.그런데 여기에 date 값이 오지 않았을 때 기본값으로 오늘 날짜를 넣고 싶을 경우, 어떻게 해야 할까요?<pre spellcheck="false"><code class="language-java">class Controller {
 @GetMapping("/hello")
 public void hello(
 @RequestParam(name = "date", defaultValue = LocalDate.now()) LocalDate date
 ) {
 System.out.println("Hello, " + date);
 }
}</code></pre>이렇게 짤 수 있다면 좋겠지만, 어노테이션의 속성 값으로는 상수밖에 들어갈 수 없어 오류가 나게 됩니다. 이럴 때엔 어떻게 하면 좋을까요?<h1>SpEL</h1>먼저 Spring Expression Language (SpEL)에 대해 알아봅시다. 공식문서가 잘 되어 있는 스프링답게, 여기에서 자세한 내용을 살펴볼 수 있는데요.<a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.spring.io/spring-framework/docs/3.0.x/reference/expressions.html">https://docs.spring.io/spring-framework/docs/3.0.x/reference/expressions.html</a>다 읽어보기엔 시간이 없으니 간략하게 알아봅시다.Spring 표현식 언어 (SpEL)은 런타임에 객체 그래프를 쿼리하고 조작할 수 있도록 지원하는 표현식 언어라고 합니다. 이 언어는 다음과 같은 기능을 제공한다고 해요.<ul><li>리터럴 표현식</li><li>Boolean, 관계 연산자</li><li>정규 표현식</li><li>클래스 표현식</li><li>속성, 배열, 리스트, 맵에 액세스하기</li><li>메소드 호출</li><li>관계형 연산자</li><li>할당</li><li>생성자 호출</li><li>빈 참조</li><li>배열 생성</li><li>인라인 리스트</li><li>삼항 연산자</li><li>변수</li><li>유저가 정의한 함수</li><li>컬렉션 프로젝션</li><li>컬렉션 선택</li><li>템플릿 표현식</li></ul>많죠? 하지만 이 글에서는 이 중 몇 가지만 알아보려고 합니다.<h2>예제와 함께 간단한 SpEL 문법 살펴보기</h2><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("'Hello World'");
String message = (String) exp.getValue();</code></pre>SpEL을 시험해보고 싶은 경우, 다음과 같이 사용 가능합니다. 다음 코드를 실행해보면 message 변수에는 <code spellcheck="false">Hello World</code>가 담기게 됩니다.만약 실행하려는 SpEL의 문법이 맞지 않을 경우 <code spellcheck="false">parseExpression</code> 함수에서는 <code spellcheck="false">ParseException</code>, <code spellcheck="false">getValue</code> 함수에서는<code spellcheck="false">EvaluationException</code> 이 발생할 수 있다고 하네요.<h3>함수 호출하기</h3><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("'Hello World'.concat('!')");
String message = (String) exp.getValue();</code></pre>앞에서 언급했듯, SpEL은 함수 호출도 가능합니다. 다음을 실행하면 <code spellcheck="false">Hello World</code> 리터럴 문자열의 concat 함수를 실행하게 되어 <code spellcheck="false">Hello World!</code> 와 같은 결과를 얻어낼 수 있습니다. 그렇다면 다음과 같이 사용할 수 있다는 예제와 함께 쭉쭉 넘어가볼까요.<h3>생성자 호출하기</h3><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("new String('hello world').toUpperCase()");
String message = exp.getValue(String.class); // HELLO WORLD</code></pre>위에서 언급했듯이, 생성자를 호출하는 것도 가능합니다.<h3>객체의 속성 검색하기</h3><pre spellcheck="false"><code class="language-java">class Human {
 private String name;
 private int age;
}

Human human = new Human("Alice", 20);

ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("name");
String name = (String) exp.getValue(human); // "Alice"</code></pre>다음과 같이 특정 객체 인스턴스의 속성을 검색하는 것도 가능합니다.<h3>특정 타입 정의하기</h3>특별한 연산자인 'T' 를 사용하면 특정 클래스의 타입을 지정해줄 수 있어요.<pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Class listClass = parser.parseExpression("T(java.util.List)").getValue(Class.class);
System.out.println(listClass); // class java.util.List</code></pre><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
List list = parser.parseExpression("T(java.util.List).of(1, 2)").getValue(List.class);
System.out.println(list); // [1, 2]</code></pre>이렇게 static 함수를 호출해주는 것도 가능하답니다.<h2>어노테이션과 함께 사용하기</h2>'들어가기 앞서'의 의문증을 해소하는 데에 한 걸음 가까워졌어요.SpEL을 BeanDefinitions을 정의하는 데에 사용할 수도 있습니다. XML로 하는 방식, 어노테이션으로 하는 방식이 있는데, 저희는 스프링 부트의 시대를 살고 있으므로 어노테이션을 통해 사용하는 법을 알아봅시다.<h3>@Value</h3><code spellcheck="false">@Value</code> 어노테이션을 필드, 메서드 및 메서드/생성자 매개변수에 배치해서 기본값을 지정할 수 있다. 이 때 사용하는 표현식에 <code spellcheck="false">#{}</code>을 붙여주어야 한다!<pre spellcheck="false"><code class="language-java">@Value("#{15 + 57}") // 72
private int sktt1;

@Value("#{2 ^ 10}") // 1024
private int power;</code></pre><h3>@PreAuthorize, @PostAuthorize</h3>스프링 시큐리티에서 자주 사용하는 이 어노테이션들도 사실은 SpEL로 되어 있다.<pre spellcheck="false"><code class="language-java">@PreAuthorize("hasRole('ADMIN')") // 이렇게도 사용 가능하지만..

@PreAuthorize("1 == 2") // 이렇게도 사용 가능하다</code></pre>보통은 <code spellcheck="false">hasRole</code> 함수 등으로만 사용해서 잘 몰랐을 수 있지만, 근본은 SpEL이므로 <code spellcheck="false">1 == 2</code> 같은 아무 boolean 조건식이나 넣어줄 수 있다. 이 경우 true가 나와야지만 인증되므로 <code spellcheck="false">1 == 2</code>는 아무도 실행할 수 없는 api가 되겠네요.<h3>@RequestParam</h3>오늘의 '들어가기 앞서'의 의문증이 나왔다. <code spellcheck="false">RequestParam</code>의 defaultValue 부분도 SpEL을 사용할 수 있다. 따라서 앞의 의문인, 기본값으로 오늘 날짜를 넣고 싶을 경우는 이렇게 코드를 짜주면 되겠다.<pre spellcheck="false"><code class="language-java">class Controller {
 @GetMapping("/hello")
 public void hello(
 @RequestParam(defaultValue = "#{T(java.time.LocalDate).now()}") date: LocalDate
 ) {
 System.out.println("Hello, " + date);
 }
}</code></pre>고민 해결!<h1>마무리 하며</h1>SpEL은 나름 다양한 쓰임새가 있다. 다른 빈의 변수 값을 가져오는 데에 쓸 수도 있고, 문자열로 다이나믹하게 변수를 파싱해야할 때에 쓰일 수도 있다.알아두면 언젠간 도움이 될 거라 생각이 든다.

Spring Expression Language (SpEL)을 알아보자

스프링 표현식 언어 (SpEL) 알아보기

<blockquote>목차<ol class="tight" data-tight="true"><li>Route Announcements</li><li>Static rendering</li><li>Dynamic rendering</li></ol></blockquote><h1>1. Route Announcements</h1>키워드<blockquote><code spellcheck="false">next/link</code> <code spellcheck="false">screen reader</code> <code spellcheck="false">assistive technology</code> <code spellcheck="false">document.title</code> <code spellcheck="false">SSR</code> <code spellcheck="false">CSR</code></blockquote><h2>1-1. Screen reader</h2><ul class="tight" data-tight="true"><li>웹접근성과 관련된 기술</li><li>웹페이지 텍스트를 소리내어 읽어줌</li><li>assisitive technology 라고도 함</li><li>페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨</li><li>한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음</li></ul><h2>1-2. Route announcer</h2><ul class="tight" data-tight="true"><li>넥스트에서 기본적으로 지원해주는 기능</li><li>스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강</li><li>페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌</li><li>title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)</li><li>title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌</li><li>h1도 없으면 해당 페이지의 url 경로 값을 알려줌</li><li>next/link 의 <code spellcheck="false">Link</code> 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함</li><li>이때 <code spellcheck="false">Route announcer</code> 가 assistive technology 에 정보를 알려줌</li></ul><h2>1-3. next/link</h2><pre spellcheck="false"><code>import Link from 'next/link';
export default function Home() {
return (
&lt;Link href="/about"&gt;
페이지 이동
&lt;/Link&gt;
)
}</code></pre><ul class="tight" data-tight="true"><li>a 태그를 상속한 컴포넌트라고 공식문서에서 소개</li><li>누르면 해당 경로로 페이지 이동</li><li>이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음</li><li>prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정</li><li>prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함</li><li>이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달 (<code spellcheck="false">title</code> or <code spellcheck="false">h1</code> or <code spellcheck="false">url</code>)</li></ul><h1>2. Static rendering</h1>키워드<blockquote><code spellcheck="false">cache</code> <code spellcheck="false">CDN</code></blockquote><ol class="tight" data-tight="true"><li>프로젝트 빌드</li><li>HTML 파일 생성</li><li>CDN에 분산 저장 (캐싱)</li><li>유저가 웹페이지 접속</li><li>CDN에 캐싱되어있는 HTML 완성본을 유저에 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적</li><li>HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음</li></ul><h2>3. Dynamic rendering</h2>키워드<blockquote><code spellcheck="false">SSR</code></blockquote><ol class="tight" data-tight="true"><li>유저가 웹페이지 접속</li><li>서버에서 해당 페이지의 HTML 파일 생성</li><li>HTML 문서 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일을 생성해야함</li></ul>

NEXT 공식문서를 통한 개념 학습