프로그래밍 75

[Spring] CORS 에러

CORS (Cross-Origin Resource Sharing) 서로 다른 Origin(출처)끼리 요청을 주고 받을 수 있게 정해둔 표준, 보안 정책 Origin : 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐놓은 것 ex) URL CORS 에러 리액트와 스프링 사이에서 데이터를 전달하는데 CORS 정책 위반으로 에러가 발생했다. CORS를 설정해주지 않았거나 제대로 설정하지 않아 원하는 리소스를 공유하지 못 하는 것이다. CORS 에러 해결 방법 @CrossOrigin 어노테이션을 사용하여 해결했다.

[React] 로그인/로그아웃 유지하기 ( sessionStorage, localStorage)

header {(sessionStorage.getItem("isLogin") === null) ? 로그인 : 로그아웃 } login if(this.state.studentId && this.state.password) { axios.post("/logIn", { studentId: this.state.studentId, password: this.state.password }) .catch(function(error){ alert("학번 또는 비밀번호를 다시 확인해주세요."); }) .then((response) => { let id = response.data.studentId; let pw = response.data.password; console.log(id, pw); if(id === this...

[React / Spring] 리액트에서 스프링으로 데이터 전송

아래 링크의 회원가입 데이터 전달 기준으로 설명 Vo, DAO, Service는 다 작성되었다고 가정 [회원가입] 1. 만들기 Email address We'll never share your email with anyone else. Password Check Password Submit 참고 https://react-bootstrap.github.io/forms/overview/ 2. state 추가 input에 작성된 값을 받기.. wldwlddl59.tistory.com React 1. 아래 명령어 입력해 설치 npm install axios --save npm install http-proxy-middleware --save 2. import axios from 'axios' 추가 3. 값 넘길..

[React] 회원가입

1. 만들기 Email address We'll never share your email with anyone else. Password Check Password Submit 참고 https://react-bootstrap.github.io/forms/overview/ 2. state 추가 input에 작성된 값을 받기 위해서 state 추가가 필요하다. constructor(props) { super(props); this.state = { email: "", password: "", checkPw: "" }; } 3. handleChange 함수 추가 input 필드에서 작성된 데이터를 state에 넣어주는 과정 [name] : 객체 안에서 key를 []로 감싸면, [] 안의 값이 가리키는 실제 값..

[게시판] 10. 검색 기능 구현

본 게시물은 아래 링크를 정리한 내용입니다. Coala Spring Study A new tool for teams & individuals that blends everyday work apps into one. eminent-track-b16.notion.site 1. boardMapper.xml에서 listPage와 listCount 수정 및 동적 쿼리 sql문 추가 SELECT BNO, TITLE, CONTENT, WRITER, REGDATE FROM ( SELECT BNO, TITLE, CONTENT, WRITER, REGDATE, ROW_NUMBER() OVER(ORDER BY BNO DESC) AS RNUM FROM MP_BOARD WHERE 1=1 ) MP WHERE RNUM BETWEEN..

[게시판] 9. 페이징 구현

본 게시물은 아래 링크를 정리한 내용입니다. Coala Spring Study A new tool for teams & individuals that blends everyday work apps into one. eminent-track-b16.notion.site 페이징 게시판 글 목록의 갯수를 제한하는 것 1. 더미용 데이터 쌓기 쿼리박스에서 아래 코드 실행 insert into mp_board(bno, title, content, writer) select mp_board_seq.nextval, title, content, writer from mp_board; commit; 위의 코드를 한 번 실행할 때 마다 현재 데이터의 갯수의 2배로 늘어난다. 2. 게시글 10개씩 출력 쿼리 boardMap..