개인프로젝트 30

20240530 모놀리틱)_ajax, 이메일인증 및 submit 제약

전체 코드더보기Reactimport React, {useEffect, useState} from "react";import {NavLink, useNavigate} from "react-router-dom";import axios from "axios";function RegisterPage() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [email, setEmail] = useState(""); const [country, setCountry] = useState(""); const [area, setArea] = useState(""); ..

20240525_React와 Spring Boot 연결(SpringSecurity Login)

우선 알아야 할 것은 기존에 사용하던 SpringSecurity와의 차이이다.1. 팀프로젝트- 모놀리틱- 프론트엔드는 jsp, 백엔드는 java를 사용하며 port 번호가 동일 2. MSA(1차)- MSA- 프론트엔드는 jsp, 백엔드는 java--> SpringSecurity를 사용하는 모듈 자체가 동일 3. 프론트엔드와 백엔드의 분리- 프론트엔드는 React- 백엔드는 자바--> 포트번호가 다름--> SpringSecurity를 사용할 때 프론트엔드에서 인증요청이 백엔드로 넘어간 다음, 인증이 확인되면 프론트엔드로 다시 데이터를 브라우저에 뿌려줌 여기서 큰 차이가 발생하는 것은 1, 2번 vs 3번이다.기존의 SpringSecurity 사용은 동일 모듈에서 사용했기 때문에 쿠키가 저장되는 것은 같은 ..

20240525_옷 출력 필터링

옷 출력 화면에 간단한 필터 기능을 추가했다.1. 카테고리가 기입된 필터를 변경하면 출력되는 옷은 해당 카테고리만 출력된다.2. 옷 수정 화면에서 필터링이 된 상태로 옷을 추가할 경우, 추가한 옷의 카테고리로 자동 필터링 코드더보기jsp 필터: 기본 모자 겉옷 상의 하의 양말 신발 Category Cloth 수정 삭제  js$("#categoryFilte..

20240524_옷 수정하기

기존의 옷 출력 화면은 자바스크립트로 구현되었다. 그래서 옷 수정 버튼 및 수정 작업도 자바스크립트로 작동하는게 편하다...할 수 밖에 없다 인가? 아무 더보기//옷 수정 상태로 변경$(document).on("click", ".updateEvent", function () { var currentRow = $(this).closest("tr") //버튼이 소속된 행을 찾음 var categoryCell = currentRow.find(".category"); //categoryCell 찾기 var clothdataCell = currentRow.find(".clothdata"); //clothd..

20240523_메일 시스템(임시비밀번호 전송, 이메일 인증)

React 공부 및 모놀리틱 프로젝트 구현에 시간을 쓰다보니 오랜만에 기능을 추가했다. 전체코드더보기application.propertiesspring.mail.host=smtp.gmail.comspring.mail.port=587spring.mail.username=이메일spring.mail.password=이메일 코드spring.mail.properties.mail.smtp.starttls.enable=truespring.mail.properties.mail.smtp.starttls.required=truespring.mail.properties.mail.smtp.auth=true MailControllerpackage org.member.mailController;import jakarta.serv..

20240519_퍼센트 인코딩

이전 미세먼지 API를 사용했을 때 URL을 생성하기 위해서는 지역 이름을 퍼센트 인코딩해야 하는 경우가 발생했다. 왜 이런 작업이 발생하는지 확인하고 기능을 구현하는 시간을 가졌다.  1. 퍼센트 인코딩- 글자를 url에서 인식할 수 있는 아스키코드로 변환하는 것- %OO이라는 형태를 가진다. 2. 퍼센트 인코딩을 하는 이유- 인터넷을 통해 전송할 수 있는 문자는 오직 ASCII 문자이기 때문--> 안 그러면 수만 개의 언어를 대응하는 비효율성이 발생한다- 한글을 변환하는 규칙은 UTF-8을 따른다.- 한글은 문자 1개 당 3바이트로 인코딩  3. 예시 4. 퍼센트 인코딩 하기자바에서 자체적으로 기능을 지원해준다. A. jsconsole.log(`[경기] 글자의 퍼센트 인코딩: ${encodeURICo..

20240519_여러 기능 구현(아이디찾기/비밀번호변경/이메일변경/회원탈퇴 등)

1. 아이디 찾기 더보기컨트롤러@PostMapping("/FindUsernameByEmail")public ModelAndView FindUsernameByEmail(String email) { String username = memberService.FindUsernameByEmail(email); ModelAndView view = new ModelAndView(); view.addObject("username", username); view.setViewName("Member/ViewUsername"); return view;} 서비스//유저 아이디 찾기public String FindUsernameByEmail(String email) { Member..

20240518_에러페이지

아주 간단하고 사소한 기능이다.그런데 MSA랑 합쳐지니 이런 금쪽이도 따로 없다... 원래 설계는 이러하다1. 사이트는 공통된 에러페이지를 써야지2. 에러페이지는 core 모듈에 넣어도 되지 않을까?3. 안 되네? 우선 Core 모듈은 가동되지 않고 사용하고 있기 때문에 jsp를 못 불러오는 것 같다...(사실 잘 모르겠다)msa와 spring boot 전반에 대한 지식과 이해를 해야 알 수 있는 부분인데 아직 공부가 부족하다.Thymeleaf로 구현하려고 했으나 왜인지 이미지가 절대로 불러와지지 않는다. weather 모듈의 에러가 core 모듈의 Thymeleaf로 연결되긴 하는데 이미지가 아예 인식이 되질 않는다... 결국 주먹구구식 설계가 되고 말았다.1. 공통된 에러 페이지를 연결하는 컨트롤러와..

20240518_로그인 실패 ajax + 위치 자동 출력&위치에 따른 지역 자동 출력

아주 간단하고 사소한 기능이다.Spring Security Passencoder의 matches에 jpa가 더해졌다는 것 빼고는 팀프로젝트 당시와 동일 더보기컨트롤러@PostMapping("/loginAjax")public boolean loginAjax(String username, String password) { String encodedPassword = memberRestService.findPasswordByUsername(username); if(encodedPassword == null || encodedPassword.isEmpty()) { return false; } return passwordEncoder.matches(password, encoded..

20240518_GPT 답변 구현하기(MSA(3))

더보기GptControllerpackage org.gpt.ask;import com.fasterxml.jackson.core.JsonProcessingException;import lombok.RequiredArgsConstructor;import lombok.extern.slf4j.Slf4j;import org.gpt.GptanswervoDto;import org.gpt.saveAnswer.SaveAnswerService;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;import java.util.List;@RequiredArgsConstructor@Slf4j@Controll..