본문 바로가기

전체 글

 (215)
React Js Master #3 createGlobalStyle , Link to, state, ,useLocation, datatypes #1 일반 fetch #2 react-query이용 Nested Router 중첩된 라우터 1.npm i react-router-dom react-query react-router-dom : 어플리케이션에 url 가질수 있도록 / 2.Routes 폴더 생성 Coin.tsx , Coins.tsx파일, 컴포넌트 생성 3.Router.tsx 파일 생성 import { BrowserRouter, Routes, Route } from "react-router-dom"; import Coin from "./routes/Coin"; import Coins from "./routes/Coins"; function Router() { return ( ); } export default Router; 4. app.tsx ..
VS code extentions, Chrome extenstion 추천 Auto import Bracket pair colorizer Auto rename tag Prettier - auto formatter Vscode-styled-component // styled-component formatter 크롬 익스텐션 JSON Viewer
React Js Master #2 Typescirpt ,interface, optional props, styled.d.ts TypeScript 셋업 1. Create React App을 타입스크립트로 시작하기 npx create-react-app my-app --template typescript 또는 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 오류가 뜬다면 아래 명령어로 진행 npx create-react-app@5.0.0 my-app --template typescript https://create-react-app.dev/docs/adding-typescript 2. 기존 Create React App으로 만든 프로젝트에 타입스크립트 설치 2.1npm install --save typescript @types/..
React Js Master #1styled components ,themes 프로젝트 셋업 1. npx create-react-app react-masterclass 2. 초기화: 필요 없는 파일과 import 지우기 styled components 1. npm i styled-components 2. npm start import "./App.css"; import styled from "styled-components"; const Father = styled.div` styled.태그`백틱 안에 css코드` display: flex; `; const Box1 = styled.div` background-color: teal; width: 100px; height: 100px; `; const Box2 = styled.div` background-color: tomato; w..
React learning #9 useParams, gh-pages deploy useParams 리액트에서 라우터 사용 시 파라미터(url 변수값) 정보를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 된다. mport React from 'react'; import { useParams } from 'react-router-dom'; const test = () => { let { params } = useParams(); return ( 현재 페이지의 파라미터는 { params } 입니다. ) } React Router는 dynamic url을 지원해 주기도한다. dynamic url : url에 변수도 넣을 수있음 function App() { return ( 이부분을 tomato로 변경하면 ); } import { useParams } from "react-ro..
React learning #8 Movie App ,Router, Link to import { getMouseEventOptions } from "@testing-library/user-event/dist/utils"; import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const json = await ( await fetch( "https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year" ) ).json(); setMovies(json.data...
React learning #7 Coin Tracker import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); //기본 값을 [] 배열로 설정하지 않으면 undefined가 되고 jsx에 undefined.length를 가져오게 되서 에러가난다. useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers?limit=100") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, [..
React learning #6 to Do List ,map const food =[1,2,3,4] [5,food]// [5,Array[5]] 배열 안에 숫자와 배열이 들어감 [5,..food]//[5,1,2,3,4] 배열 안의 elements가 들어감 setTodos((currentTodo)=>[Todo, ...currentTodo]) function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; //to Do가 ..

티스토리툴바