본문 바로가기

2023년

(25)
[팀프로젝트] datepicker / Timepicker 적용하기 https://timepicker.co/ jQuery Timepicker jQuery Timepicker is a plugin to help users easily input time entries. It can parse the most used time representations allowing you and your users to enter time using their prefered way for writing it. Also, if writing is not your thing, you can also choos timepicker.co 사용하라고 편하게 설명되어있다. 헤더부분에 다음과 같은 소스를 추가해주고 jquery-ui 와 jquery , jquery.js 를 받아와준다. html ..
[팀프로젝트] STOMP 활용한 프로젝트 채팅방 구현 프로젝트 간 구현해야될 내용이나 발생한 이슈들에 대해서의 자세다. 불편하니까 고쳐앉고 정신차리도록 하자 STOMP 활용한 실시간 채팅 구현 STOMP 가 뭐지? Simple Text Oriented Messaging Protocol 의 약자. WebSocket 위에서 동작하는 텍스트 기반 메세징 프로토콜이다. 클라이언트와 서버가 전송할 메세지 유형, 형식, 내용들을 정의하는 매커니즘 STOMP는 HTTP 위에서 동작하는 Frame 기반 프로토콜 Frame 은 아래와 같은 형식을 가짐 COMMAND header1:value1 header2:value2 Body^@ Frame 이란 Frame : 통신 상 가장 작은 단위 Message : 다수의 Frame 으로 이루어진 구조 Stream : 클라이언트 - 서..
[팀프로젝트] Spring Boot에서 jwt + 쿠키를 활용한 로그인 구현과 비동기 방식 처리 spring boot 에서 jwt 토큰을 발급 받은 뒤 어떤식으로 처리하면 좋을까에 대한 생각을 적은 글 주의 : 이론적 설명을 제외하고 어떻게 사용할까에 대한 담은 글입니다. 참고용도로만 적용해주시고 실무에서는 꼭 보안규칙을 따져가면서 꼼꼼히 작성하셔야합니다! jwt 토큰은 user 정보가 들어있기 때문에 매우 신중히 고려해서 다뤄줘야됨 구글링으로 찾은 내용으로,, jwt 를 저장하는 방식으로는 1. 로컬스토리지 저장 2. 쿠키에 저장 +a. httpSession 활용 간략히 이렇게 나타나 있는데, 각자의 장단점 및 이론에 대해서는 추후 정리하고 일단 어떻게 사용하는지에 대해서 설명함. 보통 jwt 값이 백엔드에서는 위와 같이 리턴되게 될텐데 (jwt 를 string 방식으로 반환해준 것) 로컬 스토리..
[팀프로젝트] 비동기 방식 통신 + 스프링부트 RestController 활용한 웹 페이지 보호되어 있는 글입니다.
[팀프로젝트] 깃허브 워크플로우
[팀프로젝트] Springboot 사용하면서 UI 화면은 어떻게 처리하면 좋을까? 현재까지 배운 것들로는 springboot 안의 템플릿엔진인 thymeleaf 나 mustache 를 사용하고 Controller 에서 view 를 return 해주는 방식으로 진행하고 있었습니다. 보여지는 화면은 정적인 내용들이여서 실시간 알림, CRUD 가 발생하면 최신화 등 동적인 화면페이지를 만드는데에 한계를 느꼈습니다. 원하는 것은 이리저리 화면이 동적으로 움직이며 생동감 있는 프로그램을 만들어보고 싶었고 어떻게 하면 처리할 수 있을까란 고민에, 프론트엔드에 관련해서 찾아보게 되었습니다. 확실히 프론트엔드를 이해하면서 REST API 의 필요성과 프론트와 백엔드 차이점을 이해했습니다. 기초적인 지식일지 모르겠지만 우물안 개구리가 밖에 나와서 처음 마주한 강아지를 본 느낌을 받았고, 조금 더 열심..
[팀프로젝트] SpringBoot + webSocket 으로 간단한 채팅창 만들기 SpringBoot + webSocket 으로 간단한 채팅창 만들기 웹 소켓을 활용해 실시간 채팅 기능 구현하기 프로젝트에서 사용자들이 모임을 이루어 모임 내에서 실시간 채팅을 할 수 있도록 구현 개념 정리 웹 소켓이란? RFC 6455 명세서에 정의된 프로토콜인 웹소켓(WebSocket)을 사용하면 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있습니다. 이때 데이터는 ‘패킷(packet)’ 형태로 전달되며, 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이뤄집니다. 이런 특징 때문에 웹소켓은 온라인 게임이나 주식 트레이딩 시스템같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 아주 적합합니다. Web Browser에서 Request를 보내면 Server는 Response를..
[팀프로젝트] SpringBoot 좋아요 기능 구현 ( UI 는 없음 ) SpringBoot RestAPI 좋아요 기능 구현 ( UI 는 없음 ) 이슈로 좋아요 기능 구현 역할 환경 설정 목표 ) 1개의 게시글을 1명의 유저가 좋아요를 하는 기능을 개발 IDE : IntelliJ 2023 Language : Java 11 SpringBoot : 2.7.7 외 내용 Gradle 참고! build.gradle plugins { id 'java' id 'org.springframework.boot' version '2.7.7' id 'io.spring.dependency-management' version '1.0.15.RELEASE' } group = 'teamproject' version = '0.0.1-SNAPSHOT' sourceCompatibility = '11' conf..