본문 바로가기

WebStorm18

[Spring, React] Elasticsearch가 무엇일까? 좀 더 다양한 검색 환경을 제공하고 싶어서Elasticsearch를 넣어보기로 했다.그런데 정확히 Elasticsearch가 어떤 것이며, 무슨 기능이 있을까? 1. ElasticsearchElasticsearch는 분산형 RESTful 검색 및 분석 엔진이다.→ 여기서 분산형 RESTful 이란 말이 이해하기 어려울 것 같다. 분산형은 여러 대의 컴퓨터를 하나로 묶어 데이터를 나누어 저장한다는 뜻이다. 데이터가 늘어나면 컴퓨터만 더 추가하거나, 컴퓨터가 한 대가 고장이 나도 다른 컴퓨터에 복사본이 있어 데이터가 안전하다는 장점을 가지고 있다. 그리고 RESTful 통신 방식은 GET, POST, DELET를 써서 요청을 보내듯 Elasticsearch도 우리가 쓰는 웹 기술 방식으로 주고 받을 수.. 2026. 2. 28.

[Spring, React] 페이지네이션, 고객 10명만 보여주고 페이지 넘기기. 고객 명단 표를 만들었다.그럼 이제 10명의 정보만 보이도록만들고싶다. 1. 동작화면 2. 페이지네이션 검색해서 찾아본 페이지네이션은, 방대한 정보 중 사용자에게 필요한 정보를 선별하여 일부분만 보여주는 기술을 말하는 것 같다. 아무래도 구글에 검색했을 때 구글이 가지고 있는 모든 정보를 다 보여준다면 아마 사용자의 메모리가 감당하지 못할 것이다. 그리고 무엇보다 기능에 의미가 없어질 듯 하다. 그래서 이 페이지네이션 기능을 활용하여 사용자의 메모리와 시간을 아끼는 듯 하다. 일단 내가 한 프로젝트는 이미 고객 정보가 기입된 상태이고 그걸 관리하는 것이다. 거기다 고객 명단이 그리 방대한 양이 아니다. 그래서 그리 어렵지 않은 페이지네이션을 구현해도 되겠다는 생각을 했다. 아래 링.. 2026. 2. 18.

Spring이 작동하고 있지 않는데, 기능이 제대로 수행되는 경우_ 서버 확인하기 기능이 제대로 되길래아주 행복해하고 있었다.그런데 백엔드를 확인해보니,에러가 발생해서 꺼진 상태였다.어떻게 기능이 수행된 것일까? 1. 상황 수정과 삭제 기능을 만들었다. 그리고 Service를 넣어 로직을 분리해줬다. 대대적인 공사가 끝나고 자잘한 오류를 고치고 나니 제대로 기능이 수행되었다. F12를 눌러 네트워크 등 오류 발생이 있는지 확인했는데, 그것도 없었다. 그렇게 행복해하던 와중 백엔드 서버가 제대로 실행되고 있지 않다는 걸 발견했다. 내가 만든 기능은 수정과 삭제 버튼을 누르면 백엔드로 넘어가 거기서 처리되도록 되어있다. 프론트에서 처리하도록 만든 적이 없고 능력도 없는데, 어떻게 이게 가능한걸까? (사실 내게 대단한 재능이 있는게 아닌가 생각했다. 이게 왜.. 되지?) 2... 2026. 1. 21.

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

이전 1 2 3 다음

티스토리툴바