Kafka

<h3>나는 왜 카프카를 공부하는가…</h3>지난 SSAFY 핀테크 특화 프로젝트를 진행하면서 처음으로 MSA를 통해 백엔드를 구축해볼 기회가 있었습니다. 그런데 사용자에게 알림 기능을 제공해야 하는 상황에서, 프론트엔드가 PWA를 사용한 모바일 웹앱 형태였기 때문에 문제가 발생했습니다.기존에는 웹소켓을 사용하여 커스텀 알림 형태를 제공했지만, PWA에서는 푸시 알림이 필요하다고 판단되어 FCM을 통해 푸시 알림 기능을 구현하게 되었습니다.<blockquote>FCM(Firebase Cloud Messaging)은 앱 개발자들이 서버나 클라이언트 애플리케이션에서 사용자의 안드로이드, iOS, 웹 애플리케이션 등으로 직접 메시지를 보낼 수 있게 해주는 구글의 크로스 플랫폼 메시징 솔루션입니다.알림 메시지 또는 데이터 메시지를 사용하여 앱이 활성화되지 않은 상태에서도 사용자에게 중요한 정보를 전달할 수 있습니다. 예를 들어, 새로운 이메일이나 소셜 미디어의 알림과 같은 정보를 실시간으로 사용자에게 알려줄 수 있습니다</blockquote>이 때, 알림용 서버를 별도로 구축했는데, 다른 서비스들에서 새롭게 생성된 알림 정보를 카프카를 통해 메시지를 발신하고, 알림 서버에서는 이 메시지들을 중앙집중적으로 수신하여 FCM을 통한 푸시 알림 전송 요청을 처리하는 형태로 구현하였습니다.해당 프로젝트를 통해 처음으로 Kafka를 학습하고 적용해볼 수 있었는데, 서버 설정부터 실제 기능 적용에 이르기까지, 예상외로 많은 어려움을… 🤣🤣🤣그럼에도 카프카의 활용도와 유용함을 실감하게 되어, 데이터 파이프라인을 구축할 때 Kafka는 필수적인 요소라는 것을 알게 되었고, 이로 인해 본격적으로 Kafka를 공부하기로 결심하게 되었습니다 !<img src="https://image.until.blog/thingk0/article/1718768163378" data-width="100%" data-align="center" alt="until-561"><h2>카프카는 왜 생겼는가..</h2><ul><li>링크드인(LinkedIn) → 파편화된 데이터 수집 및 분배 아키텍처를 운영하는데 큰 어려움을 겪음.<ul><li>데이터 생성/적재하기 위해서는 데이터를 생성하는 소스 애플리케이션과 데이터가 적재되는 타깃 애플리케이션을 연결해야 함. 그리고 연결하는 소스/타깃 애플리케이션이 많아질수록 소스코드 및 버전 관리 이슈 발생. 추가로 타깃 애플리케이션에 장애가 발생할 경우 소스 애플리케이션에도 그대로 영향</li></ul>-&gt; 이러한 문제들을 해결하기 위해 ‘`아파치 카프카(Apache Kafka)`’ 가 탄생.</li></ul><h2>카프카 ?</h2><ul><li>각각의 애플리케이션끼리 연결하는 것이 아닌, 모든 데이터를 한 곳에 모아서 처리할 수 있도록 중앙집중화를 함.</li><li>여러 플랫폼에서의 데이터 스트림을 한 곳에서 실시관 관리가 가능해짐.</li><li>대용량 데이터를 수집하고, 사용자들이 실시간으로 데이터 스트림을 소비할 수 있게 만들어주는 일종의 ‘중추신경계’ 처럼 동작.</li><li>중앙에 배치된 카프카를 통해 소스/타깃 애플리케이션 사이의 의존도를 최소화하여 ‘결합도(Coupling)’ 를 완화함.</li></ul><blockquote>결합도(Coupling)는 소프트웨어 공학에서 매우 중요한 개념으로, 프로그램의 다양한 모듈 간에 상호 의존성의 정도를 나타냅니다.결합도가 높다는 것은 한 모듈이 다른 모듈과 강하게 연결되어 있어서, 하나의 모듈에 변경이 생길 때 다른 모듈에도 많은 영향을 미친다는 것을 의미&lt;/u&gt;합니다.반대로, 결합도가 낮다면 각 모듈은 독립적으로 기능하며, 변경사항이 다른 모듈에 미치는 영향이 적습니다.</blockquote>-&gt; 카프카를 통해 소스 애플리케이션은 타깃 애플리케이션을 고려하지 않고 그냥 데이터를 생산하면 됌.<ul><li>카프카는 내부에 데이터가 저장될 때, 선입선출(FIFO) 방식의 큐(Queue) 자료구조와 유사하게 저장이 됌.→ 큐에 데이터를 보내는 것이 프로듀서(Producer)이고 큐에서 데이터를 가져가는 것이 컨슈머(Consumer) 라고 함.</li></ul><img src="https://image.until.blog/thingk0/article/1718768378756" data-width="100%" data-align="center" alt="until-562"><ul><li>카프카의 굉장히 큰 특장점으로, 카프카를 통해 전달할 수 있는 데이터의 포맷은 제한이 없다는 것. 직렬화/역직렬화를 통해 바이트 스트림 형태로 전달되기 때문에 Java 에서 선언 가능한 모든 객체를 지원하며, 카프카 클라이언트에서는 기본적으로 <code spellcheck="false">ByteArray</code>, <code spellcheck="false">ByteBuffer</code>, <code spellcheck="false">Double</code>, <code spellcheck="false">Long</code>, <code spellcheck="false">String</code> 타입 등에 대응한 직렬화/역직렬화 클래스가 제공됌.</li></ul><h2>카프카 브로커와 클러스터 ?</h2><blockquote>카프카 브로커(Kafka Broker)는 Apache Kafka의 기본 구성 요소 중 하나로, 메시지 또는 데이터 스트림의 관리와 전송을 담당하는 서버의 역할을 합니다.</blockquote>서버의 개념에 빗대어 설명하자면, 카프카 브로커는 레스토랑에서의 웨이터와 비슷합니다. 웨이터가 주문을 받아 주방에 전달하고, 준비된 음식을 손님에게 서빙하는 것처럼, 카프카 브로커는 데이터 생산자(Producer)로부터 메시지를 받아 저장하고, 필요할 때 소비자(Consumer)에게 해당 메시지를 전달합니다.<ul><li>실제 상용 환경에서 카프카는 최소 3대 이상의 브로커(=서버)를 카프카 클러스터 형태로 이루어서 분산 운영하여 프로듀서를 통해 전송받은 데이터를 파일 시스템에 안전하게 기록함.<ul><li>클러스터에서 일부 브로커에 장애가 발생하더라도 데이터를 지속적으로 복제하여 관리하기 때문에 안전하게 운영이 될 수 있음. 그래서 최소 3대 이상의 브로커를 하나의 클러스터 형태로 운영해야 함.</li><li>또한, 데이터를 묶음 단위로 처리하는 배치 전송을 통해 낮은 지연과 높은 데이터 처리량이 카프카의 장점.</li></ul></li></ul><h2>카프카의 특장점 4가지</h2><ul><li>높은 처리량<ul><li>카프카는 프로듀서, 컨슈머 모두 브로커와 데이터를 주고받을 때 모두 묶어서 송수신함.</li><li>대용량의 데이터를 송수신할 때, 네트워크 연결 비용은 무시할 수 없는 규모이므로 동일한 양의 데이터를 보낼 때 네트워크 I/O 를 최소화시켜 동일 시간 내에 더 많은 데이터 송수신이 가능함.</li><li>대용량의 데이터를 배치 처리하여 빠르게 처리할 수 있기 때문에 실시간 로그데이터를 처리하는데 적합하며, 파티션이라는 개념을 통해 여러 파티션에 데이터를 분배하여 병렬 처리 또한 가능함.</li></ul></li></ul><ul><li>확장성<ul><li>데이터는 시간에 따라 양이 달라지기 때문에 항상 예측할 수 없음. 그러나, 카프카는 가변적인 환경에서 안정적으로 스케일 인(Scale-in), 스케일 아웃(Scale-out)이 가능함.</li></ul></li></ul><img src="https://image.until.blog/thingk0/article/1718768483787" data-width="100%" data-align="center" alt="until-564"><ul><li>영속성<ul><li>카프카는 다른 메시징 플랫폼과 다르게 데이터를 메모리가 아닌 파일 시스템에 저장함. 그러나, 단순히 일반 파일 형태로만 저장하는 것이 아니라 운영체제에서 파일의 I/O 성능을 높이기 위한, 페이지 캐시(Page cache) 영역을 통해 데이터를 캐싱하는 형태이기 때문에 처리량이 높음.</li></ul></li></ul><img src="https://image.until.blog/thingk0/article/1718768518261" data-width="100%" data-align="center" alt="until-565"><ul><li>고가용성<ul><li>이전에도 설명했듯이, 카프카 브로커(=서버)를 최소 3개 이상으로 클러스터를 운영하면 일부 서버에 장애가 발생하여도 무중단으로 안전하고 지속적으로 데이터 처리 가능. 그리고, 클러스터로 이루어진 브로커들끼리는 데이터가 복제되어 고가용성 특징을 가짐.</li></ul></li></ul><blockquote>💡 데이터 레이크(Data Lake): 데이터 레이크는 다양한 소스에서 수집한 데이터를 그 형식의 변화 없이 저장하는 저장 공간입니다. 이는 데이터 웨어하우스와 다른 점이며, 데이터 웨어하우스는 필터링되거나 구조화된 데이터만 저장합니다.데이터 레이크의 주요 특징은 운영되는 서비스로부터 수집 가능한 모든 데이터를 원본 형태로 모으는 것입니다. 이렇게 함으로써, 사용자는 필요에 따라 다양한 형태의 데이터를 분석하고 활용할 수 있습니다.</blockquote><hr><h3>정리</h3>카프카는 솔직히 처음 학습해보면 결코 쉬운 개념이 아닐 수 있지만, 그럼에도 불구하고 단점은 별로 보이지 않고 장점만 잔뜩 보이는, 너무 기특한 도구입니다. 그래서 백엔드 개발자라면 카프카를 반드시 알아야 한다는 생각이 강하게 들어, 책도 구매하고 강의도 구입했습니다. 카프카를 마스터한다면 굉장히 다양한 곳에 사용할 수 있는, 잠재력이 무궁무진하다고 생각하기 때문에 앞으로 꾸준히 카프카를 학습해보려고 합니다!

요즘 백엔드는 카프카가 필수인 이유

우리가 카프카를 공부해야 하는 이유 - 브로커와 클러스터 그리고 특징 4가지

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 에러가 발생하는 문제

Spring

<img src="https://image.until.blog/thingk0/article/1730904930443.png" data-width="100%" data-align="center" alt="1991">스프링부트(Spring Boot)는 자바 애플리케이션 개발을 단순화하고 생산성을 높이기 위해 다양한 자동 설정과 기능을 제공합니다. 그 중에서도 ObjectMapper는 JSON과 자바 객체 간의 변환을 담당하는 핵심 컴포넌트로, 스프링부트 애플리케이션에서 중요한 역할을 합니다.<h2>1. ObjectMapper란?</h2>ObjectMapper는 Jackson 라이브러리의 핵심 클래스 중 하나로, 자바 객체를 JSON으로 변환(직렬화)하거나 JSON을 자바 객체로 변환(역직렬화)하는 기능을 제공합니다. 쉽게 말해 ObjectMapper는 자바 객체와 JSON 사이를 오가는 번역가입니다. 스프링 부트는 기본적으로 Jackson을 JSON 처리 라이브러리로 사용하며, ObjectMapper는 스프링의 HTTP 메시지 변환기(Message Converter)로 통합되어 있습니다.<h2>2. ObjectMapper를 빈으로 등록하는 이유</h2>스프링 부트 애플리케이션에서 ObjectMapper를 빈으로 등록하여 사용하는 것은 여러 가지 이점을 제공합니다. 아래에서는 그 주요 이유들을 자세히 살펴봅니다.집.중.!<img src="https://image.until.blog/thingk0/article/1730905090118.png" data-width="75%" data-align="center" alt="1993"><h3>2.1. 중앙 집중식 설정 관리</h3>ObjectMapper를 빈으로 등록하면 애플리케이션 전반에서 일관된 설정을 유지할 수 있습니다. 예를 들어, 날짜 형식, 필드 이름 전략, 직렬화 옵션 등을 중앙에서 관리할 수 있어, 여러 곳에서 동일한 설정을 반복할 필요가 없습니다.<pre spellcheck="false"><code class="language-java">@Bean
public ObjectMapper objectMapper() {
 ObjectMapper mapper = new ObjectMapper();
 return mapper;
}</code></pre><h3>2.2. 일관된 직렬화/역직렬화 동작</h3>빈으로 등록된 ObjectMapper는 스프링의 HTTP 메시지 변환기와 통합되어, 컨트롤러에서 반환되는 객체나 요청으로 들어오는 JSON 데이터에 대해 일관된 직렬화 및 역직렬화 동작을 보장합니다. 이는 애플리케이션의 일관성을 높이고 예측 가능한 동작을 유지하는 데 기여합니다.<h3>2.3. 커스터마이징 및 확장성</h3>ObjectMapper는 다양한 설정과 모듈을 통해 커스터마이징이 가능합니다. 빈으로 등록하면 애플리케이션의 요구사항에 맞게 ObjectMapper를 손쉽게 확장하거나 수정할 수 있습니다. 예를 들어, 커스텀 직렬화기나 역직렬화기를 추가하거나, 특정 프로퍼티를 무시하는 설정 등을 적용할 수 있습니다.<pre spellcheck="false"><code>@Bean
public ObjectMapper objectMapper() {
 ObjectMapper mapper = new ObjectMapper();
 mapper.registerModule(new JavaTimeModule());
 mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
 mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd"));
 // 추가 설정
 return mapper;
}</code></pre><h3>2.4. 스프링의 의존성 주입과의 통합</h3>스프링의 의존성 주입(Dependency Injection) 메커니즘을 활용하여 ObjectMapper를 필요한 곳에 주입할 수 있습니다. 이를 통해 각 컴포넌트에서 일관된 ObjectMapper 인스턴스를 재사용할 수 있으며, 코드의 결합도를 낮추고 유지보수성을 높일 수 있습니다.<pre spellcheck="false"><code>@Service
public class MyService {

 private final ObjectMapper objectMapper;

 @Autowired
 public MyService(ObjectMapper objectMapper) {
 this.objectMapper = objectMapper;
 }

 // 서비스 로직
}</code></pre><h3>2.5. 테스트 용이성</h3>빈으로 등록된 ObjectMapper는 테스트 환경에서도 쉽게 주입하여 사용할 수 있습니다. 이를 통해 단위 테스트나 통합 테스트 시 일관된 설정을 유지하며, 모킹(Mock)을 통해 특정 동작을 검증할 수 있습니다.<pre spellcheck="false"><code>@SpringBootTest
public class MyServiceTest {

 @Autowired
 private ObjectMapper objectMapper;

 @Test
 public void testSerialization() throws JsonProcessingException {
 MyObject obj = new MyObject();
 String json = objectMapper.writeValueAsString(obj);
 // 검증 로직
 }
}</code></pre><h2>3. 빈으로 등록하는 방법</h2>스프링 부트에서 ObjectMapper를 빈으로 등록하는 방법에는 기본 설정을 그대로 사용하는 방법과, 커스터마이징된 설정을 적용하는 방법이 있습니다.<h3>3.1. 기본 설정 사용</h3>스프링 부트는 기본적으로 ObjectMapper를 빈으로 등록합니다. 별도의 설정 없이도 애플리케이션 전반에서 이를 사용할 수 있습니다.<pre spellcheck="false"><code>@Configuration
public class JacksonConfig {
 // 기본 설정을 그대로 사용
}</code></pre><h3>3.2. 커스터마이징된 ObjectMapper 빈 등록</h3>기본 설정을 확장하거나 변경하려면 커스터마이징된 ObjectMapper 빈을 직접 등록할 수 있습니다.<pre spellcheck="false"><code>@Configuration
public class JacksonConfig {

 @Bean
 public ObjectMapper objectMapper() {
 ObjectMapper mapper = new ObjectMapper();
 // 커스터마이징 설정 적용
 mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
 mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
 mapper.registerModule(new JavaTimeModule());
 return mapper;
 }
}</code></pre>또는 기존의 ObjectMapper를 수정하는 방법도 있습니다.<pre spellcheck="false"><code>@Configuration
public class JacksonConfig {

 @Autowired
 public void customizeObjectMapper(ObjectMapper mapper) {
 mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
 mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
 mapper.registerModule(new JavaTimeModule());
 }
}</code></pre><h2>결론 !</h2>스프링 부트에서 ObjectMapper를 빈으로 등록하여 사용하는 것은 애플리케이션의 일관된 JSON 처리, 중앙 집중식 설정 관리, 커스터마이징 용이성, 스프링의 의존성 주입과의 통합, 테스트 용이성 등 다양한 이점을 제공합니다. 이를 통해 개발자는 보다 효율적이고 유지보수하기 쉬운 애플리케이션을 개발할 수 있습니다. 따라서, ObjectMapper를 빈으로 등록하여 사용하는 것은 스프링 부트 애플리케이션의 모범 사례 중 하나로 권장하는 방법입니다.<blockquote>꼭 스프링 빈으로 사용합시다!!! 직접 new ObjectMapper() 하는 일은 없기를!!!!!!!!!!!!!</blockquote><img src="https://image.until.blog/thingk0/article/1730905370351.png" data-width="25%" data-align="center" alt="1994"><hr>[참고]<a target="_blank" rel="noopener noreferrer nofollow" href="https://wildeveloperetrain.tistory.com/352">https://wildeveloperetrain.tistory.com/352</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@kny8092/ObjectMapper-%EC%A7%9A%EA%B3%A0-%EB%84%98%EC%96%B4%EA%B0%80%EA%B8%B0">https://velog.io/@kny8092/ObjectMapper-%EC%A7%9A%EA%B3%A0-%EB%84%98%EC%96%B4%EA%B0%80%EA%B8%B0</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@beomsuyoo/Spring-Boot-%EC%BB%A4%EC%8A%A4%ED%85%80-ObjectMapper-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0">https://velog.io/@beomsuyoo/Spring-Boot-%EC%BB%A4%EC%8A%A4%ED%85%80-ObjectMapper-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://memo-the-day.tistory.com/208">https://memo-the-day.tistory.com/208</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://jsonobject.tistory.com/432">https://jsonobject.tistory.com/432</a>

가끔 ObjectMapper를 직접 객체 생성해서 사용하시는 분들이 계시더라고요. 안 되는 건 아닌데, 그러지 마세요... 그냥 사과해요 나한테!!

스프링부트에서 ObjectMapper를 빈으로 등록해서 사용하자 !

<img src="https://image.until.blog/until/article/1718031933814" alt="until-438">안녕하세요. 몰댄민입니다. 언틸 업데이트 사항을 알려드릴게요.<h1>임시 저장 기능</h1>기존에는 임시 저장 기능이 한 개의 아티클에 대해서만 저장이 가능했는데요,이제는 여러 개의 아티클을 임시 저장할 수 있도록 고도화 작업을 진행했어요.<img src="https://image.until.blog/until/article/1718032098734" alt="until-439">임시 아티클 페이지는 상단 프로필을 통해 이동할 수 있어요.다만, 현재 임시 저장 기능은 로컬스토리지에 저장되고 있으니 참고해주세요.빠른 시일 내에 서버에 저장하는 형태로 업데이트할 예정이에요.<h1>계정 설정 페이지</h1>계정 설정 페이지가 추가 되었어요. 테마와 계정 삭제 기능을 지원해요.<img src="https://image.until.blog/until/article/1718032218022" alt="until-440">계정 설정 페이지가 추가되면서, 기존에 헤더에 존재했던 다크모드 기능이 계정 설정 페이지로 이동되었으니 참고해주세요.그대신, 좀더 블로그에서의 주요기능인 작성 버튼이 헤더에 추가되었어요.<h1>그 외 수정사항</h1><ul><li>블로그 및 게시글 페이지 렌더링 속도가 70%이상 빨라졌어요.</li><li>모바일에서 툴팁이 표시되지 않던 오류를 해결했어요.</li><li>게시글 작성/수정 시 로딩 표시가 되도록 개선했어요.</li><li>그외에 잡다한 버그들을 수정했어요.</li></ul><h1>기타</h1><ul><li>서비스에 대한 건의사항은 커뮤니티 또는 댓글 등 편한 곳으로 알려주세요.</li><li>카테고리 기능은 아직 개발중이에요. 현재 가장 빠른 우선순위로 개발하고 있으니 조금만 기다려주세요!</li></ul>

임시 저장 기능이 고도화 되었어요

🎨 PUBLISHING

<h3>웹 표준이란?</h3>웹 표준이란 웹에서 사용되는 기술들의 표준화를 의미한다.즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다.<h4>장점</h4>웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 컨텐츠가 일관적으로 표시된다.이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있게 된다.검색 엔진 최적화, 유지보수 및 확장성, 웹 접근성 향상 효과 또한 존재한다.<h4>방법</h4><ol><li>웹 페이지의 최상단에 DOCTYPE을 선언한다.<blockquote>&lt;!DOCTYPE&gt; 선언HTML 문서에서 <code spellcheck="false">&lt;html&gt;</code> 태그를 정의하기 전에 가장 먼저 선언되어야 한다.선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에게 알려주는 역할을 한다.문서형 정의를 생략하는 경우, 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks Mode)로 렌더링된다.이 경우, 동일한 HTML, CSS, JavaScript라도 웹 브라우저마다 서로 다르게 해석하여 디자인이 틀어지거나, 기능이 이상하게 작동하는 등의 이상한 결과물을 보여주게 된다.<blockquote>Quirks Mode란예전에 만들어둔 비표준 웹페이지들이 최신 버전의 브라우저에서 깨져보이지 않게 하위 브라우저와의 호환성을 유지하기 위해 사용되는 문서 모드</blockquote></blockquote></li><li>시맨틱 태그(header, nav, section, footer)를 사용해 구조를 명확하게 표현한다<blockquote>시맨틱 태그란문서의 구조와 내용을 명확히 표현하기 위해 사용되는 태그이다.단순히 레이아웃을 위한 <code spellcheck="false">&lt;div&gt;</code>나 <code spellcheck="false">&lt;span&gt;</code> 태그와 달리, 태그 자체가 의미를 담고 있어 콘텐츠의 역할을 명확히 나타낸다.이를 통해 웹 접근성을 개선하고, SEO 최적화 및 유지보수가 편리하다.</blockquote></li><li>CSS 스타일 시트를 사용해 웹 페이지의 내용과 디자인을 분리해 유지보수 및 확장성을 높인다</li><li>alt 속성을 사용해 이미지 설명을 제공하는 등의 웹 접근성을 고려한다.</li></ol><h3>웹 접근성이란?</h3>장애를 가진 사람들도 신체적, 환경적 조건에 관계 없이 인터넷을 통해 정보에 접근하고 이용할 수 있도록 하는 것을 말한다스크린 리더나 점자 디스플레이와 같은 보조 기술을 사용하여 인터넷을 검색할 수 있도록, 시각적 요소 처리, 청각적 요소 처리, 키보드 접근성, 웹 접근성 검사를 진행해야 한다<h4>웹 접근성을 고려한 웹 사이트를 만드는 방법</h4><ol><li>시맨틱 태그를 사용해 구조를 명확하게 표현한다</li><li>alt 속성을 사용해 이미지 및 비디오 설명을 제공하는 등 대체 텍스트를 제공한다</li><li>폰트의 색상과 배경의 명도 대비를 고려한다</li><li>콘텐츠를 숨길 경우, 스크린리더가 읽지 못하도록 hidden 속성이나 <code spellcheck="false">display: none</code>을 사용한다</li></ol>

웹 표준이란?웹 표준이란 웹에서 사용되는 기술들의 표준화를 의미한다.즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다.장점웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 컨텐츠가 일관적으로 표시된다.이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있게 된다.

퍼블리싱 준비 가이드: 웹표준과 웹접근성

📚 BOOK

<blockquote>책 내용을 정리하는 것이 아니라, 해당 범위에서 특별히 정리하고 싶은 내용이나 책을 읽으면서 들었던 궁금한 부분을 작성한다.<blockquote>읽다가 갑자기 정리하고 싶은 내용을적기도 한다. 꼬꼬무,,,(꼬리에 꼬리를 무는 공부)</blockquote>궁금한 부분에 대한 답변은 의문이 해소된 후에 작성한다 (영원히 작성되지 않을수도..)</blockquote><h2>정리</h2><h3>옵저버 패턴(관찰자 패턴)이란?</h3>주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.옵저버 패턴의 <code spellcheck="false">주체</code>객체의 상태 변화를 보고 있는 관찰자를 의미한다.옵저버 패턴의 <code spellcheck="false">옵저버들</code>객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미한다.<h3>프록시 객체를 통한 옵저버 패턴 구현(JS)</h3><pre spellcheck="false"><code class="language-javascript">function createReactiveObject(target, callback) { 
 const proxy = new Proxy(target, {
 set(obj, prop, value){
 if(value !== obj[prop]){
 const prev = obj[prop]
 obj[prop] = value 
 callback(`${prop}가 [${prev}] &gt;&gt; [${value}] 로 변경되었습니다`)
 }
 return true
 }
 })
 return proxy 
} 
const a = {
 "형규" : "솔로"
} 
const b = createReactiveObject(a, console.log)
b.형규 = "솔로"
b.형규 = "커플"
// 형규가 [솔로] &gt;&gt; [커플] 로 변경되었습니다</code></pre>프록시(Proxy) 객체란?어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며, 두 개의 매개변수를 가진다.<ul><li>target : 프록시할 대상</li><li>handler : 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수</li></ul><h2>고민하고 기억하기</h2><blockquote>p. 36</blockquote><h3>Q. 옵저버 패턴과 MVC 패턴의 관계</h3>MVC 패턴에서의 <code spellcheck="false">모델</code>은 변경되면 자신의 관찰자 객체에게 알림을 보내며, <code spellcheck="false">뷰</code>는 관찰자 패턴을 사용해 모델이 변경되거나 수정될 때마다 뷰가 알아차릴 수 있도록 한다. 또한 <code spellcheck="false">컨트롤러</code>는 사용자의 상호작용을 처리하고 뷰에 무엇을 보여줄지를 결정한다.이는 옵저버 패턴의 주체라고 볼 수 있는 <code spellcheck="false">모델</code>에서 변경 사항이 생겨 update() 메서드로 옵저버인 <code spellcheck="false">뷰</code>에게 알려주고, 이를 기반으로 <code spellcheck="false">컨트롤러</code> 등이 작동한다고 볼 수 있다.Q. MVC 패턴이란?애플리케이션의 구조를 개선하기 위해 관심사의 분리를 활용하는 아키텍처 디자인으로,비즈니스 데이터(모델)과 UI(뷰)를 분리하고, 세 번째 구성 요소(컨트롤러)가 로직과 사용자 입력을 관리하는 구조이다.<blockquote>자바스크립트 + 리액트 디자인 패턴</blockquote><blockquote><blockquote>p. 145 최신 프레임워크에서는 상태의 변화를 컴포넌트에 알리기 위해 관찰자 패턴을 사용하곤 한다</blockquote></blockquote><h3>Q. 관찰자 패턴과 리액트 렌더링의 연관 관계</h3>실제로, 관찰자 패턴 부분을 읽으면서 리액트 렌더링 과정이 생각남<ul><li>관찰자 패턴은 변경 사항이 일어났을 경우, 알림 메시지를 보내 업데이 메서드를 실행함</li><li>React 렌더링도 상태 변화가 있을 때만(diff 발생 시) 렌더링이 발생하며, 상위 컴포넌트에서 변경이 일어나면 하위 컴포넌트 역시 리렌더링됨</li><li>두 로직의 내부를 본다면, 비슷할 것 같다는 생각이 들었음</li></ul>react 18.2부터는 React의 업데이트(Promise, Timeout, EventHandler)가 자동적으로 일괄 처리된다고 하는데, 더욱 더 리액트 내부에 그러한 알고리즘이 있지 않을까 생각됨<a data-type="bookmark" href="https://react.dev/learn/preserving-and-resetting-state" target="_blank"><div class="content"><div><div class="title">Preserving and Resetting State – React</div><div class="description">The library for web and native user interfaces</div></div><div class="href">https://react.dev/learn/preserving-and-resetting-state</div></div><img src="https://react.dev/images/og-learn.png"></a><a data-type="bookmark" href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching" target="_blank"><div class="content"><div><div class="title">How to Upgrade to React 18 – React</div><div class="description">The library for web and native user interfaces</div></div><div class="href">https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching</div></div><img src="https://react.dev/images/og-blog.png"></a><h3>Q. 관찰자 패턴과 useContext의 관계?</h3><ul><li>그러니까 자연스럽게 useContext와도 비슷한 것 같음. useContext를 공급자 패턴에 비유하기도 했지만, 관찰자 패턴이기도 한 것 같음.</li><li>useContext는 크게 Provider(컨텍스트 영역 지정)와 Consumer(컨텍스트를 사용하는 쪽)으로 나뉨</li><li>즉, Consumer 영역은 상태의 주체이며, 직접적으로 상태가 변화하는 컴포넌트는 구체적 주체로서 ‘상태 변화’를 알리는 게 아닐까?</li></ul>=&gt; useContext의 내부 코드를 보고 싶다. 관찰자 리스트를 관리하는 코드, 상태 변화 알림을 전달하는 코드, 알림을 감지하고 update를 진행하는 코드가 있으면 재미있을 듯<h3>Q. 관찰자 패턴과 중재자 패턴의 차이</h3>관찰자 패턴: 이벤트를 관리하고, 이벤트가 발생했을 때 관련된 구독자에게 알림을 주는 것에 초점중재자 패턴: 이벤트가 발생했을 때, 공통적으로 실행될 로직을 관리하는 것에 초점<blockquote><blockquote><blockquote>=&gt; 좀 더 공부해서 추가하기</blockquote></blockquote></blockquote>

면접을 위한 CS 전공지식 노트 / 1장. 디자인 패턴과 프로그래밍 패러다임

면접을 위한 CS 전공지식 노트: 디자인 패턴: 옵저버 패턴(관찰자 패턴)

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다! 업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!<h2>1. 얕은 복사와 깊은 복사를 구분하기</h2><pre spellcheck="false"><code>const person = [{ name: 'Yoon' }, { age: 31 }]
const shallowCopy = [...person]
const deepCopy = structuredClone(person)
shallowCopy[0].name = 'Kim'
console.log(person[0].name) // 'Kim'
deepCopy[0].name = 'Kwon'
console.log(person[0].name) // 'Kim'</code></pre>얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.<h2>2. 배열과 객체의 순환 방법</h2><pre spellcheck="false"><code>/* Array */
const arr = [1, 2, 3, 4, 5]

for (const element of arr) {
 console.log(element) // 1, 2, 3, 4, 5
}
/* Object */
const obj = { a: 1, b: 2, c: 3 }

for (const key in obj) {
 console.log(obj[key]) // 1, 2, 3
}</code></pre>for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.<h2>3. 값이 있는지 간단하게 체크하기</h2><pre spellcheck="false"><code>const auth = { user: '' }
console.log(!!auth.user) // false</code></pre>!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.<h2>4. 비슷한 값을 가진 배열을 비교하여 값 추출하기</h2><pre spellcheck="false"><code>// 단순배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [1, 2]
const b = [3, 4, 1]const diff = b.filter(v =&gt; !a.find(v2 =&gt; v === v2)) // [3, 4]
const not = a.filter(v =&gt; !b.find(v2 =&gt; v === v2)) // [2]
// 객체배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [{name: 'Y', age: 20}, {name: 'D', age: 19}]
const b = [{name: 'Y', age: 20}, {name: 'M', age: 20}, {name: 'D', age: 19}]
const diff = b.filter(v =&gt; !a.find(v2 =&gt; JSON.stringify(v) === JSON.stringify(v2))) // { name: 'M', age: 20 }</code></pre>비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.<h2>5. 파일 데이터를 쉽게 처리하기</h2><pre spellcheck="false"><code>Promise.all[...event.target.files].map(file =&gt; files.push(file)))</code></pre>file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.<h2>6. 랜덤한 6자리 난수 쉽게 생성하기</h2><pre spellcheck="false"><code>Math.floor(100000 + Math.random() * 900000)</code></pre>6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.<h2>7. UUID 쉽게 생성하기</h2><pre spellcheck="false"><code>// Browser
self.crypto.randomUUID()
// Node.js &gt;= 19.0
import Crypto from "crypto"
Crypto.randomUUID()</code></pre>예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.<h2>8. 배열 중복제거하기</h2><pre spellcheck="false"><code>// 단순배열 중복제거
const arr = [2, 2]
const arr2 = [...new Set(arr)]

// 객체배열 중복제거
const example = [{ id: 123 }, { id: 456 }, { id: 123 }]
example.filter(
(arr, index, callback) =&gt; index === callback.findIndex(t =&gt; t.id === arr.id)
)</code></pre>배열안의 중복된 값을 간단하게 제거 할 수 있습니다.

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!1. 얕은 복사와 깊은 복사를 구분하기const person = [{ name: 'Yoon' }, { age: 31 }]
co

알아두면 유용한 8가지 자바스크립트 팁

🎨 프론트엔드

AI/LLM

<blockquote>LLM을 효과적으로 사용하기 위해서는 프롬프트가 중요하다!</blockquote><h3>생성형 AI의 발전 과정</h3><ol><li><code spellcheck="false">Bag of Words(BoW)</code> : 텍스트 문서를 컴퓨터 프로그램에서 사용할 수 있는 숫자로 변환하는 자연어 처리 방법 중 하나ex) small dog, small small cat, small cute dog &gt; small, cute, dog, cat으로 구분해서 단어 카운팅해서 각 문장을 숫자로 표현<a data-type="bookmark" href="https://colab.research.google.com/drive/111i-xwExJEnVFPSMFe8WNNVMMSKz_s8z?usp=sharing" target="_blank"><div class="content"><div><div class="title">Google Colab</div><div class="description"></div></div><div class="href">https://colab.research.google.com/drive/111i-xwExJEnVFPSMFe8WNNVMMSKz_s8z?usp=sharing</div></div><img src="https://colab.research.google.com/img/colab_favicon_256px.png"></a></li></ol><ol><li><code spellcheck="false">TF-IDF</code> : 단어의 빈도(Term Frequency)와 문서의 빈도(Inverse Document Frequency)를 토대로, 특정 문서 내에 어떤 단어가 얼마나 중요한지를 찾아내는 자연어처리 방법 중 하나<ul><li>BoW는 모든 단어를 카운팅하므로, 비중요 단어가 중요단어로 인식될 수 있는 문제가 있어 TF-IDF가 등장</li><li>모든 문서에서 자주 등장하는 단어는 중요도가 낮다고 판단하며, 특정 문서에서만 자주 등장하는 단어는 중요도가 높다고 판단함</li><li>주로 문서의 유사도를 구하는 작업, 검색 시스템에서 검색 결과의 중요도를 정하는 작업, 문서 내에서 특정 단어의 중요도를 구하는 작업 등에 쓰임<blockquote>tf(d,t) : 특정 문서 d에서의 특정 단어 t의 등장 횟수df(t) : 특정 단어 t가 등장한 문서의 수<img src="https://image.until.blog/kirise/article/1733562885446.png" data-width="25%" data-align="left" alt="2430">idf(t) : df(t)에 반비례하는 수TF-DF: TF와 IDF를 곱한 값</blockquote><a data-type="bookmark" href="https://colab.research.google.com/drive/1dKZ4NHwHlXfPE5-6sbYHBBRC-4xxuAGi#scrollTo=xuW2wtEDoCL7" target="_blank"><div class="content"><div><div class="title">Google Colab</div><div class="description"></div></div><div class="href">https://colab.research.google.com/drive/1dKZ4NHwHlXfPE5-6sbYHBBRC-4xxuAGi#scrollTo=xuW2wtEDoCL7</div></div><img src="https://colab.research.google.com/img/colab_favicon_256px.png"></a></li><li>idf는 여러 문서에서 등장한 단어의 가중치를 낮추는 역할하므로 곱해주는 것</li><li>log 안의 식에서 분모에 1을 더해주는 이유는 특정 단어가 전체 문서에서 등장하지 않을 경우에 분모가 0이 되는 상황을 방지하기 위함</li><li>log를 씌워주는 이유<ul><li>dft가 매우 작은 값(즉, 단어가 희귀한 경우)일 때, idf 값이 지나치게 커지는 문제가 발생</li><li>희귀 단어의 가중치가 지나치게 커져서, 모델이 이 단어에 과도하게 민감하게 반응할 가능성 높음</li><li>log(x)는 입력 값이 커질수록 증가율이 줄어들어 가중치의 성장 속도를 완화할 수 있으므로 log를 씌워줌</li></ul></li></ul></li></ol>

생성형 AI의 발전 과정 : Bow, TF-IDF

프로그래밍언어

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

JDK 21의 등장 feat.JDK 21

<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 Native 는, 처음 발표된 지 벌써 6년이 넘었지만, 2024.11 현재까지 버전이 아직 0.76 에 그치고 있죠.버전이 아직도 1.0 에 이르지 못하고 있다는 것은, RN 이 아직 안정화 되지 못한 단계에 머무르고 있다는 의미이기도 하겠습니다.이 때문에, RN 의 개발방식은 아직까지도 뚜렷하게 정형화 되지 않고 있는 것 같습니다.공식 버전이

#1. React Native 준비작업

애플리케이션을 설계할 때 우리는 코드 재사용성과 구조적 설계를 위해 <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">반면, 컴포지션은 느슨한 결합과 높은 유연성을 제공하며, 변화와 확장에 강한 구조를 설계할 수 있도록 도와줍니다. 이는 스프링부트 애플리케이션에서 더 유지보수하기 쉬운 설계를 만드는 데 큰 도움이 됩니다.최종적으로는 애플리케이션의 요구사항과 유지보수성, 확장성을 고려하여 두 가지 접근법을 적절히 혼용하는 것이 바람직합니다. 하지만 장기적인 관점에서 컴포지션을 더 많이 활용하는 것이 더 나은 설계로 이어질 수 있다고 생각합니다 :)

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

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

요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 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 를 사용하는 이유 - 개발자 면접 리마인드

<ol><li>취득 이유<ul><li>AWS 클라우드를 사이드 프로젝트에서 사용하다가 내가 뭔지 알지도 못하는 상태에서 무작정 때려박는 등.. 진짜 멍청이 같이 사용하는 나의 모습을 발견했음..</li><li>사실 AWS SAA 자체는 실무에서 어떻게 연결해서 이렇게 써야한다!<ul><li>의 자격증은 아니다.</li></ul></li><li>단순히 AWS 를 어떤식으로 구성해야하고</li><li>어떤 제품을 어떤 상황에서 사용해야하는지의 일종의 가이드이다.</li><li>사실 회사내에서는 전부 온프레미스 기반으로 자체 서버 혹은 IDC 의 서버를 대여해서 사용하는데, AWS 클라우드 자체를 사용해볼 기회가 없었기에<ul><li>더더욱이 시험에 대한 공감이 1도 안갔다..</li></ul></li></ul></li><li>첨언<ul><li>일단 나는 시험을 2번 봤다<ul><li>인터넷에서 누가 일주일만에 합격이 가능하다고 해서</li><li>유데미 문제 한번도 안돌려보고 바로 시험장으로 달려갔다</li><li><code spellcheck="false">근데 개인적인 생각으로</code><ul><li>본인이 AWS 관련 클라우드 세팅이나 공부를 해본 경험이 없는 경우</li><li>절대 일주일로는 안된다 (물론 직장인 기준임 - 학생이면 가능할거같음)</li><li>운동도 병행중이라 일단 일주일에 3~ 4일정도 2 시간정도 공부했었다</li></ul></li></ul></li><li>첫 시험은 한문제 차이로 떨어지고</li><li>두 번째 시험은 700중후반대로 합격했다.</li></ul></li><li>공부방법<ol><li>인강<ol><li>저는 개인적으로 자격에 대한 취득과 이론적인 학습이 먼저라면, 그냥 안들어도 된다고 생각한다.</li><li>실습을 해도 어차피 어떤 옵션이 있구나에서 멈춰서</li><li>실제로 내가 몸소 느끼려면, 사이드 프로젝트에서 실제로 적용해보는 등의 행위를 <code spellcheck="false">해봐야한다</code><ol><li>그거 아니고는 클라우드는 답이 없음</li></ol></li></ol></li><li>문제<ol><li>udemy<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.udemy.com/course/aws-certified-solutions-architect-associate-korean/?couponCode=ST21MT121624">https://www.udemy.com/course/aws-certified-solutions-architect-associate-korean/?couponCode=ST21MT121624</a></li><li>요 사이트 문제만 풀어도 된다.</li><li>유료긴 한데, 첫 결제로 1 ~ 2만원 사이의 금액으로 볼 수 있음.</li></ul></li><li>EXAM TOPICS<ul><li>요것도 문제는 괜찮긴한데</li><li>내 개인적인 생각으로는 모의고사 문제는 좀 어렵게 풀어야한다고 생각한다</li><li>너무 자주 맞으면 이상한 자신감이 생기는데 실전에서 점수가 그 만큼 안나오더라..</li></ul></li></ol></li></ol><ol start="4"><li>시험 중에<ol><li>온라인 시험<ul><li>일단 난 온라인 시험으로 봤다</li><li>시험 30분전부터 입장이 가능한데, 입장해서 이것저것 뭐 감독관이 영어로 묻는데<ul><li>영어를 본인이 스피킹에 능하면 대답하면되고</li><li>아니면 그냥 i am not good at speaking eng, can we chat instead..</li><li>뭐 이런식으로 대답하면 알아서 <code spellcheck="false">아</code> 하고 채팅으로 해준다</li></ul></li><li>시험은 그냥 노트북으로 보는거 추천함</li><li>데탑의 웹캠이 무선이면 상관없는데 유선이면 내 주변을 보여주기가 겁나 힘들다</li></ul></li></ol></li><li>불/ 합격 알 수 있는 방법<ul><li>불합격과 합격 둘다 해봐서 차이를 알고 있다</li><li>일단 합격은<ul><li>credly 에서 먼저 aws 관련 자격증 취득을 축하한다고 메일이 온다</li></ul></li><li>불합격은<ul><li>그냥 아마존에서 메일이 먼저 온다</li></ul></li><li>2번다 대략 4시간 안쪽으로 왔었다.</li></ul></li></ol></li></ol><img src="https://image.until.blog/qkrtkdwns3410/article/1734324248324.png" data-width="50%" data-align="center" alt="2544">

취득 이유AWS 클라우드를 사이드 프로젝트에서 사용하다가 내가 뭔지 알지도 못하는 상태에서 무작정 때려박는 등.. 진짜 멍청이 같이 사용하는 나의 모습을 발견했음..사실 AWS SAA 자체는 실무에서 어떻게 연결해서 이렇게 써야한다!의 자격증은 아니다.단순히 AWS 를 어떤식으로 구성해야하고어떤 제품을 어떤 상황에서 사용해야하는지의 일종의 가이드이다.사실 