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의 개념과, 사용법 그리고 차이점에 대해 말해보려고 합니다.ESLintLinter의 기능느슨한 형식의 언어인 Javascript에서는 코드 에러가 자주 발생합니다.하지만 JavaScript는 동적 분석(프로그램을 직접 실행해서 코드를 분석 프로그램을 실행하지 않고 분석하는 정적 분석)을 하기 때문에  에러를 찾기 위해서는 코드를 직접 실행해서 확인을 해봐야 합니다.이를 도와주는 것이 Linter입니다. Linter는 코드를 정적으로 분석하기 때문에, 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해줍니다. 추가적으로 간단한 코드 포맷팅 기능도 있습니다.ESLint 설치$ npm i -D eslint이제 eslint를 실..

회사를 다니면서 틈틈이 공부한 끝에 NCA 자격증을 취득했습니다. 자격증을 취득하기 위해 공부했던 방식과, 후기를 공유하려고 합니다. 네이버 클라우드 플랫폼 자격증 중에는 NCA, NCP, NCE 총 3가지가 있습니다. NCA 취득하고 NCP, NCP를 취득하고 NCE 시험을 볼 수 있습니다. NCA 시험은 네이버 클라우드 플랫폼 자격증 중의 가장 기초가 되는 자격증입니다. 이 시험은 Overview, Compute, Storage, Network, Media에서 문제가 출제됩니다. 자격증 공부하는 방법은 네이버 클라우드 설명서(docs.ncloud.com/ko/) 사이트에 들어가셔서 Compute, Storage, Network, Media를 순서대로 전부 실습을 해보는 것이 좋습니다. 그 후에, 다시..

Angular Component Lifecycle 안녕하세요. 오늘은 앵귤러의 기본이 되는 생명주기에 대해 알아보겠습니다. 앵귤러에는 8단계의 라이프 사이클이 있습니다. (constructor 함수는 타입스크립트에서 동작하므로 제외) 각 단계는 라이프 사이클 훅 이벤트라고 부릅니다. constructor(Typescript) constructor 함수는 앵귤러와 별개로 타입스크립트에서 호출하는 메서드입니다. constructor 함수에는 컴포넌트에 의존성들(예: 서비스)을 주입(inject)하는 것이 가장 좋습니다. constructor 함수가 실행된 후에 앵귤러의 라이프 사이클이 실행됩니다. ngOnChanges constructor 함수 이후에 제일 처음 호출되는 라이프 사이클 훅 이벤트입니다. 자식..