일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- resttemplate
- 스프링부트핵심가이드
- 선형대수
- /etc/network/interfaces
- 네트워크 설정
- network configuration
- 목록처리
- 이터레이터
- 리눅스
- Kernighan의 C언어 프로그래밍
- 코드로배우는스프링부트웹프로젝트
- 친절한SQL튜닝
- GIT
- 데비안
- 처음 만나는 AI 수학 with Python
- iterator
- 페이징
- 티스토리 쿠키 삭제
- 깃
- 구멍가게코딩단
- 알파회계
- 병합
- 서버설정
- 스프링 시큐리티
- 자료구조와함께배우는알고리즘입문
- 자료구조와 함께 배우는 알고리즘 입문
- 자바편
- 처음 만나는 AI수학 with Python
- merge
- 코드로배우는스프링웹프로젝트
- Today
- Total
목록Framework (85)
bright jazz music
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(); ..
아래 작업을 진행하기 전에 $ sudo docker pull rockylinux:9.1 명령어로 록키 리눅스 9.1 이미지를 다운 받았다. jcha@hjcha-AERO-15-Classic-SA:/usr/local/my-app$ sudo su root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# docker rm -f catnails catnails root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# sudo docker run --privileged -d -it -p 82:80 -p 3001:3000 --name catnails rockylinux:9.1 /sbin/init 09a9e50129a06b5db94a58669507f50599..
이전 포스팅과 반복되는 설명은 생략하였다. 리액트 앱과 백엔드 서버 연동 테스트 2 1. 백엔드 서버 만들기 //10000번 포트를 사용하는 백엔드 서버 (스프링부트, http://localhost:10000) package com.test.reactspringboottest.controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframewor catnails.tistory.com 4. 또 다른 연동 테스트 (+ Nginx) 참고로 이건 nginx와 연동하여 81번 포트를 사용하였다. Nginx 설정은 아래 포스팅 참고 리액트 앱(ReactJs)와 엔진엑스(Nginx) 연동 1. 서버에 노드 설치하고 ..