React

인증 체크하기 회원이 접근할 수 있는 페이지는 권한이나 상태에 따라 다를 수 있다. 이러한 페이지에 대한 통제는 HOC를 이용한다. HOC란 다른 컴포넌트를 받아 새로운 컴포넌트를 return 하는 fuction이다. 위와 같이 상태를 check해 페이지를 통제하는 방식이다. hoc디렉터리에 auth.js라는 파일을 만들자. import { response } from 'express'; import React,{ useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { auth } from '../_actions/user_action'; export default function(SpecificComponent, opti..

로그아웃 만들기 로그아웃은 다른 기능보다 간단하게 구현할 수 있다. LandingPage에 버튼을 하나 만들어 로그아웃을 하게 만들면 된다. import React, { useEffect } from 'react' import axios from 'axios' function LandingPage(){ useEffect(() => { axios.get("/api/hello").then((response) => { console.log(response); }); }, []); return( 시작 페이지 로그아웃 ) } export default LandingPage 우선 뷰를 만들었다. button에 핸들러를 달아 axios로 logout request를 요청하면 마무리된다. import React, { ..

회원 가입 페이지 만들기 위와 같은 레이아웃으로 회원가입 페이지를 만들어 보자. 이번에도 Redux를 적용하여 구현할 예정이다. 우선 다음과 같이 뷰를 짜 보자. return ( Email Name Password Confirm Password 회원 가입 ) state와 setState를 작성해서 타이핑까지 가능하게 만들자. const [Email, setEmail] = useState("") const [Name, setName] = useState("") const [Password, setPassword] = useState("") const [ConfirmPwd, setCofirmPwd] = useState("") const onEmailHandler = (event) => { setEmail(e..

로그인 페이지 만들기 LandingPage부터 하나하나 만들어보자. 우선 스타일부터 바꿔보자. import React from 'react' function LoginPage(){ return( Email Password Login ) } export default LoginPage Email과 Password를 타이핑하고 싶지만 아직은 되지 않는다. state를 정의하고 setState함수를 이용하여 값이 변했을 때 적용시켜 주면 된다. import React, { useState } from 'react' function LoginPage(){ const [Email, setEmail] = useState("") const [Password, setPassword] = useState("") cons..

React Component react component에는 크게 두 가지로 나뉜다. Class Component와 Functional Component로 구분이 되는데 이를 비교해보자. Class Component: 더 많은 기능을 제공한다. 하지만 code가 길어지고 복잡해지며 성능이 좋지 않다. Functional Component: 제한된 기능을 제공한다. code가 짧고 간단하며 성능이 좋다. 다음은 lifrcycle이다. 이러한 lifecycle은 Fuctional Component에서는 사용이 불가능했다. 하지만 react 16.8 이후에 Hook이 발표되면서 Functional Component에서도 사용 가능하게 되었다. 사용법은 다음과 같다. useState 메서드를 이용하여 state..

Redux redux는 상태 관리 라이브러리이다. 여기서 상태(state)란 다음과 같다. props은 부모에서 자식 방향으로 값을 보내 변하지 않는 값을 의미하며 생성할 때 전달하는 값이다. state는 컴포넌트 안에서 데이터를 전달하는 방식이며 컴포넌트 안에서도 충분히 값을 변경할 수 있다. state가 변화면 re-rendering 되는 특징이 있다. redux는 이러한 state를 관리해 주는 tool이다. redux의 유무에 대한 차이를 살펴보자. 만약 데이터를 공유하는 컴포넌트들이 계층적으로 존재한다면 첫 번째 그림과 같이 계속해서 부모와 자식 사이를 지나가며 상태를 유지해야 한다. 하지만 redux를 사용한다면 store하나를 만들어 컴포넌트들의 상태를 관리할 수 있다. Action: 어떤 ..

CSS Framework 스타일을 만드는 작업을 할 때 하나하나 모두 손수 만들 수 있지만 시간이 너무 오래 걸린다. 따라서 성능에 집중하기 위해 framework를 사용하자. 다음은 CSS Framework의 종류이다. http://ant.design Ant Design - The world's second most popular React UI framework ant.design 공식 사이트를 따라 해 보면 쉽다. 우선 설치를 하자. npm install antd --save 그리고 index.js에 임의로 import를 해놓자. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App f..

Concurrently 백엔드 서버와 프런트엔드 서버를 둘 다 동작시켜야 하기 때문에 많이 번거롭다. 이를 한 번에 동작시켜주는 라이브러리가 있다. 이를 설치하여 좀 더 쉽게 구현해보자. 우선 설치를 하자. npm install concurrently --save 설치가 완료되면 다음과 같이 스크립트를 작성하면 된다. 여기서 --prefix client는 client디렉터리에 작성된 npm run start를 의미한다. 즉, clinet 에서 정의한 스크립트를 실행하게 된다. 실행해보면 모든 서버가 잘 동작하는 것을 볼 수 있다.

Data Flow client에서 원하는 요청을 보내면 서버에서 처리한 후 DB에 접근하여 응답을 보내는 구조이다. client가 없을 때는 postman을 사용하여 테스트해봤다. 이제 AXIOS를 이용하여 구현해 보자. 우선 axios를 설치하자. npm install axios --save 간단하게 LandingPage에서 확인해보자. import React, { useEffect } from 'react' import axios from 'axios' function LandingPage(){ useEffect(() => { axios.get('api/hello') }, []) return( LandingPage ) } export default LandingPage 엔드포인트를 api/hello로..

rehttps://reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com React 화면 이동 react에서 화면 이동을 하려면 app.js(또는 다른 파일)에서 설정한 routing으로 화면 이동을 설정할 수 있다. 이때 사용하는 것이 'react-router-dom' 이다. npm을 이용하여 설치하자. npm install react-router-dom --save 설치가 완료되면 위의 사이트에 Usage를 참고하여 다음과 같이 코드를 작성해보자. import './App.css'; import { BrowserRouter as Ro..