Learn new Get simpler Do more

지금까지 코드가 수정될때마다 메뉴얼로 서버를 정지 시켰다가 다시 시작해야 했습니다. 그 번거러움을 덜기 위해 Nodemon을 사용하겠습니다. Nodemon을 사용하기 위해서는 다음과 같은 명령어로 설치를 해줍니다. 여기서 실제 production이 아닌 dev환경의 package를 따로 사용할것이라고 지정합니다. npm install nodemon --save-dev 설치과 완료되면 이제부터는 node명령어가 아닌 아래와 같은 명령어로 서버를 시작할수 있습니다. npx nodemon src/server.js 이제 이 명령어를 통해서 서버가 지속적으로 실행 되고 소스가 업데이트될때마다 자동으로 서버를 새로 고치고 다시 시작합니다. 소스를 수정하고 저장 하게 되면 아래와 같은 메세지를 뿌리고 서버를 자동으로..

블로그 페이지에 "좋아요" 를 표시해 보겠습니다. 현재는 DB에 글들이 연결되어 있지 않고 메모리에서 작동하는 방식으로 먼저 구현을 하고 나중에 DB와 연결하는 과정을 다시 해보겠습니다. Upvoting 즉 좋아요를 구현하기 위해서 PUT request를 사용합니다. 코드는 아래와 같습니다. server.js import express from 'express'; // Use temporary let articlesInfo = [{ name: 'learn-react', upvotes: 0, }, { name: 'learn-node', upvotes: 0, }, { name: 'mongodb', upvotes: 0, }] const app = express(); app.use(express.json()) ..

Agile 개요 overview Agile 이란? What is agile? 작업 계획을 짧은 단위로 세우고 제품을 만들어 나가는 사이클을 반복함으로써 고객의 요구 변화나 회사의 방침에 유연하고도 신속하게 대응하는 방법론입니다. 작업을 완료하는 방법 - A way of getting things done 프로젝트 관리에 대한 경험적 접근 방식 - An empirical approach to project management 즉, 프로젝트 관리에 과학적 또는 데이터 기반 접근 방식을 사용합니다. Agile을 사용하면 계획, 프로세스 및 제품을 지속적으로 개발할수 있습니다. (Continuously develop the plan, process and product) 이것은 프로세스와 계획을 미리 개발한 다..

URL parameter에 의한 매개 변수 전달. Get Request를 통해 매개 변수를 전달 하는 방법은 다음과 같습니다. 우선 아래와 같이 Get Method를 추가합니다. server.js import express from 'express'; const app = express(); app.use(express.json()) app.post('/hello', (req, res) => { res.send(`Hello! ${req.body.name}!`); }); app.get('/hello/:name', (req, res) => { //const name = req.params.name; const { name } = req.params; // object destructuring for litt..

Post 요청으로 데이터 표시 간단하게 Json 개체 형식의 데이터를 Post 요청으로 서버측에서 처리하는 방법을 구현해 봅니다. 다음과 같이 server.js파일을 변경합니다. server.js import express from 'express'; const app = express(); app.use(express.json()) app.post('/hello', (req, res) => { res.send(`Hello! ${req.body.name}!`); }); app.listen(8000, () => { console.log('Server is listening on port 8000'); }); 아직은 자동으로 Express 서버가 다시 시작하지 않으므로 서버코드가 수정될때마다 서버를 정지시키..

Postman을 이용한 Express 서버 테스트. 간단한 서버를 구축하였고 지금은 구축한 Express서버를 테스트할 방법을 알아봅니다. Postman 프로그램은 서버를 구축할때 서버를 테스트하는데 매우 유용한 프로그램입니다. postman.com/downloads로 가서 소프트웨어를 다운로드 한후 설치를 합니다. 설치가 완료되면 다음과 같이 현재의 localhost:8000/hello에 Get 메소드를 통해 테스트를 합니다. 이 블로그에 사용될 request를 간단하게 살펴보면, GET request: 일반적으로 컨텐츠내용이나 사용자 정보 및 게시물 정보를 서버에 요청하는데 사용됩니다. POST request : 일반적으로 서버에 새로운 리소스를 만드는데 사용됩니다. PUT request: 알반적으로..

Express 서버 설정하기. 서버사이드를 구성하기 위해서 Express server에서 Node.js를 이용하여 서버측을 구성하도록 합니다. 지금까지 이용한 클라이언트측 Front End 폴더에서 벗어나 새로운 Back End 폴더를 생성해서 그곳에서 서버측 프로젝트를 완성하도록 하겠습니다. 그러기 위해서 Terminal에서 새로운 폴더를 구성하여 Back End 프로젝트를 생성합니다. 명령어는 아래와 같습니다. 새로운 VS Code 프로젝트 창이 열립니다. 그곳에서 이제부터 Back End 작업을 합니다. 먼저 NPM 패키지를 초기화합니다. 명령어는 다음과 같습니다. npm init -y package.json파일이 생성되고 이제 Express를 설치합니다. 명령어는 다음과 같습니다. npm inst..

404 페이지 지정. 이번에는 잘못된 URL로 접속했을경우 페이지를 찾을수 없다는 메세지를 내도록 하겠습니다. NotFoundPage.js const NotFoundPage = () => ( 404: Page Not Found! 404: 페이지를 찾을수 없습니다! ); export default NotFoundPage; App.js import './App.css'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import NavBar from './NavBar'; import HomePage from './pages/HomePage'; import AboutPage from './pages/AboutPage'; import Aric..

Articles List modeular 작성 지금까지 mapping을 이용해서 컨텐츠를 불러왔지만 Aritcle추가 될때마다 직접 입력하는 수고를 덜기 위해 재사용이 가능한 컴포넌트를 구성하도록 하겠습니다. 그 재사용이 가능한 컴포넌트 구성을 위해 src폴더 아래에 components라는 새로운 폴더를 추가합니다. 그리고 그 아래에 ArticlesList.js라는 재사용이 가능한 파일을 추가합니다. ArticlesList.js import { Link } from 'react-router-dom'; const ArticlesList = ({ articles }) => { return ( {articles.map(article => ( {article.title} {article.content[0].su..

Article 리스트와 링크를 만들기 여기서는 기존에 Url을 직접 입력해서 들어가는 방식에서 Article리스트를 구현해서 링크를 통해 해당 내용를 볼수 있도록 변경 하도록 하겠습니다. 그러기 위해서 ArticleListPage.js를 다음과 같이 코딩해 줍니다. ArticleListPage.js import { Link } from 'react-router-dom'; import articles from './article-content'; const AriclesListPage = () => { return ( Articles {articles.map(article => ( {article.title} {article.content[0].substring(0, 150)}... ))} ) } expo..