본문 바로가기

전체 글91

패키지 매니저 비교해보기 ( npm / yarn / pnpm ) 💡 Package Manager ?소프트웨어 패키지를 설치, 업데이트, 수정, 삭제하는 작업을 편리하고 안전하게 관리해 주는 도구이 도구를 사용하면 여러 패키지 설치를 자동화하고, 버전 관리와 보안 검증도 쉽게 할 수 있어 개발과 운영이 효율적이고 안정적으로 이루어짐패키지 매니저는 package.json 파일을 통해 설치할 패키지 목록과 버전을 정의하고, 이를 기반으로 필요한 패키지들을 자동으로 설치 💡 Package?재사용 가능한 코드 모듈로, 보통 외부의 라이브러리나 도구를 말함e.g) react, nextjs, materialUI ...즉, 패키지 매니저는 프로젝트에 사용되는 패키지를 쉽게 관리하고 설치해주는 하나의 도구 🔗 대표적인 Package Manager 1️⃣ npmNode.js 가.. 2025. 9. 19.
[k8s] service 이해하고, yaml 작성하기 ✍🏼 Service파드가 생성될 때마다 새로운 내부 IP를 할당하게 되므로, 클러스터 내/외부와 통신을 계속 유지하기 어렵기에 서비스를 통해 이렇게 동적으로 변하는 파드들에 고정적으로 접근할 수 있게함 .yaml 작성법[참고] https://kubernetes.io/docs/concepts/services-networking/service/// service.yamlapiVersion: v1kind: Servicemetadata: name: my-servicespec: selector: # service의 일부가 되어야하는 개별 pod 정의 app.kubernetes.io/name: MyApp # 해당 레이블을 가진 모든 pod는 이 서비스에 의해 제어 ports: # port 리스트 작성 -.. 2025. 4. 16.
[k8s] deployment 이해하고, yaml 작성하기 ✍🏼 DeploymentPod, ReplicaSet에 대한 배포관리, 이전 버전으로 롤백도 가능*ReplicaSet : 파드의 수를 보장해주는 오브젝트 .yaml 작성법[참고] https://kubernetes.io/docs/concepts/workloads/controllers/deployment/// deployment.yamlapiVersion: apps/v1 kind: Deploymentmetadata: name: nginx-deployment labels: app: nginxspec: # 전체 deployment에 대한 사양 replicas: 3 # 실행되고자 하는 파드 수 결정 selector: matchLabels: # 여기에 작성된 것만 해당 deployment에 의해 제어.. 2025. 4. 16.
[k8s] kubernetes 개념정리 📝 Kubernetes쿠버네티스(Kubernetes)는 컨테이너화된 애플리케이션을 배포, 관리, 확장할 때 수반되는 다수의 수동 프로세스를 자동화하는 오픈소스 컨테이너 오케스트레이션 플랫폼 아키텍쳐 큰 개념 ➡️ 클러스터 > 노드 > 파드 > 컨테이너Control Plane (=Master Node) 구성요소api serverk8s API를 사용하도록 요청을 받고 유형이 유효한지 검사쿠버네티스 클러스트의 중심 역할을 하는 통로사용자·컴포넌트가 쿠버네티스 클러스터와 쉽게 통신할 수 있도록 함etcd 클러스터의 모든 데이터를 담고있는 key-value 타입의 저장소구성 요소들의 상태 값이 모두 저장되는 곳 (쿠버네티스 상태 정보, 워커 노드의 상태 정보, 컨테이너 상태, 이미지 상태 등)Kubernetes 클.. 2025. 4. 15.
[JS] ChartJS - Scatter chart point hover event 아래와 같이 하이차트의 경우엔 마우스 호버 시 같은 데이터끼리 포커싱 처리됨 chartjs에서도 해당 기능을 구현하고 싶어 커스텀함 (데이터 구조에서 같은 인터페이스 ID를 가진 포인트끼리 포커싱 처리)➡️ 포커싱되면 포인트가 아래와 같은 느낌으로 보이도록 스타일적용함// ScatterChart.js// chartjs 옵션// 투명도 함수const addOpacity = (color, opacity) => { if (color.startsWith('rgb')) { return color.replace('rgb', 'rgba').replace(')', `,${opacity})`); } if (color.startsWith('#')) { const r = parseInt(color.slice.. 2025. 4. 11.
[JS] ChartJS Drag plugin 구현 chartjs - scatter chart에 drag 기능을 넣어 영역 안에 있는 포인트에 대한 정보를 모달창으로 띄우려고 함 1. 차트 컴포넌트에 넣을 플러그인 코드 생성// ChartDragPlugin.js// Store chart dataconst states = new WeakMap();const getState = (chart) => { const state = states.get(chart); return state || null;};const setState = (chart, updatedState) => { const originalState = getState(chart); // states.set(chart, Object.assign({}, originalState, update.. 2025. 4. 11.
[JS] ChartJS 실시간 업데이트 차트 만들기 📈 - 라인차트 ver. ‼️ 초반에는 실시간 차트를 apexchart로 진행 했는데 속도 이슈로 chartjs로 변경➡️ 데이터 구조const tpsData = [  {    label:'bank',    borderColor: '#008FFB',    data: [      {x: 1742789790000, y: 1},      {x: 1742789800000, y: 2},      {x: 1742789810000, y: 2},      {x: 1742789820000, y: 1},      {x: 1742789830000, y: 1}    ]  },  {    label:'digital',    borderColor: '#00E396',    data: [      {x: 1742789790000, y: 1},      {.. 2025. 4. 1.
[JS] Array Method - Map(), Reduce(), forEach(), Filter() 한번에 정리! Map()새로운 결과 반환 - 그에 따른 memory 공간 차지array 안의 요소를 하나씩 꺼내 변환해서 새로운 값으로 반환하고 싶을 때 사용특히, 모든 요소를 변환하고 싶을 때Reduce()배열 축소 원리배열 각 요소에 대해 주어진 reduce 함수 실행 후 하나의 결과값 반환여러 개의 값이 담긴 배열을 줄여서 하나의 값으로 생성여러 배열을 하나로 합치거나, 축적(누적)도니 값을 반환할 때 사용forEach()주어진 함수를 한번씩 실행 (for loop 느낌)for 문과의 차이- for 문 : break, continue 사용 가능, return 값 반환, 중간에 반복문 중단 가능(break)- forEach문 : break, continue 사용 불가능, return은 현재 반복만 종료시키고 항상 .. 2024. 11. 7.
[React] 리액트에서 .env 환경변수 사용하기 env 사용하는 이유개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있는데이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것 .env.env 파일은 항상 프로젝트 최상위 루트에 만들어야함 그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시키도록 함 CRA에서 .env 사용하기1. 환경변수 작성create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_을 앞에 작성 후 변수이름을 만들어주어야 합니다."" 사용하지 않도록 주의하.. 2024. 6. 4.

티스토리툴바