기록

가상화의 발전 과정 전통적인 배포 : 물리서버 기반 애플리케이션 실행 가상화된 배포 : 단일 물리 서버의 CPU에서 여러 가상 시스템 (VM) 실행 컨테이너 개발 : VM과 유사, 격리 속성을 완화하여 애플리케이션 간에 운영체제(OS)를 공유 가상화와 컨테이너 둘 다 확장성과 유연성을 제공하며, 클라우드 환경이나 마이크로서비스 아키텍처에서 특히 유용하게 사용됩니다. 어떤 시스템 레벨을 가상화 하는지가 다릅니다. 가상화 (Virtualization) 가상화는 하드웨어 리소스를 추상화하여 가상의 환경을 만들어내는 기술입니다. (하드웨어 레벨 가상화) 이는 하이퍼바이저(Hypervisor)라고 불리는 소프트웨어 계층을 통해 수행됩니다. 가상화는 주로 서버 가상화에 많이 사용되며, 다양한 운영 체제 및 애플리케..

file-saver 자바스크립트에서 파일을 생성하고 사용자에게 다운로드할 수 있게 해주는 라이브러리입니다. 1. 설치 npm install file-saver 2. 사용법 saveAs 함수 이 함수를 사용하여 클라이언트 측에서 파일을 저장하고 다운로드할 수 있습니다. saveAs(다운로드할 파일의 데이터 (Blob 또는 File), 다운로드될 파일의 이름) 3. 예시 (vue3) import { saveAs } from 'file-saver'; // fetch 함수를 사용하여 지정된 URL에서 PDF 파일을 가져옵니다. // 가져온 PDF 파일을 ArrayBuffer로 변환합니다. const fetchPdf = async () => { const response = await fetch('/assets/..

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로, 특히 React와 함께 사용되어 복잡한 상태를 효율적으로 관리하고 상태 관련 로직을 분리하는 데 도움을 줍니다. Redux의 핵심 개념은 "스토어(Store)", "액션(Action)", "리듀서(Reducer)"입니다. https://sumni.tistory.com/67 Redux, Props, State 개념 1. 개념 Redux : 상태관리 라이브러리, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용. Props 1. porperties의 줄임말 2. 부모 컴포넌트에서 자식 컴포넌트한테 보낼 수 sumni.tistory.com 1. Redux 설치 먼저 Redux를 설치합니다. npm 또는 ya..

combineReducers Redux에서 제공하는 유틸리티 함수 중 하나로, 여러 개의 리듀서를 하나로 합치는 역할을 합니다. 이를 사용하면 Redux 스토어에 여러 개의 리듀서를 등록할 수 있으며, 각 리듀서는 서로 다른 부분 상태를 관리하게 됩니다. combineReducers를 사용하면 리덕스 애플리케이션의 상태를 모듈화하고 유지보수를 쉽게 할 수 있습니다. combineReducers를 사용하지 않는 경우 // reducers.js const initialStateA = { dataA: [], }; const initialStateB = { dataB: {}, }; const reducerA = (state = initialStateA, action) => { // ... }; const red..

데브옵스(DevOps) 데브옵스(DevOps)는 소프트웨어 개발 및 운영 프로세스를 통합하여 효율적이고 지속적인 소프트웨어 제공을 가능하게 하는 소프트웨어 개발문화 또는 방법론을 나타냅니다. "데브"는 소프트웨어 개발(Development)을, "옵스"는 운영(Operations)을 의미하며, 두 영역 간의 협력과 통합을 강조합니다. 데브옵스의 주요 목표와 특징 지속적인 통합 (Continuous Integration, CI): 개발자가 코드를 공유하는 과정에서 자동화된 빌드 및 테스트를 수행하여 코드 품질을 높이고 문제를 조기에 발견합니다. 지속적인 배포 (Continuous Deployment/Delivery, CD): 지속적인 통합 이후 자동화된 배포 프로세스를 통해 새로운 기능이나 수정 사항이 실..

서버 측 에러 Resolved [org.springframework.http.converter.HttpMessageNotWritableException: Could not write JSON: Class `com.deom.model.FileData` not subtype of `java.util.Map`; nested exception is com.fasterxml.jackson.databind.JsonMappingException: Class `com.deom .model.FileData` not subtype of `java.util.Map` (through reference chain: java.util.HashMap["fileList"]->java.util.ArrayList[0])] 클라이언트 측..

BindingException@1300 "org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.demo.dao.FileMapper.getData" 이 오류는 MyBatis에서 SQL 쿼리나 매퍼 파일에 대한 문제가 있을 때 발생합니다. 에러 메시지를 자세히 살펴보면 com.demo.dao.FileMapper.getData라는 매핑된 문장(statement)을 찾을 수 없다는 내용입니다. 이 오류를 해결하기 위해 다음 몇 가지 단계를 따를 수 있습니다: mapper.xml에 해당 문장이 정의되어 있었지만 에러가 발생했습니다. //SELECT ~ databaseId를 제거 했을 때 정상적으로 동작했습니다. da..

기본 설정 방법 https://sumni.tistory.com/229 React Router Dom 설정(버전 5.x, 6링크) react-router-dom은 React 애플리케이션에서 라우팅 및 네비게이션을 처리하기 위한 JavaScript 라이브러리입니다. 1. React 앱에 react-router-dom 설치하기 먼저, React 앱에 react-router-dom을 설치합니다. 프로젝 sumni.tistory.com 버전 6 변경 사항 1. 라우트 설정 방법 이전 버전에서는 컴포넌트를 사용하여 경로와 컴포넌트를 매핑했습니다. 버전 6에서는 대신 를 사용하여 라우트를 정의합니다. 이제 각 경로에 대한 element 속성을 사용하여 해당 경로에 렌더링할 컴포넌트를 지정합니다. 예전 버전 (버전 5..

react-router-dom은 React 애플리케이션에서 라우팅 및 네비게이션을 처리하기 위한 JavaScript 라이브러리입니다. 1. React 앱에 react-router-dom 설치하기 먼저, React 앱에 react-router-dom을 설치합니다. 프로젝트 루트 디렉토리에서 다음 명령을 실행합니다 npm install react-router-dom 2. 라우터 설정하기 React 앱의 라우팅을 위해 BrowserRouter 컴포넌트를 사용합니다. 주로 앱의 최상위 컴포넌트인 App.js에서 설정합니다. import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; impo..

게임 맵 최단거리 https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr - 문제 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우..