이제껏 DB를 따로 생성하지 않아도 Realm, Client, User를 생성하고 저장할 수 있었던 이유는, Keycloak내의 내부 DB(h2)를 사용하고 있었기 때문입니다. 하지만 보통 운영 단계에서는 외부 DB를 사용하는 경우가 많으므로 Keycloak 내부 DB에서 외부 DB로 변경해보겠습니다. 설치 DB는 Mysql입니다. 저는 Docker Compose로 설치해보겠습니다. Mysql 5버전 설치 # docker-compose.yml version: "3.8" services: mysql_5: image: mysql:5.7.38 container_name: mysql_5 environment: - MYSQL_DATABASE=keycloak5 - MYSQL_USER=jerry - MYSQL_PAS..
이번 시간에는 Realm과 Client, 그리고 User에 대해 알아보겠습니다. 위 그림에서 Application은 Client라고도 불립니다. 혼동을 방지하기위해 앞으로 Client라고 부르겠습니다. Realm Realm은 사용자, 인증, 인가, 권한, 그룹이 관리하는 범위입니다. 한 Realm내의 Client들(위 그림에서는 Application입니다.)은 서로 SSO를 공유합니다. 각각의 Realm은 독립적입니다. 처음 Keycloak에 접속하면 Master Realm이 있는데, 이 Realm은 다른 Realm을 관리하는데만 사용합니다. (단지 관리를 하기위한 Realm이고, 다른 Realm이 Master Realm을 상속 받는 것은 아닙니다.) Client Client란 인증, 인가 업무를 Key..
keycloak은 17버전 이후로 WildFly에서 Quarkus로 변경되었습니다. (https://www.keycloak.org/migration/migrating-to-quarkus) 17버전 이전과 설정 방법이 다르고 정보 또한 부족하여 많은 시행 착오를 겪었습니다. Keycloak을 사용하시는 분들께 도움이 되고자 작업했던 내용들을 정리하려고 합니다. Keycloak이란 keycloak은 웹 앱, Restful 웹 서비스를 위한 SSO 솔루션입니다. Keycloak은 로그인, 등록, 관리 및 계정 관리를 위한 사용자 정의 가능한 사용자 인터페이스를 제공합니다. Keycloak을 통합 플랫폼으로 사용하여 기존 LDAP 및 Active Directory 서버에 연결할 수도 있습니다. Facebook ..
오늘은 페이지 성능 최적화에 대해 알아보겠습니다. 페이지 성능 최적화는 웹 서비스에서 중요한 개념이자, 이후에 포스팅할 CSR(Client Side Rendering)과 SSR(Server Side Rendering), 그리고 SSG(Static Site Generation)를 설명하기 위해 필요한 개념입니다. 페이지 성능 최적화를 해야 하는 이유? 사용자가 사이트를 방문한 후, 아무런 요청을 실행하지 않고 떠나는 비율을 이탈률이라고 합니다. 위의 그래프를 보시면 알 수 있듯이, 페이지 로딩 속도에 대한 이탈률을 보면 로딩 시간이 3초가 걸리면 32%, 5초면 90%, 6초면 106%, 10초면 123% 라고 합니다. 2018년도 자료이니, 2020년도인 지금은 로딩 속도에 대한 이탈률이 더 증가했다고 ..
이 글은 Magdalena Siljanoska의 Yes, it’s npx, not npm — the difference explained 를 번역한 게시물입니다. Thank you Magdalena Siljanoska! Thanks to your writing, I can grow further as a developer. 나는 최근에 리액트를 배우면서 내가 잘 알고 있는 npm이 아닌 npx를 보고 혼란스러워했고, 많은 사람들이 혼란스러워하는 모습을 봤다. 우리들 중 일부는 그것이 이상하다고 생각했지만 별 생각이 없었고, 또 다른 사람들은 오타라고 생각하고 npm을 npx로 "고쳐서" 어려움을 겪었다. 몇번 더 이런 상황을 겪게 되니 이것에 대해 설명할 가치가 있다고 생각했다. 그래서 이 게시물을 작성..
안녕하세요. 오늘은 ESLint와 Prettier의 개념과, 사용법 그리고 차이점에 대해 말해보려고 합니다. ESLint Linter의 기능 느슨한 형식의 언어인 Javascript에서는 코드 에러가 자주 발생합니다. 하지만 JavaScript는 동적 분석(프로그램을 직접 실행해서 코드를 분석 프로그램을 실행하지 않고 분석하는 정적 분석)을 하기 때문에 에러를 찾기 위해서는 코드를 직접 실행해서 확인을 해봐야 합니다. 이를 도와주는 것이 Linter입니다. Linter는 코드를 정적으로 분석하기 때문에, 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해줍니다. 추가적으로 간단한 코드 포맷팅 기능도 있습니다. ESLint 설치 $ npm i -D eslint 이제 esl..
