일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 구멍가게코딩단
- 스프링 시큐리티
- Kernighan의 C언어 프로그래밍
- 처음 만나는 AI수학 with Python
- /etc/network/interfaces
- 네트워크 설정
- 자료구조와함께배우는알고리즘입문
- 서버설정
- GIT
- 페이징
- 알파회계
- 스프링부트핵심가이드
- 처음 만나는 AI 수학 with Python
- 친절한SQL튜닝
- resttemplate
- network configuration
- 리눅스
- 코드로배우는스프링부트웹프로젝트
- iterator
- 데비안
- 병합
- 이터레이터
- 티스토리 쿠키 삭제
- 목록처리
- 자바편
- 깃
- 코드로배우는스프링웹프로젝트
- merge
- 자료구조와 함께 배우는 알고리즘 입문
- 선형대수
- Today
- Total
목록분류 전체보기 (320)
bright jazz music
https://swapi.dev/api/ 1. App.js 작성 import { useEffect, useState } from "react"; import axios from "axios"; function App() { const [people, setPeople] = useState([]); const [error, setError] = useState(null); const [ok,setOk] = useState(null); // 동기처리 // useEffect(() => { // axios.get('https://swapi.dev/api/people/') // .then((data) => { // console.log('##data', data) // setPeople(data.data?.res..
1. 설치 및 환경설정 PS D:\react-workspace\nextjs-test> npx create-next-app@latest . √ Would you like to use TypeScript with this project? ... No / Yes √ Would you like to use ESLint with this project? ... No / Yes √ Would you like to use Tailwind CSS with this project? ... No / Yes √ Would you like to use `src/` directory with this project? ... No / Yes √ Use App Router (recommended)? ... No / Yes √ Wo..
1. redux toolkit 설치 /*기존 프로젝트에 리덕스 툴킷 설치*/ $npm install @reduxjs/toolkit /*새 프로젝트 생성 시 리덕스 툴킷 설치 */ $npx create-react-app test-app --template redux 2. App.js 작성 import React from "react"; import {Provider, useDispatch, useSelector} from 'react-redux' //툴킷 임포트 import {configureStore, createSlice} from '@reduxjs/toolkit'; //슬라이스는 작은 store를 뜻한다. 여러 개 만들 수 있다.기존에는 하나의 store에 전부 집어넣었다. 리덕스 툴킷은 이러한 슬라..
1.App.js 작성 import React from "react"; import {createStore} from 'redux'; import {Provider, useDispatch, useSelector} from 'react-redux' //1. redux를 사용하기 위한 reducer 함수 function reducer(state, action){ if(action.type === 'up') { return {...state, value:state.value + action.step} } return state; //상태 반환 } const initialState = { value : 0 } //2. store 생성 const store = createStore(reducer, initialSt..
1. redux와 react-redux 설치 $npm install redux react-redux 2. App.js 작성 import React, {useState} from "react"; import "./style.css"; import {createStore} from 'redux'; // import {configureStore} from 'redux'; import {Provider, useSelector, useDispatch, connect} from 'react-redux' /* 스토어를 생성할 때 reducer를 생성한다. 리듀서는 스토어에 있는 스테이트의 변경 여부를 결정하는 역할을 한다. 따라서 reducer는 2개의 파라미터를 받는다. 첫 번째는 현재 스테이트 값인 current..
1. App.js 작성 import React, {createContext, useContext, useEffect, useReducer, useState} from "react"; function App(){ // const [count, setCount] = useState(0); const [count, countDispatch] = useReducer(countReducer, 0); //countReducer: 회계직원, 0:초깃값 const [number, setNumber] = useState(1) function countReducer(oldCount, action){ //old가 접두어인듯, action은 예약어 if(action.type === 'UP'){ return oldCount +..
1. style.css 작성 .root, .root div{ border: 10px solid gray; margin: 10px; padding: 10px; } 2. App.js 작성 // Context API: 전역적으로 상태를 공유할 수 있도록 하는 도구 // 리액트에서 컨텍스트를 만들려면 createContext라는 함수를 임포트 해야 한다. import React, {createContext, useContext} from "react"; import "./style.css"; const themeDefault = {border: '10px solid red'}; // 컨텍스트의 기본값이 themeDefault가 되었다. const themeContext = createContext(themeDe..
1. styled components 설치 $npm install styled-components //오류날 경우 $npm install styled-components@latest 2. App.js 작성 import React from "react"; import styled from 'styled-components'; const SimpleButton = styled.button` color:white; background-color:green; `; const LargeButton = styled(SimpleButton)` font-size:50px; `; const ReactButton = (props) => { console.log('props', props) // return {props.c..
1. react-router-dom 설치 $npm install react-router-dom 2. index.js 작성(내가 수정한 버전. var를 const 또는 let으로 변경) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter, Route, Routes, HashRouter, Link, NavLink, useParams } from 'react-router-dom'; function Home() { return ( Home Home... ); } // 원래는 a..
import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function Header(props){ return( { event.preventDefault() props.onChangeMode() }}>{props.title} ) } function Nav(props){ const lis = []; for(let i=0; i ) } function Update(props){ const [title, setTitle] = useState(props.title) const [body, setBody] = useState(props.body) return( Update { event.preventDefault(); ..