수업내용/프로젝트 11

[Spring/Security] Web socket 을 이용한 채팅기능

개발환경 spring boot spring security maven 웹 소켓(Web Socket)이란? HTTP와는 다른 통신 프로토콜로 웹 서버와 웹 브라우저가 서로 동시에 실시간으로 데이터를 송수신 처리할 수 있는 양방향 통신 방법 (채팅, 게임, 메타버스 등!!) * HTTP 프로토콜과 다른 점 - 연결 유지 : 연결이 한번 수립되면 지속적으로 유지 -> 양방향 (HTTP는 요청-응답 후 연결 종료 -> 단방향) - 실시간 통신 : 연결 유지 -> 서버가 데이터 보내면 클라이언트는 즉시 데이터 수신 가능 (HTTP는 클라이언트가 서버에 요청을 보내야 서버가 응답을 전송할 수 있음) - 이진 데이터 전송 : 이진 데이터(텍스트, 이미지, 비디오 등 다양한 형식 가능) 전송 가능 (HTTP는 텍스트 ..

[Spring/Security] 소셜 로그인

개발환경 eclipse Spring Security Maven jsp 0. 소셜 로그인 과정 OAuth2 : 외부 서비스로 소셜 로그인을 이용해 사용자 연동 처리 하는 프로토콜 카카오에서 발급받은 REST API 키를 애플리케이션에 전달해 인가코드 받음 → 받은 인가코드를 ‘리다이렉트 URI’로 지정된 곳으로 전달 → 인가코드 + 비밀키 = Access Token 생성 → 액세스 토큰으로 사용자 인증 → 사용자 정보 제공 → 사용자 정보를 데이터베이스에 저장 → 취득된 사용자 정보 로그인 완료 1. 라이브러리 설정 org.springframework.boot spring-boot-starter-oauth2-client 2. application.yml 설정 따로 분리 : 보안 설정한 것은 gitignor..

[Spring] fullcalendar 적용하기 (async/await, lodash 사용)

Fullcalendar - ajax로 db에 있는 일정을 가져와서 달력에 표시 - 일정 별로 색상 적용 0. 라이브러리 추가 https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 1. 기본 달력 표시 * jsp에 달력이 들어갈 위치 지정 * 기본달력 표시 // 달력 API let calendarEl = document.getElementById("calen..

[Spring/mybatis] resultMap (한 아이디에 해당하는 항목리스트 불러오기)

이런식으로 회원 한 명당 그 회원이 신청한 수업리스트를 셀렉트박스로 표현하기 * 화면에 표시되는 항목들로 구성한 Dto * view - userList 에는 UserListDto - user.programs 리스트에서 forEach를 돌아줌 - user.programs는 FitnessProgram 객체의 리스트 -> prog(FitnessProgram 객체)의 no, name을 표시 * userList.xml - resultMap의 사용 : FitnessProgram의 컬렉션을 가진 UserListDto의 매핑 - "getUserListDto" sql의 resultType이 원래 UserListDto 인데, 얘는 또 Program의 컬렉션을 가져야 하기 때문에 resultMap에 "UserListResu..

[Spring/mybatis] 검색, 정렬기능

검색, 정렬기능 - 프로그램명과 검색어는 입력하지 않아도 form 전송이 되도록 함 - 페이지 이동할 때 검색조건, 정렬방식을 유지한 채로 페이지 이동 - 검색, 정렬할 때마다 기본 1페이지, 기본 회원번호순 정렬로 이동 - 검색한 상태에서도 정렬 가능, 정렬한 상태에서도 검색 가능 - 페이징처리 이 왕감자에게는 너무 빡셌다 완벽하다 ㅡㅡ * view (중요) 회원정보 조회 프로그램명 선택 ${program.name } 검색 회원삭제 sms 전송 회원번호순 최근등록순 이름순 회원번호 이름 성별 생년월일 연락처 수업명 등록된 회원이 없습니다. ${user.no } ${user.name } ${user.gender } ${user.tel } ${prog.name } 총 ${totalRows }명 이전 ${n..

[Spring] String joiner 요일 리스트를 테이블 한 칸에 표시하기

수업 요일에 위와 같이 수업에 해당하는 요일이 한 칸에 표시되도록 하기 프로그램 별 할당된 요일은 다음과 같다 * 요일 객체 ProgramDay * 위의 테이블에 표시되는 내용을 담은 객체 ClassRegHistoryDto - openDay 변수를 그대로 쓰면 같은 크로스핏 수업인데 화요일 따로, 목요일 따로 행이 생겨버린다 - StringJoiner : 문자열에 구분자를 붙이는 객체 쉼표(",")를 구분자로 한다 - 프로그램별 요일 리스트인 openDay 리스트에서 ProgramDay 객체의 요일을 나타내는 day를 구한다 joiner 문자열에 합쳐준다 * UserService * UserController * view - 수업요일 칸에는 ClassRegHistoryDto 객체에서 정의한 openDay..

[Spring/Security] 사용자/관리자 로그인 따로 처리하기 (시큐리티 커스텀)

* 시큐리티 인증 절차 * 시큐리티 흐름 * 로그인 과정 로그인 폼 요청 경로는 따로, 로그인 처리는 한 곳에서 ("/login") 0. 로그인폼 - action="/login" - 히든필드에 userType 담아서 보내기 - error=fail 일 때 문구 넣기 * user의 login-form * employee의 login-form 1. security.vo * LoginUser 객체 package com.example.security.vo; import com.example.vo.User; import lombok.Getter; import lombok.Setter; @Getter @Setter public class LoginUser { private String id; private Strin..

[Spring boot] 프로필 사진 업로드, 미리보기

* Spring boot * maven 프로필 사진 업로드 * pom.xml 라이브러리 의존성 추가 * UserRegisterForm 객체에 첨부파일 변수 선언 - MultipartFile upfile : 임시파일 정보 저장 - String photo : 파일명 저장 * form에서 enctype 설정 * javascript에서 버튼 클릭 이벤트 * Controller 업로드된 파일 처리 업로드된 파일을 읽어서 지정된 디렉토리에 저장 1. userRegisterForm으로 MultipartFile 객체를 가져옴 (MultipartFile은 업로드된 파일을 나타내는 Spring의 인터페이스) 2. 파일이 존재하는 경우, MultipartFile의 getOriginalFilename() 메소드를 호출해서 업..