Kafka

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

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

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

Python

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

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"><p>스프링부트(Spring Boot)는 자바 애플리케이션 개발을 단순화하고 생산성을 높이기 위해 다양한 자동 설정과 기능을 제공합니다. 그 중에서도 ObjectMapper는 JSON과 자바 객체 간의 변환을 담당하는 핵심 컴포넌트로, 스프링부트 애플리케이션에서 중요한 역할을 합니다.</p><p></p><h2>1. ObjectMapper란?</h2><p>ObjectMapper는 Jackson 라이브러리의 핵심 클래스 중 하나로, 자바 객체를 JSON으로 변환(직렬화)하거나 JSON을 자바 객체로 변환(역직렬화)하는 기능을 제공합니다. </p><p>쉽게 말해 <strong>ObjectMapper는 자바 객체와 JSON 사이를 오가는 번역가</strong>입니다. 스프링 부트는 기본적으로 Jackson을 JSON 처리 라이브러리로 사용하며, ObjectMapper는 스프링의 HTTP 메시지 변환기(Message Converter)로 통합되어 있습니다.</p><p></p><h2>2. ObjectMapper를 빈으로 등록하는 이유</h2><p>스프링 부트 애플리케이션에서 ObjectMapper를 빈으로 등록하여 사용하는 것은 여러 가지 이점을 제공합니다. 아래에서는 그 주요 이유들을 자세히 살펴봅니다.</p><p>집.중.!</p><img src="https://image.until.blog/thingk0/article/1730905090118.png" data-width="75%" data-align="center" alt="1993"><p></p><h3>2.1. 중앙 집중식 설정 관리</h3><p>ObjectMapper를 빈으로 등록하면 애플리케이션 전반에서 일관된 설정을 유지할 수 있습니다. 예를 들어, 날짜 형식, 필드 이름 전략, 직렬화 옵션 등을 중앙에서 관리할 수 있어, 여러 곳에서 동일한 설정을 반복할 필요가 없습니다.</p><pre spellcheck="false"><code class="language-java">@Bean
public ObjectMapper objectMapper() {
    ObjectMapper mapper = new ObjectMapper();
    return mapper;
}</code></pre><h3>2.2. 일관된 직렬화/역직렬화 동작</h3><p>빈으로 등록된 ObjectMapper는 스프링의 HTTP 메시지 변환기와 통합되어, 컨트롤러에서 반환되는 객체나 요청으로 들어오는 JSON 데이터에 대해 일관된 직렬화 및 역직렬화 동작을 보장합니다. <br>이는 애플리케이션의 일관성을 높이고 예측 가능한 동작을 유지하는 데 기여합니다.</p><h3>2.3. 커스터마이징 및 확장성</h3><p>ObjectMapper는 다양한 설정과 모듈을 통해 커스터마이징이 가능합니다. 빈으로 등록하면 애플리케이션의 요구사항에 맞게 ObjectMapper를 손쉽게 확장하거나 수정할 수 있습니다. </p><p>예를 들어, 커스텀 직렬화기나 역직렬화기를 추가하거나, 특정 프로퍼티를 무시하는 설정 등을 적용할 수 있습니다.</p><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><p>스프링의 의존성 주입(Dependency Injection) 메커니즘을 활용하여 ObjectMapper를 필요한 곳에 주입할 수 있습니다. </p><p>이를 통해 각 컴포넌트에서 일관된 ObjectMapper 인스턴스를 재사용할 수 있으며, 코드의 결합도를 낮추고 유지보수성을 높일 수 있습니다.</p><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><p>빈으로 등록된 ObjectMapper는 테스트 환경에서도 쉽게 주입하여 사용할 수 있습니다. 이를 통해 단위 테스트나 통합 테스트 시 일관된 설정을 유지하며, 모킹(Mock)을 통해 특정 동작을 검증할 수 있습니다.</p><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><p></p><h2>3. 빈으로 등록하는 방법</h2><p>스프링 부트에서 ObjectMapper를 빈으로 등록하는 방법에는 기본 설정을 그대로 사용하는 방법과, 커스터마이징된 설정을 적용하는 방법이 있습니다.</p><h3>3.1. 기본 설정 사용</h3><p>스프링 부트는 기본적으로 ObjectMapper를 빈으로 등록합니다. 별도의 설정 없이도 애플리케이션 전반에서 이를 사용할 수 있습니다.</p><pre spellcheck="false"><code>@Configuration
public class JacksonConfig {
    // 기본 설정을 그대로 사용
}</code></pre><h3>3.2. 커스터마이징된 ObjectMapper 빈 등록</h3><p>기본 설정을 확장하거나 변경하려면 커스터마이징된 ObjectMapper 빈을 직접 등록할 수 있습니다.</p><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><p>또는 기존의 ObjectMapper를 수정하는 방법도 있습니다.</p><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><p></p><h2>결론 !</h2><p>스프링 부트에서 ObjectMapper를 빈으로 등록하여 사용하는 것은 애플리케이션의 일관된 JSON 처리, 중앙 집중식 설정 관리, 커스터마이징 용이성, 스프링의 의존성 주입과의 통합, 테스트 용이성 등 다양한 이점을 제공합니다. 이를 통해 개발자는 보다 효율적이고 유지보수하기 쉬운 애플리케이션을 개발할 수 있습니다.</p><p> 따라서, ObjectMapper를 빈으로 등록하여 사용하는 것은 스프링 부트 애플리케이션의 모범 사례 중 하나로 권장하는 방법입니다.</p><blockquote><p>꼭 스프링 빈으로 사용합시다!!! 직접 new ObjectMapper() 하는 일은 없기를!!!!!!!!!!!!!</p></blockquote><img src="https://image.until.blog/thingk0/article/1730905370351.png" data-width="25%" data-align="center" alt="1994"><p></p><hr><p>[참고]</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://wildeveloperetrain.tistory.com/352">https://wildeveloperetrain.tistory.com/352</a> </p><p><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> </p><p><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> </p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://memo-the-day.tistory.com/208">https://memo-the-day.tistory.com/208</a> </p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://jsonobject.tistory.com/432">https://jsonobject.tistory.com/432</a> </p>

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

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

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

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

🎨 PUBLISHING

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

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

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

📚 BOOK

<blockquote><p>책 내용을 정리하는 것이 아니라, 해당 범위에서 <strong>특별히 정리하고 싶은 내용</strong>이나 책을 읽으면서 들었던 <strong>궁금한 부분</strong>을 작성한다.</p><blockquote><p>읽다가 갑자기 정리하고 싶은 내용을적기도 한다. 꼬꼬무,,,(꼬리에 꼬리를 무는 공부)</p></blockquote><p>궁금한 부분에 대한 답변은 의문이 해소된 후에 작성한다 (영원히 작성되지 않을수도..)</p></blockquote><h2><strong>정리</strong></h2><h3><strong>옵저버 패턴(관찰자 패턴)이란?</strong></h3><p>주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.</p><p><strong>옵저버 패턴의 </strong><code spellcheck="false">주체</code></p><p>객체의 상태 변화를 보고 있는 관찰자를 의미한다.</p><p><strong>옵저버 패턴의 </strong><code spellcheck="false">옵저버들</code></p><p>객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미한다.</p><h3><strong>프록시 객체를 통한 옵저버 패턴 구현(JS)</strong></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><p><strong>프록시(Proxy) 객체란?</strong></p><p>어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며, 두 개의 매개변수를 가진다.</p><ul><li><p>target : 프록시할 대상</p></li><li><p>handler : 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수</p></li></ul><h2><strong>고민하고 기억하기</strong></h2><blockquote><p><em>p. 36</em></p></blockquote><h3><strong>Q. 옵저버 패턴과 MVC 패턴의 관계</strong></h3><p>MVC 패턴에서의 <code spellcheck="false">모델</code>은 변경되면 자신의 관찰자 객체에게 알림을 보내며, <code spellcheck="false">뷰</code>는 관찰자 패턴을 사용해 모델이 변경되거나 수정될 때마다 뷰가 알아차릴 수 있도록 한다. 또한 <code spellcheck="false">컨트롤러</code>는 사용자의 상호작용을 처리하고 뷰에 무엇을 보여줄지를 결정한다.</p><p>이는 옵저버 패턴의 주체라고 볼 수 있는 <code spellcheck="false">모델</code>에서 변경 사항이 생겨 update() 메서드로 옵저버인 <code spellcheck="false">뷰</code>에게 알려주고, 이를 기반으로 <code spellcheck="false">컨트롤러</code> 등이 작동한다고 볼 수 있다.</p><p><strong>Q. MVC 패턴이란?</strong></p><p>애플리케이션의 구조를 개선하기 위해 관심사의 분리를 활용하는 아키텍처 디자인으로,</p><p>비즈니스 데이터(모델)과 UI(뷰)를 분리하고, 세 번째 구성 요소(컨트롤러)가 로직과 사용자 입력을 관리하는 구조이다.</p><blockquote><p><em>자바스크립트 + 리액트 디자인 패턴</em></p></blockquote><blockquote><blockquote><p><em>p. 145 최신 프레임워크에서는 상태의 변화를 컴포넌트에 알리기 위해 관찰자 패턴을 사용하곤 한다</em></p></blockquote></blockquote><h3><strong>Q. 관찰자 패턴과 리액트 렌더링의 연관 관계</strong></h3><p>실제로, 관찰자 패턴 부분을 읽으면서 리액트 렌더링 과정이 생각남</p><ul><li><p>관찰자 패턴은 변경 사항이 일어났을 경우, 알림 메시지를 보내 업데이 메서드를 실행함</p></li><li><p>React 렌더링도 상태 변화가 있을 때만(diff 발생 시) 렌더링이 발생하며, 상위 컴포넌트에서 변경이 일어나면 하위 컴포넌트 역시 리렌더링됨</p></li><li><p>두 로직의 내부를 본다면, 비슷할 것 같다는 생각이 들었음</p></li></ul><p>react 18.2부터는 React의 업데이트(Promise, Timeout, EventHandler)가 자동적으로 일괄 처리된다고 하는데, 더욱 더 리액트 내부에 그러한 알고리즘이 있지 않을까 생각됨</p><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><strong>Q. 관찰자 패턴과 useContext의 관계?</strong></h3><ul><li><p>그러니까 자연스럽게 useContext와도 비슷한 것 같음. useContext를 공급자 패턴에 비유하기도 했지만, 관찰자 패턴이기도 한 것 같음.</p></li><li><p>useContext는 크게 Provider(컨텍스트 영역 지정)와 Consumer(컨텍스트를 사용하는 쪽)으로 나뉨</p></li><li><p>즉, Consumer 영역은 상태의 주체이며, 직접적으로 상태가 변화하는 컴포넌트는 구체적 주체로서 ‘상태 변화’를 알리는 게 아닐까?</p></li></ul><p>=&gt; useContext의 내부 코드를 보고 싶다. 관찰자 리스트를 관리하는 코드, 상태 변화 알림을 전달하는 코드, 알림을 감지하고 update를 진행하는 코드가 있으면 재미있을 듯</p><h3><strong>Q. 관찰자 패턴과 중재자 패턴의 차이</strong></h3><p>관찰자 패턴: 이벤트를 관리하고, 이벤트가 발생했을 때 관련된 구독자에게 알림을 주는 것에 초점</p><p>중재자 패턴: 이벤트가 발생했을 때, 공통적으로 실행될 로직을 관리하는 것에 초점</p><blockquote><blockquote><blockquote><p><em>=&gt; 좀 더 공부해서 추가하기</em></p></blockquote></blockquote></blockquote>

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

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

<p>안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!<br>업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!</p><p></p><p></p><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><p>얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.</p><p></p><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><p>for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.</p><p></p><h2>3. 값이 있는지 간단하게 체크하기</h2><pre spellcheck="false"><code>const auth = { user: '' }
console.log(!!auth.user) // false</code></pre><p>!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.</p><p></p><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><p>비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.</p><p></p><h2>5. 파일 데이터를 쉽게 처리하기</h2><pre spellcheck="false"><code>Promise.all[...event.target.files].map(file =&gt; files.push(file)))</code></pre><p>file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.</p><p></p><h2>6. 랜덤한 6자리 난수 쉽게 생성하기</h2><pre spellcheck="false"><code>Math.floor(100000 + Math.random() * 900000)</code></pre><p>6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.</p><p></p><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><p>예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.</p><p></p><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><p>배열안의 중복된 값을 간단하게 제거 할 수 있습니다.</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

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

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

🎨 프론트엔드

AI/LLM

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

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

프로그래밍언어

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

JDK 21의 등장 feat.JDK 21

<blockquote><p>클래스 컴포넌트에 대한 글이 아님을 먼저 남깁니다</p></blockquote><p>자바스크립트는 ES6 환경에서 클래스 문법을 지원하기 시작했다. 물론 그 전에도 클래스처럼 객체를 사용하는 것이 가능했지만..</p><p>아무튼 그럼에도 NestJS 같은 백엔드 환경에선 클래스를 적극적으로 쓰는 것과 별개로, 프론트 환경에서는 클래스를 딱히 쓰지 않고 있는 것 같다.</p><p>왜일까? React에서는 불변성을 중요하게 생각하고 있고, 그렇기 때문에 <code spellcheck="false">useState</code> 같은 상태값에 클래스를 이용하기 어려운 실정이다.</p><p></p><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><p>리액트 사용자라면 이 코드가 제대로 동작하지 않을 것임을 알 것이다. <code spellcheck="false">useState</code>로 선언한 상태값은 반드시 <code spellcheck="false">setState</code>로 상태값을 바꿔야하니까.</p><p></p><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><p>이러면 어떨까? 물론 제대로 작동하지 않을 것이다. cart의 <code spellcheck="false">addItem</code> 메소드로 cart의 값을 바꿨지만, 이전의 cart와 동등한 값 ( <code spellcheck="false">Object.is</code> 로 비교했을 때)이기 때문이다.</p><p>따라서 정말 이렇게 써먹고 싶다면 <code spellcheck="false">ShoppingCart</code> 클래스는 새로운 객체를 반환하도록 변경되어야 할 것이다.</p><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><p>하지만 매번 코드를 이렇게 쓰는건 좀 어렵다.</p><p></p><h2>반려생활에서는...</h2><p>반려생활에서는 이런 문제를 해결하기 위해 <code spellcheck="false">valtio</code>라는 라이브러리를 사용한다고 한다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a></p><p>프록시를 이용해서 객체에 값이 바뀔 때에 setState로 전파를 해주는 기능으로 보이는데.</p><p>역시나 외부 라이브러리를 사용하는 방법인지라 접근성이 그렇게 좋지는 않고, 원래 쓰던 방식이 있는데 클래스를 사용하기 위해 굳이 이렇게까지 해야할까 라는 생각이 들기도 한다.</p><p></p><p>그렇다면 클래스는 리액트에서 쓸 일이 없는 도구인걸까?</p><p></p><h1>문제 제기</h1><p>예시를 위해 언틸의 프론트엔드 코드를 조금 가져와보자.</p><p>다음은 언틸의 댓글을 쓸 때 내용을 적는 input form 컴포넌트의 코드다.</p><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><p>이 컴포넌트에서는 다양한 데이터들이 사용되고 있고,<span> 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다. </span><code spellcheck="false">isLoggedIn</code><span>과 </span><code spellcheck="false">content</code><span>가 비어있다면 댓글을 작성할 수 없고, </span><code spellcheck="false">commentId</code><span>가 있다면 버튼의 텍스트는 '수정하기'이고..</span></p><p>그런데, 왜 <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없는걸까? 왜 <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'일까?</p><p>코드를 읽다보면 동작 방식은 알 수 있어도 자세한 이유와 의미를 생각해보는 데에는 시간이 좀 들게 된다. 결국 이런 코드들이 많아질 수록 코드는 점점 읽기 힘들어지고 의미를 이해하기 힘들어진다.</p><p></p><h2>메소드 분리?</h2><p>클린코드에서는 어떤 함수가 한 가지 일만 하는 것이 아니게 되었다면 함수를 분리해보라고 권장한다.</p><p>하지만 리액트의 컴포넌트에서는 자바의 클래스와 다르게, private 메소드 같은 것이 없다.</p><p><code spellcheck="false">WriteForm</code> 컴포넌트의 <code spellcheck="false">handleSubmit</code>의 로직이 복잡하다고 해서 함수를 분리해봐야 결국 그 함수도 <code spellcheck="false">WriteForm</code>에 생겨날 뿐이다. 결국 컴포넌트만 뚱뚱해지는 셈이다.</p><p></p><h1>클래스는 상태와, 상태와 연관된 동작을 정의한다</h1><blockquote><p><code spellcheck="false">commentId</code>, <code spellcheck="false">replyToCommentId</code>, <code spellcheck="false">isLoggedIn</code> 등등.. 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다.</p><p><code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..</p></blockquote><p>우리는 이럴 때에 클래스를 사용해볼 수 있다. 클래스는 상태들과, 그 상태들과 연관된 동작을 정의할 때 쓰는 틀이다.</p><p>위에 적은 내용을 클래스를 이용해서 맥락이 드러나도록 코드를 만들어볼 수 있지 않을까?</p><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><p>각 상태값들을 받아서, 댓글 입력창에서 취할 수 있는 행동들을 정의했다.</p><p></p><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><p>아까 언급한 대로, state에 클래스를 쓰거나 하는 용도는 어렵다. </p><p>하지만 state는 원래의 방식대로 <code spellcheck="false">useState</code>를 이용해서 정의하고, 비즈니스 로직을 위한 함수 발사대의 용도로 불변 클래스를 활용해주자.</p><p>원래도 객체지향에서 중요한 것은 변수값이 아닌, 메소드들이었으니까.</p><p></p><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><p>클래스의 메소드를 이용해서 코드를 교체해줬다.</p><p>우리는 어떤 변수가 true고, 어떤 변수가 빈 문자열이 아닐 때 return을 한다~ 따위의 것이 궁금했던게 아니다. </p><p>그 대신에 비즈니스의 의미가 잘 드러날 수 있도록 코드를 변경해주니 누구라도 이해할 수 있게 되었다.</p><p></p><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><p>return 문 쪽도 더 의미가 잘 드러나게 변경된 것 같다.</p><p></p><h2>예시 2</h2><p>언틸에서는 블로그에 유저 블로그와 그룹 블로그라는 두 가지 종류가 있다. 그와 함께 방문하는 유저도 타입이 여러 개 존재하게 되는데.</p><pre spellcheck="false"><code class="language-typescript">  userType:
    | 'guest' // 비로그인
    | 'owner' // 본인
    | 'user' // 다른 유저
    | 'member' // 그룹 멤버
    | 'admin' // 그룹 관리자</code></pre><p>이렇게 blogType과 userType이 여러 개 존재함에 따라 각 타입 별로 권한도 다양하게 존재한다.</p><p></p><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><p>유저 블로그면서 자신이 그 블로그의 주인일 경우, 팔로우를 할 이유가 없기 때문에 팔로우 버튼 대신에 '프로필 수정' 버튼을 보여주게 된다.</p><p>애플리케이션 전체에서 이와 비슷하게 유저/블로그 타입을 통한 로직이 많은데, 이 경우 권한에 대한 내용이 한 곳에 뭉쳐있지 않고 이곳 저곳에 혼재되어 있게 된다.</p><p>따라서 실수로 변경 누락을 하거나 잘못 설정하는 일이 발생할 수도 있다.</p><p></p><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><p>이런 느낌으로 권한을 좀 정리해볼 수 있지 않을까.</p><p></p><h1>커스텀 훅</h1><p>물론 예제로 들었던 이것들, 커스텀 훅으로 만들 수 있다. 상태값을 받아서 함수 or 값을 뱉는 것이라면 클래스나 훅이나 똑같다.</p><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><p>사실 리액트를 처음 공부하면서 훅에 대해서 배울 때, "아, 이게 리액트에서 제공하는 클래스구나"라는 생각이 들었다.</p><p>변수값들을 생성자처럼 받아서 훅 내부에서 함수들을 생성한 후 public으로 공개하고 싶은 녀석들만 return하면 그게 클래스지.</p><p></p><p>하... 하지만 클래스 쓰는게 멋있잖아?? 리액트에서 클래스 쓰는 힙한 사람처럼 보일 수 있다는 점에서 장점이 있는 것 같다.</p><p>농담이고, 이런 커스텀 훅을 만들어서 비즈니스 로직을 묶는 것도 좋은 방법이지만 클래스 쪽이 private 메소드 등을 이용해서 좀 더 가독성 있는 코드를 쓸 수 있는 것 같다는 개인적인 생각이 들어서 적절한 때에 잘 이용하고 있다. 살짝 테스트하기도 더 쉬운 것 같기도 하고..</p>

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