개발새발

1. 개발환경 React로 페이지 구현 SpringBoot로 서버 구현 2. 기존 코드 import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import axios from 'axios'; import User from './UserList'; import SignUp from './SignUp'; import Login from './Login'; function App() { const [userEmail, setUserEmail] = useState(''); const [isAuthenticated, setIsAuth..

React에는 컴포넌트 간 데이터를 전달하는 대표적인 방법이 두 가지가 있는데, 그 중 하나가 바로 props props는 데이터를 간편하게 넘기고 받을 수 있다는 장점이 있지만 어떤 상황에서는 굉장히 큰 문제가 된다 1. 컴포넌트 트리 구조가 굉장히 복잡하고 깊을 경우 2. 위의 상황에서 자식 컴포넌트로 데이터를 전달하는 경우 소규모의 리액트 앱이라든지, 혹은 데이터 전달을 원하는 자식 컴포넌트가 부모 컴포넌트 바로 밑에 존재한다면 별 문제는 되지 않을 것이다. 하지만 자식의, 자식의, 자식의, 자식의, 자식의, ... , 자식의 컴포넌트에게 데이터를 전달 할 때는 어떻게 할 것인가? 컴포넌트 전체에 공통적으로 필요한 데이터가 존재할 경우에는 어떻게 할 것인가? 이를테면 현재 로그인 된 사용자 정보, ..

원하는 워크스페이스 내에서 터미널 실행 mkdir 폴더명 (혹은 그냥 직접 만들기) 폴더 client, server 만들고 mkdir server npx create-react-app client 1) client 폴더 들어가서 npm i axios 2) server 폴더 들어가서 npm init (package.json 생성) : package 세팅 npm i oracledb express (package.json 내에 express, oracledb 설치 확인 가능) npm i cors server.js 작성 완료 후 server에서 npm start실행해서 테스트 > Server 시작 : http://localhost:5000 백엔드 연결 확인 되면 client 실행 npm start

1. Node.js 설치 LTS로 다운로드 (업데이트가 잦지 않은 대신 안정성이 높음) 다운로드 완료하면 cmd에서 npm -v 명령어로 버전확인 2. React 개발 환경 설정 작업을 진행할 workspace 경로에서 cmd 실행 > npx react-create-app 폴더명 만약 'ERR! A complete log of this run can be found in' 경고문이 뜰 경우 > User\user1\AppData\Roaming에 새폴더로 npm 생성 (혹은 npm install -g npm) npm 폴더 생성 후 다시 workspace 경로로 돌아와서 > npm cache clean --force > npm cache verify > npx create-react-app 폴더명 Happy ..