짧은코딩

MSA에 대해서 알게 된 것은 사실 오래되었다.하지만 MSA를 적용해 본 적은 없다. MSA는 주로 대규모 프로젝트에 적합하다.그래서 접할 기회가 별로 없었다. 그렇지만 프로젝트에 적합하지 않다고 해서 공부를 아예 하지 않는 것은 좋지 않다고 생각했다.MSA를 간단하게 적용해 보고 왜 규모가 큰 프로젝트에 MSA가 도입되었는지, 왜 작은 프로젝트엔 적용하는 것이 안 좋은 것인지 직접 공부하면서 깨우쳐 보려고 한다.아키텍처내가 설계한 아키텍처는 이렇다.이렇게 다양한 기술 스택을 도입한 이유는 간단하게라도 모든 기술을 적용해 보면서 익히고 싶기 때문에 적용한 것도 있다.Client로그인/회원가입, 마이페이지기술 스택: Vue3이유: Vue3를 아직 다뤄 본 적이 없기 때문블로그 글 쓰기/보기기술 스택: Ne..

이미지 레지스트리이미지 레지스트리는 이미지를 저장하기 위한 저장소레지스트리에서 이미지를 저장하고 공유 가능대표적인 레지스트리는 Dcoker Hub -제공하는 기능이미지 공유 이미지 검색이미지 버전 관리보안파이프라인-이미지가 저장되는 공간호스트 머신의 로컬 스토리지퍼블릭 레지스트리프라이빗 레지스트리이미지가 로컬 스토리지에 있으면 그걸 실행하고, 없으면 퍼블릭이나 프라이빗 레지스트리에서 다운 받아 컨테이너로 실행 -Docker Hub 말고 나만의 레지스트리를 사용하는 법서버에 레지스트리를 설치해서 사용HARBORDocker 프라이빗 레지스트리퍼블릭 클라우드의 서비스를 사용하는 방법AWS의 ECRAzure의 Container Registry(ACR)-이미지명 규칙이미지 이름에는 이미지를 어디서 다운 받았는지,..

이미지소프트웨어의 실행법부터 알아보자하드웨어 자원을 이용할 수 있게 해주는 OS가 필요라이브러리나 패키지에 의존하여 실행 혹은 런타임 언어가 필요개발자가 개발한 애플리케이션이나 다운로드 받은 소프트웨어가 필요하지만 도커에서는 이런 과정 없이 이미지를 실행함.어떻게 가능한걸까?예를 들어 Nginx 이미지를 실행하면, 이미지를 통해서 컨테이너를 실행했기 때문이미지는 파일 시스템의 특점 시점을 저장해 놓은 압축 파일임이미지는 소프트웨어가 실행되기 위해 필요한 모든 것들을 미리 준비해서 압축따라서 이미지를 다운 받아서 OS의 격리된 공간에서 컨테이너가 실행되는 것-이미지의 특성이미지는 운영 체제의 백업 기능(스냅샷)과 유사하다.언제든지 해당 시점의 소프트웨어를 실행할 수 있기 때문이다.하지만 이미지는 백업 기능..

가상화 기술이란?IT에서는 실제로 존재하는 것을 물리적, 가상으로 존재하는 것을 논리적이라 함 -도커는 가상화 기술도커를 사용하는 이유는 하나의 컴퓨터에서 그냥 프로그램 4개를 돌리다가 1개가 자원을 많이 쓰거나, 에러 발생 시 다른 프로그램에도 영향을 줌 결국 하나의 OS에서 여러 프로그램을 돌리는 건 매우 안 좋음도커를 사용하면 프로그램들이 논리적으로 분리되어 있어서 안전함하드웨어 여러 개를 사용하는 것보다. 좋은 컴퓨터 1대를 사용하는 것이 비용적으로 더 저렴함가상화 기술의 종류가상화 기술은 하이퍼바이저와 컨테이너 2가지가 있음하이퍼바이저하이퍼바이저는 컴퓨터에 설치되는 프로그램(Host OS에서 설치 가능)하이퍼바이저는 가상 OS(게스트 OS)를 실행/종료 가능각 OS 마다 시스템 콜 표준이 다르다..

요즘 MCP가 인기가 많아서 나도 사용해 보려고 Claude 유료 결제를 했다!두근거리는 마음을 갖고 연동을 시도했다. 사실 연동 자체는 별거 없다. 하지만 왜인지 되지가 않았다...!그렇게 하루를 잡아먹었다. 지금부터 삽질한 것들을 기록하고자 한다.MCP가 뭔지는 검색해 보면 잘 나오니 참고하는 게 좋겠다!ClaudeClaude 프로그램 설치Claude와 MCP를 연동하려면 Claude 프로그램을 반드시! 설치해야 한다.나는 맥북이라 homebrew로 다운로드하였다. -homebrew(맥북)brew install --cask claude -윈도우https://claude.ai/download윈도우는 이 사이트에서 받으면 된다!물론 맥도 받을 수 있다.MCP 연결JetBrains MCP Proxy Ser..

useState의 동작 원리useState는 동기, 하지만 비동기처럼 동작원리state의 변경useState는 queue에 state 업데이트 쌓임(같은 값이 여러 개면 최적화 되어 사라질 수 있음)효율성을 위해 event Loop에서 state 업데이트 요청들을 batching으로 한번에 처리(16ms동안 변경된 상태 값들을 하나로 묶어 처리)useState는 const로 선언하기 때문에 불변성에 의 값을 변경 불가따라서 리렌더링이 발생하고 화면에 변경된 state가 보임 => 따라서 비동기처럼 동작하는 것 처럼 보임함수형 업데이트-문제점 코드const [count, setcount] = useState(0);setCount(count + 1);setCount(count + 1);//count는 1이 ..

제어 컴포넌트폼 데이터가 React 컴포넌트의 state에 의해 제어상태(state)와 입력 필드가 동기화-예시 코드function ControlledInput() { const [value, setValue] = useState(''); return ( setValue(e.target.value)} /> );}상태 변경 시 컴포넌트 리렌더링반응형 상태 관리비제어 컴포넌트DOM 자체에서 폼 데이터를 다룸ref를 사용해 DOM 요소에 직접 접근-예시 코드function UncontrolledInput() { const inputRef = useRef(null); const handleSubmit = () => { console.log(inputRef.current.val..

"기존에 폴더 구조를 짤 때는 명확한 기준을 잡지 않고 폴더 구조를 짰다. 기준이 없으면 매번 행동이 달라지게 된다."이 말에 굉장히 공감했다. 그렇기에 FSD 폴더 구조를 공부해 보고자 이 글을 작성한다.FSD의 구조FSD에서는 폴더 구조는 Layers, Slices, Segments로 3 depths를 사용한다.SlicesSlices로 나눈 것은 "도메인 주도 설계"이다.블로그라고 치면 post 안에 comment가 있는게 아닌가 싶지만, 최대한 분리하는 것이 좋다.Segmentsui는 화면담당model은 데이터 담당api는 서버로 부터 데이터 가져오는 담당Layers상위 폴더에서만 하위 폴더를 import 할 수 있다.app에서는 모든 폴더를 import 가능하다는 의미shared에서는 아무 폴더도..

Nexus란?Sonatype에서 만든 저장소 관리자 프로젝트다양한 Format의 사설 저장소를 만들 수 있으며 메인 저장소를 Cache 할 수 있는 기능 또한 제공하여 저장소를 관리할 수 있도록 도와주는 관리자 도구Maven에서 주로 사용하지만 npm 저장소로도 이용이 가능회사 내부 라이브러리를 저장하기 위해서 사용npm i 혹은 yarn을 했을 때nexus에 있는 라이브러리라면 nexus 저장소에서 라이브러리를 다운로드하고nexus에 없는 라이브러리면 npm 저장소로 가서 라이브러리를 다운로드한다설치Docker로 Nexus 설치하기docker pull sonatype/nexus3도커로 nexus 이미지를 다운로드하였다.docker run -d -p 8081:8081 --name nexus sonatyp..

리액트 개발을 하던 도중 많은 데이터를 처리할 일이 생겼는데, 프로젝트의 성능이 많이 느려졌었다.다시 빠르게 동작 시키기 위해서 여러 방법을 찾았는데, 순환 참조가 그중에서 하나였다.여태까지 이런 문제가 있다는 것 자체를 몰랐기에 글로 적어 기록하려고 한다.순환 참조란?순환 참조(Circular Dependency)는 두 개 이상의 모듈이 서로를 직접적 또는 간접적으로 import 하는 상황을 말한다.function createCircularReference() { const objA = {}; const objB = {}; objA.reference = objB; objB.reference = objA;}이렇게 서로가 서로를 참조하면 문제가 발생한다. -문제점 코드가 예상대로 동작하지 않을 수 ..