프로그래밍 삽질 중

* 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: "..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 올리기 * 오류 1 : handler assigned value but never used - react에서 파일을 올릴 때 axios가 포함된 파일 내 handler가 인식되지 않음 - 이미지 올릴 때 react-dropzone 사용함 * 해결책 - Dropzone 사용 시 onDrop={}에 제대로 Handler가 있는지 확인 - onDrop 내 console.log()가 Handler를 읽어오는데 방해될 수 있으므로 제거 //수정 전 function testUpload() { const Handler = (files) => { //config //axios 포함 } return..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * 서울 ~ 울산광역시가 포함된 option 기능 react로 만들기 * 결과물 - 확인 위에 부분만 참고할 것 해당 코드 import React, { useState } from "react"; import { Button, Form, Input } from "antd"; const { TextArea } = Input; const Metropolitans = [ { key: 1, value: "서울특별시" }, { key: 2, value: "부산광역시" }, { key: 3, value: "전주광역시" }, { key: 4, value: "대구광역시" }, { key: 5, value: "인천광역시" }, { key: ..

* 인프런 '따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기' 내용 정리 * The Moive DB API 이용 (사이트 : https://www.themoviedb.org/) * The Moive DB API 관련 설명 - 영어(사이트 : https://developers.themoviedb.org/3/getting-started/images) * 회원가입/로그인/인증한 페이지에 이 부분 넣을 예정 (정리한 글 : 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) [API 이용해서 MovieDetail에 정보 넣기] 1. Movi..

* 인프런 '따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기' 내용 정리 * The Moive DB API 이용 (사이트 : https://www.themoviedb.org/) * The Moive DB API 관련 설명 - 영어(사이트 : https://developers.themoviedb.org/3/getting-started/images) * 회원가입/로그인/인증한 페이지에 이 부분 넣을 예정 (정리한 글 : 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) [API 이용해서 MovieDetail에 정보 넣기] 1. Land..