인프런 커뮤니티 질문&답변
작성한 질문수
45번강의와 46번 강의가 헷갈립니다.
작성
·
43
0
45강의와 46강의 둘다 Next 프로젝트를 만드는데
이전에는
$ nest new my-server를 이용해 프로젝트를 생성했고
46강의에서는
$ npx create-next-app@latest
만드는 방식이 다른데 어떤 차이인지 궁금합니다.
답변 2
1
안녕하세요! 강의 잘 들어주셔서 감사합니다 ~
질문해주신 내용에 답변 드려볼게요 !!
두 강의에서 사용하는 프로젝트가 다른 프레임워크이기 때문에 프로젝트 생성 방식이 다른거에요 !
45강 - 백엔드 프로젝트(Nest.js)를 Docker로 실행 시키기에서는
$ nest new my-server 명령어 사용을 통해
Nest.js 프레임워크로 백엔드 API 서버를 실행 시켰어요 ~
46강 - 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기에서는
$ npx create-next-app@latest 명령어 사용을 사용해서
Next.js 프레임워크로 프론트엔드 웹 애플리케이션 배포했었어요 ~
즉, 같은 Node.js 생태계이지만 용도가
완전히 다른 프레임워크라서 프로젝트 생성 명령어도 다른 거예요!
간단히 핵심만 정리하자면 아래와 같아요 :)
Nest.js: 백엔드 API 서버 개발용 (Spring Boot와 비슷한 역할)
Next.js: 프론트엔드 웹 애플리케이션 개발용 (React 기반)
추가로 궁금하신 점 있으시면 또 질문 남겨주세요~~
웹서비스 구성에 대해 답변 드려볼게요!!
"웹서비스를 하기 위해서는 웹페이지 서버, 백엔드서버, 디비서버 이렇게 구성하는건가요?"
-> 네 맞습니다! 일반적인 웹서비스는 아래와 같이 구성되요 ~
프론트엔드 서버 (웹페이지 서버)
- 사용자가 보는 화면(UI)을 담당
- HTML, CSS, JavaScript 등의 파일을 제공
- Next.js, React, Vue.js 등으로 개발
백엔드 서버 (API 서버)
- 비즈니스 로직 처리 및 데이터 처리를 담당
- 프론트엔드와 데이터베이스 사이의 중간 역할
- Spring Boot, Nest.js, Express.js 등으로 개발
데이터베이스 서버
- 데이터를 저장하고 관리
- MySQL, PostgreSQL, MongoDB 등
처음에는 서버가 하나만 있다고 생각하기 쉬운데,
역할을 분리해서 각각 다른 서버에서 처리하는 게 일반적이에요!
"한 프레임워크에서 백엔드와 프론트 엔드를 다 해주는 프레임워크도 있나요?"
-> 네 ! 대표적으로 아래와 같은 프레임워크들이 있어요 ~
- Next.js: 프론트엔드 + 백엔드 API 모두 개발 가능
- Nuxt.js: Vue.js 기반 풀스택 프레임워크
- SvelteKit: Svelte 기반 풀스택 프레임워크
- Django: Python 기반으로 풀스택 개발 가능
다만 실무에서는 역할 분리, 확장성, 유지보수 등의 이유로
프론트엔드와 백엔드를 분리해서 개발하는 경우가 많아요~!
추가로 궁금하신 점 있으시면 언제든 질문 남겨주세요~~
0
안녕하세요, 인프런 AI 인턴입니다. hantrust87님.
질문해주신 내용은 두 가지 다른 프레임워크와 명령어에 관련된 부분입니다. 다음과 같이 차이점을 설명드리겠습니다.
NestJS와 Next.js의 차이점
NestJS:
nest new my-server는 NestJS 프로젝트를 생성할 때 사용하는 명령어입니다.
- NestJS는 Node.js 환경 위에서 작동하며, 서버 사이드 앱 개발을 위한 프레임워크입니다. 모듈화된 구조와 강력한 타입스크립트 지원을 통해 생산적인 서버 사이드 애플리케이션 개발을 돕습니다.
Next.js:
npx create-next-app@latest는 Next.js 프로젝트를 생성하는 명령어입니다.
- Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하여 성능 최적화 및 SEO 향상을 가능하게 합니다. 프론트엔드 개발에 포커스가 맞춰져 있습니다.
결론
- 이 두 프레임워크는 각각의 용도와 강점이 다르며, 사용하는 목적에 맞게 선택하여 사용하시면 됩니다. NestJS는 주로 백엔드 개발 용도에, Next.js는 프론트엔드 개발에 적합합니다.
- 같은 ‘명령어로 프로젝트를 만드는 과정’을 나타내지만, 생성되는 프로젝트의 목적과 구조가 크게 다르다는 점을 이해하시면 혼동을 줄일 수 있을 것입니다.
질문에 대한 답변으로 더 많은 정보가 필요하시다면 아래 유사한 질문의 답변을 참고해보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아~ 다른 프레임워크였네요. 감사합니다.
하나 질문이 있는데요.
웹서비스를 하기 위해서는
웹페이지 서버, 백엔드서버, 디비서버
이렇게 구성하는건가요?
이쪽 지식이 없어.. 간단히 그냥 서버가 하나만 있다고 생각했어가지고요..
그리고 한 프레임워크에서 백엔드와 프론트 엔드를 다 해주는 프레임워크도 있나요?