daniel7481의 개발일지

[웹 프로그래밍(풀스택)] Web 개발의 이해(1) 본문

Naver Boostcourse

[웹 프로그래밍(풀스택)] Web 개발의 이해(1)

daniel7481 2021. 12. 6. 20:27
반응형

오리엔테이션

웹 프론트엔드와 웹 백엔드를 배우게 될 강의이다. 프론트엔드는 디자인에 맞게, 요구사항에 맞게 CSS를 이용하여 웹을 디자인하는 방법을 배우고, 웹 백엔드는 클라이언트와 서버가 무엇인지 정확하게 알고, 클라이언트의 요구사항에 대해 서버가 어떻게 응답하는지를 중점적으로 이해해야한다. 또한 마스터님들이 당부하신 부분은 매일매일 조금이라도 공부하면서 공부 일지를 남기는 것이고, 웹서핑을 자주 하면서 이용자의 관점이 아니라 이제 개발자의 관점으로 어떤 URL이 바꼈는지, 웹 페이지 전체가 바뀌는지 부분이 바뀌는지 등 확인해보라고 하셨다.

1) 웹 프로그래밍을 위한 프로그램 언어들

수 많은 프로그래밍 언어 중 어떤 언어를 선택하는 것이 좋을까?

저급 언어

저급언어는 기계 중심의 언어라고 할 수 있다. 기계가 알아들을 수 있는 말(0, 1로 이루어진 기계어Machine language)로 프로그램을 작성하는 것이라고 할 수 있다. 숫자로만 되어 있어서 유지보수가 굉장히 어렵다. 그래서 숫자로 된 문장과 1대1로 대응하는 기호를 만들고, 그 기호로 작성된 프로그램은 기계가 알아들을 수 없기 때문에 그 기호를 원래의 숫자로 바꾸는 과정에서 사용되는 도구를 compiler라고 하고, 이러한 기호로 작성된 언어를 어셈블리어(Assembly language)라고 한다. 아주 특수한 경우를 제외하고 기계어랑 어셈블리어로 작성하는 경우는 없다.

고급 언어

고급 언어는 사람 중심의 언어로, 사람이 더 쉽게 이해할 수 있는 문법으로 프로그래밍을 할 수 있다. 이 또한 번역해주는 compiler가 필요하다. 

그러면 웹 프로그래밍에서 제일 인기가 많은 언어는 무엇일까? github, stackoverflow 등에서 언급이 제일 많이 되는 언어와 같은 기준으로 순위를 매긴 결과 javascript가 역시 1위를 달렸고, 그 다음이 파이썬, 자바가 차지했다.

2) 웹의 동작(HTTP 프로토콜 이해)

인터넷(네트웍 통신)의 이해

인터넷 != www(world wide web)

www는 인터넷 기반의 대표 서비스중 하나일 뿐이다. 인터넷은 네트워크들의 네트워크다. 인터넷 안에는 서로 다른 네트워크가 존재하는데, 그런 네트워크는 각 포트를 차지한다. 웹은 80번 포트를 사용한다.

HTTP(Hypertext Transfer Protocol)

팀 버너스리와 그의 팀은 HTML와 HTTP를 발명했다. HTTP는 서버와 클라이언트가 인터넷상에서 데이터(어떠한 데이터도 다)를 주고 받기 위한 프로토콜이다. 현재는 HTTP/2까지 버전이 등장한 상태이다.

HTTP 작동 방식

HTTP는 서버/클라이언트 모델을 따른다.(클라이언트가 서버에게 요청을 하면 서버가 응답한다)

장점: 불특정 다수를 대상으로 하는 서비스에 적합하다. 클라이언트와 계속 연결된 상태가 아니므로 클라이언트와 서버간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.

단점: 클라이언트의 요청을 응답하면 서버는 바로 연결을 끊어버리기 때문에 클라의 이전상황을 알 수 없다(무상태(stateless). 이러한 점을 보안하기 위해 Cookie같은 기술이 나옴.

URL(Uniform Resource Locator)

- 프로토콜의 종류를 나타냄

- 자원(사진 동영상 등)이 있는 서버의 IP주소, 도메인 주소, 포트 번호를 나타냄

- 자원의 위치를 나타냄

물리적 위치를 찾으려면 IP주소나 도메인 주소다. 물리적인 컴퓨터를 찾은 후 해당 컴퓨터에 등장하는 소프트웨어 서버를 찾기 위해서는 포트 값이 필요함. 여기서 용어 정리 한번 하고 갑시다.

IP 주소: 집주소(하나의 컴퓨터에는 하나의 주소가 존재)

포트: 집에는 여러 개의 방이 존재함. 이 방이 포트.  각 서버는 하나의 방(포트)에 존재함, 여러 개가 같이 존재할 수 없음

HTTP

[출처: Naver Boostcourse]

위 이미지를 머리 속에 각인하자. 먼저 클라이언트가 목표하는 웹서버에 연결(connect)하고, 요청을 보낸다. 이 때 서버는 무작정 있다가 막 주는 것이 아니라 반드시 클라가 접속하여 요청하면 요청에 따른 응답 결과를 클라이언트에게 응답하는 과정을 거친다. 이 응답이 끝나고 나면 서버와 클라의 연결은 끊긴다(stateless).

요청 데이터 포멧

요청되는 데이터는 아무렇게 가는 것이 아니라 정해진 규칙이 존재한다. 이를 요청 데이터 포멧이라고 한다. 이 요청 메세지는 헤더 부분, 빈줄 부분, 바디 부분으로 나뉘게 된다. 헤더 부분의 첫 줄에는 헤더의 필수 등장 요소 세가지가 나온다.

- GET: 요청 메서드. GET 뿐 아니라 여러가지가 존재한다.

- 요청 URI: 요청하는 자원의 위치를 명시하는 부분

- 웹 브라우저가 사용하는 프로토콜의 버전을 명시하는 부분

GET 방식은 요청할 때 가져가야 하는 자원이 URI에다가 붙여서 간다. 그러므로 GET 방식은 바디가 비어 있다. 두번째 줄부터는 헤더 정보가 주어진다. 각 줄은 헤더 명과 헤더 값이 콜론으로 구분이 된다. 각 줄은 라인피드와 캐리지 리턴으로 구분된다. 바디는 요청 메세지가 POST 혹은 PUT일 때 들어오게 된다.

응답 데이터 포멧

응답 또한 헤더, 빈줄, 바디로 구성되어 있다. 첫 줄에는 반드시 응답 HTTP 프로토콜의 버전, 응답 코드, 응답 메세지가 나온다. 나머지 헤더 부분은 날짜, 웹 서버 이름과 버전, 콘텐츠 타입, 캐시 제어 방식, 콘텐츠 길이 값이 나온다. 빈줄 다음이 나오는 것이 실제 응답 리소스 데이터가 나오는 부분이다.

최초의 웹서버는 GET 방식만 지원했다고 한다.

  • GET : 정보를 요청하기 위해서 사용한다. (SELECT)
  • POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
  • PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
  • DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
  • HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
  • OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
  • TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

[출처: Naver Boostcourse]

위 줄은 요청 명령어다.

생각해보기

HTTP와 HTTPS는 무엇이 다르며 HTTPS는 어떤 경우에 사용하는 건가요?

HTTPS는 별도의 SSL(보안소켓계층)을 사용한 것으로 안전하게 데이터를 주고받을 수 있지만 속도가 느리고 유지 비용이 발생한다. 주로 보안이 중요한 금융거래, 개인정보 같은 정보를 다룰 때 사용한다.

반응형

'Naver Boostcourse' 카테고리의 다른 글

[웹 프로그래밍(풀스택)] Web 개발의 이해- FE/BE(3)  (0) 2021.12.07
[웹 프로그래밍(풀스택)]Web 개발의 이해(2)  (0) 2021.12.06
[CS50] C(2)  (0) 2021.12.06
[CS50] 2. C(1)  (0) 2021.12.03
[CS50]1. 컴퓨터 사고 (2)  (0) 2021.12.03