boilerplate/Jhon-Ahn boilerplate frontend (8) 썸네일형 리스트형 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.. create-react-app 구조 & CRA to our Boilerplate 처음에 시작할 땐 npm run start 커맨드를 이용해서 실행을 시키는데 이것은 package.json 파일의 scripts 내용을 수정하면 바꿀 수 있다. 처음 실행시키면 나오는 화면은 App.js 내용이다. 위에 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 루트(root) DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있고 React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다. React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 한다. 하지.. create-react-app React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수이다.. React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느 프로젝트에서나 추가해서 쓸 수 있는 가벼운 라이브러리(library)에 가깝기 때문에 React를 기반으로 프로젝트를 시작하려고 하면 막막해지는 경우가 많은 것 같다. 과연 이러한 관련 기술을 신경쓰지 않고 React 애플케이션을 바로 개발할 수 있는 방법이 있는데, React를 만든 페이스북(Facebook)에서는 Create React .. 이전 1 다음
