React 썸네일형 리스트형 [React] 라우팅 복습 오늘은 저번에 만든 폴더 구조를 가지고 App.js에서 라우팅을 해보겠습니다. 먼저 npm i react-router-dom --save를 터미널에 입력해서 설치해줍니다. Feature Overview v6.22.1 | React Router Feature Overview v6.22.1 | React Router Feature Overview Client Side Routing React Router enables "client side routing". In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders th.. 더보기 [React] 프로젝트를 위한 React 세팅 - ES7 https://youtu.be/zATkDm0e_CM?si=HkNhOlTJozjISY0c 본 포스팅은 John Ahn님의 유튜브 강의를 참고했습니다. 오늘은 프로젝트 만들기에 앞서 클라이언트 폴더와 파일 구조를 만들어서 세팅하는 시간을 가져보도록 하겠습니다. 만드는 과정은 일반적이니까 생략하고 구조를 설명하겠습니다. 저번 시간까지 만든 서버 파일들은 서버 폴더에 넣었고 클라이언트 폴더를 새로 만들어서 기존에 있던 소스 파일들과 components폴더와 views 폴더를 만들었습니다. components 폴더에는 components코드들이 작성된 파일들이 들어가 있고, views 폴더에는 프로젝트에서 만들 페이지들이 들어가 있습니다. hoc 폴더는 Node.js의 Auth와 같은 역할로 페이지를 이동할 때 .. 더보기 [React] 리액트 버전 다운그레이드 서버를 만드는 도중에 리액트 18버전에서는 여러가지 종속성 문제가 발생하였습니다. 서버를 구축해서 몽고db를 연결해 보고 싶은데 생각대로 되지 않네요. 그래서 버전을 다운그레이드 해서 진행해보려고 합니다. react 18에서 17.0.2로 다운그레이드하는 방법 - DEV Community How to downgrade from react 18 to 17.0.2 I might not be the only one who is really scared of change in technology causing a break in my code,... dev.to 링크로 걸어둔 페이지를 참고하였습니다. 가장 많이 쓰는 버전인 17.0.2버전으로 바꿔보겠습니다. npx create-react-app . 먼저 프로젝.. 더보기 [React] useReducer 복습 useReducer는 개발을 하면서 많이 사용할 것 같아서 복습하는 시간을 가져보도록 하겠습니다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function Users() { const [users, setUsers] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchUsers = async () => { try { // 요청이 시작 할 때에는 error 와 users 를 초기화하고 setError(null); set.. 더보기 [React] API 연동 백엔드를 무작정 코딩하면서 공부해보려고 했는데 엄두가 안나서 기본 개념부터 배워보려고 합니다. 오늘은 API 연동에 대해서 공부해 보려고 하는데 알고 있어야 할 개념이 있습니다. (벨로퍼트님의 강의를 참고하였습니다.) 비동기 처리 함수라는 것이 있는데 비동기라는 말은 작업을 동시에 처리하는 것을 의미합니다. 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. 비동기 처리는 보통 Promise나 async/await함수를 사용합니다. const myPromise = new Promise((resolve, reject) => { // 구현.. }) Promise함수의 형태입니다. 성공할 때는 resolve를 호출하고 .. 더보기 [React] 투두리스트 로그인 구현하기2 이번 시간에는 리액트 라우터 돔의 라우팅을 통해 메인페이지, 로그인, 회원가입 페이지를 분리해보도록 하겠습니다. 먼저 app.js에 루트(경로)들을 만들어 줍니다. import {BrowserRouter, Routes, Route} from "react-router-dom"; import를 해주고 function App() { return ( ); } 루트를 만듭니다. import React, { useState } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; const TodoTemplateBlock = styled.div` width: 512px; height: 7.. 더보기 이전 1 2 3 4 5 다음
