Learn new Get simpler Do more

이제 블로그 페이지에 서버에 저장되어 있는 댓글(comment)을 불러오는 작업을 하겠습니다. 그렇게 하기 위해 우선은 components폴더 안에 댓글의 리스트를 보여줄 CommentsList.js파일을 생성해주고 코드는 다음과 같이 작성합니다. CommentsList.js const CommentsList = ({ comments }) => ( Comments: {comments.map(comment => ( {comment.postedBy} {comment.text} ))} ); export default CommentsList; ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-ro..

이제 실제로 서버에서 데이터를 로드해서 페이지를 불러오는 작업을 Axios를 이용해서 작성하겠습니다. 하드 코딩으로 되어있던 부분을 수정합니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import articles from './article-content'; const ArticlePage = () => { const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: ..

서버에서 문서 페이지로 데이터를 로드하는 방법을 살펴보겠습니다. 현재 페이지의 컴포넌트 중 어느것도 실제로 어떤 종류의 메모리도 가지고 있지 않습니다. 그 자체로 매개 변수로 요청을 받아서 그대로 결과를 뿌려주는 형태입니다. 이제 여기에 서버에서 반환하는 응답을 저장할 장소를 제공하도록 하겠습니다. 상태와 효과를 추가해주는 React hook을 사용합니다. 변경한 코드는 아래와 같습니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import NotFoundPage from './NotFoundPage'; import articles from './articl..

지금까지 작업한 Front End 파트와 Back End 파트를 연결하도록 하겠습니다. (참고) VS Code에서 따로 작업한 코드를 한 IDE에서 볼려면 새로 open folder로 오픈하거나 터미널에서 부모 폴더로 이동해서 code . 으로 새로운 IDE를 불러주면 됩니다. Client와 Server를 연결하기 위해 Axios library를 사용합니다. https://axios-http.com/docs/intro Getting Started | Axios Docs Getting Started Promise based HTTP client for the browser and node.js What is Axios? Axios is a promise-based HTTP Client for node.js..

Endpoint마다 일일히 연결했던 MongoDB Connection을 재사용 가능하게 변경하도록 합니다. 그러기 위해 db.js파일을 src폴더 안에 생성해줍니다. 그안에 MongoDB에 연결을 하는 함수를 정의 해줍니다. db.js import { MongoClient } from 'mongodb'; let db; async function connectToDb(cb) { const client = new MongoClient('mongodb://127.0.0.1:27017'); await client.connect(); db = client.db('react-blog-db'); cb(); } export { db, connectToDb, }; 다음은 이 함수를 불러들이는 server.js를 수정해 ..

블로그의 댓글을 이제 MongoDB에 저장하여 연결 하도록 하겠습니다. 이전에 사용했던 Post method를 수정해서 구현하였고 변경된 코드는 다음과 같습니다. server.js import express from 'express'; import { MongoClient } from 'mongodb'; const app = express(); app.use(express.json()) app.get('/api/articles/:name', async (req, res) => { const { name } = req.params; const client = new MongoClient('mongodb://127.0.0.1:27017'); await client.connect(); const db = cl..

메모리에 저장했던 좋아요(upvote)를 MongoDB에 저장하도록 하겠습니다. 이전과 같은 Put method를 사용하며 변경된 코드는 다음과 같습니다. server.js import express from 'express'; import { MongoClient } from 'mongodb'; const app = express(); app.use(express.json()) app.get('/api/articles/:name', async (req, res) => { const { name } = req.params; const client = new MongoClient('mongodb://127.0.0.1:27017'); await client.connect(); const db = client..

이제 Bank End Express에 MongoDB를 연결해 보겠습니다. MongoDB 라이브러리를 사용하기 위해 먼저 MongoDB 팩키지를 설치합니다. npm install monogodb 본격적으로 블로그 페이지에 좋아요와 댓글 정보를 데이터베이스에서 불러오기 위해 다음과 같이 Get Endpoint를 추가합니다. server.js import express from 'express'; import { MongoClient } from 'mongodb'; const app = express(); app.use(express.json()) app.get('/api/articles/:name', async (req, res) => { const { name } = req.params; const cli..

MongoDB 설치가 완료되면 Terminal에서 사용하기 위해 다음과 같이 환경 변수 (Environment Vairables) 에 MongoDB 설치 경로를 등록합니다. 등록 완료후 시스템을 다시 시작하면 VS Code안 Terminal에서 MongoDB의 사용이 가능합니다. MongoDB를 Back End의 Express에 연결하기 위해 데이터를 저장할 mongo-db-data 폴더를 생성해줍니다. MongoDB 데몬 명령어를 통해 다음과 같이 MongoDB 서비스를 시작합니다. mongod --dbpath ./mongo-db-data/ https://www.mongodb.com/try/download/shell Try MongoDB Tools - Download Free Here Free down..

MongoDB는 비 관계형 데이터베이스(Non-relational Database)라고 불리며 기본적으로 테이블과 행과 같이 데이터 형식이 어떻게 지정되는지에 정해진 바가 없는 자유형식의 데이터를 저장할수 있습니다. NoSQL 데이터베이스 솔루션인 MongoDB는 관계형 데이터베이스 관리 시스템을 필요로 하지 않으므로, 사용자가 다변량 데이터 유형을 손쉽게 저장하고 쿼리할수 있는 탄력적인 데이터 저장 모델을 제공합니다. MongoDB Community Edition 설치 Go to https://www.mongodb.com/try/download/community Try MongoDB Community Edition Try MongoDB Community Edition on premise non-rela..