Frontend (14) 썸네일형 리스트형 [기록] GDSC 3기 solution challenge 깃허브 레파지토리에서 develop 브랜치에 있는걸 clone해옴 바탕화면에 폴더 만들고 그 폴더 안에서 깃배시 연다 git clone -b develop package.json이 있는 폴더로 cd해서 npm install 했는데도 Module not found: Error: Can't resolve 'react-router-dom' 에러가 난다 npm install react-router-dom 해주면 해결 끝 [Kiosk 프로젝트] 리액트 실행하기 > node -v > npm -v > cd Desktop\kiosk-front > npx create-react-app kiosk-basic > cd kiosk-basic > npm start 스켈레톤 코드를 git clone 해오는 경우라면? git bash here 열어서 $ git clone package.json 있는 폴더로 이동해서 > npm install > npm start 폴더 구조: ~\Desktop\kiosk-front\3rd-toyproject-frontend-2 섹션 7. 블로그 리스트 페이지 수정 46 비공개 블로그 리스트에서 제거 ListPage.js return posts.filter(post => { //filter 추가 return post.publish }).map(post => { return ( history.push(`/blogs/${post.id}`)} > deleteBlog(e, post.id)} > Delete ); }) 47 admin 페이지 route 추가 및 BlogList 컴포넌트 만들기 관리자 페이지에서는 모든 블로그 글을 볼 수가 있고, 공개 여부를 바꿀 수 있게 ListPage.js 복사 -> AdminPage.js routes.js import HomePage from './pages/HomePage'; import CreatePage from './pages/C.. 섹션 6. 블로그 수정 페이지 40 Edit 페이지 route 추가 routes.js { path: '/blogs/:id/edit', component: EditPage }, 로 수정. 무엇을 edit하는 것인지 알 수 있게 ShowPage.js import { useParams } from "react-router"; import axios from 'axios'; import { useEffect, useState } from "react"; import LoadingSpinner from "../components/LoadingSpinner"; import { Link } from "react-router-dom"; //추가 const ShowPage = () => { const { id } = useParams(); const.. 섹션 5. 블로그 디테일 페이지 35 블로그 페이지 라우트 추가 Card를 누르면 수정하는 페이지가 아닌 블로그 내용을 보여주는 페이지로 이동하고 싶음 새로운 라우트 추가 id에 맞는 블로그 내용을 화면에 출력 src 밑에 routes.js 파일 열기 routes.js import HomePage from './pages/HomePage'; import CreatePage from './pages/CreatePage'; import EditPage from './pages/EditPage'; import ListPage from './pages/ListPage'; import ShowPage from './pages/ShowPage'; const routes = [ { path: '/', component: HomePage }, { p.. Axios Error: Network Error react 작업 도중 멀쩡하던 서버 에러.. 구글링하고 헤매고 다녔는데 이유 해결: 그냥 터미널에서 npm run db해서 db 켜주니까 바로 해결됐다. 계속 그냥 db 안 켜고 작업해도 잘 돼서 문제인줄 몰랐는데 켜고 작업해야하나보다. 섹션 4. 블로그 리스트 23 블로그 리스트 데이터 받아오기 (useEffect) db에 있는 데이터를 받아와서 ListPage에 보여주는 것을 해보겠다 ! db랑 통신할 때 BlogForm.js를 보면 axios를 사용했었음 - 그 때는 post request를 사용했는데, 지금은 데이터를 가져오는 것이기 때문에 get request를 사용하겠다. 이제 받아온 data를 state 안에 넣어볼게요 state를 사용해야지 state가 변경되면서 화면이 re rendering 되고 화면에 뜨게 된다. import axios from 'axios'; import { useState } from 'react'; const ListPage = () => { const [posts, setPosts] = useState([]); cons.. 섹션 3. React Router로 페이지 추가하기 15 React Router 설치 16 React Router - Switch & exact 17 NavBar 스타일 import { useState } from 'react'; import axios from 'axios'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; function App() { const [title, setTitle] = useState(''); const [body, setBody] = useState(''); const onSubmit = () => { axios.post('http://localhost:3001/posts', { title: title, body: body }.. 이전 1 2 다음
