따라하며 배우는 시리즈/NodeJS & ReactJS Basic

[ReactJS] 인증 체크하는 기능 구현하기

웹사이트에서 보면 로그인을 한사람만 진입이 가능한 페이지가 있고 로그인을 했더라도 어드민만 진입이 가능한 페이지가 있을 수 있습니다. 또는 댓글을 작성하거나 파일을 업로드 하는등의 기능도 권한에 따라서 허용되고 제한되는 경우가 있을것입니다. 이러한 권한을 인증하는 기능이 필요한데 이러한 Auth를 HOC(Higher-order component)를 이용하여 구현해보려고합니다. HOC는 우선 function입니다. function인데 다른 컴포넌트를 받은다음에 새로운 컴포넌트를 리턴합니다. const EnhancedComponent = higherOrderComponent(WrappedComponent); 이처럼 컴포넌트를 받아오는데 새로운 컴포넌트를 리턴하는 것입니다. Auth라는 컴포넌트가 HOC입니다..

[ReactJS] 로그아웃 기능 구현하기

로그아웃 기능은 기존에 만들었던 로그인과 회원가입에 이어지는 내용입니다. 로그인과 회원가입 기능이 있다면 로그아웃도 당연히 존재해야겠죠! 로그아웃은 LandingPage.js에 버튼을 하나 만들려고합니다. import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage(props) { useEffect(() => { axios.get('/api/hello') .then(response => console.log(response.data)) }, []) const onClickHandler = () => { axios.get('/api/users/logout') .then(response => { if(resp..

[ReactJS] 회원가입 페이지 구현하기

앞서 로그인 페이지를 구현했던것과 비슷하게 최소한의 정보만 회원가입란에 입력하는 회원가임 페이지를 만들어 보겠습니다. 로그인 기능이 구현되었다면 회원가입은 간단합니다. (복붙하면 되거든요) import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { registerUser } from '../../../_actions/user_action'; function RegisterPage(props) { const dispatch = useDispatch(); const [Email, setEmail] = useState(""); const [Name, setName] = useState(""); const..

[ReactJS] 로그인 페이지 구현하기

현재 Boiler Plate는 로그인과 회원가입을 구현하기위해 Formik과 Yup이란 라이브러리를 사용해서 다이나믹하게 만들어야하지만 기초적인 부분만 다루기 위해 이메일이나 비밀번호만을 가지고 로그인페이지를 만들려고합니다! 지금 현재는 서버를 실행시키면 LandingPage가 나오도록 코드가 짜여져 있는데 이 랜딩부분을 수정해 보겠습니다. import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage() { useEffect(() => { axios.get('/api/hello') .then(response => console.log(response.data)) }, []) return ( 시작 페이지 )..

[ReactJS] class Component & functional Component

리액트 컴포넌트는 class컴포넌트와 functional 컴포넌트가 있습니다. class컴포넌트와 functional 컴포넌트에 대하여 간단하게 알아보고 차이점을 알아보겠습니다. 각 컴포넌트의 구조입니다. class 컴포넌트에서는 functional 컴포넌트보다 더 많은 기능을 사용할수 있지만 코드가 더 길어지고 복잡해지며 성능이 조금은 느려질수 있습니다. functional 컴포넌트는 제공하는 기능이 한정적이지만 코드가 간결해지고 성능이 좀더 좋다는 장점이 있습니다. functional 컴포넌트가 아무리 성능이 좋다고 하더라도 기능적으로 못쓰는 것이 많다보니 이전에는 대부분 class 컴포넌트를 사용했었는데요. 리액트 16.8버전에서 Hooks라는 것이 업데이트 되고나서는 functional 컴포넌트에..

[ReactJS] Redux 기초, Redux 설정

redux(리덕스)는 상태관리 라이브러리라고 할수 있습니다. react에서는 props라는것이 있고 state라는 것이있습니다. props는 properties의 줄임말로 컴포넌트 간에 무언가를 주고 받을때 이용합니다. 또한 부모컴포넌트에서 자식컴포넌트로 줄때만 이용할수 있습니다. 만약 부모 컴포넌트에서 자식컴포넌트로 1이라는 것을 준다면 자식컴포넌트에서는 그 1을 변경할수 없습니다. 이 1을 변경하고 싶다면 부모컴포넌트에서 다시 전달을 해주어야만 합니다. state는 부모컴포넌트에서 자식컴포넌트로 주는 건이 아니라 컴포넌트 안에서 데이터를 교환하거나 전달하기위해 사용합니다. state는 mutable 속성으로 변경을 할수 있습니다. 만약 2라는 것이 3으로 변경된다면 리랜더링 되는 성격도 가지고 있습니..

[ReactJS] Antd CSS Framework

CSS를 직업 코딩하는 방법도 있지만 기능 개발에 시간을 많이 투자하면서 CSS도 직접 코딩을 하게 되면 시간소모가 상당히 많이 될수 있습니다. 그래서 프레임워크를 사용하면 이런 시간도 절약을 할 수가 있고 실무에서도 사용하기도 하는데요. 요즘은 CSS 프레임워크가 너무 잘되어 있기때문에 프레임워크위에 다시 CSS를 입히기도합니다. React JS를 위한 CSS 프레임워크는 Material UI, React Bootstrap, Semeantic UI, Ant Design, Materialize 등이 있는데요. 이번에는 Ant Design를 사용해보려고 하는데 Ant Design는 중국에서 만들어 졌습니다. Ant Design의 너무 많은것이 들어있어 규모가 상당히 크다는 단점이 있습니다. 하지만 스타일이..

[ReactJS] Concurrently로 클라이언트와 서버 한번에 실행하기

지금까지 서버를 킬때 React와 Node를 따로따로 실행시켰었습니다. 하지만 Concurrently라는 라이브러리를 활용하면 한번에 실행시킬수가 있는데요. 먼저 라이브러리를 설치해보겠습니다. npm install concurrently --save 설치가 되었습니다. https://www.npmjs.com/package/concurrently concurrently Run commands concurrently. Latest version: 7.0.0, last published: a month ago. Start using concurrently in your project by running `npm i concurrently`. There are 1113 other projects in the n..

[ReactJS] CORS이슈 해결을 위한 Proxy 설정

앞선 포스팅에서 프론트서버의 3000번포트에서 백엔드서버인 5000번포트로 요청을 보낼때 CORS policy에 의해서 막혔다라는 에러가 발생했었는데요. 서버는 포트가 5000번이고 클라이언트는 3000번으로 다르기 때문에 설정이 따로 없다면 request를 보낼때 CORS 정책에 의해 막혀버리게 됩니다. CORS정책이 왜 있냐하면 다른 웹사이트에서 우리 서버로 뭔가를 보낸다면 보안적으로 문제가 발생하겠죠? 그런 보안적인 문제 때문에 CORS가 있는 것입니다. CORS는 Cross-Origin Resource Sharing의 약자입니다. Cross는 왔다갔다 하는것을 의미하고 Origin은 각 서버에서의 3000번 5000번을 의미하는데 Origin이 다른것입니다. 말그대로 Origin이 Resource..

[ReactJS] 데이터 흐름과 Axios사용하여 요청보내기

현재 프로젝트에서는 Server(NodeJS)가 있고 Client(ReactJS)가 있고 DataBase(MongoDB)가 있습니다. 데이터의 흐름을 보자면 User가 로그인을 하고싶다면 Client에서 ID와 Password를 적어서 로그인 버튼을 누르게 될것입니다. 그러면 그 요청에 Server에 들어오게 되고 Server는 DataBase에서 유저 정보를 찾고 ID가 있다면 Password가 ID와 일치한지를 확인하게 됩니다. 만약 일치한다면 성공했다고 response하면되고 비밀번호가 틀리거나 유저가 존재하지 않는다면 그런 내용을 클라이언트에 전달을 하게 될것입니다. 앞서 NodeJS에서는 클라이언트 부분이 없어서 포스트맨을 이용했었는데요. 이제부터는 React를 이용한 클라이언트를 이용해서 요청..