프로그래밍 삽질 중

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리 * 오류를 따로 정리하는 페이지(컴퓨터 설정&오류)가 있으나 강의와 직접적인 오류라 생각해 이 곳에 정리 * 회원가입, 로그아웃, 인증하기 순서로 이어져야 하나 도중 인증하기에서 오류가 발생해서 남김 * 문제 원인 : 강의 내용 중 hoc/auth.js를 작성 후 코드 실행 시(npm run dev) 화면에 빈 화면 나옴 오류 내용 : unctions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than ret..

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리 client 부분 : react를 이용해 로그인 부분 만들기 1) 리덕스(redux, redux-promise, redux-thunk, reducer 사용해 로그인 진행) 설치 2) index.js에 리덕스 연결하기 3) App.js에서 LoginPage 연결하는 링크 만들기 4) component/views단에 loginPage.js 만들기 - 강의에선 먼저 진행됨 5) _reducers 부분 - 로그인 여부 확인 만들기 6) _action 부분 - axios를 이용해 server의 로그인 여부 확인하기 7) 구글 크롬의 "Redux DevTools"로 확인하기 1) 리덕스(redux, redux-promise, redu..

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리따 server 부분 : node.js를 이용해 로그인 부분 만들기 1) mongoDB와 연결 2) users.js라는 스키마가 포함된 값 만들기(mongoDB와 연결됨) 3) 로그인 시 user.js값 확인 후 정보 가져오기 4) 정보가 맞는지 확인하기 5) 정보가 맞으면 logSuccess : true, 맞지 않으면 false 6) Postman으로 확인하기 1) mongoDB와 연결 - [index.js] const express = require("express"); const app = express(); const bodyParser = require("body-parser"); const User = requir..

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리따라하며 배우는 노드, 리액트 시리즈 - 기본 강의"따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 1. proxy - 언제 사용? react와 node.js의 서버가 다를 경우(한 쪽은 3000, 한 쪽은 5000 사용 시) (1) client 내 package.json에 'http-proxy-middleware" 설치 (2) client 내 src 폴더에 setupProxy.js 만들기, 아래 내용 추가 const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", cr..

* 유료 강의이므로 코드의 모든 내용을 올리진 않음 * 개인적으로 중요하다고 생각되는 부분만 올릴 예정(주로 function 부분) * 당연하지만 강의코드와 작성자의 코드는 순서는 비슷하나 이름 등이 다름 [참고한 사이트] react state, props 사용법 https://velopert.com/921 css https://velog.io/@anrun/CSS-%EC%9C%84%EC%B9%98-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0position-float-inline-block-hyk5xn5nql [복습 결과물] (1) [ 날씨 기준 ]⭐0 밑 날씨 정보 map을 이용하기(array에 있는 내용들을 불러온 것) (2) 오늘의 날씨 버튼 열고 닫기, 날씨 변경하기(랜덤은 아..

* 유료 강의이므로 코드의 모든 내용을 올리진 않음 * 개인적으로 중요하다고 생각되는 부분만 올릴 예정(주로 function 부분) * 당연하지만 강의코드와 작성자의 코드는 순서는 비슷하나 이름 등이 다름 [참고한 사이트] 1. css(이미지 정렬) https://velog.io/@devzunky/wecode-5%EC%9D%BC%EC%B0%A8-TIL-div%EC%9A%94%EC%86%8C-3%EA%B0%9C-%EB%82%98%EB%9E%80%ED%9E%88-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-i6k1bw0n8v 1-1 리액트로 이미지 추가 https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%E..