본문 바로가기

분류 전체보기

 (170)
react mongoDB연결2 전에는 고정된 값이 잘 들어가는지 확인을 하였고 이젠 사용자가 입력하는 값을 받아 POST 요청을 통해 DB로 보내는 과정이다.(GET도 포함) 만들어놓은 코드에 조금만 바꾸면 가능하다. 먼저 서버와 MongoDB의 연결부터 해준다. server 폴더로가서 npm start해준다. //부가적인 코드는 안 올림 app.listen(port, function () { console.log('server start on 8008'); }); async function connectHandler() { await client.connect(); console.log('connecting mongo...'); return 'done'; } connectHandler() .then(console.log('DB연결 ..
react mongoDB연결 1.문제 : 서버까지 연결되는 것을 확인했지만 mongoDB로 데이터가 들어가지 않는 문제 발생 구글링도 열심히 해봤지만 계속 안되었다.( 찾아보니 다양한 코드 해결 방법들이 있음 ) 2.시도 & 해결 너무 찾아보다보니 본질적으로 뭐가 문제인지 근원을 못 찾는것 같아서 (찾아본게 머리속에서 섞이는 기분이였다.) 코드를 싹 정리하고 다시 하나씩 정리하기 시작했다. 1) mongoose 라이브러리를 사용 -> mongoDB와 연결까지는 잘되는 것 확인 그러나 db에 내용물이 들어가지 않음 🔥고찰) 보내는걸 완료할 시점에서 보니 post를 하고 나서 DB에 넣어주는 코드작성이 비완성적이였던게 문제의 원인이였던것 같다. (막상 찾을땐 왜 눈에 안들어오는지 모르겠다.) 또 req.body를 받아서 시험으로 보내보..
.env 환경변수 값을 가져오지 못할때 react 파일과 mongoDB를 연결하다가 .env파일을 사용해야할 경우가 생겼다. 평상시 react 파일에서는 util파일안에 .env파일을 만들고 그 안에 REACT_APP_어쩌구 이렇게 설정을 하고 나서 다른파일에서 사용할땐 별다른것 없이 process.env.REACT_APP_어쩌구 를 했더니 잘만되던게 갑자기 안되었다. 찾아보니 dotenv 라이브러리의 도움으로 해결할 수 있다고 함 npm i dotenv 설치만 해주고 끝나는게 아닌 파일안에서 코드작성도 해주어야한다. 나의 경우 node.js를 사용해서 서버를 구축 중이였고 commonJS 형식으로 코드를 작성하였다. (es6의 경우에는 import구문으로 작성해야한다고 함) // server/index.js const dotenv = req..
서버로 POST 그리고 응답받기 어제까지 해놓은 기본적인 서버 설정만 해놓고 본격적으로 서버로 input의 값을 보내고 response를 받아보려고한다. (아직까지는 mongoDB로 보내진 않고 서버와 잘 연결이 되어있는지만 확인했다.) 아래의 이미지는 딱 필요한 input만 만들어놓고 로그인 버튼을 누르면 아듸와 비번이 서버로 갈 수 있도록 구현했다. 서버가 데이터를 잘 보내면 input창 밑에 잘 도착했다고 응답을 보내는것 까지 했다. 1.일단 server폴더에 index.js로 간다. - cors, bodyparser를 install 해주어야한다. // server/index.js const express = require('express'); const app = express(); const port = 8080; const ..
react + express + mongoDB 리액트로 로그인 만들어보기 연습하기위해서 기본적인 세팅이 필요 1. 데이터베이스로는 mongoDB사용 ( next.js에서 auth 연습 할 때 mongoDB를 사용했어서 다시 사용 ) 2. 서버를 편하게 사용하기 위해 expresss 라이브러리를 설치해서 사용 과정) 1. 먼저 client파일과 server파일을 분리했다. - backend라고 이름을 지은 폴더를 root경로에 하나 만들어주고 그 폴더 안에 들어가서 npm init -y 명령어 입력 (package.json 생성) - 그리고 같은 명령창에 npm i express를 해준다. (node_modules생성) - 갑자기 파일이 무지막지하게 생겼으므로 .gitignore파일 생성해서 node_modules 입력해주자. 2. backend폴더 ..
git pull --rebase 원격 저장소에 새로운 커밋상황이 있는지 깜빡하고 로컬에서 바로 pull을 하려고 하면 'Need to specify how to reconcile divergent branches'라는 오류가 뜬다. 이때 git pull --rebase를 해주면 새 브랜치가 시작된 분기점을 기준 브랜치의 가장 최근 commit으로 변경하는 작업이 진행된다. 간단히 정리하면 원격브랜치의 마지막 commit을 로컬 브랜치의 시작점으로 하는 것을 말한다. 나의 경우 pull을 두 번한 상태라 두 번째에 넣은 pull의 commit만 원격에 올라간 것을 볼 수 있었다. 이때 또 다시 pull 명령어를 실행해보면 터미널에 '지금 현재(HEAD분리) 상태까지의 커밋 내역을 푸시하려면 다음과 같이 하십시오. git push orig..
DFS(깊이우선탐색) 데이터의 구조는 선형구조, 비선형 구조로 이루어져 있는데 순차적으로 나열된 선형 구조에 비해 비선형 구조의 데이터는 탐색이 어렵다. 그때 사용하는 것이 DFS,BFS 탐색방법인데 우선은 DFS를 먼저 정리한다. 이 DFS방법은 두 가지의 방법이 있는데 첫 번째가 재귀이고, 두번째가 스택(반복문)을 이용하는 것이다. DFS(Depth First Search) 비선형 구조의 데이터에서 가장 깊은 노드까지 탐색하는 방법이다. - 탐색을 시작하는 노드를 스택에 넣고, 방문 처리를 한다. - 방금 넣은 노드에 방문하지 않은 인접 노드가 있다면 인접노드로 이동하여 스택에 넣고 방문 처리를 한다.(반복) - 만약 인접 노드가 없거나, 모든 노드를 방문했다면 스택에 쌓인 노드들을 pop한다. - 이 방법을 반복하여 스..
three.js npm 설치하기 내가 해놓고 잊지 않기 위해서 기록함 사실 여러 문서들을 보고 설치한거라 약간 짬뽕 식으로 되었는데 맞는지 아닌지 불확실하다. 기존에는 가장 편하게 모든 파일을 다 내려받는 다운로드식으로 설치를했다. 그러다보니 뭔가 파일도 너무 많고 정리도 안되는 느낌이라 싹 정리하고 필요한것만 가지고 있고 싶어서 npm 으로 설치하는 방법으로 바꾸어보았다. **깃허브로 전체 다운로드를 하려면 https://github.com/mrdoob/three.js 여기서 참고! 깃클론을 해서 가져오면 되는 형식이다. 사실 전체를 다 받으니 이렇게 많았다..;; 이런걸 줄이기 위해서 npm으로 설치를 함 1.우선 파일을 하나 만들고 터미널을 연다. 2.npm install --save three 입력 3.그럼 node module..

티스토리툴바