본문 바로가기

WebStorm25

[Spring, React] 행운의 로또 마법진 사이트 만들기(1) - 구성 예전에 만들었던 로또 페이지가 있다.이번엔 조금 더 변형해서 코드를 작성하고실제로 서버까지 열어 직접 운영을 해보려고 한다! 1. 예전 로또 페이지아주 간단한 로또 번호 출력 페이지를 만들었다. 2. 행운의 로또 마법진 화면메인페이지 (요소X)버튼을 누르면 요소가 보이도록 하는게 좋을지, 바로 요소가 보이도록 하는게 좋은지 아직 잘 모르겠다. 메인페이지(요소O)여러 요소들이 있고, 사용자가 총 3가지를 누르면 쿵짝쿵짝 마법진이 만들어진다. 이때 각 요소들은 2-9의 사이의 점수를 갖는다. 로딩 화면외계인이 360도로 뱅글뱅글 돌아간다. 3초 정도 지나면 "로또 번호 주문이 완성되었습니다" 버튼이 생성된다. 결과 페이지랜덤 숫자에 계산이 들어가서 번호가 추출된다. 그리고 행운의.. 2026. 4. 21.

[Keycloak, React, Docker] React에서 Keycloak을 본격 적용하고 코드를 하나하나 파헤쳐보자. keycloak.js를 만들어서keycloak 서버와 통신할 수 있도록 했다.다음은 이 통신을 이용해서원하는 방향으로 코드를 작성해 보자. [ Keycloak 설정하기 ] [Keycloak, Docker, Mac] Keycloak에서 client, role, users 등 설정하고 React 연결하기저번 포스팅에서 keycloak 설치를 해보았다.이번엔 프로젝트에 맞춰서client, role 등 설정해보자. [ 이전 포스팅 - keycloak의 다양한 설치 방법을 알아보고 docker로 설치해보기 ] [Keycloak, Docker, Mac] 다양post-this.tistory.com 1. 흐름 설명 더 많은 코드가 있지만, 필수라고 생각되는 부분만 먼저 설명하겠습니다.keycloak... 2026. 4. 17.

[Keycloak, Docker, Mac] Keycloak에서 client, role, users 등 설정하고 React 연결하기 저번 포스팅에서 keycloak 설치를 해보았다.이번엔 프로젝트에 맞춰서client, role 등 설정해보자. [ 이전 포스팅 - keycloak의 다양한 설치 방법을 알아보고 docker로 설치해보기 ] [Keycloak, Docker, Mac] 다양한 설치 방법을 알아보고 Keycloak을 Docker로 직접 설치해보자. (1)Keycloak을 사용할 수 있는여러 방법을 살펴보고직접 설치해보자! 만약 실제로 keycloak을 사용할 예정인 프로젝트를 하고 있다면?저의 경우는 카테고리에도 있지만 VIP 초대장이라는 프로젝트에서 Kpost-this.tistory.com Keycloak Client 만들기Create client전 포스팅에서 realm을 만들었는데, 이때 만들었던 realm에.. 2026. 4. 8.

[Keycloak, Docker, Mac] 다양한 설치 방법을 알아보고 Keycloak을 Docker로 직접 설치해보자. (1) Keycloak을 사용할 수 있는여러 방법을 살펴보고직접 설치해보자! 만약 실제로 keycloak을 사용할 예정인 프로젝트를 하고 있다면?카테고리에도 있지만 VIP 초대장이라는 프로젝트에서 Keycloak을 사용했습니다. 저같은 경우는 처음 Keycloak을 사용하다보니, 어떤 순서로 진행해야하는지 고민이 되더라고요. 제가 한 순서가 정답은 아니겠지만 혹시라도 도움이 되실 분들을 위해 남겨보겠습니다.VIP 초대장에는 고객 관리 페이지와 관리자를 관리하는 관리자 관리 페이지가 있습니다. 그 중 관리자페이지에 Keycloak을 이용했습니다. 관리자는 최고관리자와 일반관리자로 역할이 나뉘고 최고관리자는 일반관리자를 관리할 수 있는 권한이 있습니다. 그래서 Keycloak을 통해 관리자페이지엔 최고관리자.. 2026. 4. 8.

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

이전 1 2 3 4 5 다음

티스토리툴바