PROJECT

⌨️ Vue.js 로이 전환 타임리프에서 Vue.js로 CSR 방식으로 전환하며 프런트에 대해 거의 깊이가 없어 많이 힘들었던 것 같다. 1. 회원가입/로그인 타임리프에서 Vue.js로 바꾸는 것만 해도 많은 공수가 들었어서 꽤 힘들었다. Vue.js에 대한 자세한 공부는 차차 포스팅 하도록 하겠다. 1.1. 회원가입 ISSUE 주소 찾기를 통해 건네준 데이터가 null로 들어가는 현상 -> 문제 상황 실제로는 null로 들어가는 것이 아니라 애초에 전달이 되지 않았다. 해당 문제는 Vue.js 에서 DOM을 직접 조작할 경우 생기는 문제로 데이터 바인딩이 되지 않는 것이 원인이었다. AS-IS function searchAddr() { new daum.Postcode({ oncomplete: funct..

⌨️ Thymeleaf+Ajax 구현 이 부분은 나의 최대의 약점이었다. 이전에 과제에서도 SPA 형식의 웹 애플리케이션 구현을 받았는데, 미흡하게 제출을 하였었고, 그때의 기억을 기반하여 언젠가 극복하자고 생각했던 부분이 이번에 해결이 되어 기쁜 마음으로 남긴다. *저는 바닐라 JS를 통해 Ajax를 구현 하였습니다. JQuery와 Axios 를 활용하지 않은 것은 백엔드 개발자로써 간단한 화면에 구성에 필요한 Ajax 통신만을 가벼운 사이즈로 구현하고 싶어서입니다. 1. Thymeleaf ? Servlet, JSP를 지나 최근 많이 사용되는 SSR 방식의 템플릿 엔진이다. 1.1. Thymeleaf를 통해 비동기 처럼 보이게 ? 처음 공부를 시작했을 때 한 강의를 통해 배운 방법이다. 그리고 무지했던..

1. WWW - 함께 걷는 산책로 공유 V1 GitHub - Team5Project/WalkingWithWorld: 오조의 마법사 미니 프로젝트 1차 오조의 마법사 미니 프로젝트 1차. Contribute to Team5Project/WalkingWithWorld development by creating an account on GitHub. github.com - 구현 [PROJECT] KOSA 미니 프로젝트 진행 - (1) WWW 기획 및 소개 ⌨️ KOSA 교육과정 미니 프로젝트 진행 한국소프트웨어산업협회에서 진행하는 풀스택 기반 MSA 개발자 과정의 첫 번째 프로젝트를 진행하게 되었다. 이제 처음부터 구현 한 부분을 정리하고, 새 romanc3.tistory.com [PROJECT] KOSA 미..

⌨️ 로그인 구현 이번 세션 로그인을 구현하며 가장 많이 공부가 된 파트, 그리고 고민을 한 부분이다. 1. 로그인 로직 고민 세션 로그인 자체는 쉽게 기간의 문제 상 쉽게 접근했다. 로그인 시 세션에 로그인한 유저의 정보를 저장하고 필요한 곳에서 가져다 쓰는 간단한 방식으로 구현을 완료했다. 그 와중 해당 방식에서의 많은 중복과 불편함이 발생했기에, Spring Security처럼 필터를 두어 로그인을 처리하기로 했다. 1.1. LoginCheckFilter @Slf4j public class LoginCheckFilter implements Filter { // TODO 로그인이 필요 없는 URL 추가 private static final String[] whiteList = { "/", "/sign..

⌨️ 회원가입/로그인 구현 요즘은 Spring Security를 활용하면 쉽게 회원가입과 로그인을 구현할 수 있다. 그러나 그러한 기술의 필요성과 내가 직접 구현 했을 때의 부족함을 비교해 보기 위해 직접 세션 방식으로 구현해보려 한다 1. 회원가입 많은 양의 정보를 받기보다 우선 필요한 최소한의 정보를 받아서 회원 가입을 구현하려 한다. 1.1. UsersDTO @Getter @Setter @ToString public class UsersDto { private int id; @NotBlank(message = "아이디 입력은 필수입니다.") @Length(max = 30, message = "아이디 길이는 30자 를 넘으면 안됩니다.") private String name; @Pattern(rege..

⌨️ KOSA 교육과정 미니 프로젝트 진행 한국소프트웨어산업협회에서 진행하는 풀스택 기반 MSA 개발자 과정의 첫 번째 프로젝트를 진행하게 되었다. 이제 처음부터 구현 한 부분을 정리하고, 새롭게 배우고 그간 고민 했던 것이 해결 된 부분을 공유하려 한다. 1. 기획 및 사용기술 1.1. 개요 최근 러닝과 걷기 운동 등 일상속에서의 운동을 취미로 하는 사람들이 많아짐에 따라, 해당 취미를 공유하는 사람들을 위한 커뮤니티를 만들고 서로의 경로를 공유하여, 많이 알려진 경로가 아닌 색다른 경로로 산책을 즐길 수 있게 하는 것에 목적을 개발을 결정 1.2. 프로젝트 기간 및 기술 1) 프로젝트 기간 2023.10.13~2023.10.23 2) 사용 기술 Front-end : HTML5, CSS3, JacaSc..

⌨️ 채팅방 생성 및 빌더와 팩토리메서드 패턴에 대한 고민으로 마무리 채팅방 생성을 아직 DB와 연결하지 않았지만 `Entity` 에서 가져다가 쓰는 방식으로 DTO를 만들었고, 그 과정에서 자주 사용하던 팩토리 메서드 방식의 생성 패턴과, 빌더 방식의 생성 패턴에 대한 고민을 하며 마무리하였다. 1. ChatRoom 채팅방 엔티티와 DTO 구현 1.1. ChatRoom import com.example.chat.constant.MessageType; import com.example.chat.service.ChatService; import lombok.*; import org.springframework.web.socket.WebSocketSession; import java.util.HashSet;..

⌨️ Docs 확인과 통신 확인으로 마무리 당초에 공부해야지 하고 기획했다가 이것저것 하다가 많이 미루어져서 이제야 조금 코드를 끄적인다. 1. WebSocket 기존의 단방향 HTTP 프로토콜과 호환되어 양방향 통신을 제공하기 위해 개발된 프로토콜 일반 socket 통신과 달리 HTTP 80 포트를 이용하므로 방화벽에 제약이 없다. 접속까지는 HTTP 프로토콜을 이용 하고 이후에는 WebSocket 프로토콜로 통신 1.1. WebSocket 통신 방식 WebSocket 접속 과정은 TCP/IP 접속 그리고 WebSocket Established Handshake 과정으로 나눌 수 있다. i) WebSocket 열기 Handshake 클라이언트가 먼저 핸드셰이크 요청 -> 서버가 클라이언트에 응답 Han..

개요 1. Spring Boot + WebSocket, STOMP를 활용하여 채팅창 만들기 HTTP 방식이 아닌 WebSocket 방식이 필요한 이유를 이해하고, 해당 방식을 구현하여 실시간 채팅창 만들기 2. 하나의 서버에서 모든 서비스가 제공 되는 것이 아닌 분할하여 서비스를 제공하는 것을 목표로 함 하나의 Spring 서버에서 모든 서비스를 제공하는 것이 아니라, 각각의 서버를 따로 두어 필요하면 합치는 식으로 모듈 형태로 개발해보려 합니다. 예를 들어, 다른 서비스에 채팅창이 필요하다면, 이 채팅창 서비스를 결합한다든지 하는 과정 3. 이번 주 내로 채팅창 구현은 완료하고, 서비스 로직에 대하여 고민해 보거나, 고려할 만한 사항들에 대하여 체크하기 도메인을 작게하여 서비스를 완성시키는 것에 대해 ..