웹 브라우저의 통신 방식
1) 웹 브라우저란 ?
- 📌 웹 브라우저(Web Browser)는 인터넷 브라우저(Internet Browser)라고도 불리며, 웹 서버로부터 정보를 요청하고 받아 사용자에게 보여주는 소프트웨어
- 웹 브라우저(Web Browser)는 인터넷 상의 다양한 정보를 조회하고 접근할 수 있습니다. 우리가 일반적으로 사이트에 접속하였을때, HTML, CSS, JavaScript 파일을 전달받아 이를 해석하고 우리의 눈으로 볼 수 있게 되는 것
2) 웹 브라우저 주소창의 URL
📌 URL(Uniform Resource Locator)은 인터넷(Internet)상의 리소스 위치를 나타내기 위해 사용합니다. 즉 인터넷 상의 주소이다 !
3) DNS로 조회하기
- 인터넷 상의 각각의 리소스들은 고유의 IP 주소를 가지고 있다. IP 주소는 숫자와 점(.)으로 이루어져 있어, 사람이 외우기 어렵고, 무슨 정보를 나타내는지 이해하기 어렵다. 이러한 문제를 해결하기 위해 사용하는것이 DNS이다.
- DNS를 이용하게되면, 사용자가 IP를 사용하지 않고도 더욱 편리하게 해당하는 인터넷의 리소스에 접근할 수 있게 되는 것, 즉 216.3.128.12 가 아닌, naver.com만 입력하면 되는것이다.
- 결론적으로는 DNS는 인터넷의 ‘주소록’ 또는 ‘연락처’와 같은 역할을 하게된다.
4) IP를 이용하여 웹 서버와 통신하기
📌 IP(Internet Protocol)는 각각의 네트워크에 연결된 장치들이 고유한 IP 주소를 가져 인터넷 상에 존재하는 해당하는 장치의 위치를 식별할 수 있게 해준다.
- IP는 일반적으로 IPv4, IPv6와 같이 2가지의 방법을 사용하는데 현재 까지는 IPv4가 많이 사용중
HTTP의 이해
1) HTTP란 ?
📌 http란 데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나로 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약이다 .
- 현대에 존재하는 대부분의 웹 서버가 HTTP를 기반으로 데이터를 주고 받는다.
2) 그렇다면, HTTPS란?
📌 HTTPS란 HTTP를 기반으로 데이터 통신의 안전성을 높이기 위해 암호화 기능이 포함된 통신 프로토콜을 의미한다.
- 최근 우리가 사용하고 있는 대다수의 사이트는 HTTPS를 지원하고 있다.
3) 어떻게 HTTP로 데이터를 주고 받을까?
📌 HTTP에서는 언제나 요청(Request)과 응답(Response)이라는 개념이 존재한다.
- 1) 브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request)한다.
- 2) 그러면 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환(Response)해준다. 없다면 없는 페이지에 대한 데이터를 반환!!
- 3) 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려주게 된다.
웹 서버의 이해
웹 서버란?
📌 웹서버는 HTTP를 이용하여 인터넷 상에서 클라이언트의 요청을 처리하고 응답해주는 컴퓨터 또는 프로그램을 의미한다.
- 웹서버는 클라이언트의 HTTP 요청을 받아 정적인 콘텐츠를 제공하고. 필요한 경우 클라이언트의 요청을 웹 어플리케이션 서버로 전달하여 처리할 수 있다.
- 웹서버의 주요 업무는 복잡한 비즈니스 로직의 수행보다는 요청된 콘텐츠나 데이터를 빠르게 반환하여 사용자에게 빠른 데이터를 제공할 수 있다.
웹 어플리케이션 서버 ?
웹 어플리케이션 서버는 클라이언트의 요청을 웹 서버로부터 전달받아 처리하고, 결과를 다시 웹 서버에 반환하여, 최종적으로 클라이언트가 응답을 받을 수 있도록 구성되 있으며, 웹 서버와 협력하여 동적인 컨텐츠를 제공한다.
- 복잡한 데이터를 가공하거나 다양한 비즈니스 로직을 수행하기 때문에 정적인 데이터만 전달하는 웹 서버에 비해 처리 시간이 길어질 수 있음
- 웹 어플리케이션 서버는 콘텐츠 생성이나 데이터베이스와의 상호 작용이 필요할 때 주로 사용
JavaScript란?
📌 자바스크립트는 정적인(Static) 문서를 조금 더 동적(Dynamic)으로 표현할 수 있도록 만들기 위해
NetScape라는 웹 브라우저를 통해 상호작용을 강조하기 위해 간단한 기능을 넣어 만든것이 자바스크립트의 시작이다.
정적(Static)페이지 vs 동적(Dynamic)페이지?
- 정적(static)페이지 : 미리 작성되어 확정된 페이지로 실시간 정보나 맥락을 반영하지 못하는 페이지. 예를 들어, 항상 같은 사진과 함께 같은 링크로 연결되는 하이퍼링크만 존재하는 페이지는 정적 페이지라고 말한다.
이거 아님...
- 동적(Dynamic)페이지 : 맥락, 상황을 반영할 수 있는 페이지를 말한다. 예를 들어, 현재 로그인한 유저의 프로필 사진이 화면에 표시되는 페이지는 동적 페이지라고 할 수 있다.
JavaScript가 존재하기 이전의 웹 생태계
- JavaScript가 나타나기 전의 웹 생태계는 웹 브라우저가 존재하긴 했지만, HTML과CSS로 아주 간단한 스타일만 적용하는게 일반적이였음.
- 이후에 NetScape 외에도 우리에게 익숙한 Internet Explorer같은 다른 브라우저들도 비슷한 언어를 개발하기 시작했다.
Node.js란?👶
📌 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript의 런타임이다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적이다. Node.js 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계를 차지하고 있다.
논 블로킹 I/O (Non-Blocking Input/Output)
📌 블로킹(Blocking) I/O와 논 블로킹(Non-blocking) I/O는 프로그램의 실행 흐름을 제어하는 방식을 의미한다. 블로킹 방식은 프로그램이 특정 작업을 수행하는 동안 다른 작업을 중단시키는 방식이다. 반면에 논 블로킹 방식은 프로그램이 여러 작업을 동시에 처리할 수 있는 장점이 있다.
→ I/O는 데이터의 입력(Input) / 출력(Output)을 의미하며, 이는 파일을 저장하거나, 불러오는 것을 “I/O 처리를 한다.” 라고 표현
- 블로킹(Blocking) I/O: 한 번에 하나의 작업만을 처리할 수 있으며, 호출된 함수가 자신의 작업을 모두 마칠 때 까지 호출한 함수에게 제어권을 넘겨주지 않는다.
(파일을 읽는 동안에는 다른 작업을 함께 수행 X) - 논 블로킹(Non-blocking) I/O: 시스템 호출이 완료되기를 기다리지 않고 바로 다음 작업으로 즉시 넘어갈 수 있는 방식이므로 호출된 함수는 작업의 완료 여부와 상관없이 즉시 제어권을 호출한 함수에게 반환
(파일을 읽는 동안에도 동시에 연산을 하는 것처럼 다른 작업을 함께 수행 O)
싱글 스레드(Single Thread)
📌 싱글 스레드(Single Thread)는 스레드 하나를 사용하는 것이며, 동시에 하나의 작업만을 처리할 수 있음을 의미한다.
- 스레드(Thread)란 프로그램이 동작할 때, CPU 또는 프로세서를 사용하는 단위로, 여러 스레드를 사용하면 사용할수록 여러 작업을 동시에 처리가능, 그러나 이는 복잡성을 증가시키고, 리소스를 더욱 많이 소모하게 되는 문제점을 야기한다.
- Node.js는 싱글 스레드로 동작하지만, I/O 작업이 발생한 경우 이를 비동기적으로 처리하여 여러 작업을 동시에 처리할 수 있게 한다.
스레드를 여러개 사용하면 연산할 수 있는 시간을 단축 시킬수있을텐데 왜 Node.js는 싱글스레드씀?📌 먼저 싱글 스레드를 쓰는 이유는 스레드 생성과 관리에 드는 부담을 줄여주며, 컴퓨팅 리소스를 효율적으로 사용할 수 있게 한다. 또한, 한 번에 하나의 작업만 처리하기 때문에 동시성 문제, 즉 여러 스레드가 공유하는 자원에 대한 동시접근 문제, 즉 Race condition 문제를 방지 할 수 있다. 이러한 특징 덕분에 연결 요청의 부하에 따른 서버 확장이 매우 자유로움 !!
호출 스택(Call Stack)
📌 호출 스택(Call Stack)은 함수의 실행 순서를 추적하는 자료구조이다.
- JavaScript는 코드를 실행하면서 호출 스택(Call Stack)에 함수를 추가(push)하고 함수가 완료되면 호출 스택에서 제거(pop)한다. 이는 비동기 작업에서 문제가 되는데 이 문제를 해결하기 위해 javascript는 아래 이벤트 루프(Event Loop) 와 이벤트 큐 (Event Queue)를 사용하게 됐다.
이벤트 루프(Event Loop)
📌 이벤트 루프(Event Loop)란 여러 이벤트들과 같은 비동기 작업들을 모아서 관리하고, 어떤 순서대로 실행해야하는지 도와주는 도구를 의미한다.
- 즉 이벤트 루프(Event Loop)는 호출 스택(Call Stack)과 이벤트 큐(Event Queue)를 관찰하면서, 호출 스택이 비어있고, 이벤트 큐에 작업이 있다면, 이벤트 큐의 작업을 호출 스택으로 이동하는 역할을 담당!!
- 이러한 이벤트 루프를 활용한다면, 자바스크립트는 시간이 오래 걸리는 작업을 이벤트 큐에 넣어 비동기적으로 처리하고, 그 동안 호출 스택에서 다른 작업들을 계속 처리 할 수 있따.
이벤트 루프의 동작 방식 이해하기
음... 아래 링크를 통해 이해를 좀 더 할 수 있도록 공부해야겠다.
→ 이벤트 루프에 대해 자세히 알고싶다면 여기를 클릭해라 애송이!
→ 이벤트 루프의 공식 문서가 궁금하다면 여기를 클릭해라 꼬맹이!
Package Manager
📌 Node.js에서 코드의 재사용성을 높이기 위해 작성된 독립적인 코드 조각을 “모듈”이라고 부른다. 이러한 모듈을 npm이나 yarn와 같은 패키지 매니저를 통해 업로드하여 다른 개발자들과 공유할 때, 이를 패키지(Package)라고 한다 !
- 모듈(Module)은 일반적으로 프로젝트 내에서 사용되는 코드 조각을 의미, 패키지는 이러한 모듈을 포함하고 있거나 다른 패키지(package)에 의존하고 있는 코드의 집합이라고 할 수 있다.
패키지 매니저(Package Manager)
📌 패키지 매니저(Package Manager)는 패키지를 손쉽게 다루는 작업을 안전하고 편리하게 사용하기 위한 도구로, Node.js에서 대표적으로 사용하는 패키지 매니저는 npm과 yarn이 있다.
npm 이란?
📌 npm은 자바스크립트에서 사용할 수 있는 패키지(모듈) 관리자를 의미한다. "Node.js를 사용하는데 필요한 패키지를 설치해주는 프로그램" 이라고 생각 하면 됨 !
- npm을 통해 라이브러리를 쉽게 설치하고 버전을 관리할 수 있고, 제거할 수도 있음
- Node.js를 설치할 때 함께 설치되므로, Node.js의 가장 대표적인 패키지 매니저
yarn 이란?
📌 npm의 부족한 부분을 보완하여 편리한 기능과 보안 성능이 향상된 패키지 매니저로 Facebook이 2016년에 출시한 패키지 매니저이다. npm의 대체제로서 등장!!
package.json 이란?
📌 package.json은 Node.js 프로젝트의 가장 핵심적인 파일이며, 프로젝트에 대한 정보와 설치한 패키지들의 버전을 관리할 때 사용하는 파일을 말한다.
(npm과 yarn 모두 동일한 package.json 파일을 참조)
- package.json파일에는 프로젝트명, 작성자, 라이센스 정보 등 일반적인 프로젝트의 메타 데이터 뿐만 아니라, 스크립트를 실행할 수 있는 필드 등이 포함 되어 있다.
package-lock.json과 yarn.lock
📌 npm으로 패키지를 설치, 수정, 삭제할 때마다 패키지들의 정확한 의존 관계를 package-lock.json파일에 저장한다. yarn의 경우 패키지들의 상세한 의존 관계를 yarn.lock 파일에 저장 이러한 lock 파일이 있다면 node_modules 폴더가 존재하지 않더라도 패키지 구조 재설치가 가능함 !
배포를 위한 yarn 학습
node_modules: 이 폴더는 공유하거나 배포할 때 포함되서는 안됨. →package.json파일과yarn.lock파일을 이용하여 동일한 패키지 버전을 설치할 수 있다.package.json: 해당 파일만 있다면 언제든지 해당 프로젝트에 필요한 패키지를 설치 가능.
yarn명령어를 이용하여 해당 파일에 정의된 모든 패키지를node_modules폴더에 설치 할 수 있다.yarn add: 해당 명령어는yarn패키지 매니저를 이용하여 패키지를 설치할 수 있다. 설치된 패키지 정보는package.json파일에 자동 추가
