본문 바로가기

react17

[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, React] 고객 명단을 관리할 테이블(표) 만들기! 고객 정보를 보여줄표를 만들어보자! 1. 화면고객 정보가 화면에 보이도록 하며, 맨 끝에 수정과 삭제 버튼이 나오도록 만들어볼 것이다. 2. 전체 코드 {columns.map((data, i) => ( ))} {columns.map((data, i) => ( .. 2026. 2. 16.

[React] return 내에서 if문이 아닌 삼항연산자를 사용하는 이유 코드를 공부하다가간단하게 나타낼 수 있는 조건의 경우주로 삼항연산자를 사용하는 걸 알게됐다.왜 if문이 아닌 삼항연산자를 사용하는걸까? 1. 삼항연산자return ( {isLogin ? 환영합니다! : 로그인하세요.} );isLogin이 true이면 "환영합니다"가 보이고, false이면 "로그인하세요."가 보이도록 하는 것. 이런 방식으로 쓰는 걸 삼항연산자라고 한다. 코드를 찾아보면 return에 삼항연산자가 쓰인다. if문은 return 내에서 보지 못했다. 주로 익숙한 것은 if문이라서 굳이 왜 삼항연산자를 쓰는걸까? 의문이 생겼다. 2. 이유- if문 -const CustomerTable = () => { let message; if (isLogin) { m.. 2026. 1. 30.

[React] Spring으로 POST 보내는 두가지 방법_ then 방식과 async 방식 프로젝트를 하는 내내then 방식으로 Spring에 요청을 보냈다.그러다 다른 기능을 만들면서 코드를 찾아보니 async 방식으로 보내는 방법을 알게됐다.두방법의 차이가 뭘까? 1. 상황설명 고객 정보를 저장하려 한다. 고객 정보는 body에 넣어 POST 방식으로 Spring에 보내질 것이다. 그러면 Spring은 React의 요청을 받아 처리할 것이다. 이때 조건이 있다. 고객 정보에 들어가는 초대 코드 번호가 중복되어선 안되는 것이다. 만약 초대 코드가 중복일 경우 Spring에서 React로 409를 보낼 것이다. React는 409를 Spring으로부터 받으면 "초대코드가 중복되었습니다. 다른 코드를 입력해주세요." 문구가 사용자 화면에 alert 될 것이다. POST 방식으로 보낸다.상태 .. 2026. 1. 29.

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

이전 1 2 3 다음

티스토리툴바