프로그래밍 삽질 중

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 [1. search를 작동한 js페이지(DataSearch.js 만들기)] [Client] DataSearch.js import React, { useState } from "react"; import { Input } from "antd"; const { Search } = Input; function DataSearch() { return ( ); } export default DataSearch; [Client] ShowAllData.js import axios from "axios"; import React, { us..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 저장된 값의 정보 바꿔야함 -> 필터 적용시켜 찾기 위함 [1.필터 만들기 전 사전 작업] 1. MongoDB 수정 [Server] 1. review/Data.js const mongoose = require("mongoose"); const dataSchema = mongoose.Schema( { title: { type: String, }, description: { type: String, maxlength: 50, }, images: { type: Array, default: [], }, seasons: { typ..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 저장된 값의 정보 바꿔야함 -> 필터 적용시켜 찾기 위함 * 이전 진행 상황에서 이어서 진행(https://ba-gotocode131.tistory.com/136) * season으로 값 저장하는 것이 아닌 seasons로 해야 함(mongoDB, server의 data.js, client의 DataUpload.js 수정 필요) [3.필터 적용하기] [Client] ShowAllData.js import axios from "axios"; import React, { useEffect, useState } from "re..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 저장된 값의 정보 바꿔야함 -> 필터 적용시켜 찾기 위함 [1.필터 만들기 전 사전 작업] 1. MongoDB 수정 [Server] 1. review/Data.js const mongoose = require("mongoose"); const dataSchema = mongoose.Schema( { title: { type: String, }, description: { type: String, maxlength: 50, }, images: { type: Array, default: [], }, season: { //추가..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * 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의 줄임말..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * 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 ..