Learn new Get simpler Do more

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

React 프로젝트 폴더 구성 node_modules 현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더입니다. public index.html과 같은 정적 파일이 포함되는 곳으로 컴파일이 필요 없는 파일들이 위치하는 폴더입니다. mainfest.json 모바일 환경에서 사용되어지는 파일도 함께 들어있습니다. src React 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됩니다. .gitignore Git에 포함하고 싶지 않은 파일의 이름 혹은 폴더등을 입력하는 파일입니다. package.json 프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함되어 있습니다. 라이브러리가 설치된 n..

React 프로젝트 생성 생성기(Generator)를 사용하지 않고 React 앱을 만들수 있지만 다소 긴 프로세스가 될수있으며 React 앱을 처음부터 설정하는 가장 빠른 방법은 일반적으로 생성기를 사용하는것입니다. 현재 새로운 React 앱을 만드는 가장 인기 있고 일반적인 방법은 Facebook에서 제공하는 소스 React 앱 생성기인 Create React app을 사용하는것입니다. React 앱 생성을 위해 VS Code를 실행합니다. 그리고 터미널을 열고(Top menu -> Terminal -> new Terminal) 프로젝트를 만들 위치로 이동을 합니다. React 앱 생성 명령어는 다음과 같습니다. npx create-react-app my-blog React 앱 생성이 완료되면 생성한..