클라이밍하는 개발자

정적 IP 주소 할당 방식과 동적 IP 주소 할당 방식의 차이점을 설명해주세요.

🌐 정적 IP vs 동적 IP: 어떤 걸 써야 할까?백엔드 개발하다 보면 서버 설정할 때 IP 주소를 어떻게 할당할지 고민하게 되죠! 🤔 특히 Node.js 서버를 AWS나 클라우드에 배포할 때 말이에요. 정적 IP와 동적 IP의 차이를 알아보겠습니다.🏠 정적 IP: 집 주소처럼 고정된 주소정적 IP는 수동으로 직접 설정하는 방식이에요. 마치 집 주소처럼 한 번 정하면 바뀌지 않죠!아파트 입주로 비유하면 🏢정적 IP는 "101동 1001호"처럼 정확한 주소를 미리 정해두는 거예요. 누구든 이 주소만 알면 항상 같은 곳을 찾을 수 있죠.정적 IP 설정에 필요한 것들IP 주소: 192.168.1.100 (내 컴퓨터 주소)서브넷 마스크: 255.255.255.0 (우리 동네 범위)게이트웨이: 192.1..

위치를 동적으로 변경할 때 css 속성 중 transform과 position 중 어떤 것을 선호하시나요?

🎯 CSS의 transform vs position: 언제 뭘 써야 할까?프론트엔드 개발하다 보면 요소의 위치를 바꿔야 할 때가 정말 많죠! 🚀 특히 애니메이션이나 인터랙션을 만들 때 말이에요. 그런데 transform과 position 중 뭘 써야 할지 고민된 적 없나요?🏃‍♂️ transform: 성능의 승부수transform은 브라우저 렌더링 파이프라인에서 composite 단계에서만 실행돼요. 이게 왜 중요하냐면, 브라우저가 다른 요소들의 위치를 다시 계산하거나 화면을 다시 그릴 필요가 없다는 뜻이거든요!일상 예시로 설명하면 🏠집안 가구 배치를 바꾼다고 생각해보세요. transform은 가구를 들어서 공중에 띄워 이동시키는 거예요. 다른 가구들은 전혀 영향받지 않죠. 반면 position은..

리액트의 props와 state에 대해서 설명해주세요.

리액트의 props와 state에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.function ChildComponent(props) { props.name = "New Name"; // 오류 발생 가능 return {props.name};}이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다. state는 컴포넌트 내부에서 관리되는 데이터입니다. state는 동적으로 변경될 수 있으며, 컴포넌트의 렌더링에 영향을 미칩니다. state를 변경하면 컴포넌트는 다시 렌더링되며, UI가 업데이트됩니다. state는 주로..

🤔 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는 Continuous Integration의 약어로 지속적 통합을 의미합니다. CD는 Continuous Delivery(지속적 전달) 또는 Continuous Deployment(지속적 배포) 를 의미합니다.먼저, CI는 개발자들이 코드 변경사항을 주기적으로 메인 브랜치에 병합하는 과정을 자동화한 것입니다. 이 과정에서 코드 변경사항이 발생할 때마다 자동으로 빌드와 테스트를 수행하여 문제를 조기에 발견할 수 있습니다. 예를 들어, 여러 개발자가 함께 작업할 때 한 개발자의 변경사항이 다른 개발자의 작업과 충돌하거나 전체 애플리..

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

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단계: 몰래 공격 실행 🕵..