# body parser
풀스택 웹개발 부트캠프 5주차 (1)
form 클라이언트가 서버에게 정보를 전달할 때 사용 form 속성 action : form을 전송할 서버 주소 지정 name : form을 식별하기 위한 이름 method : form을 서버에 전송할 http 메서드 지정 일반적으로 받을 때 GET, 보낼 때 POST target : action 속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 함 enctype : form 전송 타입 application/x-www-form-urlencoded : form 기본 타입 multipart/form-data : 파일을 업로드할 때 주로 사용 text/plain : 간단한 텍스트 데이터를 서버로 전송할 때 사용 application/json : JSON 형식에 데이터를 전송할 때 사용 (주로 API 요청 및 응답) form 요소 input readonly : 선택 X 백엔
[error] TypeError: Cannot destructure property 'index' of 'req.body' as it is undefined.
에러 원인 req.body 객체가 undefined가 나오고 사용하려고 하면 에러가 나왔다. 알고보니 app.use로 사용해야 하는데 app.set으로 사용하고 있었다. server.js 해결 app.set을 app.use로 변경해주면 된다.
Nodejs with MongoDB(1)
client ⇒ POST /blog {title: ‘…’, content: ‘….’} ⇒ Express nodejs server C(reate): POST / R(ead): GET / U(pdate): PUT / D(elete): DELETE ⇒ CRUD 요청(req)에는 POST, GET, PUT,DELETE… 등 메소드 와 ‘/’, ‘/blog’ 와 같이 리소스 엔드 포인트가 필요하다. ex) POST /blog, PUT /blog/31231, GET /blog?page=1&per_page=10, DELETE /blog/31231 > User API 만들기 > > 웹사이트는 기본적으로 파일을 생성하고 수정할 수 있는 파 일 시그템을 제공하지 않는다. Web API인 fileReader 객체를 사용해 사용자가 지정한 파일을 읽어드리는것은 가능하다 그래서 postman 이라는 프로그램을 이용하자. Postman Post 요청 
🔁 body-parser 미들웨어
body-parser : Node.js에서 요청 body를 파싱해주는 미들웨어로 4 가지의 parser를 제공한다. JSON body parser Raw body parser Text body parser URL-encoded form body parser body-parser (공식 문서) body-parser 설치 Express 4.16.0 이전 npm install로 body-parser 모듈을 설치한다. Express 4.16.0 이후 ✅ Express 4.16.0 버전부터는 body-parser를 따로 설치하지 않고, body-parser를 기반으로 하는 Express 내장 미들웨어 express()를 사용한다. [express() 공식 문서](https://expre
🌐 Express 프레임워크 & 미들웨어
Express 프레임워크 : Node.js 환경에서 웹 서버 또는 API 서버를 제작하기 위해 사용되는 프레임워크 Express를 사용하면, HTTP 모듈보다 훨씬 더 간단하게 웹 서버를 만들 수 있다. Express (공식 문서) Express - Hello World 예제 Express로 구현한 서버가 HTTP 모듈로 작성한 서버와 다른 점 미들웨어를 추가할 수 있다. 라우터를 제공한다. Express 설치 서버 생성하기 서버 실행하기 app.listen() 라우팅 : 클라이언트 요청의 HTTP 메소드와 엔드포인트(URI)에 따라 서버가 응답하는 방식을 결정하는 것 [Express 라우
Body-Parser / body값을 추출하자
Body-Parser란? > Request와 Response 사이에서 기능을 수행하는 미들웨어 > Request.body 부분을 원하는 형태로 파싱하여 활용 Request BODY Body-Parser 미사용 Express의 req.body는 undefined가 나온다. Body-Parser 사용법 > urlencoded({extended: true / false}) > true: querystring 모듈 사용 > false: qs 모듈 사용(설치 필요) 출처 : https://ninjaggobugi.tistory.com/11
server 만들기
실행 : node app.js > post 실행은 postman에서 확인 >http://localhost:3000/api/todo > 참고 사이트 >http://expressjs.com/en/5x/api.html#req.body >COR 정책에 막혔을 때 해결하는 법 >https://www.npmjs.com/package/cors
MERN - 회원가입 라우터 추가, body-parser, bcrypt
클라이언트/서버 클라이언트/서버는 두 개의 컴퓨터 프로그램 사이에 이루어지는 역할 관계를 나타내는 것이다. 클라이언트는 다른 프로그램에게 서비스를 요청하는 프로그램이고, 서버는 그 요청에 대한 응답을 해주는 프로그램이다. 클라이언트/서버 개념은 단일 컴퓨터 내에서도 적용될 수 있지만, 네트워크 환경에서 더 큰 의미를 가진다. 여러 다른 지역에 걸쳐 분산되어 있는 프로그램을 연결해 줄 수 있다. 현재는 서버를 만들고 있음을 다시 한번 기억하자! 서버가 클라이언트의 요청을 받아 올 때 필요한 것이 있다. body-parser 요청의 본문을 지정한 형태로 파싱해주는 미들웨어(서로 다른 어플리케이션이 서로 통신하는데 사용되는 소프트웨어)이다. req.body는 기본적으로 undefine
[React] Server
2. Server 가장 먼저, 코드에디터(나는 VS Code 사용함)의 터미널에 아래의 명령어를 입력하여 Express, cors, body-parser를 install한다. 이 세 가지에 대한 자세한 내용은 링크를 참고한다. > 참고 Express : cors : body-parser : server.js
[에러 일지] Node.js request body 값이 undefined인 경우
클라이언트 단에서는 값이 출력되는데, 서버 단으로 보내면 undefined가 뜨면서 아래와 같은 에러가 발생했다. TypeError: Cannot read properties of undefined ... 전달된 body 값이 읽을 수 없는 형태이기 때문에 발생하는 이슈다. 이를 해결하기 위해서는 body의 값을 읽을 수 있는 형태로 파싱(추출)해야 한다. 이 때 사용하는 게 body-parser라는 모듈인데, express 4.x 부터는 내장되어 있어 따로 설치하지 않아도 된다. 다만, 다음 코드를 추가해야 한다. URL-encoded는 주소 형식으로 데이터를 보내는 방식이다. extended: false : querystring 모듈 사용해 쿼리스트링 해석 extended: true : qs 모듈 사용해 쿼리스트링 해석 참고로 body parser를 설치해서 사용했던 기존 방식은 아래와 같다.
[NodeJS] express와 함께 쓰는 모듈들
1. body-parser 미들웨어 > HTTP post put 요청시 request body 에 들어오는 데이터값을 읽을 수 있는 구문으로 파싱함과 동시에 req.body 로 입력해주어 응답 과정에서 요청에 body 프로퍼티를 새로이 쓸 수 있게 해주는 미들웨어. extended 옵션 body-parser 미들웨어의 여러 옵션 중에 extended를 false로 설정하면 node.js에 기본으로 내장된 queryString를 사용하고 true일 때 따로 설치가 필요한 npm qs 라이브러리를 사용합니다. extended:false -> queryString 사용 extended:true -> qs 라이브러리 사용 사용 방법 2. router 미들웨어 > router는 사용자의 다양한 요청이 들어왔을 때 use() 메소드로 설정한 미들웨어가 항상 호출되는 불편한 점을 개선하여 만들어진 모듈입니다. 라우팅은 URI(또는 경로) 및
NodeJS - form에 입력한 데이터를 서버에 보내기(POST요청)
저번엔 GET요청을 하는 법을 포스팅했었다. 이번에는 POST요청을 해본다. POST요청은 주로 글쓰기, 회원정보 입력 등에 사용한다. HTML 내 form태그 내부의 정보들을 서버로 보내려면? 백엔드에서 > ### form 태그 내의 action과 method는 항상 필수! action은 "데이터를 전송할 경로가 어디인지" method 는 "데이터를 어떤 형태로 전송할지(POST일지 GET일지 등등)" 그리고 input 태그 내에 name속성을 추가해줌으로써 정보를 전달받았을 때 이 정보가 어떤 input에 적혔던 것인지 구분할 수 있게 한다. input태그가 여러개면 어느 input에서 온 정보인지 구분이 안갈테니까. 그리고나면 body-parser 를 설치해준다. body-parser는 데이터를 쉽게 처리할 수 있게 돕는 라이브러리이다. npm install body-parser 혹은 yarn add body-parser
Form에서의 데이터 전송
사용자의 정보를 입력받아 저장할 때는 Form을 이용할 수 있다. express에서는 req.body로 해당 데이터에 접근할 수 있는데, 아무런 설정을 하지 않는다면 해당 데이터는 undefined로 저장이 된다. 데이터 값을 받으려면 아래 값을 파일에 포함시키라고는 하는데, 이해가 잘 되지 않아 form에서 데이터를 전송하는 방식에 대해 찾아 봤다. Form 우선, Form은 클라이언트 측에서 정보를 받아 서버 측으로 전달할 때 사용하는 방법이다. 보통 action과 method 속성을 주로 선언하는 것을 볼 수 있는데, action은 데이터를 수신하는 대상, 즉 "데이터가 어디로 전송되는 가?"이다. 아무런 설정을 하지 않으면 Form이 위치한 URL로 데이터가 전송된다. method 는 GET 방식과 POST 방식 2가지가 있다. >GET 방식 action
TIL 17
미들웨어 (공식문서를 옮겨적으며 개념을 정리했습니다. https://expressjs.com/en/guide/writing-middleware.html) 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트(res), 그리고 next 함수(애플리케이션의 요청-응답 사이클에서)에 대한 접근 권한을 갖는다. 미들웨어 함수가 하는 일 Execute any code. Make changes to the request and the response objects. End the request-response cycle. Call the next middleware in the stack. 현재 미들웨어 함수가 req-res 사이클을 끝내지 않으면, next()를 호출해 한다. 이는 다음 미들웨어 함수로 컨트롤을 넘겨주기 위함이다. 그렇지 않으면 request가 정지된다. Express5부터 Promise를 리턴하는 미들웨어 함수는 reject나 error 발생시
[개발지식] body-parser (middleware)
1. middle ware 한 지점에서 다른 지점으로 데이터가 전달될때, 그 중간에서 데이터를 중개하는 요소 혹은 기능을 일컫는다. 2. body-parser body parser는 이러한 middleware의 한 종류이다. 주로 client가 보내오는 요청(request)을 조회/가공하기 위하여 사용하며, 이때의 middleware는 데이터로의 직접 접근보다는 조회 및 가공할 수 있는 형태로 받아오는 개념에 더 가깝다. 3. client request client request에서 data를 조회하는 방법은 body-parser를 통해 하는 것이 가장 효율적일 수 있다. ※ body-parser module import 필요! 4. 참조링크 body-parser https:
axios 로 보낸 post body가 {}로 나타나는 문제(해결)
이거 외않되 ㅠ 기존에 개발중이던 tlqkf.kr(리그오브레전드 트롤러 리뷰 사이트)를 바닐라js에서 react로 다시 만들던 중 axios로 보낸 post 요청이 제대로 작동하지 않았다. 1. 문제 발생지 찾기 부랴부랴 를 해보니 인게 아닌가! 분명 바닐라 ajax 요청을 했을때는 정상적으로 보내졌었다. 2. 변인 통제하기 코린이의 친구 postman을 켜서 서버에 요청을 보내보았다. form-data 형식으로 보낼때는 여전히 였고 x-www-form-urlencoded 로 보냈더니 제대로 body가 표시되었다. 3. 원인 찾기 그럼 axios가 x-www-form-urlencoded 형식으로 데이터를 보내지 않는 것이 문제였던 것이라고 생각했다. 그래서 axios가 x-www-form-urlencoded 형식으로 보내도록 config 페이로드에 header 설정을 적어주었다. 그러고 나니 body에 값이 들어가긴하는데 좀 이상하게 들어가서 찾아본결과
[node-js] 개념 정리
1. Express 1. express HTTP 요청에 대하여 라우팅 및 미들웨어 기능을 제공하는 웹 프레임워크(서버 구축을 위한 프레임워크) 설치 프로젝트 파일 및 폴더 구조 app.js 파일: 핵심적인 서버 역할. 주로 미들웨어 위치. bin 폴더: 서버의 로직을 작성하는 곳 www 파일: 서버를 실행하는 스크립트 public 폴더: 외부(클라이언트)에서 접근 가능한 파일(이미지, 자바스크립트, CSS 파일)들을 모아둔 곳 routes 폴더: 주소별 라우터들을 모아둔 곳 views 폴더: 템플릿 파일(화면 부분)을 모아둔 곳 실행 >하지만 이런 경우 코드를 수정할때마다 서버를 내렸다 올렸다를 반복해야 되는데, 번거로운 과정을 생략할 수 있는 좋은 패키지가 하나 있다! 바로 nodemon이다. nodemon nodemon을 설치한 후 실행하면 소스코드가 바뀔때마다 자동으로 서버가 재시작되어
Java 개발자가 Node.js 정복하기 #2
서론 date-lightgrey) 어제에 이어서 강좌를 인프런에서 찾아서 보았다. 처음에는 를 이용한 챗봇 강좌를 보았는데 를 중점으로 다룬다는 느낌보다는 구글의 라는 툴을 다루는 느낌이 많이 나서 기본기를 가르쳐주는 같은 강사님의 강좌로 옮겼다. 강좌 링크 그래서 오늘은 디렉토리 구조도 client랑 server로 나눠보고 Branch를 따서 merge 까지 해보는 작업을 진행했다. 따라서 1일 1커밋이 아직까지는 행해지고 있었다. 딱 눈 감고 한 달은
Express와 React 연동하기(React에서 Express로 데이터 보내기)
React와 Express를 연결했으니 이제 React에서 호텔이름을 검색하면 서버로 해당 호텔이름을 보내는 기능을 구현해보도록 하겠습니다. 서버에서 프론트에서 검색한 이름을 받아 해당하는 리뷰를 프론트에 보내줘야 하니깐요! 그러려면 React에서 Express로 데이터를 보내는 방법을 알아야겠죵? 일단, 프론트(React)에서 호텔 검색부분부터 만들어 봅시다! 🏤 호텔 검색 기능 구현 React부분 검색 기능을 구현하려고 생각해봤습니다. 근데 보통 호텔을 검색하려면 지역을 먼저 검색하지 않나요? 근데 제가 크롤링한 데이터에는 지역별로 구분하지 않았더군요... 띠로링~ 나중에 MySQL로 DB를 생성할 건데 생성한 query에는 지역별로 구분하지 않았어요... 이것이 기획단계의 중요성 ㅜㅜ 뭐 호텔스 컴바인 클론 코딩이 아니기 때문에.. 이는 그냥 select태그를 사용하여 지역별로 호텔을 선택할 수 있도록 하기로 결정했습니다. 
<Express.js> 여러 Middleware 소개 및 적용
오늘은 총 4개의 middleware를 알아보겠습니다. Morgan Morgan이란? 무슨 일이 어디서 일어났는지 로그를 제공하는 middleware라고 정의하겠습니다. Morgan 설치 및 사용 %npm install morgan을 터미널에 입력합니다. 사용 방법은 아래와 같습니다. morgan은 logging option을 받는데요. 저희가 사용할 dev tiny, common, combined등과 같은 여러 option이 있습니다. dev 옵션은 Method, URL, status code를 제공합니다. 위와 같이 middleware에 morgan을 추가하면 사용자가 접속할때마다 로그를 띄워줍니다. Helmet Helmet이란? express에 보안을 더해주는 middleware입니다. Helmet 설치 및 사용 %npm install helmet을 터미널에 입력합니다. 사용 방법은 아래와 같습니다. cookie-