개발지식소

Docker 멀티 컨테이너와 Compose, CI/CD 배포

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

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

최근 웹 개발 환경에서 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를 사용하다 보면 **ORM(Object-Relational Mapping)**이라는 개념을 자주 접하게 됩니다. ORM은 간단히 말해 객체 지향 프로그래밍의 객체와 관계형 데이터베이스의 테이블을 매핑해주는 기술입니다. 즉, 데이터베이스에 접근하기 위해 일일이 SQL 쿼리를 작성하는 대신, 파이썬 코드만으로 데이터베이스의 데이터를 조회하고 조작할 수 있도록 도와줍니다. Django에서는 이 ORM을 활용하여 개발자가 직관적이고 가독성 높은 코드로 데이터베이스 작업을 수행할 수 있으며, 데이터베이스 종류에 관계없이 동일한 코드로 동작하게 할 수 있다는 큰 장점이 있습니다. 이번 포스트에서는 Django ORM의 기초 개념과 함께 모델 정의, 마이그레이션, 주요 QuerySet API 사용법, 그..