끄적끄적 (16) 썸네일형 리스트형 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.. [JSP] 동작과정 JSP(Java Server Page) 동적 페이지를 생성하기 위한 서버 측 스크립터 언어이다. Servlet 웹 브라우저가 정보를 요청할 경우 자바로 응답할 수 없어서 서블릿을 이용했다. 그러나 자세한 이유는 모르지만 사용이 불편한 관계로 생겨난게 JSP이다. 이 둘은 하는 일은 동일하지만 JSP는 HTML 내부에 JAVA 소스코드가 들어가므로 HTML 작성이 간편하다는 장점이 있고 서블릿은 자바코드 내에 HTML이 있어서 읽고 쓰기가 불편해서 작업의 효율성이 떨어진다고 한다. 이때 알아야 할 점은 JSP로 작성된 프로그램은 서버로 요청 시 Servlet파일로 변환되어 추출하고 HTML을 변환한다. [과정] 1. client가 hello.jsp를 요청했다. 2. JSP 컨테이너가 JSP파일을 읽는다. .. Web Server, WAS(Web Application Server) 정적 웹 페이지는 컴퓨터에서 저장된 텍스트파일을 열어보듯 저장된 그 상태 그대로 보는 것 동적 웹 페이지는 정적 페이지의 내용들이 다른 변수들에 의해서 변경되어 보여지는 것 [특징] 정적 페이지는 요청에 대한 파일만 전송하면 되므로 빠르고 비용이 적다. 그러나 저장된 정보만 보여주므로 한정적이고 관리가 힘들다. 관리가 힘든 이유는 추가, 삭제와 같은 변경사항이 있을때마다 수정을 계속해서 해줘야하기 때문이다. 동적 페이지는 다양한 서비스를 동적으로 제공하며 관리가 쉽다. 반면에 웹 페이지를 전달하기 전에 처리하는 작업이 필요하므로 정적 웹페이지 보다 느리며 웹 서버 외에 추가 처리를 위한 WAS가 필요하다. [Web server] 웹 브라우저를 클라이언트로부터 HTTP요청을 받아들이고 HTML문서와 같은 .. 이전 1 2 다음
