개발지식소

1. Django에서의 테스트 개요Django의 테스트는 크게 세 가지 특징이 있습니다:unittest 기반Python의 unittest 모듈을 확장한 구조라 문법이 친숙합니다.독립적인 테스트 데이터베이스실제 DB를 건드리지 않고, 테스트 실행 시 임시 데이터베이스가 자동으로 생성/삭제됩니다.다양한 테스트 도구 제공클라이언트 시뮬레이션(self.client), ORM 테스트, API 응답 검증 등 웹 프레임워크 특화 기능을 제공합니다.2. TestCase 기본 구조테스트 코드는 일반적으로 앱 디렉터리 안에 있는 tests.py 혹은 tests/ 디렉터리에 작성합니다.from django.test import TestCasefrom django.contrib.auth.models import Usercla..

1. CSRF(Cross-Site Request Forgery)1-1. 개념CSRF는 사용자가 의도하지 않은 요청을 특정 웹 서비스로 보내게 만드는 공격입니다. 예를 들어, 사용자가 이미 은행 사이트에 로그인한 상태에서 악의적인 사이트를 방문했을 때, 공격자가 준비한 폼이나 스크립트를 통해 자동으로 송금 요청이 전송될 수 있습니다. 서버는 세션 쿠키를 기반으로 해당 요청을 합법적인 사용자 요청으로 오인하기 때문에 문제가 발생합니다.1-2. 공격 시나리오사용자가 bank.com에 로그인 → 세션 쿠키 발급공격자가 evil.com에 악성 HTML 폼 배치사용자가 evil.com을 방문 → 브라우저가 자동으로 bank.com/transfer 요청 전송 (쿠키 포함)서버는 사용자가 보낸 정상 요청처럼 처리 → ..

1. 멀티 컨테이너 구성의 필요성컨테이너는 “하나의 컨테이너 = 하나의 프로세스”라는 원칙을 따르는 것이 이상적입니다. 즉, 하나의 컨테이너에 웹 서버, DB, 캐시를 모두 넣기보다 역할에 따라 분리하는 것이 바람직합니다.예시:web: Django 또는 Flask와 같은 애플리케이션 서버db: PostgreSQL, MySQL 등 데이터베이스 서버cache: Redis, Memcachedproxy: Nginx, Caddy와 같은 리버스 프락시/로드밸런서이렇게 분리하면 얻는 장점은 다음과 같습니다.유지보수성: 특정 서비스에 문제가 생겨도 해당 컨테이너만 재시작 가능확장성: 트래픽이 몰리면 웹 컨테이너만 수평 확장 가능표준화: 각 컨테이너가 독립적이므로 다른 프로젝트에도 쉽게 재활용 가능2. Docker Co..

1. Pages Router 개요Pages Router는 Next.js 1.x부터 존재했던 기존 라우팅 방식입니다. pages/ 디렉터리 안에 파일을 생성하면 그 파일명이 자동으로 라우트가 됩니다.예를 들어:pages/ ┣ index.js → / ┣ about.js → /about ┗ blog/[id].js → /blog/:id파일 이름 기반 자동 라우팅getStaticProps, getServerSideProps 등 데이터 패칭 함수 제공Link 컴포넌트를 통한 클라이언트 라우팅 지원👉 특징: 학습 곡선이 낮고 직관적, 기존 프로젝트에서 많이 사용됨.2. App Router 개요App Router는 Next.js 13에서 실험적으로 도입되고, 14부터 안정화된 새로..

1. Tailwind CSS란?Tailwind CSS는 Utility-first 접근 방식을 기반으로 한 CSS 프레임워크입니다.일반적인 CSS 프레임워크(예: Bootstrap)가 미리 정의된 컴포넌트를 제공하는 것과 달리, Tailwind는 작은 단위의 클래스를 조합해 원하는 UI를 직접 만들어 나가는 방식입니다.Tailwind의 특징Utility-first: bg-blue-500, text-center, p-4 같은 작은 단위의 클래스를 조합.빠른 프로토타이핑: 별도의 CSS 파일 없이 바로 클래스 조합으로 디자인 가능.높은 커스터마이징: tailwind.config.js에서 색상, 폰트, spacing 단위를 직접 설정.반응형 대응이 쉬움: sm:, md:, lg: 같은 접두어로 반응형 스타일 지..

1. SSR(Server Side Rendering)이란?개념SSR은 사용자가 페이지에 접속했을 때 서버에서 HTML을 즉시 생성해 전달하는 방식입니다. 브라우저는 완성된 HTML을 받아 곧바로 화면을 표시할 수 있고, 이후 자바스크립트가 실행되면서 인터랙티브 한 React 앱이 동작하게 됩니다.특징실시간 데이터 반영 가능: 요청 시마다 서버에서 데이터를 가져와 화면에 반영.SEO 친화적: 검색 엔진이 완성된 HTML을 바로 수집 가능.최초 응답 속도(FCP)는 빠름: 빈 화면 대신 바로 HTML을 내려주기 때문.코드 예시// pages/index.jsexport async function getServerSideProps() { const res = await fetch("https://api.exa..

1. Next.js란 무엇인가?Next.js는 React 애플리케이션 개발을 위한 프레임워크입니다. React만으로도 블로그를 만들 수 있지만, Next.js는 다음과 같은 기능을 제공해 훨씬 효율적인 개발이 가능합니다.파일 기반 라우팅: pages 폴더에 파일을 추가하는 것만으로 자동 라우팅SSR(서버사이드 렌더링) & SSG(정적 사이트 생성) 지원 → SEO 최적화API Routes → 별도 백엔드 없이 간단한 API 구현 가능이미지 최적화 → 성능 개선👉 즉, 블로그와 같은 콘텐츠 중심 웹사이트를 구축하는 데 최적화된 프레임워크입니다.2. 개발 환경 설정프로젝트 생성npx create-next-app@latest my-blogcd my-blognpm run devhttp://localhost:3..

1. 상태 관리란 무엇인가?React에서 상태(state)는 컴포넌트의 렌더링 결과를 결정하는 데이터입니다.지역 상태(Local State): useState, useReducer 등을 통해 개별 컴포넌트 안에서 관리전역 상태(Global State): 여러 컴포넌트가 공유해야 하는 상태 (예: 사용자 로그인 정보, 테마, 언어 설정 등)서버 상태(Server State): 서버에서 가져온 데이터로, 동기화가 필요 (예: 게시글 목록, API 응답 데이터)React의 상태 관리 도구들은 이 세 가지 범주를 효율적으로 다루는 데 초점을 맞추고 있습니다.2. Context API – 전역 상태 관리의 기초Context API는 React가 제공하는 기본 내장 기능으로, props drilling 문제를 해결..

React의 기본 Hook(useState, useEffect, useRef, useContext)은 “상태를 쓴다/부수효과를 관리한다”로 끝나지 않습니다. 언제, 어떻게 쓰느냐에 따라 렌더 횟수, 불필요한 네트워크 호출, 이벤트 리스너 누수까지 좌우됩니다. 아래는 개념 + 실전 성능 팁을 한 번에 정리한 가이드입니다.1) useState — 초기화·업데이트만 잘해도 빨라진다개념 요약컴포넌트 로컬 상태를 선언하고 업데이트합니다. 업데이트가 일어나면 컴포넌트는 다시 렌더 됩니다.성능 팁 1: Lazy 초기화로 무거운 계산 1회로 제한// ❌ 매 렌더마다 heavy() 실행됨const [list, setList] = useState(heavy());// ✅ 최초 마운트 시에만 heavy() 실행const [..

이 글은 “ORM이 뭐고 왜 쓰는가?”부터 시작해, Django ORM을 실무에서 제대로 쓰기 위한 핵심 기능과 종류(패턴/상속/쿼리/관계)를 한 번에 정리한 블로그 포스트입니다. 실습 가능한 코드와 체크리스트를 곁들였습니다.1) ORM이란 무엇인가?ORM(Object–Relational Mapping) 은 객체(클래스/인스턴스)와 관계형 데이터베이스(테이블/행) 사이를 자동으로 매핑해 주는 기술입니다.파이썬 코드로 모델을 다루면 ORM이 내부에서 SQL을 생성·실행하고 결과를 다시 객체로 돌려줍니다.장점: 생산성↑, 가독성↑, SQL 인젝션 위험↓(파라미터 바인딩), DB 의존도↓단점: SQL이 안 보이기 때문에 성능 병목(N+1, 불필요한 칼럼/조인) 이 숨어들기 쉽습니다.ORM 패턴의 “종류”Act..