🧑‍💻 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

<h2>도메인이 뭐냐면..</h2><blockquote>개발을 할때도 도메인, 데이터베이스 구조를 설계할 때도 도메인, 프로젝트 기획할때도 도메인, 여기저기서 다 도메인이라는 단어를 쓰는데 개념이 명확하지 않아 헷갈려서 정리해봤슴다</blockquote><h3>1. 프로젝트 구조(Architecture):</h3><ul class="tight" data-tight="true"><li>프로젝트 구조에서 도메인은 주요 <code spellcheck="false">비즈니스 개체</code>를 나타냅니다. 일반적으로 소프트웨어 시스템에서 도메인은 해당 시스템이 다루는 <code spellcheck="false">중요한 주제 영역</code>을 반영합니다. 도메인은 프로젝트의 핵심 부분이며, <code spellcheck="false">이를 기반으로 비즈니스 로직을 구현</code>하게 됩니다. 예를 들어, 전자상거래 웹 애플리케이션의 도메인은 상품, 주문, 사용자 등과 같은 주요 개체들로 구성될 수 있습니다.</li></ul><h3>2. 스프링(Spring):</h3><ul class="tight" data-tight="true"><li>스프링에서의 도메인은 주로 <code spellcheck="false">엔티티 클래스</code>로 표현됩니다. 엔티티 클래스는 데이터베이스의 테이블과 매핑되는 객체를 나타냅니다. 스프링 애플리케이션에서 도메인 클래스는 주로 비즈니스 로직을 구현하고, <code spellcheck="false">데이터베이스와의 상호 작용</code>을 담당합니다. 스프링의 ORM(Object-Relational Mapping) 기술인 Hibernate를 사용하면 도메인 객체와 데이터베이스 테이블 간의 매핑을 쉽게 구현할 수 있습니다.</li></ul><h3>3. 데이터베이스(Database):</h3><ul class="tight" data-tight="true"><li>데이터베이스에서의 도메인은 해당 <code spellcheck="false">데이터베이스가 다루는 데이터의 유형</code>을 정의합니다. 도메인은 데이터의 <code spellcheck="false">속성과 제약 조건을 정의</code>하는 데 사용됩니다. 예를 들어, 사용자 이름이나 이메일 주소와 같은 속성은 데이터베이스에서의 도메인에 해당할 수 있습니다. 또한 데이터의 유효성을 검사하기 위한 제약 조건(예: NOT NULL, UNIQUE)도 도메인에서 정의됩니다.</li></ul><h3>4. 기타 도메인 개념들:</h3><ol class="tight" data-tight="true"><li>도메인 주도 설계(Domain-Driven Design, DDD): 소프트웨어 개발 방법론 중 하나로, 비즈니스 도메인을 중심으로 설계하는 방법론입니다. 도메인 주도 설계는 비즈니스 요구 사항을 반영하고 복잡성을 줄이기 위해 도메인 모델을 사용합니다.</li><li>도메인 객체: 소프트웨어에서 특정 도메인을 나타내는 객체를 의미합니다. 도메인 객체는 비즈니스 로직을 포함하고 해당 도메인에 특화된 행위를 수행합니다.</li><li>도메인 서비스: 특정 도메인과 관련된 비즈니스 로직을 제공하는 서비스입니다. 도메인 서비스는 도메인 객체와는 달리 특정 개체에 속하지 않는 독립적인 로직을 수행합니다.</li><li>도메인 이벤트: 도메인에서 발생하는 중요한 사건을 나타내는 이벤트입니다. 도메인 이벤트는 비즈니스 로직의 흐름을 추적하고 기록하는 데 사용될 수 있습니다.</li></ol><blockquote>혹시 틀린 부분이 있다면 댓글 부탁드립니다.</blockquote>

도메인이 뭐냐면..개발을 할때도 도메인, 데이터베이스 구조를 설계할 때도 도메인, 프로젝트 기획할때도 도메인, 여기저기서 다 도메인이라는 단어를 쓰는데 개념이 명확하지 않아 헷갈려서 정리해봤슴다1. 프로젝트 구조(Architecture):프로젝트 구조에서 도메인은 주요 비즈니스 개체를 나타냅니다. 일반적으로 소프트웨어 시스템에서 도메인은 해당 시스템이 다루

도메인이 뭔가요?

⚛️ React

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.<h1>mkcert?</h1>레포에서는 아래와 같이 설명하고 있다.<blockquote>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</blockquote>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.<h1>mkcert 설치</h1><h2>window</h2><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.아래 명령어를 입력해주자.<pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2>homebrew로 설치해주면 된다.<pre spellcheck="false"><code>brew install mkcert</code></pre><hr>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.<pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.나는 dev.until.blog를 적용했다.<pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
localhost name resolution is handled within DNS itself.127.0.0.1 localhost::1 localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.<pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.<pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.<pre spellcheck="false"><code> ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

Python

<blockquote>macOS 사용 도중 파이썬 패키지를 설치하기 위해 pip를 사용하자 보안 경고가 발생하며 설치가 거부되었다. 이를 해결하는 방법에 대해 다룬다.</blockquote><h3>도대체 무슨 에러인가?</h3><img src="https://image.until.blog/xeros/article/1727225853116.png" alt="until-1518">Python의 최신 PEP 668 표준에 의해, macOS 환경에서 pip를 통한 패키지 설치가 제약되는 문제라고 한다. 아무래도 최근에 애플에서 맥에 여러가지 보안 강화 조치와 제약이 추가되었는데 여기에 영향을 받은 패치가 아닐까 싶다.이 문제를 해결하는 방법은 크게 3가지정도로 구분할 수 있다.<h3>1. 가상 환경을 사용하는 방법</h3>다음과 같이 Python 가상 환경을 만들어서 사용하면 독립된 공간을 만들어서 사용하기에 pip를 정상적으로 사용할 수 있게 되며 패키지의 버전 문제로 인한 충돌을 피하기도 쉽다. 하지만 매 파이썬 프로젝트마다 가상 환경을 생성해주어야하고 터미널을 열 때마다 <code spellcheck="false">source</code>를 지정해 주어야 한다는 번거로움이 따른다.<ol><li>가상 환경 생성</li></ol><pre spellcheck="false"><code class="language-bash">python3 -m venv path/to/venv</code></pre><ol start="2"><li>가상 환경 활성화</li></ol><pre spellcheck="false"><code class="language-bash">source path/to/venv/bin/activate</code></pre><ol start="3"><li>패키지 설치</li></ol><pre spellcheck="false"><code>pip install supabase</code></pre><h3>2. pip에서 사용자 플래그 추가</h3>시스템 패키지 환경을 보호하기 위해 설치를 사용자 환경으로 제한하여 설치하도록 한다.그냥 귀찮음도 덜하고 보안도 챙기고 무난한 방법인듯하다.<pre spellcheck="false"><code class="language-bash">pip install --user supabase</code></pre><h3>3. break-system-package 옵션 또는 pip.conf 수정</h3>그냥 보안 권고사항을 무시하고 기존에 pip처럼 다이렉트 설치를 가능하게 하는 옵션을 붙여서 사용하면 된다.<pre spellcheck="false"><code class="language-bash">pip install &lt;package name&gt; --break-system-packages</code></pre>근데 매번 이 옵션을 붙이는것도 귀찮다면 아예 <code spellcheck="false">pip.conf</code> 파일을 수정해서 영구적으로 해당 명령을 활성화 시키는것 역시 가능하다.<ol><li><code spellcheck="false">pip.conf</code> 파일 생성</li></ol><pre spellcheck="false"><code class="language-bash">mkdir -p ~/.config/pip
vi ~/.config/pip/pip.conf</code></pre><ol start="2"><li>아래 내용을 추가한다.</li></ol><pre spellcheck="false"><code class="language-bash">pip install supabase --break-system-packages</code></pre><h3>왜 이런 보안조치가 시행되었는가?</h3>애플이 원래도 보안쪽으로는 깐깐했지만 갑자기 이런 기존 시스템에 영향을 줄 수도 있는 패치를 한 원인이 궁금해서 찾아보니 간략하게 설명하자면 pip를 사용한 시스템 전역 패키지 설치가 운영 체제의 패키지 관리자와 충돌할 수 있어 이를 방지하려는 목적이라고 한다. 패키지를 가상 환경이나 사용자 환경에만 설치하도록 유도해서 종속성 관리 문제를 해결하고 보안 취약점을 줄이기 위한 조치인듯 하다.마찬가지로 <code spellcheck="false">Homebrew</code> 역시 현재 공식 홈페이지에 나와있는 Installation 방법을 따라하고 추가적인 수정을 거치지 않으면 명령어 인식이 안된다.

macOS에서 pip externally-managed-environment 에러를 픽스하는 방법

macOS에서 pip install시 error: externally-managed-environment 에러가 발생하는 문제

애플리케이션을 설계할 때 우리는 코드 재사용성과 구조적 설계를 위해 <code spellcheck="false">상속(Inheritance)</code>과 <code spellcheck="false">컴포지션(Composition)</code>이라는 두 가지 주요 기법을 사용할 수 있습니다. 상속은 자식 클래스가 부모 클래스의 속성과 메서드를 물려받아 쉽게 코드 재사용이 가능하다는 장점을 가지고 있지만, 현실적으로 유지보수성에서 큰 문제를 일으킬 수 있습니다. 이러한 이유로 저는 상속을 피하고 싶은 경우가 많습니다.<img src="https://image.until.blog/thingk0/article/1731222508133.png" data-width="100%" data-align="center" alt="2052">대안으로 컴포지션은 객체 간의 느슨한 결합을 유지하며, 설계 유연성과 변경 용이성을 높여줍니다. 이 글에서는 왜 '상속'을 피하고 싶은지에 대한 이유와 컴포지션이 어떤 장점들을 제공하는지 비교해 보겠습니다 !<hr><h3>1. 상속 (Inheritance)</h3><img src="https://image.until.blog/thingk0/article/1731222764517.png" data-width="100%" data-align="center" alt="2053">상속은 자식 클래스가 부모 클래스의 속성과 메서드를 물려받는 구조로, 코드 재사용성을 극대화하고 계층적 구조를 쉽게 구현할 수 있습니다. 그러나 이러한 장점들에도 불구하고 상속에는 여러 단점이 존재합니다.장점:<ul><li>코드의 재사용성: 부모 클래스에 정의한 기능을 자식 클래스에서 재사용할 수 있어 코드 중복을 줄입니다. <ul><li>예를 들어, 여러 컨트롤러에서 공통적으로 사용하는 로직을 <code spellcheck="false">BaseController</code>에 정의할 수 있습니다.<pre spellcheck="false"><code>public class BaseController {
 public void logRequest() {
 System.out.println("Request received");
 }
}

public class UserController extends BaseController {
 public void getUser() {
 logRequest();
 // 사용자 정보 반환 로직
 }
}</code></pre></li></ul></li><li>계층적 구조: 클래스 간 관계가 명확해지므로 구조적인 설계가 용이합니다. <ul><li>예를 들어, <code spellcheck="false">UserController</code>와 같은 컨트롤러 클래스가 <code spellcheck="false">BaseController</code>를 상속받으면 이를 통해 로직의 구조를 명확하게 나타낼 수 있습니다.</li></ul></li><li>다형성: 부모 타입으로 자식 클래스를 참조하여 코드를 더 유연하게 작성할 수 있습니다. <ul><li>예를 들어, 다양한 동물 클래스를 <code spellcheck="false">Animal</code>이라는 부모 클래스로 묶어 처리할 수 있습니다.<pre spellcheck="false"><code>public class Animal {
 public void makeSound() {
 System.out.println("Some sound");
 }
}

public class Dog extends Animal {
 @Override
 public void makeSound() {
 System.out.println("Bark");
 }
}

public class Cat extends Animal {
 @Override
 public void makeSound() {
 System.out.println("Meow");
 }
}

public void playWithAnimal(Animal animal) {
 animal.makeSound();
}</code></pre></li></ul></li></ul>단점:<ul><li>강한 결합: 부모 클래스와 자식 클래스 간 결합이 강해지기 때문에 부모 클래스가 변경되면 자식 클래스에까지 영향을 미칠 수 있습니다. 이로 인해 유지보수가 매우 어려워질 수 있습니다.<img src="https://image.until.blog/thingk0/article/1731223081267.png" data-width="100%" data-align="center" alt="2055"><ul><li>이미지 출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://ahnyezi.github.io/java/javastudy-8-interface/">https://ahnyezi.github.io/java/javastudy-8-interface/</a></li></ul></li><li>유연성의 부족: 자바는 단일 상속만 지원하므로 설계에 제약이 생기고, 확장성이 떨어질 수 있습니다.</li><li>재사용의 한계: 상속은 "is-a" 관계일 때만 적합하며, 무리하게 사용할 경우 구조가 불명확해질 수 있습니다. <ul><li>상속 관계를 남용하면 결국 코드의 가독성이나 유지보수성이 저하될 수 있습니다.</li></ul></li></ul><hr><h3>2. 컴포지션 (Composition)</h3><img src="https://image.until.blog/thingk0/article/1731222971312.png" data-width="100%" data-align="center" alt="2054">컴포지션은 객체가 다른 객체를 멤버 변수로 포함하는 방식으로, 객체 간의 느슨한 결합을 유지합니다. 이는 "has-a" 관계를 형성하며, 더 유연한 설계를 가능하게 합니다.장점:<ul><li>유연성: 컴포지션을 통해 클래스 간 결합을 느슨하게 만들 수 있으며, 이를 통해 독립적인 변경과 기능 확장이 가능합니다. 스프링의 <code spellcheck="false">@Autowired</code>를 통한 의존성 주입 방식도 이러한 컴포지션을 활용한 사례입니다.<pre spellcheck="false"><code>public class LoggingService {
 public void log(String message) {
 System.out.println(message);
 }
}

public class UserService {
 private final LoggingService loggingService;

 public UserService(LoggingService loggingService) {
 this.loggingService = loggingService;
 }

 public void createUser() {
 loggingService.log("Creating user");
 // 사용자 생성 로직
 }
}</code></pre></li><li>재사용성 향상: 여러 클래스에서 공통으로 사용하는 <code spellcheck="false">LoggingService</code>를 다른 클래스에 포함하여 로깅 기능을 재사용할 수 있습니다.</li><li>다중 기능 구현: 자바의 단일 상속 제약을 우회하고, 여러 객체의 기능을 동시에 활용할 수 있습니다. <ul><li>예를 들어, <code spellcheck="false">NotificationService</code>와 <code spellcheck="false">AuditService</code>를 모두 포함하는 <code spellcheck="false">OrderService</code>를 설계할 수 있습니다.<pre spellcheck="false"><code>public class NotificationService {
 public void sendNotification(String message) {
 System.out.println("Notification: " + message);
 }
}

public class AuditService {
 public void audit(String action) {
 System.out.println("Audit log: " + action);
 }
}

public class OrderService {
 private final NotificationService notificationService;
 private final AuditService auditService;

 public OrderService(NotificationService notificationService, AuditService auditService) {
 this.notificationService = notificationService;
 this.auditService = auditService;
 }

 public void placeOrder() {
 auditService.audit("Order placed");
 notificationService.sendNotification("Your order has been placed.");
 }
}</code></pre></li></ul></li></ul>단점:<ul><li>코드 복잡도 증가: 객체 간의 관계 설정 및 관리가 복잡해질 수 있습니다. 하지만 이는 객체 간의 독립성과 유연성을 얻기 위한 대가입니다.</li><li>인터페이스 의존: 컴포지션을 잘 활용하기 위해서는 인터페이스 설계가 중요하며, 이는 초기 설계의 복잡성을 높일 수 있습니다. <ul><li>하지만 이런 인터페이스 기반 설계는 장기적으로 볼 때 유지보수성과 확장성에서 이점을 제공할 수 있습니다.</li></ul></li></ul><hr><h3>3. 언제 상속을, 언제 컴포지션을 사용할까?</h3><img src="https://image.until.blog/thingk0/article/1731223295411.png" data-width="100%" data-align="center" alt="2056"><ul><li>코드 재사용이 목적일 때: 코드 재사용이 주된 목적이며, "is-a" 관계가 명확할 경우 상속을 고려할 수 있습니다. 예를 들어, 공통 엔티티를 상속받아 여러 도메인 모델을 생성하는 경우입니다.<pre spellcheck="false"><code>public class BaseEntity {
 private Long id;
 private LocalDateTime createdAt;
 private LocalDateTime updatedAt;
 // getter, setter, 공통 로직 등
}

public class User extends BaseEntity {
 private String name;
 private String email;
 // User-specific 로직
}

public class Product extends BaseEntity {
 private String productName;
 private double price;
 // Product-specific 로직
}</code></pre></li><li>유연성과 유지보수성: 시스템의 복잡도가 높고 변화 가능성이 큰 경우 컴포지션이 더 적합합니다. 스프링에서 다양한 Bean을 조합해 애플리케이션을 구성하는 방식이 그 예입니다.<pre spellcheck="false"><code>@Service
public class OrderService {
 private final PaymentService paymentService;
 private final ShippingService shippingService;

 @Autowired
 public OrderService(PaymentService paymentService, ShippingService shippingService) {
 this.paymentService = paymentService;
 this.shippingService = shippingService;
 }

 public void processOrder(Order order) {
 paymentService.processPayment(order);
 shippingService.shipOrder(order);
 }
}</code></pre></li><li>테스트 용이성: 컴포지션은 테스트하기 쉽습니다. 독립적인 Mocking 및 주입을 통한 단위 테스트가 가능하기 때문입니다.<pre spellcheck="false"><code>@Mock
private PaymentService paymentService;

@Mock
private ShippingService shippingService;

@InjectMocks
private OrderService orderService;

@Test
public void testProcessOrder() {
 Order order = new Order();
 // Mocking 설정
 doNothing().when(paymentService).processPayment(order);
 doNothing().when(shippingService).shipOrder(order);

 orderService.processOrder(order);

 // 메서드 호출 확인
 verify(paymentService).processPayment(order);
 verify(shippingService).shipOrder(order);
}</code></pre></li><li>다중 상속의 필요: 자바의 단일 상속 제약을 피하고 여러 객체의 기능을 조합해야 할 때 컴포지션을 사용하는 것이 좋습니다.<pre spellcheck="false"><code>public class ReportService {
 private final NotificationService notificationService;
 private final LoggingService loggingService;

 public ReportService(NotificationService notificationService, LoggingService loggingService) {
 this.notificationService = notificationService;
 this.loggingService = loggingService;
 }

 public void generateReport() {
 loggingService.log("Generating report...");
 // 리포트 생성 로직
 notificationService.sendNotification("Report generated successfully");
 }
}</code></pre></li></ul><hr><h3>4. 결론</h3>상속과 컴포지션은 각각 장단점이 있으며, 상황에 따라 적절히 선택하는 것이 중요합니다. 그러나 저는 개인적으로 '상속'을 자주 사용하고 싶지 않습니다. 왜냐하면 강한 결합과 유연성 부족으로 인해 유지보수성이 떨어질 수 있기 때문입니다. <img src="https://image.until.blog/thingk0/article/1731223501373.png" data-width="50%" data-align="center" alt="2057">반면, 컴포지션은 느슨한 결합과 높은 유연성을 제공하며, 변화와 확장에 강한 구조를 설계할 수 있도록 도와줍니다. 이는 스프링부트 애플리케이션에서 더 유지보수하기 쉬운 설계를 만드는 데 큰 도움이 됩니다.최종적으로는 애플리케이션의 요구사항과 유지보수성, 확장성을 고려하여 두 가지 접근법을 적절히 혼용하는 것이 바람직합니다. 하지만 장기적인 관점에서 컴포지션을 더 많이 활용하는 것이 더 나은 설계로 이어질 수 있다고 생각합니다 :)

저는 왜 '상속'을 피하고 싶은지에 대한 이유와 컴포지션이 어떤 장점들을 제공하는지 비교해 보겠습니다

저는 사실 '상속' 을 별로 좋아하지 않아요 ?

🖥 백엔드

언틸 서비스에는 블로그에 업로드되는 이미지들을 저장하기 위해 AWS의 S3 서비스를 이용하고 있다. 파일을 업로드하면 해당 파일의 이름에 따라 해당 파일에 액세스할 수 있도록 URL을 제공하고 있는데, 언틸에서는 따로 파일의 확장자를 지정하지 않고 저장하고 있었다.덕분에 url이 이렇게 나오고 있었다. <code spellcheck="false">https://{언틸_S3_URL}/octoping/profile/1722161760968</code>물론 지금 생각해보면 왜 그랬을까 싶긴 한데... 열심히 개발하면서 아무 생각 없이 저질렀던 것 같다.<h1>코드</h1><pre spellcheck="false"><code class="language-kotlin">@Profile("real")
@Service
class S3ImageUploadService(
 private val s3Config: S3Config,
 private val imageDataSaver: ImageDataSaver,
 private val profileReader: ProfileReader,
) : ImageUploadService {
 override fun uploadImage(request: ImageUploadRequest): ImageUploadResult {
 val blog = profileReader.findById(request.blogId)
 val filePath = createFilePath(blog.username, request.fileType)
 val imgUrl = uploadImageAndGetUrl(filePath, request)
 
 // ...
 }

 private fun createFilePath(username: String, fileType: FileType): String {
 val fileName = System.currentTimeMillis().toString()
 return username + "/" + fileType.storePath + "/" + fileName
 }
}
</code></pre>다음이 해당 부분의 코드다.블로그의 username과 파일의 타입 (프로필 사진인지, 아티클 사진인지 등)을 받아 저장될 path를 생성하는 함수가 보인다. 여기에서 <code spellcheck="false">fileName</code>은 현재 시각을 통해서 만들고 있는데. 보시다시피 확장자를 따로 삽입해주고 있지 않았다..결국 이것들이 S3에 올라간 시점에서는 타입을 구분하기가 어려워진다. <h1>문제</h1>저장된 파일의 확장자가 없으니 S3의 url만 가지고는 어떤 파일인지를 알 수 없게 된다. 이것이 이미지인지, 동영상인지, 그냥 파일인지 알 수 없다. 물론 언틸의 경우 지금이야 이미지만 저장하고 있으니 괜찮지 않을까?<h2>WebP 변환 이슈</h2>이미지에도 종류가 여러 가지가 있다. jpg, png, webp, gif...그 중 WebP는 구글이 웹페이지 로딩 속도를 높이기 위해 개발한 이미지 포맷인데, 기존 포맷들에 비해 용량을 크게 줄일 수 있어 많은 사이트들에서 웹 사이트의 로딩 속도를 향상시키기 위해 사용하고 있다.그리고 보통 이미지의 WebP로의 변환은 <code spellcheck="false">CloudFront</code>의 <code spellcheck="false">Origin Response</code>에서 <code spellcheck="false">Lambda@Edge</code>를 통해 on-the-fly 방식으로 이루어지게 된다.<img src="https://image.until.blog/octoping/article/1729522382526.png" data-width="75%" data-align="center" alt="until-1840">이 WebP로 변환하는 람다 함수에서는 <code spellcheck="false">Sharp</code>라는 라이브러리를 사용한다. 이 라이브러리는 다양한 확장자의 이미지를 지원하지만 그럼에도 지원하지 않는 이미지 포맷이 존재한다. (ex. BMP 파일)따라서 WebP 변환을 진행하는 함수에서 확장자 검사를 진행해야 하는데, 앞서 소개한 상황에서는 확장자를 지니고 있지 않으니 다음을 진행할 수가 없다.<h1>해결</h1><pre spellcheck="false"><code class="language-kotlin">// Before
private fun createFilePath(username: String, fileType: FileType): String {
 val fileName = System.currentTimeMillis().toString()
 return username + "/" + fileType.storePath + "/" + fileName
}

// After
private fun createFilePath(username: String, fileType: FileType, contentType: String): String {
 val fileName = System.currentTimeMillis().toString()
 return username + "/" + fileType.storePath + "/" + fileName + "." + contentType.split("/")[1]
}</code></pre>다음과 같이 파일 이름에 확장자를 추가해주었다.<code spellcheck="false">MultipartFile</code>에서 넘어오는 <code spellcheck="false">contentType</code>은 <code spellcheck="false">image/png</code>와 같은 형식으로 주어지므로, <code spellcheck="false">contentType.split("/")[1]</code>와 같은 형식으로 파싱해주면 된다.<img src="https://image.until.blog/octoping/article/1729523218239.png" data-width="100%" data-align="center" alt="until-1841">이제는 확장자가 잘 붙은 것을 볼 수 있다.. 😢 다시는 하지 말자 이런 실수

S3에 파일을 업로드할 때는 꼭 확장자도 같이 붙여줍시다