클라이밍하는 개발자

단일 장애 지점(SPOF)이란 무엇인가요?

🤔 SPOF가 뭔가요?단일 장애 지점(Single Point of Failure, SPOF)은 마치 우리 집의 메인 전기 차단기 같은 존재예요! 🏠⚡메인 차단기가 고장나면 집 전체가 정전되죠? 시스템에서도 마찬가지로 하나의 구성 요소가 죽으면 전체 서비스가 마비되는 지점을 SPOF라고 해요.💡 가용성(Availability)이란?정상 운영 시간 ÷ 전체 시간 × 10099.999% = 연간 5분 정도만 다운타임 허용 (고가용성, HA) 😱카카오톡이 하루 종일 안 된다고 생각해보세요... 그게 바로 가용성 문제!🔍 현재 상황 분석주어진 시스템을 살펴보면✅ DB: Master 1대 + Replica 3대 (Failover 지원) - 안전함!❌ API Server: 1대만 운영 - 위험한 SPOF!A..

CI/CD란 무엇인지 설명해주세요

CI/CD란 무엇인지 설명해주세요프론트엔드와 관련된 질문이에요.CI/CD는 애플리케이션 배포 과정을 자동화하여 더 짧은 주기로 고객에게 서비스를 제공하는 방식입니다. 먼저, CI는 Continuous Integration의 약어로 지속적 통합을 의미합니다. CD는 Continuous Delivery(지속적 전달) 또는 Continuous Deployment(지속적 배포) 를 의미합니다.먼저, CI는 개발자들이 코드 변경사항을 주기적으로 메인 브랜치에 병합하는 과정을 자동화한 것입니다. 이 과정에서 코드 변경사항이 발생할 때마다 자동으로 빌드와 테스트를 수행하여 문제를 조기에 발견할 수 있습니다. 예를 들어, 여러 개발자가 함께 작업할 때 한 개발자의 변경사항이 다른 개발자의 작업과 충돌하거나 전체 애플리..

Virtual DOM에 대해서 설명해주세요.

Virtual DOM이 뭐길래? 🤔Virtual DOM을 쉽게 설명하면 집 설계도 같은 개념이에요! 🏠실제 집을 지을 때를 생각해보세요매번 벽을 부수고 다시 짓는 건 비용이 엄청나죠 💸대신 설계도를 먼저 수정하고 비교해서정말 바뀐 부분만 실제 공사를 진행해요 🔨Virtual DOM도 마찬가지로 메모리 상의 가벼운 복사본을 만들어서, 실제 DOM 조작을 최소화하는 똑똑한 방법이에요!왜 Virtual DOM이 필요할까? 😫실제 DOM의 문제점브라우저의 실제 DOM은 무거운 짐짝이에요! 📦하나의 div 요소만 해도...- style 계산- 레이아웃 재계산 - 페인팅- 리플로우- 수많은 브라우저 API...페이스북 뉴스피드처럼 댓글 하나만 추가해도 전체 페이지가 다시 그려지는 상황이 발생했어요! ?..

JWT 특징과 주의 사항을 설명해주세요.

JWT가 뭐길래? 🤔JWT(JSON Web Token)는 디지털 신분증 같은 개념이에요!카페에서 스탬프 카드를 생각해보세요 ☕️카드에 이름, 적립 횟수가 적혀있고카페 직원이 확인만 하면 바로 서비스 제공별도로 고객 DB를 조회할 필요 없음JWT도 마찬가지로 토큰 자체에 사용자 정보가 들어있어서, 서버가 별도 조회 없이 바로 인증할 수 있어요!JWT의 구조 🏗️JWT는 점(.)으로 구분된 3부분으로 구성돼요eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEyM30.signature_here 헤더 . 페이로드 . 시그니처1. 헤더 (Header) 📋토큰 타입과 암호화 알고리즘 정보예: {"alg": "HS256", "typ": "JWT"}2. 페이로드 ..

SOP가 뭐길래? 🤔SOP(Same-Origin Policy)는 브라우저의 보안 정책이에요! 다른 도메인끼리 함부로 통신하지 못하게 막는 경비원 같은 역할을 해요 🛡️예를 들어내 사이트: mysite.com외부 API: api.weather.com이 둘이 직접 통신하려고 하면? "안 돼!" 라고 브라우저가 막아버려요 ❌CORS 설정의 한계 😅보통은 CORS 헤더를 서버에서 설정해서 해결하죠:Access-Control-Allow-Origin: *하지만 외부 API 서버를 내가 직접 관리하지 않는다면? 설정할 수 없어요! 😱 프록시 서버: 똑똑한 중간다리 🌉작동 원리마치 심부름센터같은 개념이에요!브라우저: "야, 날씨 API 데이터 좀 가져와!"프록시 서버: "알겠어, 내가 대신 가져올게!" 🏃‍..

트랜잭셔널 아웃박스 패턴 🎯왜 필요할까? 🤔온라인 쇼핑몰을 운영한다고 생각해보세요! 고객이 주문을 완료하면:주문 정보를 DB에 저장 💾결제 시스템에 알림 💳재고 시스템에 알림 📦이메일 발송 📧이 모든 작업이 동시에 성공해야 하는데, 만약 주문은 저장됐는데 결제 시스템 알림이 실패하면? 😱 고객은 돈만 빠져나가고 상품은 못 받는 상황이 발생할 수 있어요!기존 방식의 문제점 💥// 위험한 코드 예시async function processOrder(orderData) { await db.orders.create(orderData); // DB 저장 성공 await paymentService.notify(orderData); // 갑자기 네트워크 오류! 💀}이런 상황을 이중 쓰기 문..

CSRF가 뭔가요? 🤔CSRF(Cross-Site Request Forgery)는 한마디로 "신분도용 사기"와 비슷해요!일상 예시로 설명하면: 여러분이 은행 앱에 로그인한 상태에서, 악성 사이트를 방문했더니 여러분 모르게 계좌이체가 실행되는 것과 같습니다 💸브라우저가 "아, 이 사람이 은행 앱에 로그인되어 있으니 진짜 본인이 요청한 거겠구나!"라고 착각하는 거죠 🏦공격 시나리오 단계별 분석 🎭1단계: 평범한 로그인 😊철수가 "매일메일" 서비스에 로그인서버가 세션 쿠키를 브라우저에 저장이제 철수는 인증된 사용자!2단계: 함정에 빠지다 😱철수가 "무료 아이폰 당첨!" 같은 피싱 사이트 클릭또는 SNS에서 악성 링크를 클릭심지어 정상 사이트의 악성 광고를 볼 수도 있어요3단계: 몰래 공격 실행 🕵..

box-sizing이 뭔가요? 🤔웹 개발을 하다 보면 분명 width: 200px로 설정했는데 실제로는 더 큰 요소가 나타나는 경우를 경험해보셨을 거예요. 마치 피자 박스를 주문했는데 생각보다 훨씬 큰 박스가 온 것처럼 말이죠!이런 상황이 바로 box-sizing 속성과 관련이 있습니다 🍕두 가지 계산 방식 📏1. content-box (기본값) - "속만 재는 방식"일상 예시: 선물 상자를 만들 때 내용물만 측정하는 방식상자 안에 들어갈 물건: 200px상자 벽 두께(padding): 20px씩 양쪽상자 테두리(border): 2px씩 양쪽실제 상자 크기: 200 + 40 + 4 = 244px 📦2. border-box - "전체를 재는 방식" ⭐일상 예시: 선물 상자의 전체 크기를 미리 정하는..

🏠 IP 주소의 두 얼굴: 공인 vs 사설공인 IP 주소 (Public IP) 🌍전 세계에서 유일무이한 주소인터넷 상에서 직접 통신 가능ISP(통신사)에서 할당마치 집 주소처럼 전 세계 어디서든 찾을 수 있음사설 IP 주소 (Private IP) 🏠특정 네트워크 안에서만 유효한 주소외부에서 직접 접근 불가라우터/공유기가 할당마치 아파트 호수처럼 그 아파트 안에서만 의미 있음사설 IP 대역 📋10.0.0.0 ~ 10.255.255.255 (대기업 네트워크) - A클래스172.16.0.0 ~ 172.31.255.255 (중간 규모 네트워크) -B클래스192.168.0.0 ~ 192.168.255.255 (가정용 - 가장 흔함!) -C클래스🤷‍♂️ 왜 사설 IP를 쓸까?1. IP 주소 부족 문제 해결..

프론트엔드 개발자가 꼭 알아야 할 이미지 포맷 완벽 가이드 📸웹 개발을 하다보면 항상 마주치는 고민이 있죠. "이 이미지는 JPEG로 할까? PNG로 할까? 요즘 WebP도 많이 쓴다던데..." 😅오늘은 웹에서 자주 사용하는 JPEG, PNG, WebP, SVG 포맷의 특징을 일상 예시와 함께 쉽게 알아보겠습니다!📷 JPEG - 사진의 친구JPEG(Joint Photographic Experts Group)는 마치 음악을 MP3로 압축하는 것과 비슷해요. 파일 크기는 작아지지만 조금씩 품질이 손실됩니다.특징손실 압축 방식 사용파일 크기가 작아서 웹에서 빠르게 로딩 ⚡투명도 지원 안함 ❌편집할 때마다 화질 저하언제 사용할까? 🤔풍경 사진, 인물 사진 같은 복잡한 이미지인스타그램 피드 이미지블로그 본..