전체 글

1.메시지 브로커(Message Broker)란?시스템 간에 메시지를 전송하고 중개하는 역할을 하는 소프트웨어 시스템 생산자와 소비자 간의 의존성을 줄이고 시스템 간의 통신을 원활하게 처리할 수 있게한다.   2. 왜 필요할까?2-1.메시지 브로커가 없을 때메시지 브로커가 없다면 시스템 간에 직접적인 연결을 하게되고 시스템 구조가 간단하다.이경우 동기식 통신을 사용하므로, 데이터가 직접적으로 전달되어 즉시 처리된다.하지만 시스템 간에 직접적인 연결이 필요하고, 각 시스템은 서로에 대한 의존성이 높아지기 때문에 결합도가 증가한다.그렇기 때문에 하나의 시스템이 장애를 일으킬 경우, 다른 시스템에도 연쇄적인 장애가 일어난다.또한 직접 통신하기에 모니터링이나 트래픽 처리가 상대적으로 어려울수있다.[제공자] ->..

1.Dockerfile 만들기나는 Node.js 20.15.0 기반으로 하는 이미지를 만들기 위한 Dockerfile를 만들것이다.그후 /app 디렉토리로 package.json을 복사후 종속성 설치와 빌드 과정을 거친다.# Node.js 20.15.0 기반 이미지 사용FROM node:20-alpine# 2. 작업 디렉토리 생성WORKDIR /app# 3. 프로젝트 파일을 컨테이너로 복사COPY package.json package-lock.json /app/# 4. 종속성 설치RUN npm install# 5. 나머지 파일을 컨테이너로 복사COPY . /app/# 6. 빌드 명령어 실행RUN npm run build# 7. Vite 개발 서버 실행 명령어 설정 (빌드 후)CMD ["npm", "run..

0.Dockerfile Github에서 다른 사람의 레포지토리를 구경하다 보면 다음과같은 Dockerfile이라는 파일들을 쉽게 접할수있다.다음은 GPT-2 의 Dcoker 파일이다.   다음은 Dockerfile.gpu다.GPT-2를 실행하기 위한 환경을 세팅 해준다.# TensorFlow 1.15.0 GPU 버전, Python 3.7을 기반 이미지로 설정FROM tensorflow/tensorflow:1.15.0-gpu-py3# NVIDIA Docker 1.0 관련 설정 (NVIDIA 드라이버가 필요하다고 라벨링)LABEL com.nvidia.volumes.needed="nvidia_driver"LABEL com.nvidia.cuda.version="${CUDA_VERSION}"# NVIDIA 컨테이..

0.문제발생.env 파일을 만들어서 API키를 commit에서 제외하더라도 GitHub Actions의 secrets와 variables를 사용하여 배포를 하면 나의 API키를 안전하게 지킬수있을줄알았다.  문제는 결국 클라이언트 사이드쪽에서 API키를 통해 호출해야하기 때문에 F12를 눌러나오는 개발자 도구의 Network탭에서 쉽게 확인이 가능해져버린다. 클라이언트 사이드에서 API 키를 숨기려면 API 키를 백엔드 서버로 이전하는 방법을 사용해야 한다고 한다. 그러면 따로 도메인을 사고, 서버를 구입해서 열어야 하는걸까?그렇게 찾던 도중 서버리스 서비스에 대해 알게되었다.      1.Netlify 웹 애플리케이션을 빠르고 쉽게 배포하고 관리할 수 있는 플랫폼으로 GitHub과 연동또한 가능하다.또..

1.TMUX(Terminal Multiplexer)?하나의 터미널에서 여러 개의 세션을 관리할 수 있는 터미널 멀티플렉서SSH를 사용할 때 세션이 끊어지더라도 다시 접속하여 작업을 이어갈 수 있으며, 창을 여러 개로 분할하여 동시에 여러 작업을 수행할 수 있다.  1-1.SSH(Secure Shell)네트워크를 통해 다른 컴퓨터와 안전하게 통신할 수 있는 프로토콜주로 원격 서버에 접속하거나 명령어를 실행할 때 사용된다.     2.TMUX 설치(Ubuntu)윈도우에서 쓸땐 따로 Ubuntu를 설치하고 해야함sudo apt updatesudo apt install tmux -y  3.TMUX 기본 명령어tmux //새 TMUX 세션 시작tmux new -s mysession //특정 이름(m..

1.Dependency(의존성)프로젝트에서 외부 라이브러리나 모듈을 사용할 때 나타나는 의존성을 의미한다.프로덕션 환경에서 애플리케이션이 실행될 때 필요한 모든 라이브러리(프로젝트가 정상적으로 작동하려면 반드시 필요한 외부 패키지를 포함)"dependencies": { "express": "^4.17.1", "mongoose": "^5.9.0"}   2. Development Dependency (개발 의존성)프로젝트의 개발 및 빌드 환경에서만 필요한 의존성(애플리케이션이 실제로 실행될 때는 필요하지 않지만, 개발 중에 필요한 도구)"devDependencies": { "webpack": "^5.0.0", "babel-cli": "^6.26.0", "jest": "^26.0.0"}   3.Pee..

1.설치npm install framer-motion     2.기본 사용법motion컴포넌트로 감싸서 만듬 initial: 시작 상태 (초기값)animate: 최종 도착 상태transition: 애니메이션 지속 시간, 타이밍import { motion } from "framer-motion";export default function Example() { return ( 안녕하세요! 👋 );}   2-1.initial, animate에 들어갈 수 있는 값    2-2.transition        3.Hover & Tap 클릭해보세요!    4.Drag  드래그 가능!     5.Animate Presence컴포넌트 사라질때 애니메이션import { useState }..

1.깃 연동우선 만든 프로젝트를 github과 연동한다.이때 레포지는 public 으로 해야한다.   2.gh-pages 설치npm으로 gh-pages를 설치해준다.npm install gh-pages     3.vite.config.tsvite.config.ts의 base란에 /레포지토리이름/ 으로 설정해준다.import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import tailwindcss from "tailwindcss";// https://vitejs.dev/config/export default defineConfig({ plugins: [react()], css: { postcss: { plu..