TwentyTwentyOne

📌  NestJS + Prisma + Next.js의 역할 및 장점1. NestJS + Prisma + Next.js의 조합이란?웹 애플리케이션을 개발할 때, 백엔드와 프론트엔드의 역할을 명확하게 분리하고, 효율적인 데이터 관리를 수행하는 것이 중요합니다.이 책에서는 NestJS(백엔드) + Prisma(데이터베이스) + Next.js(프론트엔드) 조합을 사용하여 확장 가능하고 유지보수하기 쉬운 쇼핑몰 애플리케이션을 개발할 것입니다.2. NestJS란? (백엔드 프레임워크)2.1. NestJS 개념 및 특징NestJS는 Node.js 기반의 진보된 백엔드 프레임워크로, 모듈 시스템을 활용하여 확장성과 유지보수성을 극대화할 수 있습니다.✅ TypeScript 기반 - 정적 타입 체크를 통한 안전한 개발 ..

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 마지막 글로, 이번 시리즈를 마무리하는 글입니다.이번 시리즈를 통해 웹 개발의 기초부터 실무까지의 흐름을 정리하면서, 웹 개발자가 되기 위한 기본적인 로드맵을 구축해 보았습니다. 1. 우리가 다뤄온 내용 정리이 시리즈에서는 웹 개발 입문자가 실무까지 나아갈 수 있도록 다음과 같은 주요 내용을 다뤘습니다.주제 핵심 내용1. 웹 개발이란?웹 개발의 기본 개념, 프론트엔드 & 백엔드 소개2. HTML/CSS 기초웹사이트의 구조 및 스타일링, 반응형 웹 디자인3. 자바스크립트 기초기본 문법 및 DOM 조작, 이벤트 핸들링4. 자바스크립트 프레임워크React, Vue, Angular 비교 및 선택 가이드5. 백엔드 기초Node.js, Express, 데이터베이스 ..

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 일곱 번째 글입니다. 이번에는 풀스택 프로젝트를 실제 배포하는 과정을 다룹니다.우리가 만든 React + Express + MongoDB 기반의 To-Do 리스트 웹앱을 클라우드 환경에서 서비스할 수 있도록 배포하는 방법을 알아보겠습니다. 1. 배포 개요1-1. 배포란?개발자가 만든 웹 애플리케이션을 실제 사용자들이 사용할 수 있도록 서버에 올리는 과정프론트엔드와 백엔드, 데이터베이스를 각각 배포해야 함배포 후에는 도메인 설정, HTTPS 적용, 성능 최적화 등을 고려해야 함1-2. 배포할 서비스 개요프론트엔드(React) → Netlify(Vercel) 사용백엔드(Express) → Render 사용데이터베이스(MongoDB) → MongoDB Atla..

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 여섯 번째 글입니다. 이번에는 풀스택 미니 프로젝트 실습을 진행하며, 지금까지 배운 내용을 실제 코드로 구현해보겠습니다.우리는 React(프론트엔드) + Express(백엔드) + MongoDB(데이터베이스) 조합으로 간단한 To-Do 리스트 웹앱을 만들어볼 것입니다.1. 프로젝트 개요1-1. 만들고자 하는 웹 애플리케이션기능: 사용자가 할 일을 입력하고, 추가/삭제할 수 있는 To-Do 리스트프론트엔드(React): UI 렌더링, 사용자 입력 처리백엔드(Express): API 서버, 데이터 저장/조회/삭제데이터베이스(MongoDB): 할 일 목록 저장1-2. 개발 환경Node.js (백엔드 서버 실행)Express (REST API 서버)MongoDB..