전체 글

React props와 state 알아보기 React에서 props와 state는 데이터를 다루는 개념입니다. 둘 다 JavaScript 객체이고 렌더링에 영향을 줍니다. props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용하고, state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미합니다. 좀 더 간단하게 설명하면 props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있습니다. 1. props props(properties)는 컴포넌트에 값을 전달할 때 사용합니다. 다음과 같이 App.js, Component.js를 만들고 실행해보면 Component.js에 전달된 props를 확인할 수 있습니다. import React fr..

React JSX 알아보기 React JSX에 대해 정리한 내용입니다. 1. JSX JSX(JavaScript Syntax Extension)는 React에서 사용하는 JavaScript 확장 문법입니다. XML과 비슷하게 생겼으며 작성한 코드는 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태로 변환됩니다. JSX는 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높습니다. 또한 HTML 태그도 사용이 가능하고 내부에 컴포넌트도 작성이 가능하여 활용도가 높습니다. JSX의 기본적인 문법에 대해 알아보겠습니다. 1.1. 태그 감싸주기 다음과 같이 코드를 작성하고 실행하면 에러가 발생합니다. import React from 'react'; function App() { return ( Hell..

React 프로젝트 생성하기 React 프로젝트을 생성하고 실행하는 방법에 대해 정리한 내용입니다. 1. React React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React는 UI를 구축을 위해 Facebook에서 만든 효율적이고 유연한 JavaScript 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다. Component 단위의 코드 조각들을 이용한 UI 구성 함수형, 클래스형 component 단방향(uni-directional) 데이터 바인딩 및 props를 이용한 속성 전달 JSX (Javascript + HTML) Virtu..

Node.js HTTPS 설정하기 SSL 인증서를 이용하여 Node.js 서버에 HTTPS를 설정하는 방법에 대해 알아보겠습니다. 주로 사용하는 인증서의 파일 포맷에는 여러 종류가 있는데 정리하면 다음과 같습니다. .pem (Privacy Enhanced Mail) 개인키, 서버인증서, 루트인증서, 체인인증서 및 SSL 발급 요청시 생성하는 CSR 등에 사용되는 포맷. 거의 대부분의 시스템에 호환되는 표준 포맷이며 Base64로 인코딩된 ASCII 텍스트. .crt 주로 유닉스/리눅스 기반 시스템에서 인증서 파일로 사용하기 위한 확장자. 대부분 PEM 포맷으로 구성. .cer 주로 Windows 기반 시스템에서 인증서 파일로 사용하기 위한 확장자. 대부분 PEM 포맷으로 구성. .csr (Certific..

Keycloak SSO 설정하기 Keycloak SSO(Single Sign-On)를 설정하는 방법에 대해 알아보겠습니다. 설정에 앞서 Keycloak 설치가 안되었다면 다음 글을 참고하여 설치해줍니다. Keycloak 설치하기 Keycloak 설치하기 Helm 차트를 이용하여 Keycloak을 설치하는 방법에 대해 알아보겠습니다. (Docker Desktop에서 구성한 Kubernetes 환경에 설치한 내용을 정리했습니다) 1. Keycloak 개요 Keycloak은 Redhat에서.. freestrokes.tistory.com 또한 실습에서는 Grafana를 연동할 서비스로 설정했는데 마찬가지로 설치가 안되었다면 다음 글을 참고하여 설치해줍니다. Grafana 설치 & Prometheus 연동하기 G..

Keycloak 설치하기 Helm 차트를 이용하여 Keycloak을 설치하는 방법에 대해 알아보겠습니다. (Docker Desktop에서 구성한 Kubernetes 환경에 설치한 내용을 정리했습니다) 1. Keycloak 개요 Keycloak은 Redhat에서 개발한 인증(authentication)과 인가(authorization)를 지원하는 오픈 소스이며, OIDC, SAML, OAuth 2.0과 같은 인증과 인가에 대한 표준 프로토콜을 모두 지원합니다. Keycloak Add authentication to applications and secure services with minimum fuss. No need to deal with storing users or authenticating use..

Grafana 설치 & Prometheus 연동하기 Helm 차트를 이용하여 Grafana를 설치하는 방법에 대해 알아보겠습니다. (Docker Desktop에서 구성한 Kubernetes 환경에 설치한 내용을 정리했습니다) 1. Grafana 구성 Grafana는 시계열 데이터 시각화를 위한 오픈소스 툴킷입니다. 리소스의 메트릭이나 로그 정보를 시각화하는데에 많이 사용합니다. 특징을 간단하게 정리하면 다음과 같습니다. 데이터 통합 및 변환 백엔드 저장소나 데이터베이스에 종속적이지 않고 동적으로 데이터를 수집하여 시각화. 서로 다른 쿼리와 데이터 소스에 대해 다양한 연산 수행 기능 지원. 다양한 플러그인 지원 실시간 렌더링이 가능한 다양한 데이터 소스 플러그인을 지원 알림 지원 시각화한 UI에서 알림 및..

Prometheus 설치하기 Helm 차트를 이용하여 Prometheus를 설치하는 방법에 대해 알아보겠습니다. (Docker Desktop에서 구성한 Kubernetes 환경에 설치한 내용을 정리했습니다) 1. Prometheus 구성 Prometheus는 음악 스트리밍 플랫폼 Soundcloud에서 만든 모니터링 툴킷입니다. 다음과 같은 특징을 가지고 있습니다. 다차원 모델 key/value 쌍과 메트릭 이름으로 식별 가능한 시계열 데이터 지원 PromQL 차원 활용을 위한 유연한 쿼리 언어 지원 단일 서버 노드 분산 저장 장치에 의존적이지 않은 자율적인 동작 지원 HTTP pull 모델을 이용한 시계열 데이터 수집 서비스 검색 또는 정적 구성을 통한 대상 탐색 중개 게이트웨이(Pushgateway)..

Helm 설치하기 Helm은 Kubernetes의 패키지 매니저입니다. Kubernetes에서 애플리케이션을 배포할 경우 같은 애플리케이션이어도 환경에 따라 설정이 달라지는 경우가 발생하는데 이에 따라 설정을 매번 변경해줘야하는 불편함이 생깁니다. Helm은 이렇게 배포 환경에 따라 달라지는 설정값을 정의하고 배포할 수 있도록 패키지 매니징을 지원합니다. Helm Helm - The Kubernetes Package Manager. helm.sh 1. Helm 구성 Helm의 기본 구조는 다음과 같습니다. (Helm 3.0 기준으로 확인한 내용입니다) Charts yaml 파일을 묶어서 정의한 package입니다. kubernetes app 빌드를 위한 리소스가 정의되어 있습니다. Repository 생..