내가 왜 HTTP에 관심을 가져야 합니까?

HTTP는 URL 첫머리의 네 글자 맞습니까?이것이 바로 웹을 구축하기 위해 알아야 할 모든 내용이다. 그러나 understanding binary 처럼, 웹을 구축하면 원래 이해하지 못했던 문제를 이해하는 데 도움을 줄 수 있다. 이것은 필수적인 자료가 아니지만, 더욱 전면적인 개발자가 될 수 있다.
이것은 우리 소프트웨어가 사용할 주요 통신 프로토콜이기 때문에 HTTP에 대해 알아보자!

HTTP란 무엇입니까?

HTTP는 하이퍼텍스트 전송 프로토콜을 나타냅니다.이것은 웹 페이지 (하이퍼텍스트) 를 보내고 받는 규칙 (프로토콜) 이다.HTTP라고 불리지만, JSON이나 그림 같은 하이퍼텍스트 이외의 많은 것들을 보내는 데 사용되고 있다.

HTTP는 어떻게 작동합니까?

HTTP 통신은 클라이언트와 서버 사이에서 발생합니다.클라이언트가 HTTP 요청, 서버 응답을 보냈습니다.웹 브라우저는 HTTP 클라이언트입니다.웹 페이지에 액세스하면 브라우저는 HTTP 요청을 서버에 보내고 서버는 응답을 보냅니다.이렇게 간단해.
실제로 한 페이지는 보통 여러 개의 요청으로 구성된다.일반적으로 발생하는 상황은 HTML을 요청하고 서버가 HTML로 응답하는 것이다.브라우저가 HTML을 렌더링하기 시작하고 페이지를 렌더링하는 데 필요한 다른 자원 (예를 들어 Javascript 파일, CSS 파일, 이미지) 을 추가로 요청합니다.

요청의 일부분

이것은 라드빈에 대한 원시적인 요구이다.홈 페이지의com은 다음과 같이 보입니다.

GET / HTTP/2
Host: raddevon.com
User-Agent: curl/7.54.0
Accept: */*

네가 타자를 칠 때.com에서 주소 표시줄에 들어가서return을 누르면 브라우저가 이 요청을 호스트에 보냅니다.다음은 부분입니다.

GET-요청 방법.그것은 서버가 요청한 목적을 알려준다.이 요청은 서버에서 데이터를 보내기를 바랍니다.MDN에는 a nice request method reference가 있습니다.

/--우리가 요구하는 자원.홈 페이지가 서버의 루트 디렉터리에 있기 때문에, 이것이 바로 우리가 여기에서 요청한 자원입니다.

HTTP/2-협정.이 특정 요청은 HTTP 버전 2를 사용하여 실행되었습니다.

다른 세 줄은 제목입니다.이 요청은 수신 서버에 대한 추가 정보를 제공합니다.

Host는 매우 뚜렷하다.대상 호스트를 식별합니다.

User-Agent는 요청을 보낸 클라이언트를 식별합니다.이것은 간단한 Unix 명령줄 HTTP 클라이언트인 cURL로 보냈습니다.브라우저를 사용하여 요청을 보내면 브라우저의 이름과 버전이 표시됩니다.

Accept는 서버 클라이언트에게 어떤 종류의 응답을 받을 수 있는지 알려줍니다.

있다other headers you can use in your requests.이것들은 바로 이 요청이 공교롭게도 사용된 것이다.서버에 추가 정보를 보내기 위해 헤더 파일을 만들 수도 있다.
제목을 제외하고 요청에 본문이 있을 수도 있습니다.폼을 제출할 때, 데이터는 보통 요청 본문의 서버로 전송됩니다.

왜 내가 HTTP를 이해해야 합니까?

HTTP의 작업 원리, 특히 각종 응답 상태 코드와 그 의미를 이해하면 응용 프로그램을 디버깅하고 오류를 정확하게 처리하는 데 도움이 된다.페이지에 사용되는 각 리소스(스크립트, 이미지, 스타일시트 등)를 이해하는 것은 개별 요청을 나타내며 어플리케이션의 성능을 향상시키는 데 도움이 됩니다.

Is this helping you? My goal is to help people transition into web development careers. 🤬🔜🤩 Sign up for a free mentoring session at Rad Devon, and I'll help you figure out your next steps.

다음은 응용 프로그램에 대한 브라우저의 요청을 보는 방법입니다.브라우저의 개발 도구는 모든 요청, 응답 상태, 심지어 요청 제목과 응답 본문을 표시합니다.다음은 RadDevon에 대한 Chrome의 요청을 보는 예입니다.Chrome 개발자 도구 네트워크 탭에서 다음을 수행합니다.

네트워크 탭으로 처음 전환하면 비어 있을 수 있습니다.새로 고침만 하면 페이지가 다시 불러올 때 모든 요청을 포착합니다.
각 행은 브라우저에서 이 페이지를 보여 달라는 요청을 나타냅니다.요청을 클릭하면 해당 요청에 대한 추가 정보가 포함된 여러 탭이 표시됩니다.다음은 Rad Devon 홈 HTML의 기본 요청을 반환하는 응답 탭입니다.

요청은 어떻게 성능에 영향을 줍니까?

요청 완료에 필요한 시간은 요청이 서버에 도착하는 데 필요한 시간, 서버가 응답을 준비하는 데 필요한 시간과 응답이 되돌아오는 데 필요한 시간의 합이다.모든 요청은 요청한 데이터를 되돌리는 데 필요한 시간을 초과한 비용이 있습니다.자원의 크기와 요청 수량을 줄일 수 있다면 페이지를 불러오는 데 걸리는 시간을 줄일 수 있습니다.
네가 다른 사람을 도와 케이크를 굽는 것을 상상해 봐라.당신은 그들이 베이킹에 전념하는 동시에 필요한 모든 것을 제공하는 달리기 선수가 되기를 원합니다.그들은 먼저 너에게 밀가루를 사러 가라고 했다.너는 찬장 앞으로 가서 밀가루를 잡고 그것을 가져와라.
이어서 그들은 너에게 코코아 가루를 달라고 한다.너는 찬장으로 돌아와서 화가 나서 코코아 가루를 잡고 그들에게 가져다 주어라.지금, 그들은 너에게 베이킹파우더를 원한다.그래, 이건 좀 터무니없다.만약 그들이 찬장에서 너에게 그들이 필요로 하는 모든 물건을 요구한다면, 너는 한 번에 그것들을 모두 꺼낼 수 있다. 이것은 매우 좋지 않니?
맞혔어.비록 모든 물건을 가져오는 데 더 많은 시간이 걸릴 수도 있지만, 그것은 좀 무겁기 때문에, 이것은 세 번의 여행보다 훨씬 빠르다.5파운드짜리 자루를 끌지 않고 그들이 필요로 하는 물건의 수량만 잡으면 과정이 더욱 빨라질 수 있다.만약 그들이 코코아 가루를 전혀 필요로 하지 않는다는 사실이 증명된다면, 이것도 속도를 높일 것이다!
이것은 웹 응용 프로그램에서 성능을 최적화할 때 사용할 수 있는 방법과 같다.순차적으로 다음과 같은 최적화를 시도합니다.

불필요한 요청이 없도록 불필요한 그림이나 스크립트를 삭제합니다.

이미지를 최적화하고 코드를 줄여 무게를 줄인다.

모든 Javascript와 CSS를 하나의 파일에 연결함으로써 요청 수량을 줄입니다.

개발자 도구의 시간 표시줄을 보고 어떤 요청이 페이지를 느리게 하는지 알아보십시오.
HTTP를 이해하는 것은 성능을 향상시키는 데 도움이 될 뿐만 아니라그것 또한 당신의 프로그램을 더욱 사용할 수 있고 디버깅하기 쉽게 할 수 있다.프로그램이 정상적으로 작동하지 않을 때 요청에 문제가 생겼을 수도 있습니다.이것은 '네트워크' 옵션에 표시된 내용을 이해할 수 있게 하여 디버깅에 매우 가치가 있다.HTTP 상태 코드는 좋은 시작점입니다.

HTTP 상태 코드란?

서버는 응답의 나머지 부분과 함께 HTTP 상태 코드를 HTTP 클라이언트에 반환합니다.그들은 고객의 요청이 성공했는지, 실패하면 원인 정보를 제공할 것이다.다음은 Chrome 개발자 도구의 모습입니다.

상태 코드는 세 자리 숫자입니다.다음은 범위와 각 범위의 의미입니다.

100 – 100 의 응답은 정보 응답으로 설명됩니다.나는 개인적으로 야외에서 이런 응답 코드를 본 적이 없다.나는 그것들이 확실히 존재한다고 확신하지만, 나는 그것들이 매우 흔한지 의심스럽다.

200 – 경고가 없는 성공적인 요청입니다.만약 네가 서버에 어떤 일을 요구한다면, 그것은 할 것이다.만약 네가 약간의 데이터를 원한다면, 그것은 되돌아올 것이다.

300 – 요청이 변경되었습니다.이 응답은 서버가 요청한 자원의 위치를 알고 있기 때문에 가능할 수도 있습니다. 설령 그것이 당신이 생각하는 위치가 아니더라도.

400–400 범위는 클라이언트 오류입니다.이것은 요청 중의 일부 내용이 서버가 기대하는 것이 아니라는 것을 의미한다.URL 매개 변수를 보냈을 수도 있지만, 요청한 끝에 이 매개 변수를 지원하지 않을 수도 있습니다.코드가 400에 있으면 응답체에서 유용한 정보를 얻을 수 없습니다.

500–500 범위는 서버 오류입니다.요청에는 문제가 없지만 서버에 장애가 발생했습니다.400 범위와 마찬가지로, 너는 500에서 어떤 유용한 데이터도 얻을 수 없을 것이다.

이것은 범위를 포함하지만, 이 범위 내의 모든 상태 코드는 더욱 구체적인 의미를 가지고 있다.MDN에 훌륭한 글이 있다the meaning of each response code.이것은 응용 프로그램에 존재하는 문제를 더욱 줄이는 데 도움을 줄 수 있습니다.응용 프로그램에서 성공하지 못한 요청을 더욱 스마트하게 처리할 수 있도록 도와줍니다.
예를 들어, 사용자가 양식에 잘못된 데이터를 입력하여 API에 매개 변수를 전달하고 반환 요청 시 400을 반환하는 경우 유효한 데이터를 제공하는 방법을 알려주는 오류 메시지가 나타날 수 있습니다.다른 한편, 만약 500개의 오류를 얻게 된다면, 이것은 서버에 좋지 않은 일이 일어났다는 것을 의미한다. 그러면 사용자는 그 오류를 바로잡을 수 있는 어떤 일도 할 수 없을 것이다.

왜 상태 코드가 항상 믿음직하지 않은가

상태 코드를 이해하는 것은 디버깅과 프로그램을 작성해서 오류를 처리하는 데 매우 유용하다.문제는 그것들이 항상 믿을 만한 것은 아니라는 것이다.이유는 다음과 같다.
서버 사이드 코드를 작성할 때 개발자는 그들에게 의미 있는 오류 코드를 선택할 권리가 있다.위의 설명은 모든 범위의 의미이지만, 이것은 모든 응용 프로그램에서 이런 방식으로 이루어진다는 것을 의미하지는 않는다.사실은 그렇지 않다.
유용한 데이터를 포함하는 500개의 답장을 받을 수도 있고, 오류 메시지를 포함하는 200개의 답장을 받을 수도 있다.모든 응용 프로그램은 독특한 눈송이이기 때문에, 전방 코드를 작성할 때, 실제적으로 무엇을 되돌려줄지 확인하십시오.

HTTP 이해에서 빠른 이익 얻기

비록 웹을 위해 계속 구축하고 있지만 HTTP를 이해하지 못하더라도 최소한 대충 이해하는 것은 가치가 있습니다.성능을 향상시키기 위해 더 좋은 도구를 가지고 있을 것입니다. 서버에서 돌아오는 오류를 쉽게 처리할 수 있고, 해결할 수 없는 문제를 디버깅할 수 있습니다.
이것은 읽기와 탐색 브라우저의 개발 도구를 교환하는 데 아주 좋은 장점이다.