MERN과 데이트 앱 구축

MERN과 데이트 앱 구축

반응형

우리는 mern stack을 사용하여 데이트 앱을 만들 것입니다. 웹 앱은 아래의 완성된 앱의 스크린샷을 가지고 있습니다. 모든 데이터는 Node.js에 설정된 Api endpoints와 함께 몽고DB 데이터베이스에서 옵니다.

고 뒷부분으로 옮겨의 반응 앞 끝단은 재검토해 봅시다. 터미널 열기

데이트 앱 폴더를 만듭니다. 그 안에서 생성-반응-앱을 사용하여 새 앱 만들기

데이트-앱-프론트라고 불립니다. 다음은 이 작업을 수행하는 명령입니다.

cd dating-app-mern npx create-react-app dating-app-frontend

반응 기본 설정

React 프로젝트와 CD를 날짜 앱 프런트엔드 디렉터리로 돌아갑니다. 반응 시작

npm start로 앱합니다.

cd dating-app-frontend npm start

그런 다음 필요하지 않은 파일 중 일부를 삭제합니다.

헤더 구성 요소 만들기

헤더 구성요소를 생성해 보겠습니다. 먼저, 재료는 우리가 사용할 아이콘을 제공하기 때문에 반드시 설치해야 합니다.

npm i @material-ui/core @material-ui/icons

그런 다음 src 폴더 내에 구성 요소 폴더를 만듭니다. 두 개의 파일 만들기 -헤더.jsx

및 Header.css—구성 요소 폴더 내부에 있습니다. Header.js에는 두 가지가 있습니다: 사람

아이콘 및 포럼 아이콘입니다.

다음은 Header.jsx 파일의 내용입니다.

App.js 파일에 Header 구성 요소 포함

헤더.css 파일은 다음 내용을 포함합니다.

데이트 카드 구성 요소 만들기

이제 두 번째 구성 요소에 대해 살펴보겠습니다. 두 개의 파일 만들기 - 데이트 카드.js 및

DatingCards.css—구성 요소 폴더 내부에 있습니다. 그런 다음 App.js 파일에 DatingCards 구성 요소를 포함합니다.

진행하기 전에 리액션 틴더 카드 패키지를 설치해야 합니다. 이거요

패키지에는 스와이프 효과를 제공하는 기능이 있습니다.

npm i react-tinder-card

다음으로, 내용을 DatingCards.js에 넣습니다. 여기, 사람 상태 변수 안에, 당신은 저장한다.

네 사람의 이름과 이미지 그런 다음 DatingCard를 가져와 구성요소로 사용합니다.

여기서는 리액션 틴더 카드 설명서에 언급된 소품을 사용합니다.

스위프 및 OutFrame 기능이 필요합니다. 각 항목을 반복할 때

imgUrl 배경 이미지를 사용하여 h3 태그에 이름을 표시합니다.

이제 바닥글의 단추인 스와이프 구성 요소를 만들어 보겠습니다.

이러한 버튼은 앱의 스타일을 향상시킵니다. 간단한 앱이기 때문에 그것들은 작동하지 않을 것이다.

구성 요소 내부에 스와이프.jsx 및 스와이프.css의 두 파일 생성

또한 앱.js 파일에도 포함시켜야 합니다.

Swiper.jsx의 내용

다음으로, 버튼을 스타일링하고 있으며 스타일링 코드는 아래에 있습니다.

우리는 이제 앞부분을 끝냈다...

초기 백엔드 설정

Node.js code로 시작하여 백엔드로 이동하자. 다른 폴더를 만들어 api라고 이름붙여라.

그런 다음 패키지를 만듭니다.터미널에 npm init -y 명령을 입력하여 json 파일을 입력합니다.

그런 다음 시작하기 전에 두 개의 패키지를 설치해야 합니다. 터미널을 열고 설치합니다.

api 폴더의 Express 및 Mongoose

npm i express mongoose

이것이 mongoDb를 열고 우리 프로젝트에 링크를 복사한다.

앞으로 이동하기 전에 api 폴더에 nodemon을 설치합니다. 언제든지

인덱스.js 파일의 코드를 변경하면 노드 서버가 다시 시작됩니다.

즉석에서

npm i nodemon

초기 경로 설정

일반적으로 모든 것이 설정되었는지 확인하는 초기 경로를 생성합시다.

바르게 Node.js의 Express 패키지를 사용하여 경로를 만들 수 있습니다. 이 방법은 가장 많이 생성할 수 있습니다.

작동되고 있습니다. Node.js와 같은 대부분의 백엔드 언어는 다음과 같은 기능을 제공합니다.

데이터베이스와 상호 작용하는 경로를 작성합니다. 초기 경로가 상호 작용하지 않음

데이터베이스로 이동하면 GET 요청을 사용하여 간단히 텍스트를 반환합니다.

api 폴더에 index.js 파일을 만듭니다. 여기서 익스프레스를 가져옵니다.

몽구스가 먼저 짐을 꾸립니다. 그런 다음 Express를 사용하여 실행할 포트 변수를 만듭니다.

포트 5001

const express = require('express'); const mongoose = require('express'); //App Config const app = express() const port = process.env.PORT || 5001 //Middleware //DB Config //API Endpoints //Listener app.listen(port, () => console.log(`Listening on localhost: ${port}`))

데이터베이스 사용자 및 네트워크 액세스

MongoDB에서는 데이터베이스 사용자를 생성하고 네트워크 액세스를 제공해야 합니다.

MongoDB 스키마 및 경로

MongoDB는 데이터를 JSON 형식으로 저장한다.

기존 데이터베이스(예: 오라클)입니다. MongoDB에서 요구하는 스키마 파일을 만듭니다. 그것은 말한다.

MongoDB에 필드가 저장되는 방법.

여기서, 카드는 컬렉션 이름으로 간주되고, 당신은 cardSchema와 같은 값을 저장한다.

데이터베이스 이름과 imgUrl 키를 가진 개체로 구성됩니다. 이것들이 그 이름들이다.

MongoDB에서 사용하는 것입니다. Cards.js 파일을 만들고 다음 내용을 넣습니다.

이제 스키마를 사용하여 데이터베이스에 데이터를 추가하는 엔드포인트를 만들 수 있습니다. 그

MVC 패턴은 웹 애플리케이션의 전통적인 흐름입니다.

다음으로, 사용자로부터 데이터를 가져와서 다음 주소로 전송하는 POST 요청을 사용합니다.

데이터베이스 모든 엔드포인트를 사용할 수 있습니다. 예를 들어, 만약 당신이 Dev.to에 기사를 쓴다면

그리고 POST 버튼을 누르면, 당신의 글은 POST가 끝나면 Dev.to 데이터베이스에 저장됩니다.

요청이 들어왔습니다.

GET 엔드포인트는 데이터베이스에서 모든 데이터를 가져옵니다. 다시 말하지만, 너는 아무거나 줄 수 있다.

종점의 예를 들어, 당신이 Dev.to의 게시물을 탐색할 때, GET 요청은 다음과 같다.

엔드포인트로 전송되어 Dev.to 데이터베이스에서 모든 게시물을 가져옵니다.

폴더를 만들고 라우트 폴더에 라우트 이름을 지정하여 파일을 만들고 Card.js In Card.js라고 하며 /dating/card 끝점에 대한 POST 요청을 만듭니다. 짐은

MongoDB의 req.body에서. 그런 다음 create()를 사용하여 dbCard를 발송합니다. 그게 성공적이면, 넌

상태 201을 수신하고, 그렇지 않으면 상태 500을 수신합니다. 업데이트된 콘텐츠는 다음과 같이 표시됩니다.

대담한

그런 다음 /dating/card에 GET 끝점을 만들어 데이터베이스에서 데이터를 가져옵니다.

여기서 찾기()를 사용하여 성공 시 상태 200(또는 상태 500)을 받습니다.

당신이 이미지에서 볼 수 있듯이 나는 index.js에서 그것을 연결하는 일을 더 쉽게 하기 위해 라우터를 사용했다.

경로를 확인하려면 우체부 앱을 사용하자.

POST 요청을 진행하기 전에 두 가지를 완료해야 합니다.

첫째, CORS를 구현합니다. 그렇지 않으면 나중에 배포 시 교차 출처 오류가 발생합니다.

앱.

터미널을 열고 CORS를 설치합니다.

npm i cors

인덱스.js에서 CORS를 가져와 app.use()와 함께 사용합니다. 또한 다음을 사용해야 합니다.

express.json의 미들웨어. 수신을 구문 분석하는 데 필요하기 때문에 필요합니다.

MongoDB의 JSON 객체에서 본문을 읽습니다.

백엔드와 프런트엔드 통합

뒷부분을 앞부분으로 훅하자. 앞에서 호출하려면 공리 패키지를 사용하십시오.

end. Axios는 REST 엔드포인트에 API 요청을 만드는 자바스크립트 라이브러리입니다. 너

백엔드에 두 개의 엔드포인트를 만들었습니다. 접속하려면 악시오스가 필요하다. 클라이언트 열기

설치하도록 합니다.

npm i axios

그런 다음 새 axios.js 파일을 만든 다음

공리의 예 URL은 http://localhost:5001입니다.

import axios from 'axios' const instance = axios.create({ URL: "http://localhost:5001" }) export default instance

DatingCards.js에서는 주의 하드코딩된 내용을 제거합니다. 그러면 가져오기

로컬 공리 및 useEffect 후크를 사용하여 /dating/card에 API 호출

종점의 데이터가 수신되면 setPeople() 기능을 사용하여 데이터를 재설정합니다.

import React, { useState, useEffect } from 'react' import DatingCard from 'react-tinder-card' import './DatingCards.css' import axios from './axios' const DatingCards = () => { const [people, setPeople] = useState([]) useEffect(() => { async function fetchData() { const req = await axios.get("/dating/cards") setPeople(req.data) } fetchData() }, []) const swiped = (direction, nameToDelete) => { console.log("receiving " + nameToDelete) }

우리는 우리의 데이트 앱 프로젝트를 완료했습니다. 당신이 그것을 즐기고 많이 배웠기를 바랍니다.

우리는 다음 기사에서 heroku에 앱을 배치하는 방법에 대해 이야기 할 것이다.

반응형

from http://issue-disk.tistory.com/16 by ccl(A) rewrite - 2021-09-29 13:26:38