서식 있는 텍스트 languages/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

시각적으로 학습하는 방법을 선호한다면 이 튜토리얼의 동영상 버전을 확인해 보세요.

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

에서 전체 코드를 다운로드할 수 있습니다)

MERN을 사용하면 풀스택 솔루션을 만들 수 있습니다. 따라서 그 가능성을 최대한 활용하기 위해 MERN 스택 프로젝트를 만듭니다. 이 프로젝트에서는 백엔드와 프론트엔드를 모두 생성합니다. 프론트엔드는 React로 구현되고 백엔드는 MongoDB, Node.js, Express로 구현됩니다. 프론트엔드 

을 만들어 보겠습니다. 이 폴더에는 클라이언트 및 서버 폴더가 포함됩니다.

그런 다음 백엔드용 폴더를 만들고 이름을 server로 지정합니다. 그런 다음 npm init을 사용하여 

공식적으로 지원되는 표준 형식인 

을 사용하여 JavaScript 코드를 재사용할 수 있도록 패키징하기 위해 패키지 

위의 명령은 세 가지 패키지를 설치합니다.

package.json 파일에서 설치된 종속성을 확인할 수 있습니다. 패키지가 버전과 함께 나열되어야 합니다.

종속성이 성공적으로 설치되었는지 확인한 후 다음 코드를 사용하여 

에서 포트 변수에 액세스합니다.

이제 서버를 데이터베이스에 연결할 차례입니다. 데이터베이스로 MongoDB Atlas를 사용하겠습니다. MongoDB Atlas는 강력한 데이터 보안과 안정성을 제공하는 클라우드 기반 데이터베이스 서비스입니다. MongoDB Atlas는 만료되지 않는 프리 티어 클러스터를 제공하며 이를 통해 Atlas 기능 및 기능의 하위 집합에 액세스할 수 있습니다.

 가이드에 따라 계정을 만들고, 첫 번째 클러스터를 배포하고, 클러스터의 연결 문자열을 찾습니다.

이제 연결 문자열이 있으니 서버 디렉토리로 돌아가서 config.env 파일을 만듭니다. 그런 다음 연결 문자열을 새 

 변수에 할당합니다. 완료되면 파일은 아래와 비슷하게 보일 것입니다. 

를 데이터베이스 사용자 이름, 비밀번호, 클러스터 이름, 프로젝트 ID로 바꿉니다.

라는 파일을 만듭니다. 다음 코드를 추가하여 데이터베이스에 연결할 수 있습니다.

데이터베이스가 완료되었습니다. 서버가 완료되었습니다. 이제 API 엔드포인트 차례입니다. 먼저, 

를 추가해 보겠습니다. 'server' 디렉토리로 다시 이동하여 새 디렉토리와 파일을 만듭니다.

 파일에는 다음과 같은 코드 줄도 포함됩니다.

이 시점에서 애플리케이션을 실행하면 연결이 설정되면서 터미널에 다음과 같은 메시지가 표시됩니다. 최신 버전의 Node.js에 내장된 환경 변수 기능을 사용하고 있다는 점에 유의하세요.

백엔드는 여기까지입니다. 이제 프론트엔드 작업을 시작합니다.

프론트엔드에서는 React 애플리케이션을 만드는 현대적인 방법인 

 디렉토리 내의 새 터미널에서 다음을 설정해 보겠습니다.

프로젝트에 사용될 몇 가지 추가 종속성이 있습니다. 

 파일에서 content 필드를 편집합니다.

 파일에서 Tailwind 지침을 추가하고 나머지는 모두 삭제해야 합니다.

Tailwind는 미리 정의된 클래스 이름을 활용하여 CSS 스타일을 추가할 수 있는 유틸리티 우선 CSS 프레임워크입니다. 그리고 React Router는 React에 클라이언트 사이드 페이지 라우팅을 추가합니다!

 내부에서 다음 코드를 추가합니다.

 변수에 애플리케이션 페이지 경로를 설정하고 

를 사용하여 UI와 URL을 동기화했습니다. 

는 구성 요소 간 전환 시 원활한 전환을 지원합니다. 기본적으로 전체 페이지를 새로 고침하거나 다시 로드하는 대신, 변경해야 하는 구성 요소만 다시 로드하거나 새로 고침합니다. React Router는 필수는 아니지만 앱의 반응성을 높이려면 중요합니다.

다음으로 경로에 정의한 구성 요소를 만들어 보겠습니다. 

 폴더를 만듭니다. 우리가 생성하는 각 구성 요소에 새로운 

 폴더 안에 있음)을 추가합니다. 이 경우에는 

아래 스냅샷은 각 파일의 모습을 보여줍니다.

navbar.js 구성 요소에서 다음 코드를 사용하여 필요한 구성 요소에 연결되는 탐색 모음을 만듭니다.

다음 코드는 기록을 위한 구성 요소 보기 역할을 합니다. GET 메서드를 통해 데이터베이스의 모든 기록을 가져옵니다.

mern/client/src/components/RecordList.jsx

다음 코드는 레코드를 생성하거나 업데이트하는 양식 구성 요소로 사용됩니다. 이 구성 요소는 생성 명령이나 업데이트 명령을 서버에 제출합니다.

이것이 주요 레이아웃 구성 요소입니다. 

는 항상 모든 페이지의 맨 위에 표시되고 

에 정의한 자식 구성 요소를 허용합니다. 

구성 요소 생성 프로세스가 완료되었습니다. 또한 

를 사용하여 React 앱을 백엔드에 연결했는데, 이는 HTTP 요청을 처리하는 더 깔끔하고 쉬운 방법을 제공합니다. 

 블록에 다음 코드를 추가했습니다. POST 또는 PATCH 요청이 URL로 전송되면 

는 데이터베이스에 새 레코드를 추가하거나 데이터베이스의 기존 기록을 업데이트합니다.

또한 기존 레코드가 있으면 이를 로드하기 위해 생성자 블록 아래에 있는 

에 다음 코드 블록을 추가했습니다.

는 데이터베이스에서 기록을 가져오므로 

 메서드를 사용하여 데이터베이스에서 기록을 검색합니다. 이를 위해 

 함수 위에 다음 코드 줄을 추가했습니다.

모든 것을 닫은 후 앱을 시작하려면 아래 단계를 따르세요.

다음은 'Create Employee(직원 생성)' 버튼을 통해 'Jesse Hall', 'Kushagra Kesav', 'Stanimira Vlaeva'에 대한 기록을 추가한 후 기록 구성 요소의 랜딩 페이지가 표시되는 모습입니다.

직원을 추가할 수 있는 화면은 다음과 같습니다.

첫 번째 MERN 애플리케이션을 구축한 것을 축하드립니다. 더 많은 아이디어와 고급 개념을 알아보려면 

서식 있는 텍스트2 languages/mern-stack-tutorial

MongoDB Atlas 시작하기

SEO Section Overview-mern-stack-tutorial

역대 가장 빠른 MongoDB, MongoDB 8.0을 소개합니다! 더 보기 &gt;&gt;

역대 가장 빠른 MongoDB, MongoDB 8.0을 소개합니다! 더 보기 &gt;

Voyage AI가 MongoDB와 협력하여 Atlas에서 더욱 정확하고 신뢰할 수 있는 AI 애플리케이션을 지원합니다. 자세히 알아보기 >

이 튜토리얼에서는 MongoDB Atlas 데이터베이스에 액세스할 수 있어야 합니다. 계정이 없는 경우 무료로 가입하면 진행할 수 있습니다.

MERN Stack 사용 방법: 전체 가이드

MongoDB Atlas 시작하기