boilerplate (12) 썸네일형 리스트형 git clone code 새로운 react-shop-web project를 만들 깃허브 레포지터리를 만들고, 시작하기 전에 존안 강사님의 boilerPlate 코드를 갖고오자. https://github.com/jaewonhimnae/boilerplate-mern-stack GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG .. 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 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()에 전달해야 한다. 하지.. Auth 기능 만들기 Auth 기능이란? 페이지들이 있는데, 어떤 페이지는 로그인된 유저만 쓸 수 있는 페이지가 있고 어떤 페이지는 관리자만 쓸 수 있는 페이지가 있다. 이런 것들을 하나하나 체크해주기 위해서 authentication 기능을 만들어주는 것이다. index.js에서 auth api를 구현해주자. 루트 경로에서 middleware 폴더를 하나 만들어주고 그 안에 auth.js 파일을 만들어주자. auth 파일의 서브 설명은 위에 index.js의 auth api 구현 부분에 있다. auth.js 파일의 auth 구현 부분을 보면 findByToken 함수가 있는데 이 함수는 따로 내장되어있는 함수가 아니라 유저 모델에서 따로 만들어줘야한다. *static으로 만든 메서드와 methods 로 만든 메서드의 차이점.. Bcrypt로 비밀번호 암호화 하기 저번에 postMan으로 json형식의 회원가입 정보를 서버로 보냈었다. 이때 password 같은 경우 123456으로 넣어서 보내줬는데 문제는 이것이 암호화가 하나도 안되어있다는 것이다. (앞으로 나올 코드에서 존재하는 변수이기도 한데, 이렇게 쌩으로 드러나있는 비밀번호를 myPlainPassword라고 한다.) 보낼 때는 저렇게 보내도 DB에 저장할 땐 암호화를 한 후에 저장해서 계정 정보를 관리하는 사람도 유저의 비밀 정보를 볼 수 없도록 해줘야한다. 일단 bcrypt 라이브러리를 다운받아주자. bcrypt 사용법은 다음 링크를 이용하자. https://www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS.. Latest version:.. NodeMon 설치 & 비밀 설정 정보 관리 서버 코드를 변경할 때마다 서버를 재시작해야 하는 번거로움이 있는데 이것을 해결해주는 것이 nodemon이다. 이 도구를 사용하면 자동으로 위 작업을 해준다. 위에 보면 -dev가 붙어있는데 이것은 development 모드의 약자다. development 모드(local에서 할 때랑), production 모드(배포를 한 다음의 모드)가 있고, 우리가 로컬에서 할 때만 사용하겠다는 의미이다. 이렇게 다운로드하면 dependencies가 아니라 devdependencies에 버전이 들어가 있는 걸 확인할 수 있다. nodemon으로 시작해야 되기 때문에 scripts를 수정해주자. 다음으로는 소스 안에있는 비밀정보를 보호하는 작업이다. 지금까지 게시글에는 가렸지만 소스 안에는 mongoDB 내 정보가 들.. 이전 1 2 다음
