728x90 분류 전체보기65 CSS / Animation Animation/* 1. animation-name : 애니메이션 keyframes와 연결할 이름 2. animation-delay : 애니메이션 실행을 특정 시간동안 지연시켜준다. 3. animation-fill-mode : 애니메이션 실행 후 속성이 지속되게 한다(forwards 적용 시) 4. animation-iteration-count : 애니메이션 실행 횟수 지정 5. animation-direction : 애니메이션 변화 후 변화 이전으로 자동 계산하여 실행(alternate 적용 시) 6. animation-duration : 애니메이션 지속 시간 지정 - 선택 요소에는 어떻게 애니메이션을 적용할지 지정해야 한다. - 어떠한 애니메이션을 적용할지 keyfram.. 2024. 12. 27. CSS /* ******* Selector ******* *//* 1. 태그 선택자 : 태그 이름을 그대로 사용한다 */p { _background: yellow;}/* 2. 아이디, 클래스 선택자 *//* - 아이디 선택자는 #으로, 클래스 선택자는 .으로 지정한다 *//* - 클래스는 반복 선택을 지정하고, 아이디는 고유 선택을 지정한다 : 관례 *//* - 클래스와 아이디 모두 프로그래밍 상 반복 선택이 가능하지만 아이디는 반복해서 사용하지 않는다 */#css { _color: red;}.js { _color: blue;}/* 3. 전체 선택자 *//* - 전체 선택자는 * 이며, html, body는 태그 선택자다 */* { _background: lightgreen; _border: 2px s.. 2024. 12. 27. VS code 세팅 VS code 확장프로그램 설치VS CODE - Live server 설치 - port 열어서 바로 수정 사항 확인할 수 있도록 해줌 서버 접속할 수 없을 때 변경 사항 확인end list - 태그 위치 확인프리티어 설정 코드{ "diffEditor.wordWrap": "on", "editor.wordWrap": "on", "editor.tabSize": 2, "editor.accessibilitySupport": "off", "security.workspace.trust.untrustedFiles": "open", "editor.tokenColorCustomizations": { "comments": "#d39e9e" }, "prettier.jsxSingleQuote": false,.. 2024. 12. 27. Prometheus와 Grafana 개요 1. Prometheus란?Prometheus는 오픈 소스 모니터링 및 경보 도구로, 주로 애플리케이션 및 인프라의 상태를 모니터링하는 데 사용주요 기능:시간 시계열 데이터 수집 및 저장.데이터를 Pull 방식으로 가져옴.경고(Alert) 시스템 내장.PromQL이라는 강력한 쿼리 언어 제공.사용 사례:애플리케이션 메트릭 수집: 요청 처리 시간, 에러율, 성공률 등.인프라 모니터링: CPU, 메모리, 디스크 사용량 등.알람 설정: 특정 임계값 초과 시 알림 전송.2. Grafana란?Grafana는 데이터 시각화 및 대시보드 생성 도구로, Prometheus 같은 다양한 데이터 소스와 연동해 데이터를 시각화하는 데 사용주요 기능:Prometheus, ElasticSearch, MySQL, PostgreS.. 2024. 12. 27. nginx loadbalance 설정하기 환경linux - ubuntu 20.04 LTSreact, node, docker, docker-compose, nginx, npm 설치 상태방식react 프론트 서버는 도커 이미지로 빌드하여 개별 실행nodejs 백 서버는 도커컴포즈를 이용하여 3개 실행8081,8082,8083 포트를 8002번과 매핑컨테이너로 실행 된 nginx가 react의 요청을 받아 node 서버로 분산FRONT 서버 설정 방법git clone을 이용해 깃허브에 저장 된 소스를 복제lapoem_front 폴더에서 도커 빌드 실행$ docker build -t lapoem_front . 명령어로 리눅스 해당 프로젝트 폴더에서 실행Dockerfile 코드# 빌드 스테이지FROM node:18 as build# 작업 디렉토리 설정W.. 2024. 12. 27. 쿠버네티스(k8s) 학습하기 - 프로젝트 배포 단계 1. 전반적인 프로세스 설계프로젝트 배포는 다음 5단계로 나눌 수 있습니다:컨테이너화(Containerization):프론트엔드와 백엔드 애플리케이션을 각각 Docker 이미지를 생성합니다.데이터베이스는 이미 Linode 서버에 있으므로 컨테이너화가 필요하지 않습니다.쿠버네티스 리소스 구성:프론트엔드와 백엔드를 각각 Deployment와 Service로 정의합니다.데이터베이스는 Linode 서버에 따로 설정되어 있으므로 쿠버네티스에서 연결할 수 있도록 환경 변수를 구성합니다.CI/CD 파이프라인 설계:Jenkins를 이용해 애플리케이션 빌드, 테스트, 배포를 자동화합니다.Jenkins를 쿠버네티스에 앞이나 뒤에 배치할지 선택.Ingress 설정:프론트엔드와 백엔드가 클라이언트/서버로 통신할 수 있도록 I.. 2024. 12. 27. 쿠버네티스(k8s) 학습하기 - yml과 yaml의 차이 1. .yml vs .yaml.yaml: YAML 파일의 표준 확장자로 권장됩니다. YAML 공식 문서에서도 .yaml 확장자를 사용합니다..yml: **.yaml**의 짧은 버전으로, 파일 이름을 더 간결하게 표현하려는 목적으로 사용됩니다.차이점파일 형식: 동일합니다. YAML 문법이 적용된 파일입니다.사용성: 일부 오래된 도구나 라이브러리는 **.yml**만 지원할 수 있습니다. 하지만 대부분의 최신 도구는 **.yaml**과 .yml 둘 다 지원합니다.선택 기준.yaml: 공식 확장자로, 표준성을 중시하는 경우 권장..yml: 간결성을 선호하거나 특정 도구에서 필요로 하는 경우 사용.2. YAML 파일의 사용 사례YAML 파일은 사람이 읽고 쓰기 쉬운 데이터 직렬화 형식으로, 여러 도구에서 설정 파.. 2024. 12. 27. 쿠버네티스(k8s) 학습하기 - 쿠버네티스의 구조 1. 클러스터 → 노드 → 포드 구조(1) 클러스터쿠버네티스의 가장 상위 개념으로, 하나 이상의 노드를 포함합니다.클러스터는 전체 시스템을 관리하며, 워크로드를 적절한 노드로 배포하고 노드 간 통신을 조율합니다.클러스터는 마스터 노드와 워커 노드로 나뉩니다:마스터 노드: 클러스터를 관리(스케줄링, 상태 조정, API 제공).워커 노드: 실제 애플리케이션을 실행.(2) 노드 (Node)클러스터 내에서 작업을 실행하는 단위입니다.물리적 서버나 가상 머신으로 구성되며, 각 노드에는 쿠버네티스 에이전트(kubelet)가 실행됩니다.노드는 여러 개의 **포드(Pod)**를 실행할 수 있습니다.(3) 포드 (Pod)노드 내에서 실행되는 가장 작은 배포 단위입니다.보통 하나의 애플리케이션 컨테이너를 포함하며, 여러 .. 2024. 12. 27. 쿠버네티스(k8s) 학습하기 - Istio란? Istio란?Istio는 분산 애플리케이션(마이크로서비스)에서 다음과 같은 문제를 해결해주는 플랫폼입니다:서비스 간의 통신 제어: 서비스 간 트래픽 라우팅, 부하 분산, 실패 처리.보안: 서비스 간의 통신을 암호화(TLS)하고 인증 및 권한 부여를 처리.모니터링: 서비스 간의 성능, 요청 상태 등을 실시간으로 관찰.정책 관리: 특정 서비스에 대한 접근 제한, 트래픽 관리 정책 설정.Istio의 주요 기능1. 트래픽 관리라우팅:서비스 A가 서비스 B로 요청을 보낼 때 트래픽을 제어.예: 특정 버전의 애플리케이션으로만 트래픽을 보냄(예: Canary 배포).로드 밸런싱:여러 인스턴스에 트래픽을 고르게 분배.리트라이와 타임아웃:요청 실패 시 자동 재시도 및 타임아웃 설정.2. 서비스 보안mTLS(상호 TLS).. 2024. 12. 27. 이전 1 2 3 4 5 6 7 8 다음 728x90
