본문 바로가기

CLASS/REACT8

react 배포 npm끄고npm run build refresh - > build폴더 생성build하위에 있는걸 resource/static으로 이동 하면 원래 내 포트에서 작업 가능합니다 👀 2024. 9. 20.
#3-1 / React 문법 (조건문 ,반복문,배열) 🤷‍♂️❓ 알아두쇼 - 함수 종류일반함수, 선언적 함수 , 익명함수, 대입형함수 => hoisting, arguments,즉시실행함수, 화살표함수, 명명함수, return함수중첩함수 , callback함수 , 로드함수 , 전역함수(eval)   👀 조건문 , 반복문  - App.jsimport './App.css';import { Route,Routes } from 'react-router-dom'; //페이지 분리import {Login} from "./Login";import {Main} from "./Main"import {Top} from "./Top" //하단 페이지import {Footer} from "./Footer" //하단 페이지import {Oop} from './Oop'; // 요.. 2024. 9. 13.
#2-3 / React - 회원가입 리스트 및 페이징,검색 (data select) 👀 oracle임  - App.js ()import {List} from './List'; }>//요거 추가  - List.jsimport React,{ useEffect, useRef, useState } from 'react';//API에서 보내준 회원전체 리스트 출력 파트export let List = function (){ var [colno,colnumber] = useState('6'); var [pgno,pgnonum] = useState('1'); var [total,totalno] = useState(''); var [listdata,listarray] = useState(''); var [sp, spno] = useState(false); //검색 활성화 및 비활성화 var uri.. 2024. 9. 13.
#2-2 / React - 회원가입 (data insert , React + 주소 api) 👀 put + oracle  / React + 주소 api-App.jsjoin 추가import React,{} from 'react'import { Route, Routes } from 'react-router-dom'import Idcheck from './Idcheck' //상대경로 => src의 실제 js파일 찾을 때 사용(.js 작성 안해도 됨)import { Join } from './Join' // //export하기 위한 함수function App(){ return( }> }> );}export default App; - join.jsimport React, { useState } from 'react';import { useDaumPostcodePopup } from 'rea.. 2024. 9. 10.
#2-1 / React - Web SPA 응용 : 아이디 중복체크 fetch (useEffect, useState) react router 설치 D:\springboot2\bootspring\src\main\webapp\shop npm install react-router-dom ✅ 알아두쇼App.js는 하나만 있어야 함!~react안에는 jsp,jstl 코드는 사용 불가! (html 형태에만 가능)ES14 => 15  암호화 기능 추가 (특수문자 형태로)원자 (waitSync) -> 다중 스레드[A,B] => [A~B]  계산 가능[A&&B] : 교집합[A - [0-9]] : 중첩데이터 확인 ex) 023459034 -> 259..... 등ㅎLinux에 설치 세팅Linux 서버 -> nodejs 설치 => Linux 사용자 디렉토리 => React npx 설치 => npm Router 설치1. yum install .. 2024. 9. 10.
#1-3 / STS React Setting 👀 STS에 세팅 방식(D:\react_web에 받을거임)webapp 에 shop 폴더 생성함해당폴더 우클릭 properties에서 경로 찾아서 cmd로 들어가세욘D:\springboot2\bootspring\src\main\webapp> npx create-react-app shop   바로위 상위폴더에서 받아야함cd shop : shop 안으로 들어가서 npm start  => 3000번 , 8080번 포트 따로 놈해당 폴더에 에러떠도 신경쓰지말고 STS 업데이트 끝나면 gradle refreshrestapi.java (class) 생성 - 하단 참고package.jspn { }에 해당 코드 추가"proxy" : "http://localhost:8080", : 교차 연결 restapi.javapac.. 2024. 9. 9.
#1-2 / React Router,Link 로그인  => CRA동작로그인 => SPA동작  👀 Router, Link  BrowerRouter메인 ,서브페이지 등 SPA 형태로 구성.html 한개만 있고, js가 계속 바뀌는 형태 - index.jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App';import { BrowserRouter } from 'react-router-dom'; //router 라이브러리const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );   - App.jsimpor.. 2024. 9. 9.
#1-1 / React Setting Framework - Anguler, React, Vue + Ajax정적 웹사이트 -> 동적 웹사이트랜더링 기반의 웹 구조HTML 코드 => DOM(javascript) CDN, CLI CDN : 웹 엔진을 적용해서  HTML 코드와 결합  - web 위주 / ex) jquery.jsCLI : Node 엔진을 적용해서 HTML 코드와 결합  - App, Web-spaReact + RestAPI => ReactJsNodeJS : 16.x or 18.x 버전 많이 씀npm : 6.x , 7.x ~ 8.x npm or npx 설치 명령어npm : PC에 패키지 젼역으로 설치npx : PC에 패키지 없이 설치 setting  (만약 java 프로젝트에 설치하고싶으면  webapp 폴더에 해야함 - 우린 vsco.. 2024. 9. 9.

티스토리툴바