첫 번째 세션에서는 프론트엔드와 백엔드가 생기게 된 배경(인터넷의 역사)과 각자 어떤 업무를 하는지, 그리고 개발자의 직종에는 어떤 것들이 있는지 배웠다.
강의 들은 내용을 위키백과로 보강하여 개념 위주의 내용 정리를 해보고자 한다. 아래 내용의 모든 개념은 대부분 위키백과가 출처이다.
1. what is internet?
군사 목적으로 멀리 떨어진 곳과 연결하기 위해 통신망을 구축하려던 시도가, 민간 분야로 확장되면서 거대한 통신망의 집합체가 된 것이다.
미국 국방성에서 구축한 아파넷이 internetwork (복수의 통신망을 집학시킨 광역 통신망)를 본격적으로 구축한 최초 사례다. 초기에는 연구 목적으로 쓰였으나, 아파넷을 쓰고자 하는 요구가 늘어남에 따라 군사용 네트워크는 밀넷으로 분리시키고 아파넷은 민간용이 되었다.
tmi : 냉전 시대에 핵 전쟁에도 살아남을 네트워크를 연구하다 회선 교환보다 패킷 교환 방식이 더 견고하다는 것을 알았고, 그렇게 연결한 통신망이 인터넷망의 시초가 되었다 ... 흠터레스팅 🤔
1.1 definition
인터넷은 컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다.
인터넷이란 이름은 1973년 TCP/IP를 정립한 빈튼 서프와 밥 간이 '네트워크의 네트워크'를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결(International Network)하고자 하는 의도에서 이를 줄여 인터넷(Internet)이라고 처음 명명하였던 데 어원을 두고 있다.
1.2 www
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 간단히 웹(Web)이라 부르는 경우가 많다.
이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다. 웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐이다.
기본 개념은 인터넷상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는 정보 검색 시스템이다. 하이퍼텍스트 형식으로 표현된 인터넷상의 다양한 정보를 효과적으로 검색하는 시스템으로 전 세계적으로 가장 널리 보급되어 있다.
tmi. 그 유명한 팀버너스리가 여기서 나온다. 1989년 월드 와이드 웹의 하이퍼텍스트 시스템을 고안하여 개발한 영국 사람. 되게 위인전에 나올 것 같은 느낌인데 55년생이시다 🤨
2. http
HTTP(HyperText Transfer Protocol)는 WWW 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. TCP와 UDP를 사용하며, 80번 포트를 사용한다. 1996년 버전 1.0, 그리고 1999년 1.1이 각각 발표되었다.
HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다.
HTTP를 통해 전달되는 자료는 http:로 시작하는 URL(인터넷 주소)로 조회할 수 있다.
-
요청과 응답으로 이뤄져 있다. 요청을 해야 통신이 시작하고, 응답을 무조건 해줘야 한다. (응답이 없으면 에러)
-
상태가 없다(stateless): 요청은 독립적이기 때문에 나 이전의 통신은 모른다. 그래서 내가 요청을 할 때 필요한 정보를 모두 첨부해서 보내야 된다. (그래서 응답을 받으면 브라우저에 쿠키, 세션을 저장해 요청할 때 함께 첨부한다.)
2.1 http request
✅4월 8일 세션 이후 추가한 내용
startline
- http method: 요청이 의도한 액션. Get(받다), post(생성), put, delete 등
- request tartget: 전송되는 주소 (/login)
- http version
❯ http -v 127.0.0.1:8000/user
GET /user HTTP/1.1headers: meta 정보
- key : value 로 이루어져 있다.
- host(key) : google.com(value)
- 자주 사용되는 header 정보: host, user-agent, accept, connection, content-type, content-length
Host: 127.0.0.1:8000
User-Agent: HTTPie/2.0.0start + header를 합하면 전체 url이 나온다. stateless에서 설명했을 때 로그인 정보를 함께 추가하는 것은 header에 들어간다. 부가 정보이기 때문에.
body
실제 데이터. get일 때는 메시지가 없을 수도 있고, post면 body가 있다.
2.2 http response
statusline
- http version
- status code: http에서는 응답의 상태를 숫자로 나타낸다. 200이면 제대로 처리했고, 404면 잘못 됐다.
- status text: code를 사람이 알아들을만한 말로 설명해준 것. OK 같이.
headers
응답에 대한 meta 정보. request에는 없는 것: User-agent 대신 server 정보가 표시되어 있다.
body
3. http method
get
데이터 달라고 요청할 때. 페이지 요청, 사용자 정보 요청. 바디가 비어있을 때가 많다.
post
데이터 생성, 삭제, 업데이트와 같이 이 내용을 주세요! 라고 하는 것.
put
post랑 비슷한데, 사용하지 않는 추세. post로 통일하는 추세이다. 원래 put은 뭔가를 생성하고, post는 수정할 때였는데 복잡도가 높으니까 그냥 하나만 쓴다.
delete
어떤 유저 정보를 삭제할 때.
endpoint에서
back-end 개발자는 내가 무엇을 허용해아 할지 말을 하는 것.
statuscode
구현하는 개발자가 결정하는 것이기 때문에
404는 host는 있는데 target이 없다는 뜻이다.
4. language의 등장
html
hyper text markup language의 줄임말. 웹 페이지를 만들기 위한 마크업 언어다. 마크업 언어이기 때문에 로직이 없고 정적이다. 1세대 웹사이트는 대부분 html로 구성되어 있다. (css는 style sheet이기 때문에 마찬가지로 언어가 아니다.)
조금 더 뜯어 살펴보면,
-
markup language: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이였으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. e.g.
<h1>, <body> 등 -
hyper text: 다른 파일끼리 링크를 통해 연결되어 있는 구조. 많은 양의 파일을 어떻게 효율적으로 전송할지 고민하다가, 사용자가 링크를 통해 이동하도록 구조를 짰다.
javascript
html, css의 정적인 것을 넘어 동적인 웹을 구현하기 위해 나온 것이 javascript이다. 넷스케이프라는 웹브라우저(모질라)를 만든 회사에서 만든 언어다. 이로 인해 2세대 웹서비스의 시대가 열리게 됐지만, 아직까지는 html이 주고 javascript는 서브 기능을 했다.
정적, 동적인것?
네이버를 예로 들어 정적인 것은 html로 만든 것들. 이미지, 레이아웃, 버튼과 같이 움직이지 않는 것. 동적인 것은 검색어 순위 데이터와 같이 계속 변하는 것이다.
react
javascript 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.
html 안에 js가 있던 2세대와 다르게, 미리 생성된 html을 js로 불러오는 방식을 사용하게 되면서 js가 주가 되는 인터넷 3세대가 열린다.
- single page application
싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
SPA에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다.
싱글 페이지 애플리케이션과의 소통은 뒷편에 있는 웹 서버와의 동적인 통신을 수반하기도 한다.
5. front, back
페이지 랜더링은 자바스크립트가 자동 생성하고, 데이터만 계속 받아오면 되는 구조로 변화함에 따라 프론트는 웹서버, 백은 웹애플리케이션과 소통하면 되기 때문에 개발의 영역이 구분되기 시작했다.
🔇 백엔드의 구조
매우 단순화해서 말하면 프론트는 보여지는 것, 백은 데이터이다. 그래서 기본적으로 백엔드 개발자는 데이터 수집, 가공/분석, 관리하게 된다(고한다...) 아래는 처음 보는 개념들이라서 우선 간단하게 정리해놓고 조금 더 자세하게 복습해야겠다.
Batch
일괄 처리란 컴퓨터 프로그램 흐름에 따라 순차적으로 자료를 처리하는 방식을 뜻한다. 초기의 일괄처리 방식은 사용자와 상호작용하는 것이 불가능했지만, 운영 체제가 발전함에 따라 프로그램 입출력을 통해 상호작용하는 것이 가능해졌다.
NRT
Non-real time, NRT는 즉시 발생하지 않는 프로세스나 이벤트를 설명할 때 쓰는 말이다. 예를 들어 우편으로 소통하는 것은 NRT라고 할 수 있는데 응답이 대부분 즉시 오지 않고 몇 시간, 또는 며칠이 소요되기 때문이다.
non-real time tasks를 적어놨는데 왜지?
ETL
추출(Extract), 변형(Transform), 적재(Load). 쉽게 말해 저장된 데이터를 추출하고 요구에 맞게 변형하여 다른 곳으로 이동하는 것
data pipeline
해당 용어는 한국어로 구글링했을 때 나오는 검색결과가 많아 개인 블로그의 내용을 참고한다. 출처는 링크에 표시했다. 우선 이해한 뒤에 영어로 조금 더 검색하고 번역본을 옮겨야겠다.
데이터 파이프라인은 ETL을 서브셋으로 포함하는 광범위한 용어다. 데이터를 한 시스템에서 또다른 시스템으로 옮기는 작업을 뜻한다.
해당 데이터는 transform되는 경우도 있고 안하는 경우도 있다. 또한 실시간성으로 처리하는 것도 있고 배치성으로 처리할수도 있다. 데이터가 지속적으로 흘러서 업데이트되는 경우가 있는데 traffic 센서 모니터링과 같은 경우를 예로 들 수 있다.
데이터 파이프라인을 통해 가져온 데이터는 database나 data warehouse에 쌓지 않는 경우도 있고 혹은 다중으로 데이터를 쌓는 경우도 있다.
데이터 파이프라인을 구축하기 위해서는 여러 소프트웨어적인 수동 작업들을 제거해야하며 Data가 각 지점을 순조롭게 흐르도록(flow) 만들어야 한다. Data의 추출(extracting), 변경(transforming), 결합(combining), 검증(validating) 그리고 적재(loading)하는 과정들을 자동화 하는 것이다. 또한 여러 데이터 스트림을 한번에 처리해야 한다. 이 모든 과정은 오늘날 data-driven enterprise에서 필수적이다.
데이터파이프라인은 모든 종류의 스키마의 데이터를 수용해야한다. 입수하고자 하는 파일이 static source든 real time source이든 데이터파이프라인에서는 해당 파일의 데이터는 작은 단위(chnk)로 들어와서 병렬로 처리된다.
- pipeline?
컴퓨터 과학에서 파이프라인(영어: pipeline)은 한 데이터 처리 단계의 출력이 다음 단계의 입력으로 이어지는 형태로 연결된 구조를 가리킨다. 이렇게 연결된 데이터 처리 단계는 한 여러 단계가 서로 동시에, 또는 병렬적으로 수행될 수 있어 효율성의 향상을 꾀할 수 있다. 각 단계 사이의 입출력을 중계하기 위해 버퍼가 사용될 수 있다.
밑으로 내려올 수록 너무 어려워
🤯
🤯
🤯
(화이팅)
