윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 79강 - GET POST PUT DELETE 요청과 응답 > javascript

javascript

자바스크립트 강의 리스트

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 79강 - GET POST PUT DELETE 요청과 응답

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
15444120764015.jpg

 안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 79 강 되겠고 0

이번 강의에서는 z 이외에 메소드에 대해서 살펴보도록 하겠습니다
일단 우리가 지난번에 에이젝스 라는 메소드를 사용을 해보았는데요
이맥스 드에 매개 변수에 넣는 객체에는 우리가 매 스터드 라는 속성을
넣을 수 있습니다
이 메서드 라는 녀석은 기본적으로 게시 들어가게 되구요
내부 에다가 포스트 라던지 제시 라던지 푸시 라던지 등의 문자를 입력을
하게 됩니다
디폴트로 대시 들어가기 때문에 우리가 갠 요청을 하게 된거구요
이녀석을 포스트 라던지 푸시 라던지 딜리트 로 바꾸게 되면 서버에 다른
형태의 요청을 걸 수 있습니다
무슨말이 ng 약간 애매 하니까 코드를 입력하면 서 살펴보도록 하겠습니다
일단 지난번에 입력했던 요 데이터 갱 녀석은 이제 더 이상 필요가 없기
때문에
지우도록 하겠구요 일반적으로 현대에는 제일 순으로 데이터를 주고 받는
것이 일반적이기 때문에 제이슨을 사용한 데이터 주고받기 만 살펴보도록
하겠습니다
쓰다 점 뭐 를 사용하게되면 이어 리라는 메서드는
개시 라던지 포스트 라던지 푸시 라던지 딜리트 라던지 모든 요청을
처리하는 녀석 이기 때문에 이 녀석을 사용해서 테스트를 해보도록
하겠습니다
데이터 라는 녀석에게 요걸 요청을 하고
파 살피 함수를 사용해서 딜리 퀘스트와 리스폰스 를 받은 뒤 미 스 콘
그리고 이 녀석이 가지고 있는
dps 에 메서드와 아
블리 캐스트에 url 을 출력해 보도록 하겠습니다
뭐 ur 이란 당연히 데이터가 나오겠지만 추가적으로 설명할 것이 있어서
이렇게 작성해 보도록 하겠는데요
리스폰스 점 샌드 로 고 그냥 헬로 라는 간단한 문제를 응답을 하고
코드를 저장 하도록 하겠습니다
이어서 클라이언트 쪽에서 요 왼쪽이 클라이언트 쪽이고 오른쪽이 서버쪽
이게 점
클라이언트 쪽에서 저 데이터 에게 갯수로 한번 요청을 걸어 보도록
하겠습니다
개수를 요청을 걸게 하고 코드를 실행해 보도록 하겠는데요 코드를 실행해
보시면 화면에 명령 프롬프트에 갯수로 데이터에 요청이 왔다 라고 나오는
것을 볼 수 있고 만약에 옥을 포스트로 변경을 하셨다면 실행했을 때
포스트로 데이터가 요청이 오는 모습 그리고 푸시 라고 요청을 하게 되면
푸 스스로 데이터가 오는 모습
딜리트 라고 요청을 하게 되면
딜리트 로 데이터 라는 글자가 오는 모습을 볼 수 있습니다
어쨌거나 개발자들이 이렇게 url 이라는 걸로 내가 어떠한 데이터에
어떠한 처리를 하게 따라고 메서드로 지정을 하게 되는 것이 일반화 되니까
개발자들이 토론을 통해서 이 두가지를 활용을 해서 데이터를 조금 쉽게
처리할 수 있게 상호 귀 약을 만들면 어떨까라는 생각을 하게 되는데요
요 상옥 유학을 우리 갈래 스토리 라고 부르게 됩니다
그다음 간단한 형태를 보도록 하겠는데요 예술 사용을 해서
어떠한 데이터에 요청을 하게 되면
모든 데이터를 주세요 라는 뜻이 되구요
포스트 를 사용해서 데이터를 요청을 하게 되면
데이터를 추가할 깨워라 는 요청이 되고 포스 를 사용해서
데이터의 요청을 하게 되면 데이터를 모두 수정할 깨워라 는 뜻이 되구요
딜리 t 를 사용해서 데이터의 요청을 하게 되면 데이터를 모두 제거
할게요 라는 요청이 됩니다
근데 이러한 데이터는 일반적으로 지금 화면에 오른쪽으로 보이시는 것처럼
배열 안에 요렇게 객체로 담겨있는 경우가 많은데요
뭐 데이터베이스를 해보신 분이라면 이렇게 테이블 형태라는 것과 비슷하다는
걸 알 수 있죠
그래서 몇 번째 데이터의 요청을 권 야 에 따라서도 갯수로 데이터의
0번째 요청을 건 다 하면 0번째 데이터를 주세요
그리고 포스트 를 사용해서 데이터에 0번째 요청을 거는 건 존재하지
않습니다
그리고 쿠 쉘 사용을 해서 데이터에 0번째 요청을 하게 되면 0번째
데이터를
수정할 깨워라 는 의미 그리고 딜리트 를 사용해서
데이터에 0번째 요청을 하게 되면 0번째 데이터를 삭제 할게요 라는
요청을 사용해서 클라이언트와 서버가 뭐 추가적인 의전 전달 없이 그냥
곧바로 알아 들으면 얼마나 좋을까 라고 생각을 하고
요 사상을 사용해서 많은 개발자들이 개발을 하게 됩니다
다만 이때 모든 데이터를 제거해 달라는 요청이 나 모든 데이터를 수정해
달라는 요청은 약간 서버 쪽에 이상한 변동을 줄 수 있죠 그래서
일반적으로 이렇게 5개의 요청을 사용할 하게 되는 경우가 많은데요
이 다섯 개를 사용해서 요 우유 홍차 커피 등을 관리할 수 있는 간단한
서버를 구현해 보도록 하겠습니다
참고적으로 1st 폴이라는 개념만 듣고 이제 뭐 밥처럼 다 이루어진다
라고 생각하시는 분도 있던데
개발 세상엔 마법이란 게 전혀 없죠 모두 직접 구현을 해야 되는 겁니다
물론 딤 넌 잉 처럼 뭐가 일어났는지 모르겠지만 다 처리되는 경우도
있지만요
어쨌거나 앱 점
재설 사용해서
요 데이터 로 데이터를 드링크 라는 이름으로 사용해 볼게요
드링크 라는 데이터에 이렇게 요청을 하게 되면
데이터를 전부 다 주면 되겠죠
앨리스의 폰 3 점 샌디로 아이템들을 모두 전달하도록 하겠습니다
여성
포스트로 전달이 오게 되면 뭔지 산 모르겠지만 일단 데이터를 추가
해야겠죠
그래서 아 이 템 즈 에다가
푸 c 를 사용해서 데이터를 추가해 보도록 하겠습니다
이때 추가하는 데이터는 네임 이라는 걸로 테스트와 프라이스 를 사용하셔서
테스트라고 삽입을 하도록 하겠고요 응답은 잘 처리가 되었다 나 아니면
어떠한 데이터가 추가 됐는지를 돌려주는 게 일반적입니다
그래서 아 이 템 즈 에 아이템 즉 점 렝스 - 원을 해서 가장 마지막에
추가된 데이터를 l 내주도록 하겠습니다
이렇게 되면 위쪽에 두가지가 구현이 됐죠
이어 섬 아래쪽에 세 개를 구해 보도록 하겠는데요
앱 점 게 3
드링크 에 0번째 1번째 2번째 이렇게 모두 만드는 건 불가능 하겠죠
그래서 이렇게 땡 땡 을 사용해서 요 뒤에다가
id 라는 등으로 입력을 하게 되면
익스프레스 라는 프레임워크의 개발자들주 즐겁게 동
리퀘스트 점 파람 을 사용해서
id 를 추출할 수 있게 해줬습니다 이 id 값은 문자열로 들어오게
되므로 넘버를 사용을 해서 변환을 해 주도록 하겠구요 컨 트 를 사용해서
id 라는 것에 없도록 하겠습니다
이어서 리스폰스 점 샌들 사용해서 아이템 즈 id 번째 를 전달하도록
하겠는데요 오류가 발생하면 자동적으로 오류 를 리턴하게 됩니다
참고적으로 오려 가려는 처리는 책의 좀 길게 나오기 때문에 책을 참고해
주시면 되겠구요
강의에서는 핵심적인 것만 설명하도록 하겠습니다
어쨌거나 이어서 부스를 만들어 주면 되겠는데요 독사 하도록 할게요
흙과 틀니 틀을 만들면 되게 꽁
소스를 만들어 주면 이렇게 되겠고
딜리트 를 만들어 주게 되면 이렇게 되겠습니다
참고적으로 요 딜리트 같은 경우 부터 구현하도록 하겠는데요
아이템 제 아이디 번째 제거 하면 되겠죠
아이템 저의 스플 라이스 메서드를 사용해서
id 번째 잇는거 한계를 제거해 주도록 하겠습니다
그리고 제거가 정상적으로 완료가 되면 그냥 써 섹스 라는 문자열을 리턴
하도록 할게요
이제 푸스올 구현하도록 할텐데요 아이템 지에
id 번째를 꺼낸 다음에 요녀석의 네임을
테스트 라고 투정을 하고 id 번째 네임을 프라이스 로 수정을 해서
테스트 라고 입력을 해 보도록 하겠습니다
테스트 말고 숫자로 1000이라고 넣도록 하겠는데요 지금 코드를 보시면
아시겠지만 굉장히 간단해요 그냥 드링크 의 개념 초청을 걸면 모든
데이터를 주고
드링크 에 포스트 요청을 걸면 테스트 테스트 라는 데이터를 추가를 하고
마지막 데이터를 리턴을 하고 그리고
드링크 의 id 번째를 요청을 하게 되면 id 번째 데이터를 주게 되고
링크의 id 번째 데이터를 투 타게 되면 수정을 하게 되고 그리고
ddt 에 id 번째를 요청을 하게 되면 id 번째 있는 데이터를 제거를
하게 됩니다
어쨌거나 서버는 요러한 식으로 어떠한 규약에 따라 서정의 된 녀석을 계속
확장을 하시면서 기능을 하나하나 이렇게 추가를 해주시면 됩니다
그러면 한번 요청을 걸어 보도록 할게요
버튼을 여러개 만들도록 하겠구요 으
첫번째 버튼은 데이터 가져오기로
갤러리 라는 이름으로 만들고
두번째 있는 녀석은 포스트 얼이 라는 이름 데이터 추가하기
그리고 세번째 있는 녀석은
켓 원 이라는 녀석을 지정하도록 했 고용 그 다음에 푸드 완
그리고 마지막으로 딜리트 원을 지정하도록 하겠습니다
각각의 내용은 개 덜은 데이터 모두 가족이 포스터 른 데이터 추가하기
제도 않은 데이터 1 가져오기
푸드 완 같은 경우에는 데이터나 수정하기
그리고 딜리트 왕 같은 경우에는 데이터나 제거 하게 되겠습니다
이어서 이 녀석들에 대한 모든 이벤트 리스너를 연결을 해 주도록 하겠구요
제 덜 점 클릭 을 사용해서 성전을 상콤하게 입력해 주도록 하겠습니다
그리고 요 녀석을 상콤하게 복사해서 나 둘 셋 넷 다섯 개를 만지면
되겠구요
여성
포털을 해주 겠고 뒤쪽에 있는 녀석들은 전부 5
원으로 수정을 하도록 하겠습니다
또한 저만 그리고 개도 1
푸드 1 그리고 딜리트 원으로 선언을 해 줄게요
각각의 버튼을 클릭했을 때는 에이젝스 를 걸도록 하겠구요 에이젝스 를
사용해서
urn 재 덜 같은 경우에는 드링크 에다가 걸어주시면 되겠고
뭐 메서드는 입력을 안 해도 되겠지만 통일성을 위해서 계시라고 있는거라고
이녀석이 성공을 했을 때
앞쪽에 데이터만 넣어주면 되겠죠 데이터를 콘솔창에 출력해 보도록
하겠습니다
그리고 이어서 이 녀석을 상콤하게 복사를 해서 이번에는 포스터 리 줘
포스터를 해보도록 하겠구요 메서드를 포스트로 요청을 하고 응답 된
데이터를
뭐 콘솔에 다고 출력을 해 보도록 하겠 고요 참고적으로 좀 콘솔에
스펠링이 틀려 점
이어 성 캐드원 도 상콤하게 복사를 해서 일단 뭐 무조건 0번째 를 한번
가져보도록 할게요 명 번째를
개수를 요청을 해서 가져오면 되겠고 그리고
푸드와 는 메소드가 푸시면 되겠죠
무조건 0 번째 과를 소장 해달라고 요청을 하겠고 딜리트 원은 무조건
0번째 걸을 제거 해 보도록 하겠습니다
물론 텍스트박스 라던지 뭐 선택 박스 라던 걸 사용을 하면 이걸 조금 더
다양화 시킬 수 있겠죠 뭐 그건 다음 강의에 3 보도록 하구요
요러한 형태로 클라이언트와 서버가 어떠한 규양 많이 있게 되면 그 규약에
따라서 서로서로 요청을 주고받게 클라이언트와 서버를 구성할 수 있게
됩니다
이 귀 약을 만드는 것 자체가 굉장히 중요하기 때문에
6위 약을 잘 생각을 하고 기억을 해 주시면 되겠습니다
어쨌거나 엄청난 오탈자를 냈는데 앞쪽에 다 샤프 줘야겠죠 id 선택자
로요
그렇죠
저장을 하고 노드 js 서버를 껐다가 모든
ma 점 js 로 실행을 해보도록 하겠구요 이어서 서버를 실행 해 보도록
클라이언트를 실행 해 보도록 하겠습니다
클라이언트를 실행 하게 되면 데이터 모두 가족이 추가하기 1 가족의 1
수정하기 1 제거하기가 나올텐데요
모두 가져오기 버튼을 누르시면 3개를 가져오는 모습을 볼 수 있습니다
데이터 추가하기 를 누르면 테스트 테스트 1 데이터 고추가 되고요
3번 정도 눌러 볼게요 3번정도 데이터를 추가한 다음에 다시 데이터
가져오기를 하면 이제 데이터의 개수가 6개가 되서
우유 홍차 커피 의 테스트 테스트 가 추가된 모습을 볼 수 있죠
이어서 데이터 1 가져오기 를 누르게 되면 인터널 서버에 러가 상콤하게
떴는데
인턴을 서버 에러 가 떴을 때는 명령 프롬프트 를 확인해 보시면 됩니다
리스폰스 이제 나티 파인드 라고 되어있는데
못할 짤을 냈나 보네요 매개변수가 리스폰스 가 아니라 리폰 쓰라고
되어있는데 요 녀석들을 전부 다시 한 번 수정을 하고 저장을 한 다음에
명령 프롬프트 껐다가 클리어 한 번 먹이고 다시 한번 실행해 보도록
하겠습니다
실행을 한 다음에 다시 상콤하게 그리고 상태로 돌아와 주시고 데이터
모두가 저 뿅뿅뿅 3번 모두 가족이 6개 확인할 수 있고 데이터 1
가족이 하면 우유와 2000을 확인할 수 있죠
그리고 데이터 1 수정하기 를 누르면 수정된 데이터가 나올 텐데요
모두 가져오기 를 통해서 다시 확인해보시면 0번째 데이터가 테스트 천으로
바뀐 걸 볼 수 있습니다
이어서 데이터 1 제거하지 를 누르시면 석세스 라는 문자를 받게 되구요
모두 가족일 봤을 때 5개가 되어 있고 첫 번째 녀석이 제거된 것을
확인할 수 있습니다
데이터나 제거하게 몇 번 누르고 모두 가져오기를 다시 한 번 눌러 보면
앞쪽에 있는 데이터들이 모두 제거 되는 모습을 확인할 수 있습니다
어쨌거나 기본적인 에이젝스 통신에 대해서 뭐 대부분 살펴보았습니다
재수를 요청하기 포스트로 요청하기
그리고 푸스 를 요청하기 딜리트 로 요청하기 위해서 데이터를 관리하는
방법에 대해서 배웠는데요
우리가 지금 네임 테스트 fic 테스트
뭐 테스트 천 밖에 문 넘기는 상황인데요
다음 강의에서는 이러한 데이터를 클라이언트에서 어떻게 넘길 수 있는지
살펴보도록 하겠습니다 단위가 조금 빠르긴 한데 책에 있는 내용과 함께
살펴 보시면 쉽게 이해하실 수 있을 거라고 생각을 합니다
그럼 다음 강의 에서 뵙도록 하겠습니다 감사합니다

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu