![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/LiDBF/btsGAXOmrWf/FSvEoIubJxVKw9vwDAQAR0/img.png)
*️⃣ 모듈 번들러 Module(분리된 코드 조각) + Bundler(묶는다) 모듈 번들러는 분리된 코드 조각들을 하나로 병합하는 개발 도구이다. 핵심 작업은 JS 파일, CSS 파일 등 여러 리소스를 하나로 결합하여 단일 파일을 만드는 것이다. 따라서 크롬과 같은 브라우저는 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게 된다. ℹ️ 모듈 번들러를 사용하는 이유 모든 브라우저가 모듈 시스템을 완전하게 지원하지 않는다. 코드의 종속성 관계를 관리하는데 도움이 되며 종속성 순서대로 모듈을 로드한다. 이미지 에셋, css 에셋 등 종속성 순서대로 에셋을 로드하는 데 도움이 된다. *️⃣ 모듈 번들러 역사와 설명 아래 글에 모듈 시스템에 대한 설명이 자세히 되어 있습니다. 참고하세요 https://y..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dy8MYZ/btsFA7eTmfb/eXrgIgaskoBuznq9E9dH2K/img.png)
1. Tim Berners-Lee HTTP를 개발한 영국의 컴퓨터 엔지니어로 하이퍼텍스트를 개발했으며, URL, HTTP, HTML을 설계했다. HTTP와 HTML, 하이퍼텍스트의 영향이 워낙에 강력하고 광범위해서 인터넷의 아버지라고 부른다. 2. HTTP HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다. 애플리케이션 레벨의 프로토콜로 TCP/IP위에서 작동한다. HTTP는 어떤 종류의 데이터든지 전송할 수 있도록 설계되어 있다. 이미지, 동영상, 오디오, 텍스트 문서 등 종류를 가리지 않고 전송할 수 있다.Transfer라는 해석 그대로 데이터를 전송하겠다라는 의미로 앞에 Hypertext 가 붙은 이유는 하..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nHhdx/btsFCxxefHq/Np6uMjo10sVttjCcc3u3MK/img.png)
1.1. 네트워크 표준화 ▷ 배경 정보통신기술은 자사의 모델을 중심으로한 통신 위주로 발전 -> 타사 제품 컴퓨터 간의 통신문제 대두 네트워크 사용의 효율성을 높이고 컴퓨터 네트워크 구조를 통일시키는 것이 필요했다. ▷ 1983년 ISO에서 OSI 모형을 제시 ISO (International Standardization Organization): 국제표준화기구 OSI (Open Systems Interconnection) 개방형 시스템간 상호접속: 서로 다른 통신 시스템간에 원활한 통신을 이루기 위해 ISO가 제안한 통신 H/W, S/W에 대한 표준안 1.2. 프로토콜 ▷ 통신에 참여하는 장치들(송신기, 수신기, 중간 노드들)이 효과적인 통신을 위해 지켜야 할 규칙 ▷ 통신 프로토콜 - 통신 원하는 두..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b82Tyl/btsFB8degzl/VNY8lRUVWdV2rynlQ4J0rK/img.png)
1.1. 데이터 통신(Data Communication) Data : text, numbers, images, audio, video, message Communication : the exchange of data Data Commnication : 무선 또는 유선 형태의 전송 매체를 통헤 정해진 규칙(즉, 통신 프로토콜)에 따라 두 장치 간에 데이터로 표현되는 정보를 교환하는 과정 1.2. 데이터 통신 시스템의 기본 특성 - 전달(delivery): 정확한 목적지에 전달, 원하는 장치나 사용자에게 전달. - 정확성(accuracy): 데이터를 정확하게 전달 - 적시성(timeliness): 데이터를 적정 시간 내에 전달 - 파형 난조(jitter): 패킷 도착 시간이 서로 조금씩 달라서(패킷이 고르지..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cypDIg/btsEj69vljG/6HJj9keWPdDmMYl9pSkIAk/img.png)
❓ TCP/IP vs OSI 모델 OSI 모델: 표준 프로토콜을 사용하여 다양한 통신 시스템이 통신할 수 있도록 국제표준화기구에서 만든 개념 모델이다. OSI는 상이한 컴퓨터 시스템이 서로 통신할 수 있는 표준을 제공한다. TCP/IP 모델: 인터넷에서 컴퓨터들이 서로 정보를 주고 받는데 쓰이는 프로토콜의 집합. 인터넷 프로토콜 스위트 (Internet Protocol Suite)라고도 부른다. TCP/IP와 OSI의 차이점은 실무와 이론의 차이이다. OSI 7계층은 참조 모델(reference model)로 사실상 이론적인 개념. 현재의 TCP/IP 계층이 더 실무적인 구조에 가깝다. TCP/IP는 실용적인 프로토콜 모음이고 OSI는 프로토콜 독립적인 개념 모델이다. 즉, OSI는 여러 통신 방식에 대..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/p5w2N/btsEtso0OAV/yA98V6kwWnHh2ALMOipOEK/img.png)
▶︎ API(Application Programming Interface) 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어에서 제공하는 기능을 제어할 수 있게 해주는 인터페이스 애플리케이션 간에 지정된 형식으로 요청과 응답을 할 수 있도록 연결하는 것 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙 응용프로그램에서 소통하기 위한 접점 ▶︎ 인터페이스 상호간에 소통을 위해 만들어진 접점. 사람과 사람, 사람과 사물 또는 기기를 연결하는 것. 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템. 예시) 키보드(사람-컴퓨터), 차키(사람-자동차), 배달 어플(사람-어플) ▷ UI(User Interface) 사용자가 소통하기 위한 접점. 사람(사용자)과 사물 또는 시스템, 기계, 컴퓨..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/RdXub/btsC4qVAysQ/UU7a9E2LllFtHaF7a5yR5k/img.png)
총 6단계 HTML를 파싱 후, DOM트리 구축 CSS를 파싱 후, CSSOM트리 구축 JavaScript 실행 DOM과 CSSOM을 조합하여 렌더트리 구축 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout 단계) 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계) ▶︎ 브라우저의 주요 기능 : 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것 ▶︎ 랜더링 엔진 : 사용자가 선택한 콘텐츠를 표시해주는 소프트웨어 브라우저 렌더링 엔진 크롬 Blink 사파리 Webkit 파이어폭스 Gecko ▶︎ 파싱(Parsing) 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것 문서나 HTML 등 어떤 큰 자료에서 내가 원하는 정보..
- Total
- Today
- Yesterday
- 무한스크롤
- web
- Network
- git
- Masonry 레이아웃
- 졸업프로젝트
- Next.js
- prettier
- 상태관리
- pagination
- react
- zustand
- 빅데이터
- 프로토콜
- eslint
- React Query
- react-query
- Micorosoft
- Firebase
- Tanstack-Query
- State
- 이브와ICT멘토링
- 캡스톤디자인
- AI Challeng for Biodiversity
- Tanstack Query
- 네트워크
- sass
- github
- style-lint
- 핀터레스트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |