본문 바로가기

react38

[Spring, React] Keycloak이 제공하는 기능과 사용 전 알아야할 개념 정리 구인구직을 살펴보면,보편적으로 경력직 개발자에게 요구되는 것들이 있다.그리고 그 중 공통적으로 등장하는게 Keycloak이었다.도대체 Keycloak이 뭐길래 많은 곳에서 사용하길 원하는걸까?Keycloak에 대해 알아보자. 1. Keycloak의 기능애플리케이션에서 로그인 양식을 처리하거나 사용자를 인증하고 사용자 정보를 저장할 필요가 없이 Keycloak을 통해 인증한다.Single Sign-On : Keycloak에 한 번 로그인하면 다른 애플리케이션에 접속할 때 다시 로그인할 필요가 없다. 사용자는 여러 서비스에 각각 로그인 할 필요가 없이 한 번의 인증이면 모든 연결된 앱을 이용할 수 있다. 그리고 이 기능은 로그아웃도 그대로 적용된다.Identity Brokering and Social L.. 2026. 3. 19.

[Spring, React] jsx와 css 파일 연결, 연결된 css가 아니어도 jsx 페이지에 영향을 주는 경우 고객 관리 페이지를 참고하여관리자 관리 페이지를 만들고 있다.분명 각 페이지에 css 파일을 다르게 연결시켰는데,왜 수정이 동시에 되는걸까? 1. 화면아래와 같은 화면을 만들었다. 아래 페이지는 관리자를 관리하는 페이지 중 검색창 화면이다. 이 페이지를 만드는데, 전에 미리 만들었던 고객 관리 페이지의 검색창 코드를 그대로 가져왔다. 2. 문제와 원인문제고객 관리 페이지 중 검색을 담당하는 jsx는 CustomerAdd.jsx이다. 이 jsx는 CustomerTable.css와 연결되어있다. 그리고 관리자 관리 페이지 중 검색을 담당하는 jsx는 AdminAdd.jsx이다. 이 jsx는 PermissionSetting.css와 연결되어있다.그런데 PermissionSetting.css를.. 2026. 3. 17.

[Spring, React, Mac] Elasticsearch를 위해 Docker 설치하기. 앞포스팅에서 Elasticsearch 설치방법을 알아봤다.그 중 Docker를 이용한 방법을 사용해보려한다. 1. Elasticsearch & Docker [Docker에 대해서] [Spring, React] Docker에 대해서 쉽게 알아보기!ElasticSearch를 사용하는 다양한 방법 중Docker를 통해 설치하고 사용하는 방법이 있었다.Docker가 무엇이고 어떻게 이뤄지는지알아보겠다. 1. Docker애플리케이션을 신속하게 구축, 테스트 및 배포할post-this.tistory.com Docker는 애플리케이션을 신속하게 구축, 배포할 수 있게 해주는 소프트웨어 플랫폼이다. 이때 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징한다.이 컨테이너에는 라이브러리, 시스템 도구, 코드, 런.. 2026. 3. 10.

[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.

이전 1 2 3 4 5 6 7 다음

티스토리툴바