윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 80강 - GET POST PUT DELETE 요청과 응답 데이터 주고 받기 > javascript

 

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입문 3단 80 강

되겠구요

이번 강의에서는 갠 유청 포스트 요청 풍 요청 딜리트 요청에서 데이터를

주고 받는 방법에 대해서 살펴보도록 하겠습니다

우리가 일상생활에서 우체국 같은 곳에서 우리가 가진 무언가를 다른

사람에게 전달을 할 때는 두 가지 방법을 사용할 수 있습니다

가장 대표적인 첫번째 방법은 편지 라고 할수 있겠구요

두번째 방법은 택배 라고 할 수 있습니다 이때 편지 라는 것은 굉장히

가볍고 정

그리고 반대로 택배 라는 것은

무겁다 라는 특징을 가지고 있습니다

그래서 편지는 굉장히 쉽게 처리를 할 수 있는 방법 1

택배는 뭐 택배 기사 아저씨도 오셔야 되고 물건이 어디 중앙에 갔다가

등등 하는 다양한 과정을 거치게 됩니다

따라서 약간 복잡하게 처리가 된다고 할 수 있겠습니다

어쨌건 컴퓨터에서 웹 요청을 할 때도 이와 같은 일이 발생하게 되는데요

우리가 갠 요청을 할 때는 현지 처럼 굉장히 가볍고 쉽게 데이터를 전달할

수 있습니다

반면 이 이외에 포스트 풋 딜리트 같은 경우에는 약간 어려운 방법으로

데이터를 처리하게 됩니다

개념 첨 같은 경우에는 그냥 주소 줄 뒤에다가 물음표를 입력을 하고

a 골 10 또는 비골 10과 같은 글자를 입력을 해서 데이터를 전달하게

되는 반면 포스 tf 딜리트 같은 요청은

바디 라는 별도의 요소를 사용해서 여기에다가 데이터를 담고 전달을 하게

됩니다

이러한 편지와 택배는 우리가 일반적으로 http 요청 에서는 무조건

클라이언트 쪽에서 서버 쪽으로만 보낼 수 있는 거라고 생각 그려주시면

되겠는데요

그럼 일단 개인 요청 을 사용해서 클라이언트에서 서버로 데이터를 보내는

방법부터 알아보도록 하겠습니다

일단 부 굉장히 복잡해 여 그냥 처리를 하게 되면 하지만 우리가 제이쿼리

를 사용하게되면 에이젝스 라는 메소드를 사용할 때

데이터 라는 속성을 주기만 하면 알아서 데이터가 요청 가게 됩니다

일단 큰 의미는 없지만 클라이언트 쪽에서 서버로 테스트 삼아 성 a 에

헬로 라는 글자와 비에

헬로 추 라는 글자를 보내도록 하겠습니다

아래만 숫자가 붙어 있으면 이상하니까 헬로우 원이라고 보내도록 할게요

이렇게 개인 요청을 할 때 단순히 데이터 라는 속성만 집어넣으면 된다

라고 기억을 해 주시면 좋겠습니다

이렇게 데이터가 전달이 되면 이전에 언급했던 것처럼 주소 창으로 데이터가

전달되게 되는데요 이 주소창을 일반적으로

요청 매개 변수 또는 쿼리 라고 부르게 됩니다

뭐 쿼리가 영어 이기 때문에 우리가 코드를 작성할 때는

리퀘스트 에 쿼리 라는 객체를 사용해서 이 데이터를 받을 수 있게 됩니다

콘솔 점 로그 를 사용해서 이 녀석을 출력해 보도록 할게요 코드를 실행해

주신 다음에 웹 페이지로 들어가 주시면 되겠구요

이어서 우리가 추가적인 내용을 확인할 수 있게 개발자 도구 해서 네트워크

탭을 보도록 하겠습니다

이 상태에서 방금 갠 조청을 거는 데이터 모두 가져오기 버튼을 누르게

되면 서버 쪽에는 a 에 헬로 밑줄 원과 b 의 헬로 밑줄 2가 들어오는

모습을 볼 수 있고

클라이언트 쪽의 개발자 도구를 보게 되면 어떤 요청을 걸었는지 드링크

물음표에 a 콜 에일 헬로 1b 콜 헬로 트라고 나오는 모습을 볼 수

있습니다

헤더가 요러한 식으로 전달된다고 기억을 해 주시면 좋겠습니다

리퀘스트 url 을 통해서 데이터가 전달되는 모습을 볼 수 있죠

추가적으로 그냥 간단한 팁 이기는 한데 이러한 형태로 a get 요청을

걸 때는 내부적으로 xmlhttp 리퀘스트 라는 객체를 활용을 하게 되고

이 xmlhttp 리퀘스트 라는 객체를 부르기가 너무 힘들기 때문에

일반적으로 간단하게 xhr 이라고 부르게 됩니다

따라서 요청이 굉장히 많을 때 u 위에 있는 xhr 이라는 버튼을 눌러서

필터링을 하게 되면 에이젝스 요청만 따로 살펴볼 수 있기 때문에 지역을

해주시면 좋겠습니다

어쨌거나 갠 요청은 이러한 형태로 데이터를 처리할 수 있는데 이 이외에

다른 요청 덜 포스트 나 쿠시나 딜리트 같은 경우에는 약간 다른 방식을

사용하게 됩니다

물론 내부적으로 다른 거지 제이쿼리 란 녀석이 굉장히 0 합계 도 사용할

때는 큰 차이를 보이지 않게 만들어줍니다

그냥 데이터 라는 속성을 입력을 하기만 하면 되는데요

포스터 얼이 라는 녀석의 m 메서드를 포스트의 지정을 하고 데이터 속성을

줘서

뭐 헬로우 라는 아까 마찬가지로 일단 a 에다가

헬로 웨이 그리고 뒤에다가

헬로우 b 라는 글자를 넣어서 전달을 해 보도록 하겠습니다

아깐 헬로우 이라고 이었네요

어쨌거나 요러한 식으로 데이터를 저장하고 서버를 한번 종료한 다음에 다시

실행을 하고

클라이언트도 다시 실행을 한 다음에 데이터 추가하기 버튼을 눌러 보도록

하겠습니다

일단 데이터 추가하기 버튼을 눌렀을 때 요청이 가는 모습을 볼 수

있는데요

아까와 마찬가지로 xhr 요청 한마디로 ajax 요청이 같다는 겁니다

그런데 주소창에 별도의 데이터가 적혀있지 않는 모습을 볼 수 있어요

그럼 이제 데이터가 대체 어떠한 경로로 서버로 들어 한 들어갔는지 가

중요한 요소가 되겠죠

드링크 라는 녀석을 클릭해서 내부를 보시게 되면 내부의 솜 데이터 라는

녀석으로 a 와 b 가 전달되는 모습을 볼 수 있습니다

유 아래쪽에 있는 폼 데이터 가 바로 데이터 바디 라고 생각해주시면

되겠는데요 이걸 서버에서 받으려면 원래 굉장히 복잡한 처리가 필요하게

됩니다

모던 웹을 위한 노드 js 프로그래밍 이라는 책을 보시게 되면 이걸

구현하는 방법에 대해서 나오게 되는데요

굉장히 쓸데 없고 복잡한 코드 이기 때문에 별도의 라이브러리를 사용해서

처리하도록 하겠습니다

일단 서버를 종료 해주시면 되게 고용 mpm 인스톨 바디 파 써 라고

입력을 해 주셔서 바디 파 써 라는 라이브러리를 설치해주시면 되겠습니다

입력을 하면 잠시 시간이 지난 뒤에 모듈이 설치되기 시작 할 거고요

모듈이 설치가 되었다면 바디 파서 라는 이름을 그대로 활용을 해서

자바스크립트 코드에서 사용할 수 있게 됩니다

위쪽에 콘 스 트 다 d 파 성 2 콜 리 콰이 0

바디 파서 라고 입력을 해서 다 d 파서를 읽어 드리도록 하겠습니다

저랑 바디 파서 모듈을 일반적으로 우리가 익스프레스의 미들웨어 모두 리

라고 부르게 되는데요 이 책에서 다루기 인 약간 넓은 범위 있기 때문에

우리는 문서를 보고 사용하는 방법만 다루도록 하겠습니다

구글에서 익스프레스 바디 파수 라고 입력을 해주시면 가장 위쪽의 바디 파

3의 공식 사이트가 나오게 되는데요

지퍼 페이지로 페이지가 구성되어 있습니다

요기에 들어가셔서 아래쪽을 보시게 되면 코드가 나오게 되는데요

그냥 바디 파서를 읽어 들인 다음에 무슨 말인지도 모르겠고 익스텐디드 가

뭔지도 모르겠지만

요녀석을 사용하면 된다고 나와 있습니다

두 녀석을 복사를 해서 요 위쪽에 다가 우리도 상콤하게 붙여 넣어 주도록

하겠습니다

이렇게 입력을 하게 되면 요청과 관련된 이벤트 핸들러 내부 해서

리퀘스트 점 바지 라는 속성을 사용할 수 있게 됩니다

그럼 한번 요렇게 입력을 하고 코드를 저장을 하고 실행해서 정말로 이

데이터를 읽어들일 수 있는지 확인해보도록 하겠습니다

코드를 자장을 하고

노드 메인으로 메인 파일을 실행해 주시면 되겠구요

녀성 이전에 생성을 했던 요 웹 페이지를 새로고침 해서 뛰어 주신 다음에

데이터 추가하기 버튼을 누르시면 서버 쪽에서 지금 데이터가 출력되는

모습을 확인할 수 있습니다

자 그러면 지금까지 의 과정을 통해서 갠 요청 편지를 보내는 방법과

포스트 프 dto 창에 택배로 데이터를 전달하는 방법 모두 살펴

보았는데요

이를 사용을 하게 되면 서버와 클라이언트 끼리 데이터 통신을 해서 우리가

원하는 데이터를 추가 학원 할 수 있습니다

간단하게 요 html 페이지 아래쪽에 다가

임프 태그 두 개를 만들고

요녀석의 첫 번째 녀석은 아이디를

네임 이라고 주고 두 번째 녀석은 프라이스 라고 준 뒤에

요 안에다가 값을 입력할 경우 이 값의 데이터를 추가를 하는 모습을

보도록 하겠습니다

일단 정말 간단하게 구성 하도록 할게요 아래쪽에 다가

이름하고 줄바꿈 하고

통과 이런 코드는

좀 안 이쁘지만

요러한 형태로 놓도록 하겠습니다 이렇게 html 페이지 아래쪽에 다가

임프 태그를 작성을 하게 되면 코드를 실행 하였을때

이렇게 이름과 가지게 나오게 되겠죠 위쪽에 다가

hr 1 줄게요 hr 안아주면

이렇게 이름과 가격을 입력할 수 있는 란이 나오게 됩니다

요란 에다가 무언가를 입력을 해서 이거 를 서버로 전달을 해서 데이터를

추가 하게 만들어 보겠는데 요 엄청나게 간단 아점 maid 잉여 속과

무슨 소리야 아이디가 레이미 녀석과 암 아이디가 프라이스 이 녀석을 전달

하기만 하면 됩니다

우리가 이전에 포스터를 할 때

네임과 프라이스 를 주고

여기다가

#

네임 짬

va 애 를 사용해서 인류를 추천해주시면 되겠구요

마찬가지로 프라이스 동

프라이스 를 사용해서 데이터를 추측해서 전달 해 주시기만 하면 되겠습니다

이렇게 입력하면 서버 쪽으로 네임과 프라이스 를 가진 객체가 전달이

되겠죠

그 다음엔 요 데이터를 그대로 입력을 해서

리퀘스트 점 바디 점 네임과

리퀘스트 점 바디 점 프라이스 를 추가해 보도록 하겠습니다

참고적으로 지금 강의에서 알아보는 예제는 약간 어렵게 느껴질 수 있는

부분만 굉장히 축소해서 알아보는 것이구요

책을 보시게 되면 예제가 훨씬 더 광범위하고 많기 때문에 그 부분을

조금더 참고를 해주시면 좋겠습니다

어쨌거나 이렇게 입력을 하기만 하면

데이터가 네임과 프라이스가 전달 되어서 저장이 되겠죠

추가적으로 데이터가 정말 그렇게 저장이 되는지 아이템 즈를 출력을 해서

확인해 보도록 하겠습니다

코드를 요렇게 그리고 이렇게 입력을 하신 다음에 두 가지를 모두 저장을

해 주시고 서버를 껐다가 다시 실행해 주시고 클라이언트도 상콤하게 실행을

해 주셔서 새로고침을 한 뒤에 5 이름을

수박 쥬스 3000원 이라고 추가를 1

입력을 하고 데이터 추가 길 누르게 되면 데이터가 들어가게 점 드링크

라는 곳을 보시게 되면 아래쪽에서

솜 데이터로 네임 수박 쥬스 프라이스 3002 전달되는 모습을 볼 수

있구요

서버 쪽에서 일을 받은 다음에 이를 아이템 g 라는 배열에 추가했고

출력하기 때문에 아래쪽에 수박 주스 3000원 이라는 글자가 출력되는

모습을 볼 수 있습니다

요러한 형태로 서버와 클라이언트가 데이터를 주고받을 수 있다라고 기억을

해 주시면 좋겠습니다 어쨌거나 지금까지 클라이언트 단에서 제이쿼리 를

사용해서 에이젝스 요청을 보내는 방법 그리고 서버 쪽에서 익스프레스와

바디 파서 모듈을 활용을 해서 그러한 요청을 받아 처리하는 방법에 대해서

알아보았습니다 혼자 공부할 때 약간 힘들 수 있는 부분에 대해서만

알아보았는데요

요 정도 까지만 진행을 하면 이후의 추가적인 내용들은 스스로 코드를

보시면서 그러니까 책을 보면서 이해 하실 수 있을 거라고 생각을 합니다

따라서 책의 내용은 여기에서 끝내도록 하겠고요 참고적으로 노드 js

부분을 너무 빨리 끝내는 감이 있는데요

빨리 끝내는 이유는 저번에 언급했던 것처럼 별도의 노드 js 강의를

무료로 제공하고 있기 때문에 그 강의 쪽을 보시면 그쪽에서 이해가 훨씬

더 잘 될 것이라고 생각을 하기 때문입니다

그리고 이 강의가 끝난 이후에 모던 웹을 위한 노드 js 강의 를 보신

이후에 추가적으로 볼 수 있는 실천적인 강의 예제를 위해서 리엑터 책을

한번 번역을 해 왔고 한 다음 달이나 다음달 11월 또는 12월 중에

출간이 될 예정인데요 그 강의도 별도의 동영상 강의를 제공할 것이기

때문에 그 내용을 이어서 보시게 되면 이후에 리 액트 활용까지 에서

스스로 웹 애플리케이션을 만드는 내용까지 다룰 수 있을 거라고 생각합니다

어 채권은 우리 강의는 여기까지 되겠구요 또 다른 강의에서 뵙도록

하겠습니다 감사합니다