안녕하세요. 이그나이트 FE1팀 한준호입니다. 오늘은 크롬 개발자 도구를 활용해 react 기반 웹 서비스에서 실제로 발생한 입력 지연 문제를 분석하고 개선한 경험을 공유해보려 합니다. 문제를 어떻게 정의했고, 어떤 도구로 추적했으며, 어떤 방식으로 개선했는지. 그리고 개선 전후의 수치와 체감 변화는 어땠는지 정리해 보았습니다. 🧩 "입력이 느려요" 새로운 프로젝트의 어드민 서비스를 개발하던 중, 예상치 못한 문제가 발생했습니다. react-hook-form 을 활용한 복잡한 화면에서 input 필드에 값을 입력할 때마다 프레임 드랍이 발생한 것이었습니다. 처음엔 큰 문제가 아니라고 생각했지만, 입력이 끊기듯 반응하면서 사용자에게 눈에 띄는 불편함을 주는 수준으로 나타났고, 그때부터 본격적인 분석을 시작했습니다. 아래 영상에서는 입력 시 텍스트가 끊겨 보이거나, 반응 속도가 늦어지는 현상을 확인할 수 있습니다. 🔍 React DevTools – Highlight 해당 어드민은 react 기반으로 개발되었습니다. 먼저, 입력 시 어떤 컴포넌트가 리렌더링되는지 확인하기 위해 React Developer Tools의 highlight 리렌더링 기능을 활성화해 보았습니다. 예상대로, 특정 input 필드에 값을 입력하면 화면 전체에서 대량의 리렌더링이 발생하는 것이 시각적으로 확인되었습니다. highlight 기능을 통해 리렌더링이 다수 발생하는 것은 인지했으니, 이 리렌더링이 정말 성능 저하의 원인인지 파악할 필요가 있습니다. 성능 저하는 layout shift, heap memory 증가로 인한 GC 부하 등 다양한 요인으로 발생하기 때문입니다. react는 화면을 최신 상태로 유지하기 위해 리렌더링을 의도적으로 수행합니다. state나 props가 변경되면 해당 컴포넌트를 다시 렌더링하는 구조는 react의 핵심 동작 원리입니다. 또한, 최신 react는 fiber reconciliation을 통해 렌더링 성능을 최적화합니다. 불필요한 DOM 변경은 건너뛰고, 실제로 변경이 필요한 부분만 선별적으로 갱신되도록 설계되어 있습니다. 따라서 리렌더링 자체는 문제가 아닙니다. 하지만 그 리렌더링이 과도하거나, 필요 이상의 컴포넌트까지 확산되면서 브라우저 성능에 부담을 준다면, 그건 문제의 원인이 될 수 있습니다.

들어가며 개인적인 경험으로, 회사에서 진행하는 프로젝트 중에서 오직 단독 시스템으로 동작하는 서비스는 없었던 것 같다. 대부분은 외부 시스템과 연동하게 되며, MSA를 주력으로 사용하는 부서라면 더더욱 많은 연동을 하게 될 것이다. 연동해야 하는 시스템이 많다는 것은 그만큼 관리 포인트가 늘어나는 것이고, 그에 따라 맞닥뜨려야 할 오류 또한 증가하게 된다. 일부 요청 추적(Request Tracing)을 지원하는 DataDog, PinPoint, Jaeger 등의 서비스를 사용하여 요청/응답을 간략하게 확인할 수 있는 툴을 사용한다면 좋겠지만, 그렇지 않고 독자적으로 시스템에서 외부 시스템을 호출할 때의 로그를 남기고 싶어 하는 부서도 있다. 이 글에서는 그중에서도 RestTemplate을 사용하여 외부 시스템과 연동할 때, 요청/응답에 대해 로그를 DB로 남기는 것을 설명하려 한다. 예제 프로젝트 세팅 이 글에서는 기본적으로 Kafka의 값에는 Json 형식으로 메시지를 저장하는 부분에서 나아가 Json 부분을 암호화하고, 복호화하는 것을 추가하여 설명하려고 한다. 우선 Json 값을 저장하는 예제 프로젝트로 아래와 같이 Producer와 Consumer 세팅하였다. build.gradle DelegateController http://localhost:8080을 호출할 때 RestTemplate을 사용하여, http://httpbin.org/get을 호출하고, 이에 대한 응답을 HttpBinResponse로 정의하여 반환한다. 로컬에서 애플리케이션을 실행시켜 아래와 같이 동작하는 것을 확인할 수 있다. RestTemplate 요청/응답 로그를 DB에 저장하기 1. 사용자 정의 ClientHttpRequestInterceptor 작성하기 Spring에서는 ClientHttpRequestInterceptor를 통해, RestTemplate이 요청/응답을 보내기 전/후의 동작을 정의할 수 있다. 인터페이스는 다음과 같다. HttpRequest: 요청에 대한 객체이며, HttpHeaders getHeaders(), URI getURI(), HttpMethod getMethod()를 가지는 인터페이스다. body: payload에 해당하는 byte의 배열이다. execution: execution.execute(request, body)을 수행해야 실제로 요청을 수행하고, interceptor 메서드에서 반환해야 할 응답 결과(ClientHttpResponse)를 얻을 수 있다. 우선 아래와 같이 LoggingClientHttpRequestInterceptor를 작성하자. 2. 요청 로그 남기기 요청 로그를 남기기 위해서 아래와 같이 LoggingClientHttpRequestInterceptor를 변경하자. HttpRequest.toString()은 오버라이딩 되어있지 않아, 그대로 로그를 남긴다면 인스턴스의 해시 코드 값을 반환하게 된다. 각각 URI, Method, Headers의 getter를 호출하여 원하는 값을 얻을 수 있다. 3. 응답 로그 남기기 응답 로그를 남기기 위해서 다시 아래와 같이 LoggingClientHttpRequestInterceptor를 변경하자. 이번에 위 인터셉터를 적용한 RestTemplate을 호출하면 아래와 같이 정상적인 로그를 확인할 수 있다. 다만 브라우저에서는 비어있는 화면을 확인할 수 있을 것이다.

머신러닝 소개 머신러닝, ML 엔지니어가 하는 일 머신러닝(Machine Learning)은 인공지능(AI)의 한 분야로, 컴퓨터가 데이터로부터 스스로 학습하여 패턴을 인식하고 예측을 수행할 수 있게 해주는 기술입니다. 전통적인 프로그래밍 방식은 규칙을 직접 코딩하지만, 머신러닝은 데이터로부터 규칙을 스스로 학습합니다. 이를 통해 복잡한 패턴 인식, 예측, 의사결정 등이 가능해집니다. 메일에서 스팸 메일을 찾아내는 간단한 일에서부터, 의료 분야에서는 질병 예측과 진단, 금융 분야에서는 사기 탐지, 그리고 자율주행 자동차 같은 것들이 머신러닝을 통해 이루어집니다. 머신러닝은 크게 정답이 포함된 데이타로 학습하는 지도학습, 데이타의 패턴을 스스로 찾아내는 비지도학습, 환경과 상호작용하며 보상을 최대화 하는 강화학습. 이렇게 3가지 유형으로 나눌 수 있습니다. 머신러닝 모델은 이런 학습과정을 거쳐 만들어진 규칙입니다. 입력 데이터를 받아 출력을 생성하는 함수와 같은 것입니다. 예를 들어, 스펨 메일 필터링 모델은 입력 메일의 특징을 분석하여 스펨 메일인지 아닌지를 예측하는 알고리즘입니다 머신러닝 모델을 개발하고 배포하는 ML 엔지니어는 데이터를 수집하고 분석하며, 머신러닝 모델을 만들고, 모델을 배포하여 실제 업무에 적용합니다. 데이타의 양이 커서, 데이타에 노이즈나 결측치가 있어서 어려움을 격기도 하고, A하드웨어에서 만든 모델이 B하드웨어에서 제대로 작동안하는 문제를 해결하기도 합니다. 이 글에서는 ML 엔지니어의 기본 업무인 데이터 분석과 모델 구축 과정을 타이타닉 생존자 예측 문제를 예로 들어 설명하겠습니다. 이를 통해 ML 엔지니어의 실제 업무와 그 과정에서 겪는 다양한 도전 과제들을 이해할 수 있을 것입니다. 타이타닉 문제로 시작하기 타이타닉 문제는 1912년 타이타닉 호 침몰 사고 당시의 실제 데이터를 기반으로 승객의 나이, 성별, 탑승 티켓 등급 등의 데이타로 해당 승객이 생존했는지 여부를 예측하는 것입니다. 데이터 규모가 크지 않아(12개의 컬럼, 891건의 데이터) 초보자도 다루기 쉬우며, 이진 분류(생존/비생존) 문제라 평가가 용이합니다. 또한 숫자, 범주형 등 다양한 유형의 데이터와 결측치(누락된 데이타)를 포함하고 있어, 데이터 전처리 과정을 연습할 수 있습니다. 이 문제는 기계학습 파이프라인의 전체 과정을 경험할 수 있는 대표적인 예제입니다. 일단 손으로 풀어보고, 그 다음 실제 머신러닝 모델을 만들어보도록 하겠습니다. 손(Excel)으로 하는 머신러닝 타이타닉 문제의 데이터 파일은 kaggle 에서 다운로드 받으실 수 있습니다. 회원 가입 후 파일을 다운로드 하시면 되고, train.csv 모델 훈련용으로 사용하는 데이터 파일입니다. test.csv 모델의 검증용으로 사용하는 데이터 파일입니다. gender_submission.csv kaggle 에 업로드 해 만들어진 모델을 평가하기 위한 파일입니다. 모델 구축 후 모델의 결과를 이 파일에 저장하고 업로드하면 만들어진 모델의 성능을 확인할 수 있습니다. 데이터 살펴보기 파일을 엑셀에서 열어보면 위와 같은 데이터가 있고, 각 컬럼의 의미는 아래와 같습니다. PassengerId: 승객 ID Pclass: 티켓 클래스 Name: 이름

들어가며 개발 업무를 진행하면 종종 개인정보에 대해 다룰 때가 생긴다. 보통 이러한 민감정보는 DB, Redis, Kafka 혹은 로깅에서도 암호화하여 저장하는 것이 권장된다. 이 글에서는 스프링으로 Kafka를 사용할 때, 본문 내용에 대해 암호화하여 저장하는 방법을 다루고자 한다. Json 역/직렬화 예제 이 글에서는 기본적으로 Kafka의 값에는 Json 형식으로 메시지를 저장하는 부분에서 나아가 Json 부분을 암호화하고, 복호화하는 것을 추가하여 설명하려고 한다. 우선 Json 값을 저장하는 예제 프로젝트로 아래와 같이 Producer와 Consumer 세팅하였다. producer와 consumer를 분리하였는데 이는 Spring Kafka에서 제공하는 JsonSerializer/Deserializer의 지원에 대해 설명하기 위해 분리하였다. producer의 코드들 ProducerChatMessage Kafka에 값으로 저장할 내용을 아래와 같이 정의했다. ProducingController Http 요청을 받아 ProducerChatMessage를 Kafka로 전송하는 부분으로 아래와 같이 정의한다. application.yaml Kafka에 대한 설정과 위에서 정의한 ProducerChatMessage를 아래와 같이 Json으로 직렬화하면서 별칭(alias)을 줄 수 있다. spring.kafka.producer.value-serializer와 spring.kafka.consumer.value-deserializer의 값으로 JsonSerializer, JsonDeserializer를 사용할 수 있다. 위 두 개의 클래스를 지정할 때 spring.kafka.[producer|consumer].properties.spring.json.type.mapping으로 위 예제와 같이 콜론(:) 구분으로 별칭을 줄 수 있다. 이러한 별칭은 추후 클래스를 다른 패키지로 변경하거나, 다른 클래스를 사용하게 될 때에도 유연하게 대응할 수 있도록 도와준다. 참고: Spring Boot / Reference / Messaging / Apache Kafka Support 별칭은 Kafka 메시지의 헤더로 저장되며, JsonSerializer가 헤더를 생성, JsonDeserializer가 헤더를 제거하는 식으로 동작한다. ex) key: __TypeId__, value: message 위와 같은 방법으로 아래 예제와 같이, 값에 인터페이스를 받도록 대응할 수 있다. 예제를 단순화하기 위해서 if/else를 사용했지만 실무에서는 사용하지 않기를 바란다. consumer의 코드들 ConsumerChatMessage producer 프로젝트의 ProducerChatMessage에 대응하는 모델을 ConsumerChatMessage로 작성한다. IgniteKakfaConsumer 단순하게 메시지를 받아 로그를 남기는 부분을 consumer로 작성한다.

들어가며 SaaS(Software As A Service)가 보편화되며 아마 많은 개발자가 이를 구현하기 위해 Twelve-Factor를 읽어보았을 것으로 생각된다. 이 글은 Twelve-Factor에서 설정에 대해 어떻게 Spring Boot를 사용하는 개발자들이 외부의 설정 저장소에 접근하여 설정을 읽을 수 있을지 구현에 관해 이야기하고자 한다. 이미 대부분의 스타트업들은 클라우드 환경에서 시작하고 있으며, 국내 IT 대기업들은 자체 클라우드를 구축하고, IT 업계 외의 사업을 주로 하는 기업들도 클라우드로 옮겨가고 있다. 주된 방향성은 클라우드 환경에 있지만 아직 온프레미스를 주로 사용하는 조직도 있기에, 여기서는 온프레미스와 클라우드 환경에 따라 어떻게 설정을 달리할 수 있는지 다뤄보려고 한다. Spring Externalized Configuration 본문에서 다루고자 하는 모든 개발 방법의 기반은 Spring Documentation에서 이미 기술하고 있는 내용에 대한 응용이다. 또한 외부에서 설정을 읽는 부분에 대한 많은 지원을 이미 Spring Cloud Config에서 제공하고 있으니, 사용하려는 환경이 이미 Spring Cloud Config에서 지원하고 있다면 사용하는 것이 좋다. 이 글은 Spring Cloud Config보다는 좀 더 바퀴를 만드는 방법에 대해 다룬다. 본문이 도움될 만 한 상황 아래와 같은 상황에서 이 글이 도움이 될 것이라 생각된다. Spring Cloud Config를 조금 더 가볍게 모듈화하거나, 자신의 조직에 맞게 구성하고 싶은 경우. 전체 혹은 일부 설정에 대해 Spring Cloud Config에서 지원하지 않는 외부 설정 저장소를 사용하려는 경우. 혹은 아래와 같이 application.properties를 커스터마이징하려는 경우. 외부 환경에서 설정을 개발자가 직접 호출하도록 개발하기 Spring Cloud Config에서 지원하지 않는 환경에 설정을 저장하고, 불러와야 하는 경우가 있다. 사내에서 자체 구축한 시스템을 사용하는 경우이다. 이런 경우 EnvironmentPostProcessor를 진입점으로 간주하고 원하는 결과를 이룰 수 있다. EnvironmentPostProcessor EnvironmentPostProcessor는 ApplicationContext가 초기화되기전에 애플리케이션의 환경 설정을 변경할 수 있으며 아래 인터페이스를 가지고 있다. ConfigurationEnvironment: getPropertySources()를 통해 MutablePropertySources를 사용할 수 있으며, 여기서 property를 추가하거나, 우선순위를 조절하여 덮어쓸 수 있다. 따라서 내부 구현을 통해 외부 설정 저장소에서 설정값을 불러와 우선순위를 높여 PropertySources에 저장하면 외부 설정 저장소의 설정값을 애플리케이션에서 참조할 수 있다. CSV 예제 단순한 예제로 CSV에서 설정을 읽어와 사용하는 경우를 구현해 보자. custom.greeting이라는 설정에 Hello world!를 출력하고자 한다. application.yaml HelloWorldController.java CsvEnvironmentPostProcessor.java

안녕하세요. 이그나이트 FE1팀 한준호입니다. 이그나이트 FE1팀에서는 기아인증중고차를 포함해서 다수의 백오피스와 사내 공통패키지를 운영하고 있습니다. 오늘은 다수의 프로젝트 운영간 마주한 문제와 이를 해결하기 위한 기술인 Module Federation에 대해 기술하고자 합니다. Module Federation 도입은 왜 필요할까? 현대 웹 애플리케이션의 규모와 복잡도가 증가함에 따라, 개발팀은 효율적인 개발, 유지보수, 배포 방법을 모색해야 합니다. 특히 대규모 프로젝트에서는 빌드 및 배포 시간이 길어지고, 공통 컴포넌트의 변경으로 인해 전체 애플리케이션을 재빌드해야 하는 문제가 발생합니다. 도입 배경 이그나이트 FE팀은 나열한 문제들로 Module Federation 도입을 고민하게 되었습니다. 빌드 시간의 증가 대규모 애플리케이션의 경우 빌드 시간이 길어져 개발 생산성이 저하됨 공통 컴포넌트 및 유틸의 파편화 여러 프로젝트에서 일관된 UI/UX와 개발 경험(DX)을 유지하는 데 어려움이 있음 문제 해결 대안 모노레포(Monorepo) 여러 프로젝트를 하나의 레포지토리에서 관리하여 코드 공유와 협업을 용이하게 함. 하지만, 공통 컴포넌트의 변경 시 전체 프로젝트를 재빌드해야 하는 단점이 있음. 단일 레포 프로젝트를 모노레포에 편입시키기 위한 마이그레이션 과정은 이미 운영되고 있는 서비스에 도입하기엔 서비스 전수 QA, 개발 리소스 부담 등 여러 차원에서 큰 부담이 됨. Iframe 서로 다른 애플리케이션을 하나의 페이지에 통합하는 방법으로, 간단하게 독립적인 배포가 가능하지만, UI/UX와 보안 문제로 인해 실용성이 떨어짐