일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- ajax
- 참고블로그
- object
- db
- async
- https://m.blog.naver.com/tt2t2am1118/221010125300
- JS #프로젝트
- 혼프
- webpack
- Project
- sql
- setTimeout()
- addEventListener
- slow and steady
- 동기
- Import
- database
- prj
- json
- mysql
- promise
- await
- execCommand
- eport
- Porject
- callback
- 비동기
- 게임
- js
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- Today
- Total
목록⚛️React (46)
C-log
우리가 전시간에 fetch를 내장한 useEffect를 이용했다. 이는 DayList컴포넌트와 Day컴포넌트에 모두 사용된다. 중첩되는 부분이고 이를 처리하기 위해서 우리들만의 Hook을 제작할 것이다. 아래 함수를 살펴보자. import { useState, useEffect } from "react"; export default function useFetch(url) { const [data, setData] = useState([]); useEffect(() => { fetch(url) .then(res => { return res.json(); }) .then(data => { setData(data); }); }, [url]); return data; } useFetch의 매개변수를 url로 ..
이전 시간에서는 우리가 json-server를 통해서 API를 가지고 왔다. 가지고온 이 API를 활용하기 위해서 기존에 import 했던 dummy data를 지우고 uesEffect를 사용해서 API로부터 데이터를 가지고 올 것이다. 우선 DayList.js 코드를 살펴보자. * DayList.js import { useState, useEffect } from "react"; import { Link } from "react-router-dom" export default function DayList() { const [days, setDays] = useState([]); useEffect(() => { fetch('http://localhost:3001/days') .then(res => { ..
이번 시간에는 버튼들을 조작하고 json-server를 활용해서 데이터를 조작하는 방법을 배워 볼 것이다. 우선 버튼 구현을 먼저 해보려고 한다. 들어가기 앞서서 우리가 만들어 놓은 버튼들을 상위, 하위 컴포넌트로 나누어야 한다. props와 useState를 사용하기 위해서다. 아래 코드는 변경된 Day.js파일 모습이며 다로 하위 컴포넌트를 생성한 Word.js파일을 함께 보자. * Day.js import dummy from "../db/data.json"; import { useParams } from "react-router-dom"; import Word from "./Word"; export default function Day() { // const { day } = useParams();..
*처음부터 이전 포스팅에서 컴포넌트를 외부와 내부 또는 상위와 하위라는 단어를 혼용해 사용했지만 이해를 위해 이제는 상위와 하위로 통일해 사용할 것이다. react router dom은 a태그와 같은 역할을 한다. url의 값을 변경할 있다는 것이다. 예전에는 switch를 import해서 Router를 동시에 사용했지만 현재는Routes로 변경되었다. 그리 어렵지는 않으니 찾아보면 쉽게 따라 할 수 있을 것이다. 먼저 App컴포넌트를 살펴보자. * ClassApp.js import Day from "./component/Day"; import DayList from "./component/DayList"; import Header from "./component/Header"; import EmptyP..
이전 포스팅에서 스스로에게 해봐야 할 것을 내가 적고 마쳤다. 오늘은 다음 수업에 들어가기 앞서서 내가 강의에서 할 실습을 미리 해보았다. 우선 day를 나열 했는데 이를 가지고 동적인 웹페이지를 만드는 것이였다. 우선 li태그안에 button태그를 삽입 해줘야 한다. 이후 해당 버튼을 눌렀을 때 클릭 반응이 있을 수 있게 해줘야한다. Day컴포넌트를 먼저 살펴보면 아래와 같다. * My_App.js import { useState } from "react" import Day from "./mycomponent/Day"; import DayList from "./mycomponent/DayList"; import Header from "./mycomponent/Header"; function Class..
우리는 컴포넌트 외부에서 내부로 값을 전달하는 정도만 배웠다. 하지만 내부에서 외부로 전달이 필요하다 느꼈다. 아래 코드를 살펴보자. *App.js import { useState } from 'react'; import './App.css'; import Calculate from "./section/training/Calculate" function App() { const [result, setResult] = useState() const handleShow = (show) => { console.log("show", show); setResult(show) } return ( {result} ); } export default App; 오로지 app컴포넌트에서 calculate 컴포넌트만을 사용..
해당 수업을 마치고 작게 프로젝트를 스스로 진행 해보려고 한다. 단순한 계산기를 만들어내는 것이다. 결과는 단순해 보일 수 있겠지만 아주 많은 공부가 될 것이다. 특히 useState와 컴포넌트의 구조를 생각하며 만들어 낼 것이다. 아래 링크는 이와 비슷한 결과물이 나올 예시이다. 아마도 아래와 같은 코드는 작성하진 않을 것이다. 본인이 생각한 방식대로 작성 할 것이다. [React] 리액트로 계산기 만들기 CSS를 사용할때 주로 sass를 썼었다, styled-component도 연습하면서 css grid에 대해서도 공부해보고 싶었다. 뭐가 좋을지 고민하다가 계산기 UI가 떠올랐고 내친김에 구현까지 해보았다. velog.io
이번 수업 시간은 본격적인 실습을 하는 수업이다. 여기서 우리는 컴포넌트를 3개를 만들어야한다. 우선 App에서 랜더링이 되는 ClassApp.js파일을 살펴보자.(참고로 css파일은 index.js파일에 import해둔 상태이다. index.css와 data.js는 해당 강의의 강의 자료에서 살펴볼 수 있다.) * ClassApp.js import Day from "./component/Day"; import DayList from "./component/DayList"; import Header from "./component/Header"; function ClassApp() { return ( ); } export default ClassApp; 구성은 이렇게 되어 있다. Header컴포넌트는 별..