Trip to Front-end

Get, Post 이해에서 MDN How the web works 번역으로

Kestrel 2023. 3. 14. 15:28

맨처음에는 get, post이 도대체 정확히 뭔가를 찾다가 웹의 동작까지 넘어왔고 여러 블로그를 보다가 명쾌하지 않아 MDN 문서를 보게되었고 MDN 문서의 How the web works를 보다 한국어 번역의 몇몇 부분이 뭔가 싶어서 직접 번역해보며 의미를 깨우치기로하였다. 

 

How the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone.

당신의 컴퓨터와 핸드폰의 웹브라우저 속의 웹페이지를 볼 때 어떤 일이 일어나는지 간단하게 알아보겠습니다.

This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.

이 이론은 웹 코드를 적는데 단기적으로는 필수적인 내용은 아니지만 장기적인 관점에서 백엔드에서 무슨 일이 일어나는 지 알게 된다면 분명 도움이 될 것입니다.


Clients and servers

클라이언트와 서버


Computers connected to the internet are called clients and servers. A simplified diagram of how they interact might look like this:

인터넷에 연결된 컴퓨터들은 클라이언트와 서버로 나뉠 수 있습니다. 

 


Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

두 동그라미는 각각 서버와 클라이언트를 나타냅니다. Request라는 화살표는 클라이언트에서 서버로 가며 그 반대는 Response로 서버에서 클라이언트로 갑니다.


Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).

클라이언트는 일상적인 인터넷이 연결된 장치들과 (예를 들어, 와이파이에 연결된 당신의 컴퓨터 혹은 모바일 네트워크에 연결된 당신의 핸드폰이 있습니다.) 그 장치에서 이용 가능한 웹에 접근 가능한 소프트웨어입니다. (보통 크롬이나 파이어폭스같은 웹브라우저들입니다.) 


Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

서버는 웹페이지, 사이트 그리고 앱을 보관하고 있는 컴퓨터입니다. 클라이언트 장치들이 웹페이지에 접근하고 싶어할 때 서버로부터 다운로드된 웹페이지의 복사본이 요청자의 장치의 웹브라우저를 통해 보여지게 됩니다.


The other parts of the toolbox

도구 상자의 다른 부분들 


The client and server we've described above don't tell the whole story. There are many other parts involved, and we'll describe them below.

위에서 서술한 클라이언트와 서버는 전부를 이야기한 것은 아닙니다. 그 속에는 다양한 부분들이 연관되어 있고 그 부분을 이어서 설명드리고자 합니다.

 

For now, let's imagine that the web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.

이제 웹을 도로라고 가정해봅시다. 도로의 한 쪽 끝은 클라이언트이며 당신의 집이라고 생각해보고 도로 반대편에 살 물건들이 있는 상점을 서버라고 생각해봅시다.

 


In addition to the client and the server, we also need to say hello to:

여기에 몇가지 더 추가로 알아보자면 

 

Your internet connection: Allows you to send and receive data on the web. It's basically like the street between your house and the shop.

인터넷 연결은 당신이 웹에서 데이타를 주고 받을 수 있도록 해줍니다. 이 것은 당신의 집과 상점사이의 길이라고 할 수 있습니다. 


TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the internet. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around).

TCP/IP는 인터넷에서 어떻게 데이터를 전송할 것인가를 정의한 통신 규약입니다. 이 것은 운송 매커니즘이라고 할 수 있겠네요. 주문을 하고 가게에 가서 상품을 사는 것처럼요. 우리의 예를 다시 보면 자동차나 자전거라고 볼 수 있습니다.


DNS: Domain Name System is like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's IP address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.

DNS는 웹사이트를 위한 주소록이라고 할 수 있습니다. 당신의 브라우저에 웹 주소를 입력할 때, 브라우저는 웹사이트를 불러오기전에 웹사이트의 IP를 찾기위해 DNS를 살펴봅니다. 브라우저는 웹사이트가 어느 서버에 있는지 찾아야합니다. 그래서 HTTP 메세지를 제대로 된 곳에 보낼 수 있습니다. 상점가는 예를 다시 살펴보면 이 과정은 갈 수 있는 상점의 주소를 찾아보는 것과 같습니다.

 

* HTTP 메시지가 GET이나 POST이다. 이 걸 몰라서 이걸 다 번역하고 있는 나....이게 개발 공부인가? 


HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.

HTTP는 서버와 클라이언트가 서로 소통할 언어를 정의하는 통신규약입니다. 당신의 상품을 주문할 언어와 같습니다.


Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:

컴포넌트 파일: 웹사이트는 다양한 파일들로 만들어집니다. 당신이 구입하는 상품이 다양한 부분들도 만들어지는 것과 같습니다. 이 파일은 주요하게 2가지로 부터 만들어집니다.


Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you'll meet other technologies a bit later.

코드 파일: 웹사이트는 주로 HTML, CSS, 자바스크립트로 만들어집니다. 조금 있다 만나보시죠.

 

Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

에셋은 웹사이트를 만드는 위 코드들을 제외한 총체를 지칭합니다. 이미지, 음악, 비디오, 워드, PDF가 이에 해당합니다.


So what happens, exactly?

그래서 정확히 무슨 일이 있어나는 겁니까?


When you type a web address into your browser (for our analogy that's like walking to the shop):
당신이 웹주소를 브라우저에 입력하는 순간( 당신이 가게로 발걸음을 옮기는 순간이라도 볼 수 있습니다):


The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop).

일단 브라우저는 DNS 서버로 갑니다. 그리고 웹사이트가 있는 서버의 진짜 주소를 찾습니다. (당신은 가게의 주소를 찾습니다.)


The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.

브라우저는 HTTP request 메시지를 서버에게 보내 웹사이트의 복사본을 클라이언트에게 보내달라고 요청합니다. (가게에  가서 물건을 주문합니다.) 서버와 클라이언트 사이의 메시지와 더불어 데이터들은 TCP/IP에 기반한 인터넷 연결을 통해 전달되게 됩니다. 


If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).

서버가 클라이언트의 요청을 승인하면 서버는 200 OK라는 메시지를 클라이언트에게 보냅니다. 이 메시지는 웹사이트를 봐도된다는 것을 의미하고 필요한 파일들과 데이터를 전달합니다. (상점이 구입한 물건을 전달하고 집으로 보내줍니다.)


The browser assembles the small chunks into a complete web page and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).

브라우저는 이 데이터들을 조합하여 당신에게 보여줍니다. (문 앞으로 상품들이 도착하였습니다.)

 

강의 들으면서 니꼬 선생님의 말을 그대로 옮겼다. 이렇게 보는게 더 이해되서 남겨둔다.

 

get은 http method이다.

http 서버끼리 소통하는 방식

브라우저 http request를 만들어 준다. 

웹사이트에 접속하고 서버에 정보를 보내는 방법 이 페이지를 가져다줘

브라우저 자는동으로 / 페이지를 get하려고 한다.

웹사이트한테 이봐 나한테너네 홈페이지 갖다줘 

브라우저는 너를 대신해서 웹사이트를 request하고 페이지를 가져다 줌

get은 요청 페이지를 가져달라는 http method이다.

유저가 뭔가를 요청하거나, 보내거나, 네게 무슨 행동을 한다 그게 request

app.get("/", 콜백함수)

/ get 요청을 보낼때 어떤 행동을 할지 함수로 정의한다.

request은 브라우저가 서버에게 나 이 url좀 가져다줘