기존에 존재하던 데이터베이스의 ERD Diagram 자동 생성하기 설명 Workbench의 Reverse Engineer 기능을 이용하면 된다. Database => Reverse Enginner 예시 만들어진 ERD Diagram을 최신화 하기 설명 Database => Synchronize model 예시 alter table `test`.`member` add column `phone_number` varchar(20); 참고 자료 https://medium.com/@tushar0618/how-to-create-er-diagram-of-a-database-in-mysql-workbench-209fbf63fd03 https://dba.stackexchange.com/questions/25900/mysql-workbench-how-to-refresh-eer-diagram

배경 테스트 코드를 보니 원래 알고있던 when()함수가 아니라 whenever()함수를 사용하고 있었다. Kotlin에서 when을 사용하면 문제점 Kotiln에는 이미 when이라는 예약어가 있기 때문에 백틱을 사용해서 호출해야된다. val mockBookService = Mockito.mock(BookService::class.java) Mockito.`when`(mockBookService. inStock(100)).thenReturn(true) mockito-kotlin 라이브러리에서 이것이 번거롭기 때문에 whenever라는 함수를 제공해주고 있다. whenever(mockBookService.inStock(100)).thenReturn(true) 참고 자료 https://www.baeldung.com/kotlin/mockito

문제가 되는 이유 수평적 확장 관점에서 REST API와 WebSocket의 가장 큰 차이점은 아무래도 상태 관리다. REST API는 서버에서 상태를 저장하지 않기 때문에 스케일 아웃을 하는데 문제가 없다. 하지만 WebSocket의 경우에는 서버에서 세션을 저장하고 가지고 있어야한다. 따라서 클라이언트가 기존에 세션을 저장해둔 서버(BACKEND #1)가 아닌 다른 서버(BACKEND #2)로 메시지를 보낸다면 세션을 저장하고 있지 않기 때문에 처리하지 못할 것이다. 처리 방법 #1: Sticky Session Sticky Session이란 클라이언트가 첫 요청을 보낸 시점에 로드 밸런서에서 특정 서버를 하나 지정해서 처리하게 해주고, 이 클라이언트는 이후의 요청들을 전부 이전에 처리해준 서버에게 보내도록 하는 기법이다....

http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } upstream websocket { server 192.168.100.10:8010; } server { listen 8020; location / { proxy_pass http://websocket; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_set_header Host $host; } } } 참고 자료 https://www.nginx.com/blog/websocket-nginx/

RTCPeerConnection.getStats() 메서드를 호출하면, 현재 커넥션의 통계 데이터와 트랙의 정보들을 받을 수 있다. 출력을 해보면 stream이나 codec, trasnport 등 다양항 type의 정보를 오는 것을 확인할 수 있다. 각 type의 의미들은 https://developer.mozilla.org/en-US/docs/Web/API/RTCStats/type에서 확인이 가능하다. {id: 'RTCMediaStreamTrack_receiver_1', timestamp: 1659319122459, type: 'track', trackIdentifier: '181e51a6-8bc6-4a88-8bc0-8d5019f6564c', remoteSource: true, …} {id: 'RTCMediaStreamTrack_receiver_2', timestamp: 1659319122459, type: 'track', trackIdentifier: '08aa011f-13c7-44e8-b8b8-3e2f1da4bad5', remoteSource: true, …} {id: 'RTCMediaStream_xANDdH976y0iJdwry5rJCIUjy5hVDVPInSSM', timestamp: 1659319122459, type: 'stream', streamIdentifier: 'xANDdH976y0iJdwry5rJCIUjy5hVDVPInSSM', trackIds: Array(2)} {id: 'RTCPeerConnection', timestamp: 1659319122459, type: 'peer-connection', dataChannelsOpened: 0, dataChannelsClosed: 0} {id: 'RTCRemoteOutboundRTPAudioStream_1158860338', timestamp: 1659319120593, type: 'remote-outbound-rtp', ssrc: 1158860338, kind: 'audio', …} {id: 'RTCTransport_0_1', timestamp: 1659319122459, type: 'transport', bytesSent: 60504, packetsSent: 1208, …} {id: 'RTCCodec_0_Inbound_0', timestamp: 1659319123459, type: 'codec', transportId: 'RTCTransport_0_1', payloadType: 0, …} {id: 'RTCCodec_0_Inbound_103', timestamp: 1659319123459, type: 'codec', transportId: 'RTCTransport_0_1', payloadType: 103, …} {id: 'RTCCodec_0_Inbound_105', timestamp: 1659319123459, type: 'codec', transportId: 'RTCTransport_0_1', payloadType: 105, …} 우리가 필요한 것은 전송받고 있는 비디오 코덱 정보이므로 아래와 같이 조건문을 작성할 수 있다....

WebRTC를 이용해 코덱 별 성능 테스트를 위해서, 사용할 코덱의 종류를 바꿨어야했다. RTCRtpTransceiver를 통해 사용할 코덱을 수정할 수 있다. RTCRtpTransceiver RTCRtpSender와 RTCRtpReceiver 쌍을 관리하는 인터페이스다. 각각은 트랙을 인코딩하고 remote peer에 전송하는 것을 관리하는 역할, 트랙을 디코딩하고 remote peer를 전송 받는 것을 관리하는 역할이 있다. codecPreferences setCodecPreferences() 메서드를 호출하면 Transceiver의 코덱을 설정할 수 있게된다. codecPreferences는 선호하는 순서대로 코덱을 나열해서 입력할 수 있다. 참고 자료 https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpTransceiver

목표 WebRTC가 무엇인지 이해한다. WebRTC의 전체적인 구조를 이해한다. WebRTC 통신을 하기 위한 전체적인 과정을 이해한다. WebRTC란? WebRTC는 P2P 통신을 지원해주는 웹 표준이다. 오픈소스이기 때문에 지속적으로 발전되고 있다. 대부분의 최신 브라우저에서 사용가능하다. 브라우저뿐만아니라 모바일 애플리케이션에서도 사용가능하다. WebRTC는 주로 음성, 영상 통화에서 사용되고 그 뿐만 아니라 다양한 데이터를 전달할 때 사용할 수 있다. 서버를 통해 데이터를 받아야되는 WebSocket과 달리, P2P 통신으로 이루어지기 때문에 서버 과부하 문제를 해결할 수 있고, 개인 정보 보호의 이점도 가지고 있다....

WebRTC를 사용하기 위해서 JavaScript로 제공하고 있는 API들을 알아본다. 크게 두 기지 기능으로 나눌 수 있다. P2P 연결: 두 피어 간의 연결 설정 및 제어. WebRTC에 해당하는 영역. 미디이 캡쳐 기기: 동영상 카메라, 마우스, 화면 캡처 등. WebRTC를 사용하기 위해 함께 자주 사용되는 WebAPI P2P 연결 기본적으로 RTCPeerConnection 인터페이스에서 처리한다. P2P 연결이 진행되기 위해서는 Signaling이라는 과정이 필요하다. Signaling WebRTC에서는 다양한 데이터를 전송할 수 있기 때문에, 전송할 데이터 형식을 피어 간에 공유해야된다. 이렇게 전송 할 데이터의 형식과 상대 피어의 위치를 알아내는 과정을 signaling이라고 부른다....

배경 webpack에서는 기본적으로 오류가 발생하면 화면을 가려서 사용하지 못 하도록한다. 빠른 개발을 위해서 이를 비활성화 하기 위해서 아래와 같은 설정을 했지만 적용되지 않았다. vue.config.js module.exports = { devServer: { overlay: false, }, }; 문제 해결 webpack 버전이 올라가면서 사양이 바뀌었다. vue.config.js module.exports = { devServer: { client: { overlay: false, }, }, }; vue.config.js 파일은 vue-cli에서 프로젝트에서 webpack에 대한 설정을 추가할 수 있기 때문에 webpack.config.js를 사용하지 않아도 된다. 따라서, vue-cli보다 webpack 문서를 읽어보는 것이 더 정확하다....

WebMvcConfigurer 를 구현하면, WebMvc의 설정을 할 수 있다. addViewControllers 를 통해 정적인 웹을 url에 매핑 시킬 수 있다. @Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("home"); } } addInterceptors 를 통해 오는 요청에 인터셉트를 할 수 있다. @Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LocaleChangeInterceptor()); registry.addInterceptor(new ThemeChangeInterceptor()).addPathPatterns("/**").excludePathPatterns("/admin/**"); registry.addInterceptor(new SecurityInterceptor()).addPathPatterns("/secure/*"); } } addArgumentResolvers를 통해 커스텀 어노테이션을 인자로 매핑시킬 수 있다....

목표 리액티브 프로그래밍을 이해한다. Spring WebFlux 내부 동작 방식을 이해한다. 리액티브 프로그래밍 리액티브 프로그래밍 비동기 이벤트 처리와 데이터 스트림에 대한 아이디어를 기반으로 한다. 비동기 이벤트 처리는 다른 이벤트 처리를 차단하지 않는다는 것을 의미한다. 이벤트 큐와 병렬 이벤트 처리를 도입하여 성능과 확장성을 향상시킨다. 기본적으로 리액티브 프로그래밍은 3가지 구성요소를 가진 옵저버 패턴이다.(RxJava 기준) Observable: 데이터 스트림을 표현한다. 한 스레드에서 다른 스레드로 전달할 수 있는 데이터를 담는다. Observer: Observable이 방출하는 데이터 스트림을 소비한다. Observable이 데이터를 방출할 때마다 데이터를 통해 작업을 수행하거나 예외를 던진다....

목표 Spring 에서 제공하는 WebClient로 HTTP 요청을 보낼 때, URL parameter를 전송하는 방법을 알아본다. parameter 보내기 webClient.get() .uri(uriBuilder - > uriBuilder .path("/products/") .queryParam("name", "{name}") .build("asdf+asdf")) .retrieve() .bodyToMono(String.class) .onErrorResume(e -> Mono.empty()) .block(); 위와 같이 작성하면 /products?name=asdf%2asdf 로 요청이 보내지는 것을 확인할 수 있다. 주의점 아래와 같이 쿼리 파라미터를 넘기면 예상치 못한 방식으로 URL 인코딩이 될 수 있기 때문에 주의해야된다. 아래와 같이 요청을 보내면 ‘+’ 문자가 URL 인코딩 되지 않고 요청이 보내진다. /products%3Fname=asdf+asdf 반대로 ‘?...

HTTP 요청을 보낸 사람의 IP를 확인해서 DB에 등록되어 있는 사용자만 허가되도록 구현했다. 하지만 WAS가 HTTP를 받았을 때 항상 IP가 웹 서버(NGINX)의 IP로 인식되는 문제가 있었다. 문제 해결 WAS는 중간에 있는 리버스 프록시의 IP를 인식하는 문제가 있었다. 보통 요청을 보낸 Client의 IP 를 확인하기 위해서 X-Forwarded-For 헤더를 사용한다고 한다. 이를 구현하기 위해서는 크게 2가지 작업이 필요했다. 리버스 프록시 서버인 NGINX 설정 변경 WAS에서 X-Forwarded-For 헤더를 확인하도록 수정 NGINX 설정 변경 nginx에서는 $proxy_add_x_forwarded_for 라는 변수를 제공한다....

목표 vue-router에서 뒤로가기 구현 방법을 이해한다. vue-router의 2가지 모드 hash mode url에 ‘#‘을 사용해서 URL이 변경되어도 페이지가 리로딩되지 않도록 하는 모드 history mode history.pushState를 사용해서 URL이 변경되어도 페이지가 리로딩되지 않도록 하는 모드 참고: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState 서버 설정에 따라, 404 에러가 발생할 수 있으므로 웹 서버 설정을 확인해봐야된다. 뒤로가기 구현법 this.$router.push: 히스토리 스택에 새로운 경로로 이동할 수 있다. this.$router.go: 히스토리 스택을 이동할 수 있다. // go forward by one record, the same as router....

방법 <KeepAlive> 컴포넌트를 사용하면, 이전 컴포넌트의 상태를 캐싱했다가 뒤로돌아가도 유지된다. https://vuejs.org/guide/built-ins/keep-alive.html#basic-usage KeepAlive의 상태 유지 방법 KeepAlive 컴포넌트 레벨에서 캐싱이 이루어지고 있다. 만약 중간에 KeepAlive DOM이 사라지면 캐싱이 지워진다. https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js#L90 참고 자료 https://stackoverflow.com/questions/41764825/preserve-component-state-with-vue-router https://stackoverflow.com/questions/71145498/where-does-vuejs-store-the-cached-component-when-using-keep-alive

방법 $route.params를 통해 가져올 수 있다. pattern matched path $route.params /users/:username /users/eduardo { username: ’eduardo’ } /users/:username/posts/:postId /users/eduardo/posts/123 { username: ’eduardo’, postId: ‘123’ } 참고 자료 https://router.vuejs.org/guide/essentials/dynamic-matching.html

VSCode로 SSH 환경에서 작업을 해야되는 상황이었다. 1. Remote Development 설치 VSCode에서 확장 프로그램을 설치 해야된다. 아래 경로에서 설치 가능하다. https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack 2. Config 파일 수정 config 파일을 수정해서 자신이 접속할 경로와 사용자명을 작성하면 된다. Windows 기준 아래의 경로에 파일이 존재한다. C:\Users\사용자명\.ssh\config 해당 파일의 다음과 같은 파일 형식으로 지정해두면 이후에 쉽게 접속이 가능해진다. 아래 예시는 pem 키를 이용해서 접속하는 경우다. pem키를 사용하지 않고 사용지 비밀번호를 입력하는 경우는 4번 라인의 IdentityFile 을 제거하면된다....

목표 mockito의 verify() 메서드를 통해 검증할 수 있는 내용들을 알아본다. 호출된 횟수 검증 List<String> mockedList = mock(MyList.class); mockedList.size(); verify(mockedList, times(1)).size(); 호출되지 않음을 검증 List<String> mockedList = mock(MyList.class); mockedList.size(); verify(mockedList, never()).clear(); 호출되는 인자 매칭 커스터마이징 인자 매칭 기준이 복잡하다면 ArgumentMatchers.argThat() 을 통해서 매칭 기준을 커스터마이징할 수 있다. 인자로 ArgumentMatcher라는 함수형 인터페이스를 받고 있어서 람다로 구체적인 조건을 명시할 수 있다. 참고 자료 https://www.baeldung.com/mockito-verify https://www.baeldung.com/mockito-argument-matchers

assertThat(actual) .usingRecursiveFieldByFieldElementComparator() .usingElementComparatorIgnoringFields("field_1", "field_2") .isEqualTo(expected) 참고 자료 https://issueexplorer.com/issue/assertj/assertj-core/2263

목표 useEffect 사용법을 이해한다. useEffect Effect는 특정 이벤트가 아닌 렌더링에 의해 발생한 사이드 이펙트를 명시할 수 있다. 채팅에서 메시지를 보내는 것은 사용자가 특정 버튼을 클릭함으로써 직접 발생하므로 이벤트다. 서버 연결은 컴포넌트가 표시되는 유저와의 상호작용과 관계 없이 발생해야 되므로 이펙트다. Effect는 외부 시스템과 동기화할 때 사용하면 좋다. 렌터링 될 때마다 실행하기 function MyComponent() { useEffect(() => { // Code here will run after *every* render }); return <div />; } Effect의 의존성 명시하기 모든 렌더링에 대해서 실행되지 않아야되는 경우가 있다....