[TIL] 내일배움캠프 101일차_[Django] Frontend 적용법

👀Today I Learn

1. 퓨어 Django

개요

• Django의 기본 템플릿 엔진을 활용하여 HTML을 렌더링하고, JavaScript 없이 서버 사이드에서 모든 처리를 담당하는 방식
• views.py에서 데이터를 처리하고, context를 통해 HTML에 데이터를 전달

장점

• 설정이 간단: 추가적인 JavaScript 프레임워크 없이 Django 기본 기능만 사용 가능
• 서버 렌더링 지원: SEO(검색 엔진 최적화)에 유리
• 백엔드와 프론트엔드가 통합됨: 관리가 쉬움

단점

• 비동기 처리 불가능: 페이지 이동 시 전체 페이지가 새로고침됨
• 동적 인터페이스 구축이 어려움: 최신 웹 트렌드(싱글 페이지 애플리케이션 등) 반영 어려움
• 확장성 부족: 프로젝트가 커질수록 유지보수가 어려워짐

추천 사용처

• 간단한 CRUD 웹사이트 (게시판, 블로그, 사내 관리 시스템 등)
• SEO가 중요한 정적인 웹사이트

2. DRF + JavaScript (Ajax, Fetch API, Axios)

개요

• Django Rest Framework(DRF)를 사용하여 REST API를 만들고, JavaScript(jQuery, Fetch API, Axios 등)를 사용하여 API를 호출하는 방식
• Django의 template을 활용하면서 JavaScript로 API를 호출하여 데이터를 주고받음

장점

• 기본적인 비동기 처리 가능: Ajax 또는 Fetch API를 사용하여 페이지 새로고침 없이 데이터 갱신 가능
• 기존 Django 템플릿을 활용 가능: Django의 템플릿 엔진과 함께 사용하여 서버 렌더링과 비동기 요청을 병행할 수 있음
• React/Vue 같은 프레임워크 없이도 동적 기능 가능: 간단한 UI/UX 개선 가능

단점

• 코드가 복잡해질 수 있음: Django 템플릿과 JavaScript가 섞이면서 코드 관리가 어려울 수 있음
• 프론트엔드 개발 생산성이 낮음: 대규모 프로젝트에서는 React/Vue 같은 프레임워크보다 비효율적

추천 사용처

• 기존 Django 프로젝트에서 일부 기능을 비동기로 개선하고 싶을 때
• 간단한 인터랙티브 기능이 필요한 웹 애플리케이션

3. DRF + 프론트엔드 (JS/HTML/CSS)

개요

• Django Rest Framework(DRF)를 백엔드 API로 사용하고, 순수한 JavaScript, HTML, CSS로 프론트엔드를 개발하는 방식
• JavaScript에서 fetch 또는 Axios를 활용하여 API 데이터를 가져오고, HTML을 조작하여 UI를 업데이트함

장점

• 프론트엔드와 백엔드를 완전히 분리 가능: Django가 API만 제공하고, 프론트엔드는 독립적으로 개발됨
• 모든 브라우저에서 동작 가능: React/Vue 같은 프레임워크를 사용하지 않아도 JavaScript만으로 동적 웹페이지 구현 가능
• 가벼운 웹페이지 구축 가능: 프레임워크를 사용하지 않으므로 불필요한 번들링 과정 없이 빠른 로딩 가

단점

• 프론트엔드 개발이 어려움: React/Vue 같은 라이브러리 없이 JavaScript로 직접 DOM 조작을 해야 함
• SPA(Single Page Application) 기능 구현이 어려움: 상태 관리, 컴포넌트 구조화 등이 부족하여 확장성이 낮음
• 코드 유지보수가 어려움: HTML, CSS, JavaScript가 분리되지 않아 코드가 복잡해질 가능성이 있음

추천 사용처

• 가벼운 API 기반 웹 애플리케이션 (예: 뉴스 피드, 검색 페이지 등)
• React/Vue를 사용하지 않고 프론트엔드를 직접 구축하고 싶은 경우

4. React 또는 Vue와 함께 사용

개요

• Django Rest Framework(DRF)로 API를 개발하고, React 또는 Vue를 사용하여 프론트엔드를 구축하는 방식
• API를 통해 데이터를 주고받으며, 프론트엔드와 백엔드를 완전히 분리하여 개발

장점

• 최신 프론트엔드 기술 활용 가능: 상태 관리(Redux, Vuex), 컴포넌트 기반 개발 등 최신 프론트엔드 패턴 적용 가능
• SPA(Single Page Application) 구현 가능: 부드러운 UI/UX 제공
• 프론트엔드와 백엔드의 완전한 분리: 독립적으로 배포 가능하며 확장성이 높음
• Next.js/Nuxt.js와 함께 사용하면 SEO 문제 해결 가능: 서버 사이드 렌더링(SSR) 활용 가능

단점

• 초기 설정이 복잡함: CORS 설정, JWT 인증 등의 추가 설정 필요
• 프론트엔드 배포가 별도로 필요함: Django와 별도로 React/Vue 프로젝트를 배포해야 함
• 학습 곡선이 있음: Django 개발자에게는 React/Vue 학습이 부담될 수 있음

추천 사용처

• 대규모 웹 애플리케이션 (쇼핑몰, 대시보드, 챗봇 등)
• 동적이고 인터랙티브한 웹사이트 개발
• 백엔드와 프론트엔드를 독립적으로 운영하고 싶은 경우

정리

방법	장점	단점	추천 사용처
퓨어 Django	설정 간단, 서버 렌더링 지원, 유지보수 쉬움	동적 기능 부족, 비동기 처리 어려움	정적 웹사이트, 간단한 CRUD 애플리케이션
DRF + JavaScript(Ajax, Fetch API)	비동기 처리 가능, Django 템플릿과 함께 사용 가능	코드 복잡해질 가능성, 확장성 부족	기존 Django 프로젝트에서 일부 동적 기능 추가
DRF + 프론트엔드(JS/HTML/CSS)	프론트엔드와 백엔드 분리 가능, 가벼운 웹사이트 구축 가능	유지보수 어려움, SPA 기능 구현 어려움	API 기반 경량 웹사이트, 검색 페이지, 뉴스 피드
DRF + React/Vue	SPA 구현 가능, 최신 기술 활용, 프론트엔드와 백엔드 완전 분리	초기 설정 복잡, 별도 배포 필요	대규모 프로젝트, 대시보드, 챗봇, 쇼핑몰

💡Today I Thought

오늘의 체크리스트

• 알고리즘 코드카타 1문제
• SQL 코드카타 1문제
• 게임 데이터 전처리
• Frontend 작업 시작
• TIL 작성
• WIL 작성

회고

 프론트엔드까지 쉬운게 하나도 없는 프로젝트 주차.. 진짜 너무 어렵다🫠 그냥 누가 호로록 해줬으면 좋겠는데.. 내가 해야겠지..?😂 GPT랑 잘 대화하면서 잘 구슬려서 해결해야겠다.