재밌고 어려운 IT를 이해해보자~!

loginPage.jsimport React, { useState } from 'react';import Axios from 'axios'import {useDispatch} from 'react-redux';function LoginPage() { const dispatch = useDispatch(); const [Email, setEmail] = useState(""); const [Password, setPassword] = useState(""); const onEmailHandler = (event) => { setEmail(event.currentTarget.value); } const onPasswordHandler = (event) => { ..

Email과 Password라는 상태 변수와 이를 업데이트하는 setEmail과 setPassword 함수를 정의하고onEmailHandler와 onPasswordHandler 함수를 각각 이메일과 비밀번호 입력란의 값이 변경될 때 상태를 업데이트한다.\ 이후 컴포넌트의 JSX 정의 jsp에서 client를 구성할때는 input태그를 가지고있으면 바로 작성이 가능했는데 React로 작성할때는 그게 아니고 Handler만들어줘야하는게 신기했다.import React, { useState } from 'react';function LoginPage() { const [Email, setEmail] = useState(""); const [Password, setPassword] = useState..

React Hook 이란Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.  Hook의 특징선택적 사용 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 그러나 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없다.100% 이전 버전과의 호환성 Hook은 호환성을 깨뜨리는 변화가 없다.현재 사용 가능 Hook은 배포 v16.8.0에서 사용할 수 있다.  대표적인 React Hook  1. useStateuseState는 Compone..

미들웨어란 미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정한다. 미들웨어를 액션과 리듀서 사이의 중간자이다. Redux-thunk리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로는 redux-thunk 라는 미들웨어를 사용하는것이다. 이 미들웨어는 리덕스를 개발한 Dan Abramov 가 만든 것이며, redux 공식 매뉴얼에서도 이 미들웨어를 사용하여 비동기 작업을 다룬다. 이를 사용하여 비동기 작업을 관리하는건 매우 직관적이고 간단 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해준다.리덕스에서는 기본적으로는 액션 객체를 디스패치한다. 일반 액션 생성자는, 다음과 같이 파라미터..

Ant Design 이란리액트와 타입스크립트(Typescript) 기반으로 제작된 UI라이브러리.중국회사에서 오픈소스화한 라이브러리 이다. Redux 란Redux는 리액트 애플리케이션에서 상태를 관리하기 위한 상태관리 라이브러리이다.Redux를 사용하면 전역 상태를 관리할 수 있으며, 이는 여러 컴포넌트에서 사용되는 데이터를 쉽게 공유하고 업데이트 할 수 있도록 해줌 Redux의 핵심개념은 "store", "reducer", "action" 이다. store은 애플리케이션의 전역상태를 저장하는 객체이며, action은 상태를 업데이트 하기 위한 객체reducer은 action에 따라 상태를 어떻게 업데이트 할지 정의하는 순수함수이다. Redux를 사용하면 컴포넌트에서 store에 있는 데이터를 읽고, a..

Concurrently란?Concurrently는 여러 개의 명령어를 동시에 실행할 수 있도록 해주는 패키지이다. 이 패키지를 사용하면 frontend와 backend에서 개발용 서버를 따로 실행할 필요도, 터미널의 로그를 따로 확인할 필요도 없다. "dev" : "concurrently \"npm run backend\" \"npm run start --prefix client\"" 를 추가하고npm run dev 시 back, front 동시 실행!

Axios 란 ?특징운영 환경에 따라 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용ES6 Promise API를 사용HTTP Methods를 사용Request의 응답을 자동으로 JSON 형태로 만듬jQuery의 Ajax처럼 클라이언트에서 서버로 데이터를 전달하며 요청하고 응답 받을 수 있다. import React,{ useEffect} from 'react'import axios from 'axios';function LandingPage() { useEffect(() => { axios.get('http://localhost:5000/api/hello') ,then(response => console.log(response.data)) }, []..

React Router Dom 이란?리액트를 사용할 때 페이지를 이동할 때 필요한 라이브러리이다.원래는 A페이지를 보여주고 싶다면 A.html파일을 이용하고 B페이지를 보여주고 싶다면 B.html 파일을 보여주는 방식이었다. 하지만 리액트에서는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.이것은 SPA(Single Page Application) 이라고 부른다. react-router-dom v6부터는,Switch 대신 Routes를 사용Route 안에 component 대신 element 사용  App.jsimport React from "react";import { BrowserRouter as Router, Routes, Route, Link} from ..