프로그래밍 삽질 중

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 데이터 저장한 부분은 지난 포스팅 참고 (https://ba-gotocode131.tistory.com/129) [개선 상황 1] - 현재 6개까지만 화면에 나옴 - 계속 추가 시 한 화면에 너무 많은 정보들이 담김 - [더 보기] 버튼을 추가해 6개 이후의 정보들이 나오는 걸 보고 싶음 [Client] ShowAllData.js import axios from "axios"; import React, { useEffect, useState } from "react"; import { Card, Row, Col } fro..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 데이터 저장한 부분은 지난 포스팅 참고 (https://ba-gotocode131.tistory.com/129) [Client] - 연결 루트는 "localhost:5000/api/data/list"(server) / "localhost:3000/review"(client) 1. App.js - /review로 페이지 확인하도록 만들기 2. Review/ShowAllData.js - DB에 저장한 내용 확인 [Server] 1. routes/data.js - DB에서 정보를 찾아 클라이언트에 전달 [1. 설정하기] [Cl..

* 밸로퍼트와 함께하는 모던 리액트 참고 https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us ○ JSX : 리액트에서 생김새를 정의할 때 사용하는 문법 (https://react.vlpt.us/basic/04-jsx.html) - 특징 1 : 태그는 꼭 닫혀있어야 함 - 특징 2 : 두 개 이상의 태그는 무조건 하나의 태그로 감싸야 함 - 특징 3 : 자바스크립트 변수를 보여줘야 할 때는 {}로 감싸야 함 ○ props : properties의 줄임말..

* 문제 상황 : 메인화면에 보여줄 이미지들을 일일이 작성하기보단 map을 이용하려고 했음 * Cannot read property 'map' of undefined 오류 발생 * 문제 해결에 도움을 준 블로그 https://devbirdfeet.tistory.com/47 React 실행오류 Cannot read property 'map' of undefined Updated 2021/05/10 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터를 화면에 뿌려주려 하다가 이런 에러메시지가 나왔다. 문제상황) TypeError: Cannot read property 'map' of undefined 왜 나에게 이.. devbirdfeet.tistory.com * 원인 : return에서 i..

* 3시간 넘게 고민함, 왜 해결된 건지 아직도 의문 * 일단 문제는 server와 client가 연결되지 않아서 axios가 제대로 작동하지 않음 * 여러 글들을 보니 server가 문제 -> server와 client가 포트가 다를 때 연동해주는 setProxy에서 문제가 생긴 것이라 짐작 -> 변경하고 오류 생겨서 원래 코드로 다시 고침 -> 다시 잘 작동됨 -> 대체 왜 된 걸까? setProxy.js 수정 전 const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://loc..

* 문제 원인 * server 포트 : 5000 / client 포트 : 3000 - setProxy.js를 이용해 연결한 상황 - '/api' 설정 이외의 다른 루트로 연결 시 오류 발생 - 예를 들어 '/api' 이외의 '/hello'로 연결하고 싶어 연결하면 get 요청을 할 수 없다고 나옴 - setProxy 관련 블로그 글을 참고했으나 적용 시 오류 발생 https://xively.tistory.com/20 [react proxy] react proxy 여러 개 설정하기, createProxyMiddleware에서 경로 여러 개 설정, react 파일형식 pro react와 node.js로 공부 중에 경로를 여러가지로 설정하고 싶단 생각이 들었다... 기존에 springBoot, java, ht..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 [Client] - 연결 루트는 "localhost:5000/api/data/image"(server) / "localhost:3000/review/data"(client) 1. App.js - /review/upload로 페이지 확인하도록 만들기 (auth부분은 https://ba-gotocode131.tistory.com/category/%EA%B0%9C%EC%9D%B8%EA%B3%B5%EB%B6%80/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8)에서 확인 2. Review/DataUpload.js ..

* client의 값을 server로 전송하는 과정에서 생긴 오류 * 참고한 블로그 : (https://velog.io/@kaitlin_k/axios-patch-400-%EC%98%A4%EB%A5%98) * 오류 원인 : body로 전달할 때 값과 전달받는 값의 형식이 동일해야 했음, 또한 useState의 값을 전달해야하는데 변수값을 전달해서 생긴 오류 수정 전(Client/UploadProductPage) const Continents = [ { key: 1, value: "Asia" }, { key: 2, value: "Africa" }, { key: 3, value: "North America" }, { key: 4, value: "South America" }, { key: 5, value: "..