개발지식소

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.exam..

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 [l..

최근 웹 개발 환경에서 RESTful API는 더 이상 선택이 아닌 필수가 되었습니다. 웹 프론트엔드와 백엔드가 분리되고, 모바일 앱, IoT 기기, 외부 서비스와의 연동이 늘어나면서 API 중심의 설계가 표준으로 자리 잡고 있습니다. Django는 강력한 웹 프레임워크지만, API 개발을 위해서는 추가적인 도구가 필요합니다. 바로 Django REST Framework(DRF) 입니다. 여기에 사용자 인증까지 안전하게 구현하려면 **JWT(Json Web Token)**를 함께 활용하는 것이 일반적입니다. 이번 글에서는 DRF의 기초 개념과 함께 JWT 인증 방식을 이해해 보겠습니다. 1. Django REST Framework(DRF)란?Django REST Framework는 Django 위에서 동..

Django REST Framework(DRF)에서는 API를 구축하기 위해 다양한 방식의 뷰 클래스를 제공합니다. 그 중 대표적인 것이 APIView, Generic View(제네릭 뷰), 그리고 ViewSet입니다. 각 방식은 추상화 수준과 편의성이 다르며, 상황에 따라 알맞게 선택할 수 있습니다. 이번 포스트에서는 이 세 가지 뷰 클래스의 차이점과 사용 사례를 살펴보고, 코드 예시를 통해 언제 어떤 것을 사용하면 좋을지 설명합니다.APIView – 기본 클래스 기반 뷰APIView는 DRF에서 제공하는 가장 기본적인 클래스 기반 뷰(CBV)입니다. Django의 표준 View 클래스를 상속하여 만들어졌으며, REST API 개발에 필요한 다양한 기능(인증/권한, 요청 데이터 파싱, 예외 처리 등)을..

Django 프로젝트에서 Middleware의 기본 구조와 동작 순서Django의 **Middleware(미들웨어)**는 요청(request)과 응답(response)의 처리 과정에 끼어들어, 전역적으로 동작하는 플러그인 계층이라고 볼 수 있습니다. 미들웨어들은 Django 설정의 MIDDLEWARE 리스트에 정의된 순서대로 동작하며, 각각이 양파 껍질처럼 뷰(view)를 감싸는 계층으로 생각할 수 있습니다. 요청이 들어오면 MIDDLEWARE에 나열된 순서(위에서 아래)대로 각 미들웨어가 **요청 처리(request phase)**에 참여하고, 뷰가 처리된 후에는 반대로 **응답 처리(response phase)**를 거치면서 미들웨어들이 역순(아래에서 위)으로 호출됩니다. 이러한 동작 방식 때문에, ..