PostMan
웹 개발에서 사용하는 대표적인 클라이언트는 브라우저입니다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용합니다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보냅니다. 테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 합니다.
get 요청하기
HTTP로 소통하기 위해서는 API 서버의 endpoint가 URL로 주어져야 합니다.
URL
http://3.36.72.17:3000/
메시지 조회
Request
1
GET /kimcoding/messages
Response[ { "id": 1, "username": "김코딩", "text": "안녕하세요", "roomname": "로비", "date": "2021-04-02 12:00:00" } // ...여러 개의 메시지 ]
1.새로운 탭 오픈
요청/응답을 여러 개 확인할 수 있습니다.
2.HTTP 메서드 선택
GET, POST, DELETE 등과 같은 메서드 중 하나를 선택합니다.
API 문서 상 GET 메서드를 사용하므로, GET으로 선택합니다.
3.URL 입력 창
URL과 Endpoint를 입력합니다.
API 문서에 따르면, http://3.36.72.17:3000/kimcoding/messages 와 같이 입력하면 됩니다.
4.HTTP 요청 버튼
요청을 보냅니다.
5.HTTP 요청시 설정할 수 있는 각종 옵션
추가적인 파라미터나, 요청 본문(body)을 추가할 수 있습니다.
API 문서에서 확인할 수 있듯이, roomname 이라는 파라미터를 사용할 수 있습니다. 필수는 아니지만, 파라미터를 사용하려면 Params 탭의 KEY, VALUE 에 각각 roomname 과 필요한 값을 입력합니다.
6.HTTP 응답 화면
요청을 보낸 후 응답을 확인하세요.
API
한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법.
예를 들어 식당 메뉴판을 들수 있다.
메뉴판은 식당 주인과 손님이 소통할 수 있는 역할을 해준다.
웹툰으로 보면 웹툰서버와 손님이 웹툰을 주고받기 위한 방법이라 생각하면 된다.
AJAX
서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술이다.
먼저 서버를 알아보자
서버는 데이터를 요구하면 데이터를 보내주는 프로그램이라 할 수 있다.
그럴려면
1.원하는 데이터 url을 요구
2. 그 url을 get요청해야한다.
요청방법으로는 검색창에 직접 url입력, 버튼을 통한 url이동 마지막으로 AJAX가 있다.
AJAX는 새로고침 없이 새로운 데이터를 받아올 수 있다. 그런 부드러운 웹사이트를 만들 수 있다.
SSR
서버에서 랜더링을 한다. 의미가 있다.
랜더링은 무엇일까
html파일을 받아오고 이미지를 브라워저가 그리는 것 이라할 수있는데 여기서 의미하는 것은
->html파일을 누가 내용을 포함한 상태에서 보내주느냐 이다.
과정
1. html파일을 보낸다.
2. 브라워저가 내용을 바로 확인할 수 있다. 브라워저가 자바스크립트를 다운한다.
3. 그 이후 상호작용이 가능하다.
CSR
브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지(Single Page)를 클라이언트에 보냅니다. 이때 서버는 웹 페이지와 함께 JavaScript 파일을 보냅니다. 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저의 웹 페이지를 완전히 렌더링 된 페이지로 바꿉니다. 웹 페이지에 필요한 내용이 데이터베이스에 저장된 데이터인 경우에는 어떻게 해야 할까요? 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링을 해야 합니다.
과정
1. html을 보내나 랜더 되어있지 않다.
2. 브라워저에서 js파일을 다운로드하면서 랜더가 된다.
3. 그 이후 상호작용한다.
ssr과 다른 점은 마지막에 단계에서 확인이 가능하다는 것이다. SSR이 서버 측에서 페이지를 렌더링한다면, CSR은 클라이언트에서 페이지를 렌더링합니다.
