본문 바로가기

SpringBoot27

[Spring, React] useEffect를 사용해서 새로고침해도 저장된 고객정보가 보이도록 페이지에 반영해보자 고객 명단 화면을 띄우면 DB에 저장된 명단을 가져와 보여줘야한다.그러나 새로고침을 하거나 다시 탭에 들어오면DB에 정보가 저장되어 있어도 화면에 가져오지 못한다.그래서 이 부분을 개선해보고자 한다. 1. 환경설정프론트엔드 = React + Vite +WebStorm백엔드 = Spring + IntelliJDB = MySQL + MySQLWorkbench 2. 문제점화면sori를 추가하여 저장했다. MySQLWorkbench를 살펴보면 제대로 저장되어있다. 이제 다시 화면으로 돌아가서 새로고침을 했다. 등록됐던 sori가 사라졌다. 하지만 여전히 MySQLWorkbench에는 잘 저장되어있는 상태였다. 왜 이런 문제가 발생한걸까? 원래 코드// 화면에 보여줄 고객 목록const [rows.. 2025. 12. 18.

[Spring, React, Vite] 스프링과 리액트 연결하기_ React에서 CORS 해결하는 방법과 Spring에서 CORS 해결하는 방법, Security 해결 방법 스프링과 리액트를 서로 연결할 것이다.검색을 하면 React에서 연결하는 방법이 많이 나온다.그러나! 나는 Spring에서 연결하는 방법도 궁금하다.그래서 둘 다 알아볼 것이다. 1. 환경프론트엔드 → React + Vite React랑 Spring 연결하는 방법을 검색하면 보통 CRA 방식이 많이 뜬다. CRA는 Create React App으로 여러 도구를 하나의 권장 설정으로 통합하여 기존에 갖고 있던 React의 문제점을 해결하고 있었다. 그런데 리액트에서 사용을 중단했다. 그렇다고 안되는 것 같진 않은데, 고성능 프로덕션 앱 구축을 어렵게 하는 몇가지 제한이 있어서 CRA 사용을 중단하고 기존 앱은 프레임워크나 Vite, Parcel, RSBuild 같은 빌드 도구로의 마이그레이션을 권장.. 2025. 12. 17.

[Spring, React] 👑 VIP 초대장 만들기 💌 어디까지 했는지 확인하기. 1. 화면 고객 관리자 2. 점검하기 갑자기 경미한 수술을 받게 되어 3주간 쉬었다. 중간중간 조금씩 수정은 했지만, 수술 부위 때문에 앉아있기가 힘들어서 거의 못했고 최근에 3시간 정도 한 게 다였다. 거기다가 살도 잘 안 붙어서... 계속 피나고 남들보다 일주일 정도 더 치료를 받아야 했다. 아무튼 이제 거의 다 나았다고 자부할 수 있다!!! 멈췄던 프로젝트를 다시 시작하기 위해 내가 해야 할 게 무엇인지, 고쳐야 할 게 뭐였는지 복하려 한다! 프론트랑 백엔드 연결아직 백엔드랑 프론트를 연결하지 못했다. 관리자가 관리자 페이지에서 명단을 추가하거나, 수정하거나, 삭제하는 동작을 백엔드(스프링)에서 이뤄지도록 할 예정이다. 그리고 지금까지 해본 결과 Vue랑 생각보다 달라서 너무 무작.. 2025. 11. 26.

[Spring, React] 👑 VIP 초대장 만들기 💌 어떻게 만들지 구상해보기. 연말을 맞이하여VIP 등급 이상 고객분들께초대장을 보내려고 한다!어떻게 만들지 구상해 보자. 1. 구상화면 - 고객고객님이 접속할 화면고객은 해당 페이지에서 미리 받은 비밀번호 4자리를 입력한다. 그러면 고객의 등급에 맞는 페이지로 이동한다. 등급은 총 3개로 되어있다. VIP, VVIP, DIAMOND 코드 성공 화면고객이 제대로 된 코드를 입력할 경우, 고객의 이름이 표시되면서 페이지로 이동한다. 코드 실패 화면코드에 실패하게 되면 코드를 다시 확인해 달라는 문구가 하단에 배치된다. - 관리자로그인 화면id에 따라 관리자의 권한이 달라진다. VIP 명단 관리 예시 명단의 개수는 30명으로 잡았으며 VIP 10명, VVIP 10명, DIAMOND 10명이 된다. 명단 추가add 버.. 2025. 10. 21.

[Spring, Vue.js] 카카오 간편 로그인 만들기④ - 사용자 정보 조회해서 닉네임 읽어오기 (REST API) [Spring, Vue.js] [Spring, Vue.js] 카카오 간편 로그인 만들기③ - Spring으로 토큰 교환하기 (REST API)[Spring, Vue.js] 카카오 간편 로그인 만들기② - Vue로 프론트엔드 작성하기 (REST API)[Spring,Vue.js] 카카오 간편 로그인 만들기 ① - 구조와 흐름 파악하고 카카오 디벨로퍼스 설정하기카카오 간편 로그post-this.tistory.com 카카오에게 토큰을 받아왔다.받아온 토큰으로 사용자의 정보를 읽어오자! 1. 화면로그인 성공 메인화면(닉네임 O) 2. 전체 코드package 여러분걸로 넣으세요 &_&import org.springframework.beans.factory.annotation.Value;im.. 2025. 9. 30.

[Spring, Vue.js] [Spring, Vue.js] 카카오 간편 로그인 만들기③ - Spring으로 토큰 교환하기 (REST API) [Spring, Vue.js] 카카오 간편 로그인 만들기② - Vue로 프론트엔드 작성하기 (REST API)[Spring,Vue.js] 카카오 간편 로그인 만들기 ① - 구조와 흐름 파악하고 카카오 디벨로퍼스 설정하기카카오 간편 로그인을 만들어보자!먼저 어떻게 만들어야하는지 구조와 흐름을 파악하고카카오post-this.tistory.com 프론트엔드까지 작성했다.이제 백엔드로 넘어와서 토큰 교환까지 만들어보자! 1. 화면로그인 성공 메인화면 (닉네임 O) 2. 전체 코드package 여러분걸로 넣으세요 &_&import org.springframework.beans.factory.annotation.Value;import org.springframework.http.*;im.. 2025. 9. 28.

이전 1 2 3 4 5 다음

티스토리툴바