프로그래밍 삽질 중

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) * 프론트부분에서 인증이 필요한 부분 - 로그인 시 로그인 페이지/회원가입 페이지로 이동 못하게 하기 -> 가려고 하면 기본페이지(LandingPage)로 이동할 것 [인증 부분 만들기 - client 부분] 1. hoc/auth.js에서 인증 부분 만들기 2. hoc/auth.js에서 console.log(response)로 확인한 부분들로 조건문 만들기 3. _actions/_reducer에서 auth..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [로그아웃 만들기 - client 부분] 1. LandingPage에서 '로그아웃'버튼 만들기 2. 구글 크롬에서 확인하기 3. 로그인 -> 처음 페이지('localhost:3000/') -> 로그아웃 버튼 누르고 로그인 페이지로 이동하기 1. LandingPage에서 '로그아웃'버튼 만들기 import React, { useEffect } from "react"; import axios from "axi..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [회원가입 만들기 - client 부분] * 로그인과 비슷한 부분이 많음 1. RegisterPage.js에서 코드 작성하기 2. _actions, _reducer에 각각 자료 생성하기 3. 구글 크롬에서 확인하기 4. 회원가입 완료되면 로그인 페이지 -> 처음 페이지('localhost:3000/')로 이동하기 1. RegisterPage.js에서 코드 작성하기 import React, { useStat..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) REDUX , REACT 설명 더보기 redux - 상태관리 라이브러리 - 리덕스 스토어(메소드 이용)에 저장 시 정보소통(state)이 원활해짐 - props 1. property의 줄임말 2. 컴포넌트간에 뭔가를 주고 받을 때 사용 3. 위에서 아래로(부모 -> 자식) 전달 4. 전달 시 값이 변하지 않음 - state 1. 컴포넌트 안에서 데이터 교환, 전달 2. 값이 변할 때 리랜더링 됨 redux..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [인증 기능 만들기 - server 부분] 1. index.js에 router 만들기 2. auth.ctrl.js에서 기능만들기 - 로그아웃 기능 3. postman에서 확인하기 ○ 1. index.js에 router 만들기 const express = require("express"); const router = express.Router(); const authCtrl = require("./auth...

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) *참고할 글(Cookie VS Session VS Token(JWT) 차이) (https://devyuseon.github.io/about%20dev/cookie-session-token/) [인증 기능 만들기 - server 부분] 1. index.js에 router 만들기 2. auth.ctrl.js에서 기능만들기 - 인증이 성공한다면 나올 정보들 3. models/User.js 인증을 하는 메서드 만..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [로그인 만들기 - server 부분] 1. index.js에 router 만들기 2. auth.ctrl.js에서 기능만들기 - mongoDB에 저장한 users와 이메일이 맞는지 - 이메일이 맞다면 비밀번호가 같은지 - 비밀번호가 갖다면 토큰을 생성할 것 3. auth.ctrl에 들어간 기능들을 models/User.js에서 생성하기 - comparePassword : 저장된 비밀번호와 입력한 비밀번호가..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) 항목들 폴더 config middleware model routes src views 문서 dev/key/prod auth user/stay 등 ctrl, index public 화면단 설명 mongoDB와 연결 route안 auth 작동하기 위한 미들웨어 스키마 및 함수 존재 컨트롤러 존재 (get, post 다룸) css, image, js 존재 react 적용 시 없어질 예정 [회원가입 만들기 - s..