본문 바로가기

전체 글

(64)
SWR SWRStale While RevalidateAPI 데이터를 가져오고, 캐싱하고, 자동으로 최신 상태로 갱신해 주는 React 데이터 패칭 라이브러리서버 데이터를 더 쉽게 관리할 수 있도록 도와주며,useState, useEffect, fetch, loading/error/cache 처리를 직접 구현하는 부담을 줄여줌Next.js를 만든 회사인 Vercel에서 만든 라이브러리로, React와 Next.js 프로젝트에서 자주 사용됨 핵심 동작먼저 캐시에 저장된 기존 데이터를 보여주고,동시에 백그라운드에서 최신 데이터를 다시 요청한 뒤,새 데이터가 도착하면 화면을 자동으로 갱신단, 캐시된 데이터가 없는 첫 요청에서는 일반적인 로딩 상태가 먼저 보일 수 있음즉, 사용자는 빈 화면을 오래 기다리지 않아도 되고,..
Zero Trust Zero Trust아무도 믿지 않는다(Trust 없음)는 보안 모델내부든 외부든 무조건 검증하고 접근 허용 왜 나왔는가예전 보안 방식• 회사 내부 - 안전• 외부 - 위험→ 내부 들어오면 거의 다 통과됨여기서의 문제• 내부 해킹 (계정 탈취, 악성코드)• VPN 뚫리면 끝→ 이걸 막기 위해 Zero Trust 등장 Zero Trust 3가지 원칙1. 항상 검증 (Verify explicitly)• 로그인했다고 끝 아님• 매 요청마다 확인 ✔ 사용자 ✔ 디바이스 ✔ 위치2. 최소 권한 (Least privilege)• 필요한 것만 접근 허용• 예: 파일 하나만 접근 허용3. 침해 가정 (Assume breach)• 이미 해킹됐다고 가정하고 설계• 그래서 계속 체크함 실제 적용 예시• 로그인 + ..
Memory Leak Memory Leak (메모리 누수)프로그램이 더 이상 필요 없는 메모리를 해제하지 못하고 계속 잡고 있는 상태안 쓰는 메모리를 반환 안 해서 계속 쌓이는 문제필요 없는 메모리를 해제하지 못해서 프로그램 성능이 나빠지는 현상 문제인 이유• 메모리가 계속 증가함• 앱이 느려짐• 심하면 앱 크래시 (Out of Memory)JS / React에서도 생김JavaScript는 자동으로 메모리 관리(GC)해 주지만, 그래도 발생✔ 예시(React)useEffect(() => { const timer = setInterval(() => { console.log("running"); }, 1000); // cleanup 안 하면 누수 발생}, []);컴포넌트 사라져도 setInterval 계속 돌아감✔ 해..
Reverse Proxy Reverse Proxy사용자 대신 서버 앞에서 요청을 받아서, 내부 서버로 전달해 주는 중간 서버 개념 정리• Forward Proxy: 클라이언트 앞• Reverse Proxy: 서버 앞 흐름1. 사용자가 요청 보냄2. Reverse Proxy 서버가 먼저 받음3. 내부 서버(Backend) 중 하나로 전달4. 결과 받아서 사용자에게 다시 응답 왜 필요한가1. 로드 밸런싱• 서버 여러 개로 요청 분산• 트래픽 몰려도 안 죽음→ 예: 서버 3개 있으면 나눠서 처리2. 보안• 외부에 실제 서버를 숨김• 공격은 proxy에서 먼저 막음→ 직접 서버 IP 안 보임3. 캐싱 (속도 ↑)• 같은 요청은 저장해놨다가 바로 응답→ 웹사이트 빨라짐4. SSL처리 (HTTPS)• HTTPS 인증서 처리도 대신 해줌→ ..
MVVM Pattern MVVM PatternUI와 로직을 깔끔하게 분리하기 위한 구조특히 Android, iOS, React 같은 UI 중심 개발에서 많이 사용 구조 요약View: 화면만ViewModel: 중간 처리Model: 데이터 담당 3가지 구성1. Model (데이터)• DB, API, 비즈니스 로직• 예: 유저 정보, 게시글 데이터→ 진짜 데이터가 있는 곳2. View (UI)• 화면 (버튼, 텍스트, 리스트 등)• 사용자 입력 받음→ 보여주는 역할만3. ViewModel (중간 관리자)• View ↔ Model 연결• 데이터 가공해서 View에 전달• 상태 관리→ 똑똑한 중간 통역자 흐름1. View에서 이벤트 발생 (버튼 클릭)2. ViewModel이 처리 요청3. Model에서 데이터 가져옴4. ViewMode..
Normalization 데이터베이스 정규화 (DB Normalization)중복 제거 + 구조 깔끔하게 만드는 것 예시학생ID | 이름 | 과목 | 교수--------------------------1 | 철수 | 수학 | 김교수1 | 철수 | 영어 | 박교수→ 문제: 이름(철수)이 계속 반복됨정규화 하면[학생]학생ID | 이름[수업]학생ID | 과목 | 교수효과✔ 중복 감소✔ 수정/삭제 오류 방지✔ 데이터 구조 깔끔 데이터 스케일 정규화 (머신러닝/수학)값의 범위를 맞추는 것 예시• 키: 150~190• 몸무게: 40~100→ 그냥 쓰면 키가 더 크게 영향 줌그래서 이렇게 변환 → Min-Max Normalization (최소-최대 정규화)x' = (x - min(x)) / (max(x) - min(x))결과✔..
Pointer Pointer데이터가 저장된 주소를 저장하는 변수 핵심 개념일반 변수는 값을 직접 저장하지만포인터는 값이 있는 위치(메모리 주소)를 저장 예시(C 기준)int a = 10;int *p = &10;a: 값 10을 저장&a: a의 주소p: 그 주소를 저장하는 포인터→ p는 "a가 어디 있는지" 알고 있는 변수 중요한 연산자1. & (주소 가져오기)&p // p의 주소&a // a의 주소2. * (값 접근 = 역참조)*p // p가 가리키는 값 왜 필요한가• 메모리 직접 제어• 배열, 문자열 처리• 함수에서 값 변경 (call by reference)• 동적 메모리 할당 (malloc)
Middleware Middleware클라이언트 요청과 서버 로직 사이에서 중간 역할을 하는 소프트웨어 요청(Request) → 미들웨어 → 실제 서버 로직 → 응답(Response) 왜 필요한가서버가 모든 걸 직접 처리하면 코드가 복잡해짐그래서 공통 처리를 미들웨어에서 함예시• 로그인 인증 확인• 요청 로그 기록• 에러 처리• 권한 체크• CORS 처리• 토큰 검증 구조 예시사용자 요청↓Middleware (로그 기록)↓Middleware (JWT 인증 확인)↓Controller (실제 기능 처리)↓응답 반환 실제 코드 예app.use((req, res, next) => { console.log("요청 들어옴:", req.url); next(); // 다음 단계로 넘김});여기서 미들웨어는요청을 먼저 받음 → 작업 수..