본문 바로가기

분류 전체보기372

[Spring] 스프링 Optional 클래스를 이용한 null 쿼리스트링 처리 RequestParam은 기본적으로 해당 주소에 쿼리 파라미터가 없을 경우 해당 메서드를 실행시키지 않는다. 그러나 RequestParam의 requered를 false로 주면 쿼리 스트링이 없을 경우에 해당 값에 null을 넣게 된다. 이럴 때 Optional을 이용하여 처리 가능하다. 아래와 같이 처리할 경우 /chatBoot 이라는 경로로만 들어온다면, message에 null이 들어가게 되고, orElseGet의 결과에 따라 newMessage에는 "안녕"이 들어가 null 쿼리 스트링 처리가 가능해진다. @GetMapping("/chatBoot") public String chatBoot(@RequestParam(required = false) String message) { Optional u.. 2023. 8. 21.
[js]인풋으로 사진 입력받아 띄우기 let file = document.frm.fileInput.files[0] URL.createObjectURL(file) 위 코드를 사용하여 frm라는 이름의 폼 내의 fileInput이라는 인풋 태그의 파일에 접근한다. URL.createOnjectURL은 블롭이나 파일 객체를 URL형식으로 변환해준다. 즉, 두 번째 줄 코드 결과로 나오는 url 값을 img태그의 scr에 넣으면 사진이 나온다! 2023. 8. 18.
[React] Axios로 폼 데이터 제출 예제 코드/파일 제출 폼 데이터 제출 예제 코드이다. name으로 접근하여 파일을 받아와 제출한다. const onSubmit = (e) =>{ e.preventDefault(); let formData = new FormData(); formData.append('uploadFile', document.frm.uploadFile.files[0]); // send axios.post("http://localhost:3000/fileUpload", formData) .then(res=>{ //처리 }) .catch(e=>{ alert(e); }) } 위 코드는 아래의 폼에 frm이라는 name으로 접근하여 uploadFile의 name으로 접근한 후 파일을 받아와 제출한다. 아래 형태로 @RequestParam으로 값을 받을 .. 2023. 8. 17.
[React] 리액트 페이지 전환 구현 예제 코드/Router로 페이지 전환 리액트 페이지 전환 우선 관련 모듈을 설치한다. npm install react-router-dom 임포트 해서 사용할 모듈들은 아래와 같다. import {BrowserRouter, Routes, Route, Link} from 'react-router-dom' 사용법은 우선 BrowserRouter로 전체를 감싸준다. Link를 통해 a태그와 비슷하게 url을 변경한다. Route를 통해 url에 매핑된 값을 보여주도록 한다. *리액트에서 페이지를 이동할 떄는 앵커 태그가 아닌 링크()태그를 사용하여야한다. 앵커 태그의 href으로 페이지를 이동하는 상태값을 잃고 속도가 저하되는 등의 문제가 있기 때문이다. *마찬가지로 location.href 역시 꼭 필요한 경우가 아니라면 다른 방법으로 url을 .. 2023. 8. 10.