![img](https://i.postimg.cc/9fGQLD8m/techit-logo.png) --- --- # 부모수업 - 부모수업 : 테킷 백엔드 스쿨 7기(Java) 수업페이지 - [주소 : https://slog.gg/p/8](https://slog.gg/p/8) # 수업 - [주소 : https://slog.gg/p/13248](https://slog.gg/p/13248) # 강의 # 1강 : 폴링 VS SSE - [영상 - 22 12 19, ken 11504, 1강, http 프로토콜로 실시간을 흉내내는 방법 폴링, SSE](https://youtu.be/Rs81URxlCWg) ## 폴링 통신방식 $$uml 브라우저 <-> 서버 : 연결1 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결1 요청 브라우저 <- 서버 : 연결1 응답 브라우저 <-> 서버 : 연결1 끊기(4 Way 핸드쉐이크) 브라우저 -> 브라우저 : IDLE 브라우저 <-> 서버 : 연결2 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결2 요청 브라우저 <- 서버 : 연결2 응답 브라우저 <-> 서버 : 연결2 끊기(4 Way 핸드쉐이크) 브라우저 -> 브라우저 : IDLE 브라우저 <-> 서버 : 연결3 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결3 요청 브라우저 <- 서버 : 연결3 응답 브라우저 <-> 서버 : 연결3 끊기(4 Way 핸드쉐이크) $$ ## SSE 통신방식 $$uml 브라우저 <-> 서버 : 연결1 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결1 요청 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 브라우저 <-> 서버 : SSE 자동 재연결 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 브라우저 -> 브라우저 : 브라우저 종료 브라우저 <-> 서버 : 연결1 끊기(4 Way 핸드쉐이크) $$ # 2강 : 채팅앱 구조 - [영상 - 22 12 19, ken 11504, 2강, 1부, 메세지들을 그리는 구조(폴링방식)](https://youtu.be/VTB-i9O8B80) - [영상 - 22 12 19, ken 11504, 2강, 2부, 메세지를 작성하는 구조](https://youtu.be/UxfNdctl0dc) ## 메세지들을 그리는 구조(폴링방식) $$uml 클라이언트 -> "GET /chat/room" : 채팅방 접속 클라이언트 -> 클라이언트 : 일정시간 대기 후 메세지들 요청 API 호출 클라이언트 -> "GET /chat/messages" : 전체 메세지 클라이언트 -> 클라이언트 : 로딩한 메세지 그리기 클라이언트 -> 클라이언트 : 일정시간 대기 후 메세지들 요청 API 호출 클라이언트 -> "GET /chat/messages" : ?fromUuid=D, 메세지 D 이후로 발생한 메세지들 클라이언트 -> 클라이언트 : 로딩한 메세지 그리기 클라이언트 -> 클라이언트 : 일정시간 대기 후 메세지들 요청 API 호출 클라이언트 -> "GET /chat/messages" : ?fromUuid=F, 메세지 F 이후로 발생한 메세지들 클라이언트 -> 클라이언트 : 로딩한 메세지 그리기 클라이언트 -> 클라이언트 : 채팅방 퇴장 $$ ## 메세지를 작성하는 구조 $$uml 클라이언트 -> "GET /chat/room" : 채팅방 접속 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용1"} 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용2"} 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용3"} 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용4"} 클라이언트 -> 클라이언트 : 채팅방 퇴장 $$ # 3강 : 프로젝트 세팅 - [영상 - 22 12 19, ken 11504, 3강, 스프링부트 프로젝트 세팅](https://youtu.be/Ply9QX6lXRQ) - [리포지터리 - https://github.com/jhs512/app_2022_12_19__1](https://github.com/jhs512/app_2022_12_19__1) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/59847caf95bab392975f480fa90f3f5f226b0b13) # 4강 : POST /chat/writeMessage - [영상 - 22 12 19, ken 11504, 4강, POST /chat/writeMessage](https://youtu.be/1sjMhSN-0o0) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/d40e2b17a20d7d6ba5542c1983784d5cb5478325) # 5강 : ChatMessage 클래스 - [영상 - 22 12 19, ken 11504, 5강, ChatMessage 클래스](https://youtu.be/FUdRJlTS3Ao) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/9a5c62b146e90f9ef9ed1d0ad7a5b3fceea27543) # 6강 : 메세지를 리스트에 저장 - [영상 - 22 12 19, ken 11504, 6강, 메세지를 리스트에 저장](https://youtu.be/uN4xkAc5N5k) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/825717f9f1a8bc529ad7d6e8263fc1cb832b2c93) # 7강 : GET /chat/messages - [영상 - 22 12 19, ken 11504, 7강, GET /chat/messages](https://youtu.be/bF-DC15gM-U) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/d144349b8250bc3dd125db6e891deb17b8cb6c97) # 8강 : 메세지 작성시에 작성자 이름과 메세지 본문을 JSON 형태로 전달 - [영상 - 22 12 19, ken 11504, 8강, 메세지 작성시에 작성자 이름과 메세지 본문을 JSON 형태로 전달](https://youtu.be/dLJyVIKtgY0) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/eb2d84f0093255dbc0d5406830695c8dc17129fd) # 9강 : MessagesResponse 클래스 - [영상 - 22 12 19, ken 11504, 9강, MessagesResponse 클래스](https://youtu.be/J2OCmDBnPd0) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/99a3d955e5e5af029b023c80b270e1ab680f43d4) # 10강 : messages 필터링, GET /chat/messages?fromId=번호 - [영상 - 22 12 19, ken 11504, 10강, messages 필터링, GET /chat/messages?fromId=번호](https://youtu.be/grvwDUTEJx4) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/7204c3b7043df46022ce725b1684a3ee9e33acd4) # 11강 : 자바 record 와 class 의 차이점 - [영상 - 22 12 19, ken 11504, 11강, 자바 record 와 class 의 차이점](https://youtu.be/s0J3JPxApa0) # 12강 : 스트림과 메세지 필터링 - [영상 - 22 12 19, ken 11504, 12강, 스트림으로 리스트에서 특정 메세지들을 필터링하는 원리](https://youtu.be/rValo-s8AVE) ## 번호가 1번인 사람의 index 구하기 ```java // Main.java import java.util.ArrayList; import java.util.List; import java.util.stream.IntStream; public class Main { public static void main(String[] args) { List people = new ArrayList<>(); people.add(new Person(2, 22, "홍길순")); people.add(new Person(1, 23, "홍길동")); people.add(new Person(50, 50, "임꺽정")); int foundIndex = -1; for (int i = 0; i < people.size(); i++) { if (people.get(i).id == 1) { foundIndex = i; break; } } //System.out.printf("foundIndex : %d\n", foundIndex); int index = IntStream.range(0, people.size()) .filter(i -> people.get(i).id == 1) .findFirst() .orElse(-1); // 번호(id)가 2번인 사람의 순서(index)는? : } } class Person { int id; int age; String name; public Person(int id, int age, String name) { this.id = id; this.age = age; this.name = name; } } ``` ## req.fromId 의 값이 3이라고 가정할 때, 채팅메세지의 번호가 3번인 객체가 messages 라는 배열에서 몇번째 인덱스에 있는지 조사 ### v1 : 스트림 버전, 반복문이 숨어있어서 오타날 확률이 적다. ```java int index = IntStream.range(0, messages.size()) .filter(i -> chatMessages.get(i).getId() == req.fromId) // 아래의 findFirst 때문에 이 필터함수에서 하나라도 결과값이 true 인 index 가 발견되면 그 즉시 findFirst 가 실행되고 스트림이 끝난다. .findFirst() .orElse(-1); // 모든 스트림 원소가 위의 filter 를 통과하지 못할때만 실행된다. ``` ### v2 : for 문 버전, 반복문을 직접 돌려야 하니, 버그발생의 가능성이 스트림보다 크다. ```java int index = -1; for ( int i = 0; i < messages.size(); i++ ) { if ( messages.get(i).getId() == req.fromId ) { index = i; break; } } ``` # 13강 : 코드펜 세팅법 - [영상 - 22 12 19, ken 11504, 13강, 코드펜 세팅법](https://youtu.be/JWm8xbgOKZk) - [코드펜 - https://codepen.io/pen](https://codepen.io/pen) - [코드펜 가입 - https://codepen.io/accounts/signup/user/free](https://codepen.io/accounts/signup/user/free) - [코드펜 에디터세팅 - https://codepen.io/settings/editor](https://codepen.io/settings/editor) # 14강 : 채팅폼이 발송되어 버리는 것을 막기 - [영상 - 22 12 19, ken 11504, 14강, 채팅폼이 발송되어 버리는 것을 막기](https://youtu.be/1L83SlfhvtY) - [CODEPEN](https://codepen.io/jangka44/pen/LYBYNZm?editors=1000) ## return false; 의 의미 ```html 링크 링크 ``` # 15강 : 채팅폼이 발송되기전에 폼체크 - [영상 - 22 12 19, ken 11504, 15강, 채팅폼이 발송되기전에 폼체크](https://youtu.be/pH30ewWrW3o) - [CODEPEN](https://codepen.io/jangka44/pen/xxJxVgY?editors=0010) # 16강 : POST 방식으로 채팅 메세지 전송 - [영상 - 22 12 19, ken 11504, 16강, POST 방식으로 채팅 메세지 전송](https://youtu.be/2yMNmjT6-Jo) - [CODEPEN](https://codepen.io/jangka44/pen/wvxvGqB?editors=0011) - [https://jsonplaceholder.typicode.com](https://jsonplaceholder.typicode.com) ## ajax 유틸리티 함수 ```js function fetchPost(url, data) { return fetch(url, { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(data), }) .then(response => response.json()) } function fetchGet(url, data) { let query = Object.keys(data) .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) .join('&'); return fetch(url + "?" + query, { method: "GET", headers: { "Content-Type": "application/json", "Accept": "application/json" } }) .then(response => response.json()) } ``` # 17강 : fetchGet 사용법 - [영상 - 22 12 19, ken 11504, 17강, fetchGet 사용법, 1부](https://youtu.be/VlHRnLi9TQQ) - [영상 - 22 12 19, ken 11504, 17강, fetchGet 사용법, 2부](https://youtu.be/uNifs6KiyPo) - [CODEPEN - 1부](https://codepen.io/jangka44/pen/yLqLOKb?editors=0010) - [CODEPEN - 2부](https://codepen.io/jangka44/pen/dyjyMQr?editors=0010) # 18강 : 채팅방, 채팅메세지 작성폼의 내용을 fetch 함수로 POST 요청 - [영상 - 22 12 19, ken 11504, 18강, 채팅방, 채팅메세지 작성폼의 내용을 fetch 함수로 POST 요청](https://youtu.be/dI8N8j14aYQ) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/0da1a8da04b41b1a8673f94a4104241126956a99) # 19강 : 채팅 메세지들을 가져오기, 수동방식 - [영상 - 22 12 19, ken 11504, 19강, 채팅 메세지들을 가져오기, 수동방식](https://youtu.be/jhpgcbRSFZY) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/2c4aead26512b87965795af1bdacda805286f47b) # 20강 : 채팅 메세지들을 가져오기, 0.5초 마다 요청, 자동방식 - [영상 - 22 12 19, ken 11504, 20강, 채팅 메세지들을 가져오기, 0.5초 마다 요청, 자동방식](https://youtu.be/1h71gjNrQ6A) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/84b51066bce5e1bb71e7b22091b5a338854c101a) # 21강 : SSE 클라이언트 작업 - [영상 - 22 12 19, ken 11504, 21강, SSE 클라이언트 작업](https://youtu.be/PrQ756skj_M) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/db614a8e7b3f791e258ae7f9396dca6e348bca1e) # 22강 : SSE 백엔드 작업 - [영상 - 22 12 19, ken 11504, 22강, SSE 백엔드 작업](https://youtu.be/jhsynwkidLM) - [GIT](https://github.com/jhs512/app_2022_12_19__1/commit/4730f32027c9b31bb1c2dff31f5da6cff0347840) # 23강 : JPA의 OSIV와 SSE는 궁합이 좋지 않습니다. - [영상 - 22 12 19, ken 11504, 23강, JPA의 OSIV와 SSE는 궁합이 좋지 않습니다.](https://youtu.be/wLFETK7NIdc) - [리포지터리 - 특정 URL로 접속했을 때에만 OSIV 끄는 설정을 적용한 프로젝트](https://github.com/jhs512/osiv-exclude-pattern) ## src/main/resources/application.yml ```yml ... custom: jpa: open-in-view: exclude-patterns: /post/detail, /post/detail2 ``` ## src/main/java/com/ll/app_2022_12_05/bounded_context/base/Config.java - 방법 1 ```java package com.ll.app_2022_12_05.bounded_context.base; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.autoconfigure.condition.ConditionalOnClass; import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean; import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication; import org.springframework.boot.autoconfigure.orm.jpa.JpaProperties; import org.springframework.boot.autoconfigure.web.servlet.ConditionalOnMissingFilterBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter; import org.springframework.orm.jpa.support.OpenEntityManagerInViewInterceptor; import org.springframework.web.servlet.config.annotation.InterceptorRegistration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import java.util.List; @Configuration public class Config { @Configuration(proxyBeanMethods = false) @ConditionalOnWebApplication(type = ConditionalOnWebApplication.Type.SERVLET) @ConditionalOnClass(WebMvcConfigurer.class) @ConditionalOnMissingBean({OpenEntityManagerInViewInterceptor.class, OpenEntityManagerInViewFilter.class}) @ConditionalOnMissingFilterBean(OpenEntityManagerInViewFilter.class) @ConditionalOnProperty(prefix = "spring.jpa", name = "open-in-view", havingValue = "true", matchIfMissing = true) protected static class JpaWebConfiguration { @Value("${custom.jpa.open-in-view.exclude-patterns}") private List excludePatterns; private static final Log logger = LogFactory.getLog(Config.JpaWebConfiguration.class); private final JpaProperties jpaProperties; protected JpaWebConfiguration(JpaProperties jpaProperties) { this.jpaProperties = jpaProperties; } @Bean public OpenEntityManagerInViewInterceptor openEntityManagerInViewInterceptor() { if (this.jpaProperties.getOpenInView() == null) { logger.warn("spring.jpa.open-in-view is enabled by default. " + "Therefore, database queries may be performed during view " + "rendering. Explicitly configure spring.jpa.open-in-view to disable this warning"); } return new OpenEntityManagerInViewInterceptor(); } @Bean public WebMvcConfigurer openEntityManagerInViewInterceptorConfigurer( OpenEntityManagerInViewInterceptor interceptor) { return new WebMvcConfigurer() { @Override public void addInterceptors(InterceptorRegistry registry) { InterceptorRegistration interceptorRegistration = registry .addWebRequestInterceptor(interceptor); if (excludePatterns != null) { interceptorRegistration.excludePathPatterns(excludePatterns); } } }; } } } ``` ## src/main/java/com/ll/app_2022_12_05/bounded_context/base/CustomWebMvcConfigurer.java - 방법 2 : 더 간편한 방법 ```java package com.ll.app_2022_12_05.bounded_context.base; import org.springframework.orm.jpa.support.OpenEntityManagerInViewInterceptor; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CustomWebMvcConfigurer implements WebMvcConfigurer { @Value("${custom.jpa.open-in-view.exclude-patterns}") private List excludePatterns; @Autowired private OpenEntityManagerInViewInterceptor openEntityManagerInViewInterceptor; @Override public void addInterceptors(InterceptorRegistry registry) { registry.addWebRequestInterceptor(openEntityManagerInViewInterceptor) .excludePathPatterns(excludePatterns); // 특정 URL 패턴 제외 } } ```

? 선택 - 스프링부트 - AJAX, 웹소켓(스톰프)로 구현하는 멀티 채팅방