jji_veloper

오늘 적을 내용은 react front에서 get 방식으로 api 요청을 보냈을 때 get url parameter를 백단에서 가져오는 법을 적어보고자 한다. node위주의 글이기에 react 프론트 쪽은 크게 설명안하고 가겠음 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import axios from 'axios'; function App() { return ( { let response = await axios.get("/api/test", { params: { name: "hello" }, }); console.log(response.data); }} > 확인용 ); } export default App; 그..

React, Node.js, Express 2022. 4. 5. 15:59

내가 반나절 동안 삽질했던 history.push 페이지 이동 시에 url 뒤에 parameter를 넘겨줄 때 한 실수를 적어보고자 한다. 상황) 페이지 이동 시 history에 props를 담아서 전달해주면서 동시에 url 뒤에 query string에 값을 달아주고 싶었다. 1. /test 페이지에서 /push 페이지로 값 전달하면서 이동 >Test.js import React from "react"; import { useHistory } from "react-router"; export default function Test() { const history = useHistory(); let data = { key: "value", key2: "value2" }; return ( 아리를 클릭하면 ..

React, Node.js, Express 2021. 11. 16. 10:59

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. 회원 가입시 회원의 주소를 입력 받아야 한다. 주소찾기 버튼이나 상세주소 입력 란을 클릭하면 이렇게 다음 지도 API가 뜨도록 해놨음 문제는 얘를 입력하고 창이 닫히고 나면?? 이렇게 보기 싫은 빨간 에러가 뜬다는 것... 여기서 쓰이는 것만 코드 뽑아보쟈... function Join({hist..

React, Node.js, Express 2021. 9. 29. 14:28

리액트가 싱글페이지인 것은 알았으나 새로고침 한다고 위와 같이 Cannot GET 경로 에러가 뜨는 것은 아니였을 것이다... 올해 4월 한달가량 만들었던 나의 첫 react 쇼핑몰 프로젝트... 어느순간 새로고침 할 때 저렇게 해당 url의 서버를 찾을 수 없다는 에러가 계속 떴었다. 해당 버그의 원인은 정말 다양할 것이다. 1. 해당 주소의 요청을 처리하는 backend api가 없다. 2. 서버가 불안정하다. 3. 서버 설정을 해주지 않았다. 등등... 프로젝트 별로 원인이 다양할 것이다. Webpack설정을 해주라는 글을 봤었는데, 나는 그런걸 안써서... 뭔지도 정확히 몰라서 설정도 못했었고 이런 식으로 backend의 app.js 하단에 위에서 처리하지 못한 모든 요청을 받아서 index.ht..

React, Node.js, Express 2021. 9. 24. 17:03

이미지 file을 서버에 업로드하기 전, 등록한 파일을 화면에서 미리 보여주고 싶을 때가 있다. URL.createObjectURL() 이용하기 부제: 이미지 미리 보기 url 생성 거두절미하고 리액트 코드부터 보시죠... import React, { useState } from "react"; function ImageUploadExample() { //파일 미리볼 url을 저장해줄 state const [fileImage, setFileImage] = useState(""); // 파일 저장 const saveFileImage = (e) => { setFileImage(URL.createObjectURL(e.target.files[0])); }; // 파일 삭제 const deleteFileImage..

React, Node.js, Express 2021. 9. 23. 15:07

우선 사용할 것은 location 객체의 search 파라미터이다. 리액트에서의 location은 javascript의 window.location과 동일하다. search는 url의 ? 뒤에 부분을 가져와줌 url뒤에 ?를 붙인 후 name을 넣어주자. 1번. 변수로 만들어서 쓰기 function 컴포넌트(location) { console.log("location >>> ", location); console.log("location.search >>> ", location.search); const params = new URLSearchParams(location.search); let name = params.get("name"); console.log("params.get('name') >>>..

React, Node.js, Express 2021. 9. 17. 12:54

예전에 winston을 이용해서 log를 남기는 법에 대해 글을 작성한 적이 있다. 참고: https://xively.tistory.com/21 [node.js express] winston으로 node console log 관리하기. winston 사용 설정 자세한 설명!! 오늘은 express에서 winston으로 console창에 logger 남기는 법, log기록 파일로 저장하는 법에 대해 말해볼 것이다 정말...열심히 찾아가보면서 만들었더니 혼자 쓰기 아까워서 글로 남김ㅋㅋㅋ글쓰는데 xively.tistory.com 이 글 남기고 winston middleware 설정하는 법에 대해서도 글을 남기려고 했는데 너무 바빠져서 이제야 글을 올린다... 내 개인적인 생각으론 winston은 백엔드 개발..

React, Node.js, Express 2021. 9. 11. 16:34

node.js에서 다중 쿼리문 실행 시 주의해야 할 점을 적어볼까한다. 이유는 내가 가끔 똑같은 실수를 반복하기 때문이다....ㅠ_^ 사용할 공통 예시 코드 // 다중 쿼리 1 쿼리1 = "INSERT INTO board(cid, pcode, category, rating, title, content) VALUES(?, ?, ?, ?, ?, ?); "; 데이터1 = [req.body.cid , req.body.pcode ,req.body.category ,req.body.rating ,req.body.title ,req.body.content]; let query1 = db.format(sqlQuery, data); // 다중 쿼리 2 let 쿼리2 = "UPDATE orderDetail SET addr..

React, Node.js, Express 2021. 5. 11. 12:45

참고: reactstrap.github.io/components/collapse/ reactstrap - Collapse Collapse Toggle Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. import React, { useState } from 'react'; impor reactstrap.github.io 특정한 것을 클릭했을 때 글이 숨어있다가 보이게 해주는 부트스트랩 Collapse 기능 그 중..

React, Node.js, Express 2021. 5. 9. 23:53

History.push() 로 값 전달하기 요약 history.push로 값 보내기 history.push로 보낸 값 받기 history.push( pathname: '경로', key: value ); 1. location을 받아와야함. function 컴포넌트명 ({location}){ let 받은값 = location.key; console.log(받은값); // 결과: value } 보낼 때 path지정 시 꼭 pathname을 사용해야한다. pathName, path 등 안됨! 우리가 아는 기존의 history.push()는 () 안에 '이동할 경로'를 적어주면 해당 경로로 이동한다. history.push('/api/product'); ▶ localhost:3000/api/product 경로로 ..

React, Node.js, Express 2021. 5. 7. 19:39

상황 - 후기 글 작성 시 로그인 된 사람만 작성 페이지로 들어갈 수 있다. - 로그인 되지 않은 사람이 페이지 접속 시 로그인 화면으로 이동시킨다. - 이때 history.push를 이용한다. src>app.js import 'bootstrap/dist/css/bootstrap.min.css'; import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; /**********Route import**********/ import Customer from './router/customerRouter'; import Main from "./components/product/productMain"; import Board from "./r..

React, Node.js, Express 2021. 5. 4. 21:25

내 상황 : 상위 라우트에서 하위 라우트로 값을 보내야 함 상위 Board 라우트에서 하위 Review와 Inquiry 로 해당 user state의 값을 보내려고 함 import React, {useEffect, useState} from "react" import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom" import Inquiry from "../components/board/inquiry"; import Review from "../components/board/review"; import axios from "axios"; function Board({ props, match }) { const [user, se..

React, Node.js, Express 2021. 4. 28. 23:00

상위 라우트에서 보내준 props를 받아서 하위 라우트 컴포넌트에서 쓰려고 하니까 history가 정의되지 않았다고 에러가 났다. route에서 render를 통해 props값을 넘겨줘야했기 때문에 매개변수를 두개줘야하나 고민했는데 일단 급한대로 history를 컴포넌트 내에서 직접 선언하는 방법을 쓰기로했다. import { useHistory } from "react-router-dom"; function 함수({props}){ let history = useHistory(); //...생략 history.push('/');//이렇게 필요한 곳에 바로 history. 해서 쓰면 됨 } 1. react-router-dom 에서 history import해오기 2. let history = useHist..

React, Node.js, Express 2021. 4. 28. 22:44

오늘은 express에서 winston으로 console창에 logger 남기는 법, log기록 파일로 저장하는 법에 대해 말해볼 것이다 정말...열심히 찾아가보면서 만들었더니 혼자 쓰기 아까워서 글로 남김ㅋㅋㅋ글쓰는데 시간 더 걸리는거같혀ㅠㅠ node로 서버단을 구현하게 되면서 console창에 logger를 남겨야겠다는 생각이 들었다. 엄청 소규모 프로젝트를 하는 중이라 파일까지는 안남겨도 될 것 같았으나... 아직 이해력 부족으로 파일로도 log를 저장하는 코드까지 구현해봤다 (=사실상 블로그보고 따라하기) 수 많은 블로그를 봤으나 제일 많이 참고된 블로그... 참고 : https://velog.io/@denmark-banana/%EA%B0%84%EB%8B%A8%ED%95%9C-Node.js-API..

React, Node.js, Express 2021. 4. 11. 00:02

react와 node.js로 공부 중에 경로를 여러가지로 설정하고 싶단 생각이 들었다... 기존에 springBoot, java, html(thymleaf)로만 개발을 해서 그런지 url을 여러가지 쓰는게 습관이... 코찔이라서 react같은 SPA에서 경로가 여러개이면 문제가 되는지는 잘 모른다는 점 양해바랍니다.... 암튼 기존에 쓰던 '/api' 경로 외에 새로운 경로를 createProxyMiddleware proxy에 추가하는 법을 알아보자. 참고한 사이트는 이 곳 : www.npmjs.com/package/http-proxy-middleware http-proxy-middleware The one-liner node.js proxy middleware for connect, express an..

React, Node.js, Express 2021. 4. 10. 08:00

계속 화면에 CAN NOT GET: 뭐 이런식으로 떴었다. 브라우저 console창을 확인하니 GET http://localhost:3000/ 404 (Not Found) 이런 에러가 떠있더라 서버가 문제인지 프론트엔드가 문제인지 한참 찾아봤는데 우연찮게 해답을 찾았다. 참고: stackoverflow.com/questions/44524424/get-http-localhost3000-404-not-found GET http://localhost:3000/ 404 (Not Found) I'm trying to start react-js app with node server. Structure of directory: MyTodo ---bin/ ------css/ ------fonts/ ------js/ -..

React, Node.js, Express 2021. 4. 9. 15:07