SSE를 활용해 웹에서 실시간 데이터 구독 기능 구현 프로젝트를 진행하다가 서버에서 주기적으로 발행하는 데이터를 클라이언트에서 실시간으로 받아 표시해주어야하는 기능을 구현할 일이 생겼다. 제일 먼저 생각났던건 웹소켓이었는데 물론 웹소켓으로도 구현은 가능하지만 웹소켓에서 지원하는 양방향 통신까지는 필요가 없고 서버 -> 클라이언트 방향으로의 단방향만 지원하면 돼서 다른 기술을 찾아보다가 SSE를 알게 되었다. SSE는 Server Send Events의 약자로 HTML5부터 사용하능한 표준 스펙이다. 말 그대로 서버에서 주기적으로 발행하는 이벤트를 클라이언트(브라우저)에서 구독할 수 있는 기술로 접속연결만 HTTP로 하고 자체 프로토콜로 통신하는 웹소켓과 달리 전체 과정을 HTTP로 수행한다. 사용하는 방법은 간단하다. 먼저 원리를 알기 위해 SSE 스펙에 .. Back-End/Spring framework 3년 전
Spring Boot Managed Dependency 버전 변경 Spring Boot는 Spring Framework와 달리 프레임워크 빌드, 런타임 등에 필요한 의존성을 자동으로 관리해주는게 큰 장점중에 하나인데요. Spring Boot에서는 관련 있는 기능 및 의존성을 묶어 하나의 의존성으로 제공하고 개발자들은 필요한 의존성만 선택하여 사용하면 됩니다. 그 안에서 일어나는 라이브러리 간의 호환성, 중복되는 라이브러리로 인한 충돌 등으로부터 자유로워지죠. 이를 Spring Boot 진영에서는 Managed Dependency라고 부르며 아래 링크에서 어떤 의존성들을 관리하고 있는지 볼 수 있습니다. https://docs.spring.io/spring-boot/docs/current/reference/html/dependency-versions.html 다만 가끔은.. Back-End/Spring framework 3년 전
Spring Boot Tomcat Access Log 필터링 Spring Boot Embedded Tomcat을 사용하면 Access Log를 남길수 있습니다. 기본적으로는 비활성화 되어있고 server.tomcat.accesslog.enabled 옵션을 true로 주면 활성화 할 수 있습니다. Access Log는 해당 서버로 들어오는 모든 요청들을 로깅하는데 이 중 로그로 남기고 싶지 않은 건들이 있을 수 있습니다. 저의 경우엔 외부 모니터링 서버에서 헬스체크를 위해 헬스체크 URL을 1초에 한번씩 호출했고, 엑세스 로그가 과도하게 남는 케이스였습니다. 톰캣 Access Log 스펙 중에, HttpServletRequest 객체의 Attribute 내 특정 키가 포함되있거나, 되있지 않을 경우 해당 요청에 대해서는 로깅을 하지 않도록 설정할 수 있는 기능이 있.. Back-End/Spring framework 3년 전
[Svelte 시리즈] 컴포넌트 생명주기 (Lifecycle) 와 훅(Hook) 이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다. Svelte에서 컴포넌트는 화면에 랜더링되거나 사라질 때를 나타내는 컴포넌트의 상태가 있다. 이 상태의 흐름을 컴포넌트 생명주기라 한다. mounted: 컴포넌트가 화면 또는 다른 컴포넌트에 랜더링된 (연결된) 상태. 이 전에는 화면 요소에 접근할 수 없음 destroyed: 컴포넌트가 화면 또는 다른 컴포넌트에서 사라진 (연결이 해제된) 상태 before update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 되기 전 상태 after update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 된 후 상태 이런 상태들은 컴포넌트가 화면(DOM)상에서 어떻게 다뤄지냐에 따라 다양하게 호출된다. 예를들어 .. Front-End 3년 전
[Svelte 시리즈] 컴포넌트와 스토어 이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다. 컴포넌트 Svelte에서는 Single File Component를 정의하고 사용할 수 있다. Name.svelte 컴포넌트 사용할 때 전달받을 데이터 (props)는 export 구문을 통해 선언한다 {name} App.svelte 사용 측에서 import 하여 컴포넌트를 가져온다. props는 해당 컴포넌트 attribute를 통해 전달한다. (컴포넌트에서 export된 이름에 맞춤) 전달하려는 prop의 이름과 데이터 변수명이 같다면 생략하여 작성할 수도 있다. {#each names as name} {/each} 컴포넌트내에서 데이터를 가공할 땐 원본 데이터에 영향이 없도록 작성하는 것이 중요하다. 만.. Front-End 3년 전
