승밈

로그인 기능을 갖춘 페이지 구현시, URL 에 경로를 입력해서 들어오는 비정상적 접근을 차단해야하는 경우 사용할 수 있음 return ( ); } const RouteAuthChek = ({ auth, url, component: Component, ...rest }) => { //redux 불러오기 const [show, setShow] = useState(false); return ( { // DB에서 권한 체크 axios .post(`${db}/path...`, { auth: auth, url: url }) .then((response) => { setShow(response.data); }) .catch((err) => { console.log(err); }) .finally(() => {}); ..

WAS 개념 DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 Application Server HTTP를 통해 컴퓨터나 장치에 에플리케션을 수행해주는 미들웨어 역할 WebServer + WebContainer WebServer 기능들을 구조적으로 분리하여 처리하고자 만들어짐 기능 프로그램 실행 환경과 DB 접속 기능 제공 여러 개의 트랜잭션 관리 기느 비즈니스 로직 수행 프레임 워크 Tomcat, Dingo, Express Express특징 (React에서 Express 사용 이유) React 개발을 도와주는 도구들을 내장하고 있는 오픈소스 JavaScript Runtime Environment WebServer 개념 웹 브라우저 클라이언트로부터 HTTP 요청을 받아 정적..

하위 컴포넌트에서 props 없이도 state를 사용가능하게 만들어줌 1. Context 변수 선언 import React, { useContext} from 'react'; let tempContext = React.createContext(); createContext()를 통해 context()변수 생성 2. Component 감싸기 function app(){ return( ) } 생성한 context변수로 componet 감싸기 3. state 사용 function state전송할componet(){ let 전송할state = useContext(tempContext); return ( {전송할state} ) } useContext()를 사용하여 component에서 사용 가능 component..

React 설치 방법 React 는 기본적으로 npm(node package manager)를 사용하여 프로젝트를 생성합니다. 그러므로 npm을 사용하기위해 node.js를 설치해야합니다. 1. 구글에 node.js 검색 제일 상단에 뜨는 공식 홈페이지에 접속해줍니다. 2. node.js 설치 어느버전을 설치하던 상관없지만, 저는 최신버전으로 설치하였습니다. node -v 위의 사진과 같이 설치된 node의 버전이 뜰 경우 정상적으로 설치된것입니다.! 3. cra 설치 npm install -g create-react-app cra 란, 리엑트에서 프로젝트 생성을 편하게해주는 기능입니다. -g 는 global 옵션으로 create-react-app을 컴퓨터의 어떤경로에서든지 실행할 수 있게 지정해주는것입..

리엑트 기초 내용 1. 데이터 바인딩 핵심 "{}" 2. Style 직접 지정시에도 "{}"" 사용해야함 3. "..." deepcCopy 방법임, = 으로 카피할경우 참조변수가 생성됨(Array,Object),...으로 할시 독립적인 카피 4. state 값 변경은 변경함수를 사용해야함(state에 직접 접근X) 5. deepCopy로 값을 복사해서 수정 후, 변경함수에 적용하는 방법이 있음 6. {}안에는 변수,함수를 쓸 수 있음 7. var \[num1,num2\] = \[10,100\]; // a에는 10 b에는 100을 넣는다 8. var(변수 선언전에 호출 가능, 값 지정 안해줘도됨) 9. let(변수 선언전에 호출 불가능, 값 지정 안해줘도됨), const(변수 선언전에 호출 불가능, 값 지..

Route 사용시 유용한 Component 및 hook Link 'react-router-dom'에서 import 해서 사용할 수 있는 Component 페이지를 이동시킬 수 있음 '' 태그를 만드는것과 유사함 home useHistory() Link 처럼 페이지를 이동 시킬 수 있는 hook 'react-router-dom'에서 import 해서 사용 let history = useHistory(); 페이지 이동내역 + 다양한 함수가 저장된 objcet{} 자료 형태 { history.goBack();//뒤로가기 history.push('/')//원하는 경로로 이동 }}>뒤로가기 Switch 매치되는 Route들을 전부 보여주지말고 한번에 하나의..

4. Routue SPA 에서 여러가지 페이지를 만들고 싶을때 사용 설치 터미널에서 react-router-dom 라이브러리를 설치하여 사용 npm install react-router-dom index.js 설정 import {BrowserRouter,HashRouter} from 'react-router-dom'; . . . . . . HashRouter VS BrowserRouter HashRouter : URL 맨 뒤에 /#/ 이 붙은채로 시작 BrowserRouter : URL 맨 뒤에 /link 으로 시작 HashRouter 사용 이유 : URL에 #을 통해 요청되는것은 서버에서 요청을 받아주지않음. 즉, URL을 통해 서버에게 이상한 페이지를 요청하지 않기 위해 사용 사용 or..

3. Component class , function 클래스 컴포넌트 작성법 class로 정의하고 render() 함수에서 JSX를 반환한다.java import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; >> 특징 * state, lifeCycle 관련 기능사용 가능하다. * 메모리 자원을 함수 컴포넌트보다 조금 더 사용한다. * 임의 메서드를 정의할 수 있다. > 함수 컴포넌트 작성법 * function 으로 정의하고 return 문에 JSX로 렌더링한다.java import R..