mirabo01 님의 블로그

필요하시면 각 이미지에 맞는 설명 문구나 캡션도 함께 만들어드릴게요.서비스를 운영하다 보면 누구나 한 번쯤 “배포하다가 서버가 멈춘 적”이 있습니다.처음엔 그게 큰 문제처럼 느껴지지 않지만, 실제 사용자가 많은 환경에서는 단 몇 초의 중단도 민감하게 체감됩니다.그래서 어느 순간부터는 “다운타임 없는 배포”, 즉 무중단 배포가 필수가 됩니다.도커를 사용하면 이 과정을 비교적 단순하게 설계할 수 있습니다.그 대표적인 방법이 바로 Blue-Green Deployment입니다.배포 중 서버가 멈추는 이유도커를 쓰기 전에는 새로운 버전을 배포할 때마다서버를 중지하고, 새로운 코드를 반영하고, 다시 서버를 실행했습니다.그 몇 초 사이에 사용자는 페이지를 새로고침하면 접속이 끊겼습니다.도커를 도입한 이후에도 단일 컨..

처음 도커를 쓸 땐 로컬 환경에서 “이미지를 빌드해서 컨테이너를 실행하는 것”만으로도 충분했습니다.하지만 서비스가 커지고 팀 단위로 협업하게 되면,누가 어떤 코드를 배포했는지 관리가 필요해집니다.수동으로 docker build, docker push, docker pull을 반복하다 보면인간이 가장 많이 실수하는 부분 — 버전 관리와 환경 일관성 — 에서 문제가 터지죠.그래서 등장하는 게 CI/CD 파이프라인에 도커를 통합하는 방식입니다.내가 처음 자동 배포를 시도했을 때예전에 사이드 프로젝트를 EC2 위에서 운영할 때였습니다.깃허브에 커밋하면 서버에 반영되도록 만들고 싶었죠.처음엔 직접 스크립트를 짰습니다.git pull origin maindocker build -t myapp .docker stop..

도커 허브(Docker Hub) 관련 이미지 몇 장 골랐어요. 블로그에 적절히 넣으면 이해에 도움이 될 거예요.필요하시면 각 이미지에 맞는 캡션도 같이 만들어드릴게요.도커 이미지는 로컬에서만 사용할 수도 있지만,결국 배포를 하려면 이미지를 저장하고 불러올 수 있는 공간이 필요합니다.그게 바로 Docker Registry(도커 레지스트리) 입니다.가장 대표적인 게 Docker Hub, 그리고 조직에서는 GitHub Container Registry(GHCR),또는 자체 구축한 Private Registry를 사용합니다.도커 이미지를 올린다는 건 무슨 의미일까처음 도커를 배울 땐 docker build까지만 해도 충분했는데,프로젝트를 서버에 올리려다 보니 “이미지를 서버에 어떻게 옮기지?”가 문제였습니다.처..

도커 이미지는 ‘설계도’다 도커 이미지는 말 그대로 실행 환경의 설계도입니다.내가 실행할 애플리케이션과 그 안에서 필요한 모든 설정, 패키지, 라이브러리, 실행 명령까지 하나의 묶음으로 저장한 템플릿입니다.예를 들어 Node.js 애플리케이션을 배포한다고 해봅시다.보통은 서버에서 Node 설치하고, npm으로 패키지를 설치하고, 실행 스크립트를 지정하죠.하지만 도커를 쓰면 이 과정을 Dockerfile이라는 파일에 정리할 수 있습니다.FROM node:18-alpineWORKDIR /appCOPY package*.json ./RUN npm installCOPY . .CMD ["npm", "start"]이 파일을 기반으로 docker build를 하면 이미지가 만들어집니다.이 이미지 안에는 Node 18..

처음 서버 배포를 하던 시절, 개발 환경이 제멋대로 달라지는 게 정말 골칫거리였습니다.로컬에서는 잘 돌던 코드가 서버에 올리면 에러가 나고,“그거 너 노드 버전 달라서 그래” 같은 말을 수도 없이 들었죠.그러다 “환경 자체를 코드로 묶어서 관리할 수 있다”는 말을 듣고 처음 접한 게 Docker였습니다.당시엔 이름부터 낯설었지만, 한 줄 요약하자면 도커는 **‘어디서나 똑같이 실행되는 개발 환경을 만드는 도구’**였습니다.환경이 다르면 코드가 망가진다서버를 옮기거나 팀원이 새로 합류할 때마다 생기는 “환경 차이” 문제는 정말 흔합니다.리눅스 버전이 달라서 패키지가 깨지고,라이브러리 버전이 엇나가서 빌드가 실패하는 등,결국 해결책은 “환경 자체를 통째로 묶는 것”이었습니다.이걸 가능하게 만든 게 바로 컨테..

1. 리액트에서 폼이 중요한 이유리액트를 사용하다 보면 사용자 입력을 다뤄야 하는 경우가 매우 많습니다.회원가입, 로그인, 검색창, 댓글 입력 등 — **폼(Form)**은 거의 모든 웹 애플리케이션의 기본입니다.일반 HTML에서는 의 값을 브라우저가 직접 관리하지만,리액트에서는 컴포넌트가 입력값을 직접 관리합니다.이 방식을 **Controlled Component (제어 컴포넌트)**라고 부릅니다.2. Controlled Component란?Controlled Component는 말 그대로 **컴포넌트가 입력값을 제어(control)**하는 구조입니다.즉, 입력 필드의 값이 컴포넌트의 state와 연결되어,사용자의 입력이 있을 때마다 state를 업데이트합니다.아래 예제를 보세요.import React..

1. 조건부 렌더링이란?리액트에서는 상황에 따라 화면에 다른 UI를 보여주는 것을 조건부 렌더링이라고 합니다.예를 들어 로그인 여부, 데이터 존재 유무, 버튼 클릭 상태에 따라서로 다른 화면을 보여줘야 할 때가 많죠.HTML에서는 보통 if 문이나 display:none 같은 CSS 조작을 사용했지만,리액트에서는 JSX 내부에서 조건문을 활용합니다.function App() { const isLoggedIn = true; return ( {isLoggedIn ? 환영합니다! : 로그인이 필요합니다.} );}여기서 {}는 JSX 내부에서 자바스크립트 표현식을 사용할 수 있는 영역입니다.따라서 삼항연산자를 통해 조건에 따라 다른 엘리먼트를 반환할 수 있습니다.2. 삼항 연산자 (..

1. 리스트 렌더링이란?리액트에서 배열 데이터를 화면에 표시하려면단순히 하나씩 나열하는 대신 **반복문(map)**을 이용해 렌더링합니다.예를 들어, 사용자 목록을 렌더링한다고 가정해봅시다.function UserList() { const users = ['기범', '지수', '민준', '수현']; return ( {users.map((user) => ( {user} ))} );}이렇게 하면 users 배열의 각 요소가 형태로 출력됩니다.리액트는 map()의 반환값을 자동으로 인식해, JSX 요소 리스트로 변환합니다.하지만 여기서 중요한 점은 — 모든 반복된 요소에는 key가 필요하다는 것입니다.2. Key 속성이 필요한 이유리액트는 Virtual DO..

1. 리액트에서의 이벤트 처리란?HTML에서는 클릭 이벤트를 처리할 때 이렇게 작성합니다.버튼하지만 리액트에서는 이벤트를 문자열이 아닌 함수로 전달합니다.또한 HTML의 이벤트 이름은 소문자지만,리액트에서는 **CamelCase(낙타 표기법)**으로 작성해야 합니다.function App() { function handleClick() { alert('클릭되었습니다!'); } return 버튼;}즉, HTML의 onclick → React의 onClick,onchange → onChange 처럼 표기 방식이 달라집니다.2. 이벤트 객체(Event Object)이벤트가 발생하면 리액트는 이벤트 정보를 **SyntheticEvent(합성 이벤트)**라는 형태로 전달합니다.이는 브라우저 간의 차이를..

1. 생명주기(Lifecycle)란?리액트에서 컴포넌트는 생성되고, 업데이트되고, 사라지는 흐름을 가지고 있습니다.이 과정을 **컴포넌트의 생명주기(Lifecycle)**라고 부릅니다.쉽게 말하면, 리액트 컴포넌트도 사람처럼“태어남 → 변화함 → 사라짐”의 과정을 겪는다는 뜻입니다.이 생명주기를 이해하면 다음과 같은 일들을 더 효율적으로 처리할 수 있습니다.API 데이터를 컴포넌트가 처음 렌더링될 때 불러오기특정 상태가 바뀔 때만 실행되는 로직 제어컴포넌트가 사라질 때 정리(clean-up) 작업 수행2. 클래스형 컴포넌트의 생명주기 메서드리액트 초창기에는 클래스형 컴포넌트에서 생명주기 메서드를 사용했습니다.아래 코드는 기본적인 구조를 보여줍니다.import React, { Component } from..