Project (31) 썸네일형 리스트형 Chats 프로젝트 (7) - OAuth2.0, Login 로그인 화면을 메인화면으로 변경하고 로그인 버튼에 API 연동을 진행 해보겠습니다. 로그인 화면을 메인으로 진행하는건 index.html 파일을 해당 로그인에 사용하던 페이지로 변경하면 됩니다. login.js document.querySelector('.login-form').addEventListener('submit', function(event) { event.preventDefault(); // 폼의 기본 제출 동작 방지 const username = document.getElementById('username').value; const password = document.getElementById('password').value; const loginData = { email: username.. Chats 프로젝트 (6) - JWT, Login, Redis 저번엔 서비스까지 작성을 하고 컨트롤러를 작성하지 않았는데 이번엔 컨트롤러를 작성하고 테스트까지 진행해보려고 합니다. 이후에 AccessToken과 RefreshToken을 Redis에 저장하고 관리하는 부분에 대해서도 작성하려고 합니다. LoginController.java @Slf4j @RestController @RequiredArgsConstructor public class LoginController { private final LoginService loginService; private final CommonService commonService; @PostMapping("/login") @ResponseStatus(HttpStatus.CREATED) public ResponseEntity.. Chats 프로젝트 (5) - Spring Security, Login 회원 가입만 구현되서 로그인을 구현을 하던 도중 이제 곧 시작하는 프로젝트에서 채팅에 관련된 프로젝트를 진행한다고 얘기가 나왔습니다. 웹소켓을 사용하여 프로젝트를 진행을 해본 적이 없어서 급하게 노선을 변경하여 채팅을 할 수 있는 프로젝트를 구현하기로 했습니다. 일단 구현을 진행하기에 앞서 채팅에는 유저의 정보에 많은 값이 필요하지 않다고 생각하고 주소도 필요 없다고 생각이 듭니다. 그래서 ERD 를 먼저 변경을 해보도록 하겠습니다. 전화번호도 필요 없다고 생각하지만 기존에 회원 가입에서 구현을 해둔 부분이여서 그대로 냅두고 주소만 삭제를 해주겠습니다. 이런 상태로 일단 화면을 먼저 구성을 하고 회원가입 및 로그인까지 구현을 하게 하고 로그인을 구현을 해주도록 하겠습니다. Redis를 사용하여 토큰을 관.. Chats 프로젝트 (4) - Spring Security, Signup 이번엔 먼저 전화번호 길이 제한을 진행하고 회원 가입 버튼을 통해 회원 가입 API 연동을 진행하도록 하겠습니다. 전화번호 입력 필드를 다음과 같이 수정을 합니다. 그리고 filter.js를 추가해줍니다. filter.js document.getElementById('phone').addEventListener('input', function (e) { this.value = this.value.replace(/[^0-9]/g, ''); }); 이렇게 하면 필드에 숫자만 입력이 가능하도록 만들졌습니다. 그러면 이제 각 필드의 값을 받아 회원가입 버튼을 누르면 API를 불러오게 해보겠습니다. fetch를 사용하여 API 통신을 하도록 하겠습니다. signup.html 회원가입 중복 확인 중복 확인 대문자 .. Chats 프로젝트 (3) - logack, Signup 이번엔 스프링부트 로그 파일 설정과 회원 가입 API 생성을 해보도록 하겠습니다. 물론 회원가입을 하기 위한 ERD도 작성을 하겠습니다. 로깅을 위해 logback-spring.xml 설정을 하겠습니다. ${CONSOLE_LOG_PATTERN} ${FILE_LOG_PATTERN} ./log/%d{yyyy-MM-dd}.%i.log 100MB 30 다음과 같이 logback-spring.xml을 설정했습니다. 그리고 이제 회원 가입을 위한 Entity, Controller, Service, Test 등을 작성해보도록 하겠습니다. 회원 가입을 위해 받는 정보는 이메일, 패스워드, 우편번호, 주소, 상세주소, 전화번호가 들어오게 됩니다. (원래는 참고사항도 있었지만 불필요하여 제거했습니다. 참고해주세요) 여기서.. Chats 프로젝트 (2) - Signup 이번에는 회원가입 페이지와 회원가입 API를 만들어보도록 하겠습니다. 먼저 회원가입 페이지를 만든 후 스프링 시큐리티와 로그 설정을 한 후에 API를 만들어보겠습니다. signup.html 회원가입 중복 확인 중복 확인 대문자 포함 숫자 포함 특수문자 포함 8~20자 이내 우편번호 찾기 회원가입 signupPage.css body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .signup-container { background: white; padding: .. Chats 프로젝트 (1) 프로젝트를 시작하기 위해 스프링부트 프로젝트를 생성합니다. - Spring Boot : 3.2.1 , Openjdk : 21, Gradle : 8.5 을 사용합니다. - 필요한 dependency를 추가 합니다. - 추후에 필요한 부분은 따로 추가를 할 예정이고 현재는 이렇게만 추가 하도록 하겠습니다. gitignore.io Create useful .gitignore files for your project www.toptal.com 스프링부트를 생성을 할 때 기본적인 gitignore을 추가를 해주긴 하지만 저는 MacOS, Window 등 더 다양한 설정을 하기 위해서 따로 추가를 해주도록 하겠습니다. 저는 Java, Gradle, Intellij+all, VisualStudioCode, MacOS.. 이전 1 2 3 4 다음
