bright jazz music

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 suroot@hjcha-AERO-15-Classic-SA:/usr/local/my-app# docker rm -f catnailscatnailsroot@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/init09a9e50129a06b5db94a58669507f50599449f2..

이전 포스팅과 반복되는 설명은 생략하였다. 리액트 앱과 백엔드 서버 연동 테스트 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. 서버에 노드 설치하고 ..

1. 백엔드 서버 만들기 //10000번 포트를 사용하는 백엔드 서버 (스프링부트, http://localhost:10000) package com.test.reactspringboottest.controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.LinkedHashMap; @RestController @RequestMapping(val..

실습을 위해 생활코딩의 영상을 참고하였다. https://www.youtube.com/watch?v=VaAWIAxvj0A 1. 백엔드 서버 만들기 우선 백엔드 어플리케이션을 구동할 디렉토리에서 터미널을 열고 아래와 같은 순서로 명령한다. hjcha@hjcha-AERO-15-Classic-SA:/usr/local/back-apps$ touch data.json hjcha@hjcha-AERO-15-Classic-SA:/usr/local/back-apps$ vi data.json hjcha@hjcha-AERO-15-Classic-SA:/usr/local/back-apps$ npx local-web-server Need to install the following packages: local-web-server..

1. 서버에 노드 설치하고 버전확인다운로드 및 설치$ sudo apt install nodejs 버전확인$ node -v 여기까지 잘 완료됐으면 노드 설치는 완료. 난 자꾸 이상한 오류가 나서 노드 홈페이지에서 압축 파일 받은 뒤 압축 풀고#/etc/profile 파일의 맨 아래에 추가해 주었다.#NODEJSVERSION=v18.15.0DISTRO=linux-x64export PATH=$PATH:/usr/local/node-v18/bin/etc/profile에 환경변수 등록해 주었다. 완료한 뒤 $ source /etc/profile을 하여 동기화 해주었지만 먹히지 않는다.이상하게 우분투 데스크탑 버전은 환경변수 설정 후 재부팅 해줘야 한다. 2. npm 설치위랑 비슷하게 설치 해줬는데 nodejs 패키..