Frontend

tRPC with Next.js 14

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1716457407086" alt="until-193"><blockquote>react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension</blockquote>최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우저에서 특정 영역의 컴포넌트 코드 위치를 찾고자 할때 유용하게 사용할 수 있다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">홈페이지</a>에 가면 설치하지 않고 실제로 사용해볼 수 있으니 궁금하면 가서 사용해보자.<h1>사용법</h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://chromewebstore.google.com/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi">크롬 웹스토어</a>에서 locator js를 설치해주면 설치해주고 홈페이지에 나와있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">가이드</a>를 참고하면 된다.본인의 개발환경을 띄우고, 브라우저에서 윈도우에서는 <code spellcheck="false">alt</code> , 맥에서는 <code spellcheck="false">option</code> 을 누르고 특정 영역을 클릭하면 바로 찾아준다.<hr><h1>후기</h1>근데 devDependency로 설치해줄 만큼 유용한지는 잘 모르겠음

react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우

브라우저에서 컴포넌트 코드 위치를 찾아주는 extension, Locator JS

📚 BOOK

🎨 PUBLISHING

CI/CD

⚛️ React

until 에서는 현재 os에 따라 <code spellcheck="false">cmd + k</code> 또는 <code spellcheck="false">ctrl + k</code> 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.<img src="https://image.until.blog/morethanmin/article/1728463552341.gif" data-width="100%" data-align="center">이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.<h2>userAgent</h2>navigator.userAgent 의 정보를 활용하면 os정보를 가져올 수 있어요. <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent">MDN</a>에서는 아래와 같이 설명하고 있어요.<blockquote>The <code spellcheck="false">Navigator.userAgent</code> read-only property returns the user agent string for the current browser.</blockquote>그럼 간단하게 이 정보를 통해 os 정보를 가져오는 useOs hook을 만들어볼까요?<h2>useOs (in Next.js)</h2>server side에서 동작할 수 있기 때문에 state로 감싸고 useEffect에서 값을 가져올 수 있도록 처리해주었어요.만약 client side에서 동작하는 경우에는 state로 관리될 필요가 없으니 참고해주세요. 언제든 window 객체에 접근할 수 있기 때문이에요.<pre spellcheck="false"><code class="language-typescript">import { useEffect, useState } from 'react'

const macosPattern =
 /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)|(iPhone)|(iPad)|(iPod)/i

const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)/i

const getOS = () =&gt; {
 if (typeof window === 'undefined') {
 return null
 }

 const { userAgent } = window.navigator

 if (macosPattern.test(userAgent)) {
 return 'macos'
 }
 if (windowsPattern.test(userAgent)) {
 return 'windows'
 }

 return null
}

const useOs = () =&gt; {
 const [os, setOs] = useState&lt;'macos' | 'windows' | null&gt;(null)

 useEffect(() =&gt; {
 setOs(getOS)
 }, [])

 return os
}

export default useOs</code></pre><h2>주의할 점</h2>MDN에서는 이 userAgent를 사용하는 것에 대해서 아래와 같이 주의사항을 안내하고 있어요.<blockquote>Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable. For example: ...</blockquote>즉, 이 값은 유저에 의해 쉽게 변경될 수 있는 값이고 수정이 가능하다는 내용이에요.따라서 서비스의 동작에 영향을 미칠 수 있는 곳에서는 사용하지 않는 것이 좋겠습니다.

until 에서는 현재 os에 따라 cmd + k 또는 ctrl + k 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.userAgentnavigator.userAgent 의 정보를 활용하면 o

react에서 현재 os 확인하기 (useOs)

🖥 백엔드

<h1>들어가기 전에</h1>Nest.js는 Node.js 진영에서 널리 쓰이고 있는 서버 프레임워크이다.그리고 이런 서버를 클라우드 환경에 배포하기 위해서는 AWS EC2, Oracle Cloud 등의 컴퓨팅 인스턴스 위에 올리는 방법이 정석이겠다.&nbsp;하지만 Nest.js는 서버리스를 지원하고, Vercel은 서버리스를 지원한다. 이를 이용해서 무료로 간단히 Vercel에 서버를 배포할 수 있다.<h1>방법</h1>방법 자체는 간단하다. 프로젝트 최상단에&nbsp;<code spellcheck="false">vercel.json</code>을 만들고 다음과 같이 작성한다.<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>그 후 <code spellcheck="false">npm install -g vercel</code> 을 실행한 후, 프로젝트 최상단 경로에서 <code spellcheck="false">vercel .</code>를 실행하면 완성된다.<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">배포를 했지만 다음과 같은 오류가 떠서 처음에 큰 고생을 했다.Vercel에서 로그를 확인해보니 아래와 같은 에러 로그가 있었다.<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">분명 잘 존재하는 모듈을 발견하지 못하고 있다고 에러가 떴다.왜;;인지 도저히 알기가 어려워 많이 헤맸는데, 문제는 내 import 문에 있었다.<pre spellcheck="false"><code class="language-typescript">import { PrismaService } from '@/infra/prisma/PrismaService';</code></pre>다음과 같이 path alias를 사용해서 절대 경로로 import 하는 경우 Vercel이 경로를 인식을 못하는 이슈였다.<code spellcheck="false">src/infra/prisma/PrismaService</code>&nbsp;처럼 @를 안 쓰고 절대경로로 쓰더라도 마찬가지였다. 상대경로로 작성해야 한다!<h2>Swagger 페이지 404 에러 (검증 못 해봄)</h2>다른 페이지는 잘 나오지만 Swagger 페이지만 아무것도 안 나오는 이슈 (404 에러)가 발생한다.<pre spellcheck="false"><code>Uncaught ReferenceError: SwaggerUIBundle is not defined
 at window.onload</code></pre>개발자 도구를 켜보면 이런 로그가 나온다.C# 쪽 스웨거에서도 한번 제보된 문제이긴 하다. swagger ui 파일이 서버리스에 올라가기에는 너무 크다는 이슈다.<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>따로 CDN에 swagger js나 css를 올려놓고, 서버리스에 올리는 대신 받아오는 방식으로 사용해볼 수 있겠다는 생각인데.<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>이런 방식으로 사용해볼 수 있다는 듯 하다.<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><h1>TMI</h1>실제로 until을 처음 개발할 당시에 서버비를 줄이기 위해 다음 방법으로 한동안 개발했었다..지금은 AWS + Kotlin Spring으로 넘어갔지만, 그래도 당시에 고려했던 점들을 몇 가지 적어본다.<ol><li>NestJS의 경우 서버 실행 초기에 bootstrap하는 과정을 거치는데, 이걸 api가 들어올 때마다 해야한다면 꽤 무거운 작업일 수밖에?</li><li>서버리스로 구성할 경우 api가 들어올 때마다 함수가 실행되는 꼴이므로, 트래픽이 몰리는 경우 DB의 커넥션 풀을 굉장히 잡아먹을 가능성이 높다. 이는 서버리스의 고질적 문제이긴 하다.<ul><li>프로젝트의 persistence 라이브러리로 채택한 Prisma의 경우 이런 문제를 해결해준다고 공식 사이트에 적혀는 있다. 하지만 좀 걱정된다<img src="https://image.until.blog/octoping/article/1730788287259.png" data-width="100%" data-align="center" alt="1976"></li></ul></li></ol>

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

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

WebSocket을 통해서 실시간 채팅을 넣기 위해 이 긴 이야기를 시작해야겠다.먼저 HTTP와 WebSocket의 차이를 이해해야 한다. 이를 위해서는 두 가지를 비교해서 보여주는 요청&amp;응답 흐름을 보면 좋다. HTTP는 클라이언트가 요청을 보내면 서버가 응답을 반환한 뒤 연결을 끊는 구조로, Stateless한 방식이다. 반면 WebSocket은 클라이언트와 서버 간의 연결을 유지하면서 양방향으로 데이터를 주고받는 구조다. 실시간 채팅이나 알림 시스템에 웹소켓이 많이 쓰일 수밖에 없는 이유이다.<img src="https://image.until.blog/mushroombud/article/1731002142789.png" data-width="100%" data-align="center" alt="2005">출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://apidog.com/blog/what-is-websocket-and-how-it-works/">APIDOG</a>Django Channels장고에서 에서 웹소켓 연결을 구축할 수 있도록 해주는 라이브러리다. 좀더 정확히 찾아보니 "비동기 통신" 을 핵심적으로 지원하는 라이브러리라고 한다. 채널의 핵심 구성 요소는 'Consumer'와 Channels Layer인데, Consumer는 기존 템플릿 엔진에서의 View와 비슷하게 특정 이벤트를 처리하는 역할을 하고, Channels Layer는 Consumer 간에 메시지를 주고받게 한다.챗지피티의 도움을 받아 웹소켓을 적용하는 간단한 예제 코드를 가져와봤다. 이 코드에서 connect와 disconnect 메서드는 각각 연결이 열릴 때와 닫힐 때 호출되고, receive는 메시지를 받을 때 호출된다. 이 구조 덕분에 장고에서도 실시간 채팅 같은 기능을 구현할 수 있다.<pre spellcheck="false"><code>from channels.generic.websocket import AsyncWebsocketConsumer
import json

class ChatConsumer(AsyncWebsocketConsumer):
 async def connect(self):
 await self.accept()

 async def disconnect(self, close_code):
 pass

 async def receive(self, text_data):
 text_data_json = json.loads(text_data)
 message = text_data_json['message']

 await self.send(text_data=json.dumps({
 'message': message
 }))</code></pre>React에서 웹소켓 쓰는 법?!React에서는 useWebSocket Hook을 사용해 WebSocket을 쉽게 다룰 수 있다. 이 Hook은 서버와의 연결 상태를 관리하고, 메시지를 주고받는 기능을 제공한다. 아래 코드는 useWebSocket을 사용해 버튼 클릭 시 서버에 메시지를 보내고, 서버에서 받은 메시지를 화면에 표시하는 예제다. readyState는 WebSocket 연결 상태를 나타내며, 연결이 잘 되어 있는지 확인할 때 유용하다.<pre spellcheck="false"><code>import React, { useState, useCallback, useEffect } from 'react';
import useWebSocket from 'react-use-websocket';

export const WebSocketDemo = () =&gt; {

 const [socketUrl, setSocketUrl] = useState('wss://echo.websocket.org');
	const options = {
	 onOpen: () =&gt; console.log('연결이 성공적으로 열렸습니다.'),
	 onClose: () =&gt; console.log('연결이 닫혔습니다.'),
	 onError: (error) =&gt; console.error('웹소켓 에러:', error),
	 onMessage: (message) =&gt; console.log('수신된 메시지:', message.data),
	};
 const { sendJsonMessage } = useWebSocket(socketUrl, options, reconnectInterval: 1000,share: true,);</code></pre>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://enshrined-couch-1f4.notion.site/6-1d4a192e787b41bc8d0bbe79b07b0449#3f8ece29e3e34268a9ad6011d43e546b">멋쟁이사자처럼 세미나 자료 </a><s>아무리 찾아도 이만한게 없다</s>이렇게 하면 웹소켓 연결과 메시지 송수신을 단 몇 줄로 구현할 수 있다. sendMessage로 서버에 메시지를 보내고, lastMessage로 서버에서 받은 메시지를 즉시 확인할 수 있다.<s>useWebsocket 짱</s>

웹소켓 정복하기, 장고와 리액트에서 어떻게 구현되는지

[WebSocket] 실시간 Stateful 통신의 세계로

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

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

Spring

💬 회고

조금 이른듯한 23~24년 회고 [코딩편]

📱 Webview

<h1>Problem</h1>웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.<img src="https://image.until.blog/morethanmin/article/1723285031061" data-width="50%" data-align="center" alt="until-1220">관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.<h1>background-image 추가하기</h1>아래와 같이 video의 background-image로 poster를 추가해 임시로 대응해줄 수 있었다.<pre spellcheck="false"><code class="language-xml"> &lt;video
 src={video}
 poster={poster}
 style={{ width: 260, height: 200 }}
 autoPlay
 loop
 playsInline
 muted
 css={css`
 // mobile safari에서 poster -&gt; video로 전환 시 깜빡임이 발생해 추가
 overflow: hidden;
 background-image: url(${poster});
 background-position: center;
 background-size: cover;
 `}
 /&gt;</code></pre>placeholder -&gt; video로 전환될 때의 영역을 background image가 채워줌으로서 깜빡임 현상을 임시로 해결해 줄 수 있었다.아래는 결과물이다.<img src="https://image.until.blog/morethanmin/article/1723285046176" data-width="50%" data-align="center" alt="until-1221">

Problem웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.background-image 추가하기아래와 같이 video

mobile safari에서 video poster가 깜빡이는 이슈

스프링을 처음 학습하는 초보자 분들이 흔히 하는 실수가 있습니다..! 바로 서비스 레이어에서 <code spellcheck="false">@Service</code> 애노테이션과 함께 <code spellcheck="false">@Transactional</code>을 습관적으로 세트로 붙이는 것입니다. 그러면 이것이 잘못된 걸까요? 아닙니다. 당연하게도 서비스 레이어에서는 <code spellcheck="false">@Transactional</code>을 붙여주는 것이 좋습니다.<img src="https://image.until.blog/thingk0/article/1727797045468.jpeg" data-width="75%" data-align="center">대부분의 개발자들은 서비스 클래스에서 DAO 혹은 리포지토리를 사용하여 CRUD와 관련한 로직을 많이 처리합니다. 리포지토리를 통해 실제 DB와 상호 작용하기 때문에 데이터베이스 작업 중 일관성, 안전성, 무결성을 보장해야 하며, 에러 발생 시 자 동 롤백이 필요합니다.만약 <code spellcheck="false">@Transactional</code>이 없다면 여러 문제점이 발생할 수 있으므로 작성해주는 것이 좋습니다.또한 메서드 단위로 일일이 붙여주시는 분들도 계시지만, 클래스 단위에 붙여주면 해당 클래스 내부의 모든 메서드에서 자동으로 트랜잭션 처리를 해주어 편리합니다.<h3>그런데 왜 <code spellcheck="false">@Transactional</code> 어노테이션만 사용했는데 트랜잭션 처리가 자동으로 이루어질까요?</h3><hr>스프링을 JPA와 함께 처음 학습하신 분들은 잘 모를 수 있지만, 사실 JPA는 내부적으로 JDBC를 사용합니다. 순수 JDBC를 사용할 때는 드라이버 클래스를 로드하고, 커넥션을 직접 생성해서 트랜잭션을 시작하고, 커밋하고 하는 등 모든 작업을 개발자가 직접 해주어야 합니다. 하지만 기술이 추상화되고 발전하면서 이를 자동화해주게 되었습니다.예를 들어, 순수 JDBC를 사용하면 아래와 같습니다.<pre spellcheck="false"><code class="language-java">public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 public void saveMember(String memberId, String memberName) {

 Connection connection = null;
 PreparedStatement preparedStatement = null;

 try {
 // 1. 드라이버 로드
 Class.forName("com.mysql.cj.jdbc.Driver");
 // 2. 커넥션 생성
 connection = DriverManager.getConnection(URL, USER, PASSWORD);
 // 3. 트랜잭션 시작 (AutoCommit을 false로 설정)
 connection.setAutoCommit(false);

 // 4. SQL 작성 및 준비
 String sql = "INSERT INTO members (member_id, member_name) VALUES (?, ?)";
 preparedStatement = connection.prepareStatement(sql);

 // 5. 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // 6. SQL 실행
 preparedStatement.executeUpdate();

 // 7. 커밋 (트랜잭션 종료)
 connection.commit();
 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);

 } catch (Exception e) {
 try {
 if (connection != null) {
 // 예외 발생 시 롤백
 connection.rollback();
 System.out.println("롤백 수행: " + e.getMessage());
 }

 } catch (SQLException rollbackEx) {
 System.err.println("롤백 실패: " + rollbackEx.getMessage());
 }

 e.printStackTrace();

 } finally {
 // 8. 리소스 정리 (Connection, PreparedStatement 닫기)
 try {
 if (preparedStatement != null) {
 preparedStatement.close();
 }

 if (connection != null) {
 connection.close();
 }

 } catch (SQLException closeEx) {
 System.err.println("자원 해제 실패: " + closeEx.getMessage());
 }
 }
 }
}</code></pre>위 코드는 다음과 같은 순서로 진행됩니다.1. 드라이버 로드<ul><li>JDBC 드라이버를 로드하여 MySQL과 같은 DBMS와 연결할 수 있도록 합니다.<ul><li><code spellcheck="false">Class.forName("com.mysql.cj.jdbc.Driver")</code>를 통해 JDBC 드라이버 클래스를 명시적으로 로드합니다.</li></ul></li></ul>2. 커넥션 생성<ul><li><code spellcheck="false">DriverManager.getConnection()</code>을 사용하여 데이터베이스와의 연결(`Connection`)을 만듭니다.<ul><li>이때 DB URL, 사용자 이름, 비밀번호를 사용합니다.</li></ul></li></ul>3. 트랜잭션 시작<ul><li><code spellcheck="false">connection.setAutoCommit(false)</code>를 사용하여 트랜잭션을 수동으로 제어합니다.<ul><li>기본적으로 JDBC는 AutoCommit 모드이기 때문에, 이 설정을 끄면 트랜잭션을 개발자가 직접 커밋하거나 롤백할 수 있습니다.</li></ul></li></ul>4. SQL 작성 및 실행<ul><li><code spellcheck="false">PreparedStatement</code>를 사용하여 SQL 쿼리를 준비합니다.<ul><li>쿼리에 바인딩할 파라미터(`memberId`, `memberName`)를 설정하고 <code spellcheck="false">executeUpdate()</code>로 쿼리를 실행합니다.</li></ul></li></ul>5. 커밋 및 롤백<ul><li>작업이 정상적으로 완료되면 <code spellcheck="false">connection.commit()</code>을 호출하여 트랜잭션을 커밋합니다.</li><li>오류가 발생하면 <code spellcheck="false">catch</code> 블록에서 <code spellcheck="false">connection.rollback()</code>을 호출하여 롤백합니다.</li></ul>6. 리소스 정리<ul><li>JDBC를 사용할 때는 <code spellcheck="false">Connection</code>과 <code spellcheck="false">PreparedStatement</code>를 반드시 <code spellcheck="false">close()</code>로 닫아줘야 합니다.<ul><li><code spellcheck="false">finally</code> 블록에서 예외와 상관없이 자원을 정리합니다.</li></ul></li></ul><h3>회원 저장 한 번 하는데 너무 복잡합니다 !</h3><hr><img src="https://image.until.blog/thingk0/article/1727797173729.jpeg" data-width="75%" data-align="center">순수 JDBC를 사용하면 아래와 같은 단점들을 쉽게 눈치챌 수 있습니다.- 반복되는 코드: 커넥션을 생성하고, 쿼리를 실행하며, 예외 처리 및 리소스를 정리하는 코드가 반복적으로 등장합니다. 이는 코드의 중복을 야기하고 유지보수가 어렵습니다.- 직접적인 트랜잭션 관리: 트랜잭션을 수동으로 관리해야 하므로, 실수로 <code spellcheck="false">commit()</code>을 호출하지 않거나 <code spellcheck="false">rollback()</code>을 누락할 위험이 있습니다.- 리소스 관리: 커넥션과 같은 자원을 명시적으로 닫아야 하므로, 실수로 리소스를 닫지 않으면 메모리 누수나 DB 커넥션 풀 고갈 같은 문제가 발생할 수 있습니다.개발자들은 불필요한 반복과 중복을 싫어합니다. 중요한 것은 주요 비즈니스 로직이지, 드라이버를 로드하고 커넥션을 얻고, 직접 트랜잭션을 열고 닫고 예외 처리까지 하는 복잡하고 반복적인 작업이 아닙니다. 그래서 하나씩 불필요한 부분을 제거해보겠습니다 🔥<h2>1. <code spellcheck="false">try-with-resources</code>로 리소스 정리</h2><hr>자바 7부터는 <code spellcheck="false">try-with-resources</code> 구문을 제공하여 <code spellcheck="false">AutoCloseable</code> 인터페이스를 구현한 자원들을 자동으로 닫아줍니다.<pre spellcheck="false"><code class="language-java">import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 public void saveMember(String memberId, String memberName) {
 // 1. 드라이버 로드
 try {
 Class.forName("com.mysql.cj.jdbc.Driver");
 } catch (ClassNotFoundException e) {
 throw new IllegalStateException("JDBC 드라이버 로드 실패", e);
 }

 // 2. try-with-resources 구문을 사용해 Connection과 PreparedStatement를 자동으로 닫음
 try (
 Connection connection = DriverManager.getConnection(URL, USER, PASSWORD);
 PreparedStatement preparedStatement = connection.prepareStatement(
 "INSERT INTO members (member_id, member_name) VALUES (?, ?)")
 ) {
 // 3. 트랜잭션 시작 (AutoCommit을 false로 설정)
 connection.setAutoCommit(false);

 // 4. 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // 5. SQL 실행
 preparedStatement.executeUpdate();

 // 6. 커밋 (트랜잭션 종료)
 connection.commit();

 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);
 } catch (SQLException e) {
 // 예외 처리 및 오류 메시지 출력
 e.printStackTrace();
 System.err.println("회원 저장 실패: " + e.getMessage());
 }
 }
}</code></pre><ul><li><code spellcheck="false">Connection</code>과 <code spellcheck="false">PreparedStatement</code>는 이제 <code spellcheck="false">try</code> 블록 안에서 선언되었으며, 자동으로 자원 해제가 이루어집니다.</li></ul>-&gt; 더 이상 <code spellcheck="false">finally</code> 블록에서 수동으로 <code spellcheck="false">close()</code>를 호출할 필요가 없습니다.<h2>2. 드라이버 로드 자동화</h2><hr>JDBC 4.0 이상부터는 드라이버를 명시적으로 로드하지 않아도 됩니다.<pre spellcheck="false"><code class="language-java">import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 public void saveMember(String memberId, String memberName) {
 // try-with-resources 구문을 사용해 Connection과 PreparedStatement를 자동으로 닫음
 try (
 Connection connection = DriverManager.getConnection(URL, USER, PASSWORD);
 PreparedStatement preparedStatement = connection.prepareStatement(
 "INSERT INTO members (member_id, member_name) VALUES (?, ?)")
 ) {
 // 트랜잭션 시작 (AutoCommit을 false로 설정)
 connection.setAutoCommit(false);

 // 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // SQL 실행
 preparedStatement.executeUpdate();

 // 커밋 (트랜잭션 종료)
 connection.commit();

 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);
 } catch (SQLException e) {
 // 예외 처리 및 오류 메시지 출력
 e.printStackTrace();
 System.err.println("회원 저장 실패: " + e.getMessage());
 }
 }
}</code></pre><ul><li>드라이버 로드 부분 삭제: <code spellcheck="false">Class.forName("com.mysql.cj.jdbc.Driver")</code> 코드를 제거했습니다.</li></ul><h2>3. 트랜잭션 관리 자동화</h2><hr>이제 트랜잭션 시작과 종료 부분만 제외하면 딱입니다. 바로 여기에서 스프링의 <code spellcheck="false">@Transactional</code>이 등장합니다.<img src="https://image.until.blog/thingk0/article/1727797214371.jpeg" data-width="75%" data-align="center"><h3><code spellcheck="false">@Transactional </code>은 어떻게 트랜잭션을 자동으로 관리할까?</h3>스프링의 <code spellcheck="false">@Transactional</code> 애노테이션은 AOP(Aspect-Oriented Programming)와 프록시 패턴을 기반으로 동작합니다. 이를 통해 개발자는 트랜잭션 관리에 대한 코드를 직접 작성하지 않아도 됩니다.<blockquote>AOP(관점 지향 프로그래밍): 핵심 비즈니스 로직과 부가적인 관심사를 분리하여 모듈화하는 프로그래밍 패러다임입니다. 예를 들어, 로깅, 보안, 트랜잭션 관리 등의 공통 기능을 비즈니스 로직과 분리할 수 있습니다.</blockquote><blockquote>프록시 패턴: 어떤 객체에 대한 접근을 제어하기 위해 그 객체의 대리자나 대리인을 제공하는 디자인 패턴입니다.</blockquote><h3><code spellcheck="false">@Transactional</code>의 동작 과정</h3>1. 프록시 생성<ul><li>스프링은 <code spellcheck="false">@Transactional</code> 애노테이션이 붙은 클래스나 메서드를 감지합니다. 이를 위해 스프링은 해당 클래스의 프록시 객체를 생성합니다.</li></ul>2. 메서드 호출 가로채기<ul><li>클라이언트가 <code spellcheck="false">@Transactional</code>이 적용된 메서드를 호출할 때, 실제 객체 대신 프록시 객체가 메서드 호출을 가로챕니다.</li></ul>3. 트랜잭션 시작<ul><li>프록시는 트랜잭션 매니저를 통해 트랜잭션을 시작합니다. 이때 데이터베이스 연결의 <code spellcheck="false">AutoCommit</code>을 <code spellcheck="false">false</code>로 설정하여 수동으로 트랜잭션을 제어합니다.</li></ul>4. 비즈니스 로직 실행<ul><li>트랜잭션이 시작된 상태에서 실제 비즈니스 로직이 실행됩니다.</li></ul>5. 트랜잭션 커밋 또는 롤백<ul><li>비즈니스 로직이 정상적으로 완료되면 프록시는 트랜잭션을 커밋합니다.</li><li>예외가 발생하면 프록시는 트랜잭션을 롤백합니다.</li></ul>6. 리소스 정리<ul><li>트랜잭션이 완료되면, 스프링은 사용된 자원들을 자동으로 정리합니다.</li></ul><h3>기존 코드에서 <code spellcheck="false">@Transactional</code> 적용하기</h3>이제 기존의 코드를 스프링의 <code spellcheck="false">@Transactional</code>을 사용하여 더욱 간단하게 바꿔보겠습니다.<pre spellcheck="false"><code class="language-java">import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@Repository
public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 @Transactional
 public void saveMember(String memberId, String memberName) {
 try (
 Connection connection = DriverManager.getConnection(URL, USER, PASSWORD);
 PreparedStatement preparedStatement = connection.prepareStatement(
 "INSERT INTO members (member_id, member_name) VALUES (?, ?)")
 ) {
 // 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // SQL 실행
 preparedStatement.executeUpdate();
 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);

 } catch (SQLException e) {
 ...
 }
 }
}</code></pre>1. 트랜잭션 관리 코드 제거<ul><li>기존 코드에서 수동으로 처리하던 <code spellcheck="false">connection.setAutoCommit(false)</code>와 <code spellcheck="false">connection.commit()</code> 부분이 제거되었습니다.<ul><li>스프링이 자동으로 트랜잭션을 관리해주기 때문에, 개발자는 이런 저수준 트랜잭션 관리를 신경 쓸 필요가 없습니다.</li></ul></li></ul>2. `@Transactional` 사용<ul><li><code spellcheck="false">@Transactional</code> 애노테이션을 추가하여 메서드 전체를 트랜잭션 관리 대상으로 지정했습니다.<ul><li>스프링은 이 애노테이션을 보고 해당 메서드를 호출할 때 트랜잭션을 시작하고, 종료 시점에 자동으로 커밋하거나 롤백합니다.</li></ul></li></ul>3. 프록시를 통한 자동화<ul><li>프록시 객체가 <code spellcheck="false">saveMember()</code> 메서드를 감싸고 있으며, 클라이언트가 이 메서드를 호출하면 스프링 프록시가 트랜잭션을 시작하고, 예외 발생 시 자동으로 롤백합니다.</li></ul><hr><h2>결론</h2>이번 포스트를 작성하면서 저도 JDBC, 트랜잭션, AOP에 대해 다시 한 번 복습할 수 있었습니다. 물론, 모든 것을 세세하게 외워야 한다는 의미는 아닙니다. 이 부분들은 이미 충분히 자동화된 검증된 기술이기 때문에, 중요한 것은 트랜잭션의 중요성과 원리를 이해하고, 우리가 이를 사용할 때 어떤 원리로 동작하는지 감각적으로 파악하는 것입니다 :)특히, AOP를 통해 핵심 로직과 공통 관심사를 분리하는 방식은 개발 생산성을 크게 높여줍니다. 오늘의 핵심은, 트랜잭션 관리가 AOP 기반으로 이루어지며, 이를 통해 우리는 비즈니스 로직에만 집중할 수 있는 환경을 제공받고 있다는 것입니다. <s>(감사드립니다)</s>저는 개인적으로 AOP를 주로 로직의 시간 측정에 활용하고 있지만, 이 외에도 무궁무진한 가능성이 있는 기술입니다. 부족하지만 제 포스트를 읽어주셔서 정말 감사드리며, 앞으로도 AOP와 관련된 더 깊이 있는 내용을 다룰 예정이니, 많은 기대 부탁드립니다! 😆✨<img src="https://image.until.blog/thingk0/article/1727797410419.gif" data-width="50%" data-align="center">

스프링의 @Transactional을 통해 트랜잭션 관리가 자동화되는 과정을 설명하며, AOP와 프록시 패턴을 활용한 효율적인 트랜잭션 처리의 중요성을 다룹니다.

React에서 useEffect와 useLayoutEffect 차이점

사전 개념

useLayoutEffect

useEffect

결론

Reference