Learn new Get simpler Do more

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 앱 생성이 완료되면 생성한..

Node.js 와 NPM 설치 Node.js는 코드를 실행하고 프로그래밍을 더 쉽게 만드는 데 사용할 몇가지 라이브러리를 설치하는 데 중요한 도구가 될것입니다. Node.js가 아직 설치되어 있지 않은 경우 https://nodejs.org 웹 사이트에서 설치 파일을 다운받을수 있습니다. 현재 버전은 20.11.1 LTS(Long Term Support) 이고 다운로드 한후 실행을 하면 설치프로그램이 나머지를 설치 안내를 할것입니다. 설치 완료후 CMD나 power shell 또는 VS Code terminal에서 다음과 같이 버전을 확인합니다.

Build a shopping cart that displays the total price when adding items. Implement the Add to Cart logic, add an item to the cart when the button is clicked. Implement the + and - buttons to add or remove items from the cart. Implement the total sum at the bottom of the page. ShoppingCart.js import { useState } from 'react' const items = [{ name: 'apple', price: 0.79 }, { name: 'banana', price: 0...

Focus an input upon a component mounting. useRef: Within React, we normally interact with the virtual DOM. Sometimes we need to interact with the actual DOM, however, and to do so you can use refs. Uppm page load, focus the input. FocusInput.js import { useEffect, useRef } from 'react' export default function FocusInput() { const focusedInput = useRef(null) useEffect(() => { focusedInput.current..