본문 바로가기

전체 글

 (60)
Auth 홈페이지를 사용할 때 보면 인증이 이뤄져야만 들어갈 수 있는 페이지가 있다. 예를 들어, 댓글을 작성한다던지, 마이페이지를 이용해야한다던지 등등.. 그리고 또 로그인한 유저 중에서도 관리자 권한이 있는 유저만 들어갈 수 있는 페이지도 존재한다. 이러한 페이지들을 통제할 수 있는 것이 바로 Auth(hoc)이다. "HOC(HIGHER ORDER COMPONENT) 란?" 고차 컴포넌트라고도 하는데, 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 즉, 컴포넌트를 인자로 받거나 반환하는 함수이다. https://jiyoon-park.tistory.com/entry/React-HOC%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84..
login page & register page & logout LoginPage.js import React, { useState } from 'react' import Axios from 'axios'; import { useDispatch } from 'react-redux'; import { loginUser } from '../../../_actions/user_action'; import { withRouter } from 'react-router-dom'; function LoginPage(props) { const dispatch = useDispatch(); // 여기 안에서 데이터를 변화 시켜줄 땐 state를 변화시켜준다. const [Email, setEmail] = useState(""); const [Password, setPassword] ..
React Hooks 위 파일의 28페이지 내용이다. https://velog.io/@velopert/react-hooks 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 velog.io https://developerntraveler.tistory.com/146 [React] React Hooks의 장단점 React Hooks는 ReactConf 2018에서 발표된 새로운 기능으로 16.8 버전부터 새로 추가되었다. Hooks를 이용하면 class 없이 state와 여러 React의 기능을 사용할 수 있다. Hoo..
Redux https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/ Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬 Redux(리덕스)란? 무엇인지 부터 간단한 실습까지 (상태 관리 라이브러리 리덕스 알아보기) ⚡️ Redux(리덕스)란? Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다. Redux(리덕스)의 hanamon.kr 위 사이트가 설명이 잘 나와있어서 두고두고 참고해야겠다. 위 파일의 27페이지 리덕스 관련 dependency들을 다운 받아주자. redux-pr..
Proxy Server & Concurrently & Antd CSS FrameWork Proxy Server의 관해선 밑에 파일의 23페이지에 나와있다. 참고 사이트 https://fomaios.tistory.com/entry/Network-%ED%94%84%EB%A1%9D%EC%8B%9C-%EC%84%9C%EB%B2%84%EB%9E%80-feat-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-What-is-a-Proxy-server [Network] 프록시 서버란? (feat. 필요한 이유) (What is a Proxy server?) Proxy란? Proxy는 사전적 의미로 "대리" 하는 것을 뜻한다. 컴퓨터 과학적인 의미로는 프로토콜 상에서 무엇인가를 대신하는 것을 뜻한다. Proxy 서버 프록시 서버는 클라이언트에서 서버로 접속을 fomaio..
React Router Dom & 데이터 flow, Axios & CORS 이슈, Proxy설정 리액트에서 페이지간에 이동을 할 때 React Router Dom이라는 것을 사용한다. 일단 react-router-dom이 없으므로 다운로드 받아주자. 밑에 사이트 예시를 보면 demo 버전이 잘 되어있다. App.js에 밑의 사이트 코드를 복붙해주자. https://v5.reactrouter.com/web/example/basic Home v6.6.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features..
Cannot find module, node:internal/modules/cjs/loader:995:15 frontEnd 부분에서 리액트 버전을 다운그레이드 시켜준 이후에 생긴 에러이다. 이 에러 같은 경우 인터넷 서칭을 해보면 대부분 package.json 파일이 두 개거나 파일 경로 설정이 잘못 되어있는 경우다. 난 후자의 이유이다. Error 내용을 자세히 보면 Cannot find module '/workspace/boilerplate/index.js'로 되어있다. index.js 파일은 분명 server 폴더 안에있는데 모듈 찾는 경로가 저렇게 되어있으니 안되는게 당연하다.. server 안에 있는 파일들을 모두 루트경로로 꺼내서 실행시켜보면 잘 돌아간다. 결국 파일 경로를 설정해주는 것이 관건이다. 절대 경로를 설정해주는 방법도 있지만, 나는 그냥 server의 package.json을 조금 수정..
create-react-app downgrade 18.0.1 to 16.8.6 npx create-react-app . 을 하면 18.0.1로 최신버전이 다운로드 된다. 하지만 강의에서는 16.8.6 react 버전을 사용하고 있기 때문에 나중을 위해서라도 다운그레이드를 시켜주는게 맞다고 생각했다. 인터넷을 찾아보니까 대부분 node_modules 폴더랑 package.json-lock 파일을 삭제한 다음, pacakge.json 파일에서 각각 버전을 맞춰서 수정해주고 npm install을 하라는 내용이었다. 나는 이 방법으로 하면 esilent 버전 에러나 react 문법이 맞지 않거나.. 등등 에러가 자꾸 났다. 그래서 다른 방법을 택했다. 내가 한 방법은 다음과 같다. 1. client 경로에서 npx create-react-app . 을 통해 최신버전을 다운받는다. 2. ..

티스토리툴바