Learn new Get simpler Do more

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..

URL 매개변수 이용 Article page에서 각 컨텐츠를 보여주기 위해 URL변수를 이용해서 Page가 로드되도록 설정합니다. 그래서 일단 컨텐츠 내용를 담은 page를 src폴더->pages폴더 밑에 article-content.js 파일을 추가합니다. article-content.js const articles = [ { name: 'learn-react', title: 'The Fastest Way to Learn React', content: [ `Welcome! Today we're going to be talking about the fastest way to learn React. We'll be discussing some topics such as install Node.js and ..

React Router 사용 각 페이지로 이동하기 위해 React Router를 설치합니다. npm install react-router-dom React 라우터를 설치 하였으므로 각각의 페이지로 이동을 할수 있도록 Navigation을 만들기 위해 src 폴더 아래에 NavBar.js 파일을 추가합니다. NavBar.js import { Link } from 'react-router-dom'; const NavBar = () => { return ( Home About Articles ); } export default NavBar; Navigation Bar를 표시하기 위해 App.js 파일도 다음과 같이 바꿔줍니다. App.js import './App.css'; import { BrowserRou..

Blog 페이지 작성 프로젝트안의 src 폴더안에 pages란 폴더를 생성한후 다음과 같은 pages를 생성합니다. HomePage.js AboutPage.js ArticlesListPage.js ArticlePage.js NotFoundPage.js HomePage.js const HomePage = () => { return ( This is the home page! ) } export default HomePage; AboutPage.js const AboutPage = () => { return ( This is the about page! ) } export default AboutPage; ArticlesListPage.js const AriclesListPage = () => { retur..

App 컴포넌트 구성 만들기 src 폴더 안의 기본적으로 만들어진 App.js파일 다음과 같이 수정합니다. import './App.css'; function App() { return ( My Awesome Blog Welcome to my blog! ); } export default App; src 폴더 안의 logo.svg파일은 더이상 사용하지 않으므로 지워줍니다. src 폴던 안의 App.css파일은 다음과 같이 작성합니다. 이번 프로젝트에서 사용할 CSS 디자인 입니다. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } button { padding: 16px; font-family: '..