WEB - DOM(Document Object Model)?

서론 웹을 공부하다 보면 필연적으로 DOM이라는 말을 많이 듣게 됩니다. 프로그래밍 언어로 DOM을 접근하고 다루는 것이 필수적인 Web 개발자의 소양 중 하나입니다. 본문에서는 DOM에 대한 기본 지식을 알아보도록 하겠습니다. Whis is DOM? DOM(Document Object Model) 직역하자면 문서 객체 모델입니다. HTML , XML로 작성한 문서를 어떠한 기준에 의해 구조화된 모델로 표현한 데이터를 DOM이라고 합니다. 이게 뭔 말이야? HTML이나 XML은 문자들로 이루어진 문서입니다. 예를 들어 아래와 같은 HTML 문서가 있다고 합시다. DOM이 뭔데요 HTML 형식의 문서입니다. 단순히 문자들로만 이루어져 있습니다. 웹 브라우저를 통해 웹페이지를 랜더링 하는 과정은 HTML형식..

2022.05.11

컴퓨터/WEB

Commnet

WEB - HTTP 프로토콜의 특징(Conectionless , Stateless)

서론 오늘날 HTTP 프로토콜을 기반으로 하는 수많은 서비스들이 존재합니다. HTTP를 이용하여 서버와 클라이언트가 통신을 하게 되면 몇 가지 특징들이 존재하게 됩니다. 이러한 특징과 단점들을 보완하고자 쿠키, 세션 등 다양한 기술들이 발전하게 되었습니다. 본문에서는 HTTP 프로토콜의 특징을 조금 더 자세히 알아보는 시간을 가져봅시다. 비연결성(Conectionless)과 무상태(Stateless) - HTTP 프로토콜의 가장큰 특징 본질적으로 HTTP 프로토콜은 하나의 서버와 다수의 클라이언트와의 효율적인 통신을 위한 통신규약입니다. 비연결성 클라이언트와 서버가 한번의 요청과 응답을 한 후 연결이 끊어집니다(유지하지 않습니다.) 무상태 비연결성의 특징 때문에 서버는 클라이언트의 상태를 식별할 수 없습..

2022.03.14

컴퓨터/WEB

Commnet

WEB - HTTP란 ? (Hyper Text Transfer Protocol)

HTTP HyperText Transfer Porotocol의 약자인 HTTP는 W3(World wide web)에서 정보를 주고받기 위한 통신 규약입니다. 간단하게 설명하자면, 서버와 클라이언트 간의 데이터를 주고받는 방법에 대한 규칙을 정해놓은 것입니다. 요청과 응답 그리고 HTTP Web을 접하다 보면 요청(requests)과 응답(responses)이라는 말을 많이 접합니다. 지난 포스트들에서 언급한 바와 같이 클라이언트가 서버에게 요청(request)을 하면 서버는 응답(responses)하여 서버와 사용자 간의 데이터를 주고받을 수 있게 됩니다. 여기에 HTTP의 개념을 적용하여 다시 설명하자면 다음과 같습니다. HTTP 프로토콜을 이용해서 클라이언트와 서버는 요청/응답을 할 수 있습니다. 이..

2022.03.04

컴퓨터/WEB

Commnet

WEB - 서버에 요청하는 방법 ( GET 과 POST )

서론 사용자가 웹브라우저를 통해 서버로부터 어떠한 요청을 하는 방식에는 여러 가지 방식이 있습니다. 본문에서는 가장 대표적으로 서버에 요청하는 2가지 방식 GET과 POST방식에 대해서 설명하고 이해하는 시간을 가지도록 하겠습니다. 다양한 요청 방식의 이유 서버에게 다양한 정보를 요청을 할 때는 그냥 단순히 서버에 어떤 정보를 보내주세요라는 경우도 많지만, 아이디나 비밀번호 개인정보 등 외부로의 노출을 최소화해야 되는 경우도 많습니다. 본문에서 기술하는 내용이 모든내용은 아닙니다. 다만, 위와같은 극단적 예시처럼 노출이 되는 요청과 , 노출이 되지 않는 요청 2가지 요소에 대해서 알아보도록 합시다. GET 요청 웹페이지를 방문하다 보면 사용자는 도메인 주소 뒤에 모르는 문자로 작성되어 있는 글들을 볼 수..

2022.02.24

컴퓨터/WEB

Commnet

WEB - 웹페이지의 생성 과정

서론 - 웹페이지의 빌드 과정을 생각해봅시다. WEB 세계를 공부하고 있는 독자들이라면 단순하게 서버로부터 HTML을 웹 브라우저가 읽어와서 웹페이지를 만든다고 알고 있을 것입니다. 이과정은 상당히 많은 단계를 거쳐서 진행됩니다. 본문에서는 이 서버로부터 HTML문서가 어떻게 웹브라우저를 통해 제공되는지 좀 더 자세히 알아보도록 합시다. Critical Rendering Path - CRP 웹 브라우저가 서버로 부터 HTML을 가져와 화면에 표시되는 이 과정을 CRP이라고 합니다. 과정을 구체화 하자면 다음과 같습니다. DOM(Document Object Model) 트리 구축 CSSOM(Cascading Style Sheets Object Model) 트리 구축 Render Tree 구축 레이아웃 구축..

2022.02.21

컴퓨터/WEB

Commnet

WEB - 웹과 표준 그리고 W3C

거대한 WEB 생태계 오늘날 인터넷과 WEB은 지금 이 글을 읽고 있는 모두에게 가깝고 친숙한 존재입니다. 4차 산업혁명을 거치며 다양한 빅데이터, 사물인터넷 등의 발달로 점점 더 인터넷과 WEB은 삶에서 점점 더 비중이 커지고 있습니다. 그러면서 자연스럽게 인터넷과 WEB의 생태계 또한 커지고 있습니다. 이 거대한 인터넷과 WEB 생태계가 이렇게 거대해질 수 있었을까요? 법과 질서 그리고 표준 우리는 법안에서 삶을 살아가고 있습니다. 일종의 표준 또는 규약 같은 테두리가 주어져 있는 셈이죠. 인터넷과 WEB 또한 마찬가지 입니다. 이 거대한 생태계 또한 우리의 삶처럼 하나의 사회입니다. 수많은 사람들이 사용하는 공간인 셈이죠. 이 인터넷과 WEB의 생태계를 안정적으로 유지하기 위해서는 삶과 마찬가지로 ..

2022.02.08

컴퓨터/WEB

Commnet

WEB - 웹 프로그래밍 그리고 백엔드와 프론트엔드

웹 프로그래밍 지난 포스트에서 원시적인 웹 서비스 구조에 대하여 알아보았습니다. 이런 원시적인 웹 서비스의 형태는 서버에서 저장된 HTML형태의 정보를 사용자에게 전달해주는 역할을 하고 있습니다. 하지만 현대적인 웹 프로그래밍 구조는 약간의 차이가 있습니다. 대략적인 구조를 보자면 아래와 같을 것입니다. 그림처럼 오늘날의 웹 서비스 구조는 사용자와 서버 간의 일방적인 요청과 제공이 아니라 서로 정보를 주고받으면서 개발자들에 의해 만들어진 프로그램에 의해 다양한 형태로 상호 간에 저장과 가공을 하게 됩니다. 이런 웹 서비스 구조의 영역이 거대해지면서 프런트엔드 / 백 엔드라는 구분이 생기기 시작했습니다. 백 엔드 그림처럼 서버 사이드 쪽 프로그래밍 영역을 대부분 백엔드 영역이라고 일컫습니다. 이런 백 엔드..

2021.09.09

컴퓨터/WEB

Commnet

WEB - 원시적인 웹 서비스 구조

원시적인 웹 서비스의 구조 가장 기본적인 웹서비스의 구조가 뭘까요? 서버와 클라이언트에 대해서 다시 한번 정리하자면 아래와 같습니다. 서버 : 클라이언트의 요청에 응답한다. 클라이언트 : 서버에게 원하는 정보를 요청한다. 이렇게 서버와 클라이언트의 응답과 요청을 통해 웹서비스가 동작하게 됩니다. 이게 바로 웹서비스의 가장 기초적이고 핵심이 되는 구조입니다. 순수하게 HTML언어만을 전달하는 형태의 웹 서비스는 아래와 같이 동작합니다. 서버에서는 HTML 언어로 된 문서들을 보관하고 있습니다. 클라이언트는 서버에게 필요한 HTML 문서를 요청합니다. 서버는 요청받은 HTML 문서를 클라이언트에게 제공해 줍니다. 클라이언트가 가지고 있는 웹 브라우저를 통해 HTML 문서를 번역하여 형식에 맞게 출력하여 보여..

2021.08.16

컴퓨터/WEB

Commnet

WEB - 웹의 구조

웹의 기술적 개념 오늘날 인터넷과 웹 너무나도 익숙한 단어이면서 21세기에 살고 있는 사람들이라면 모두가 다들 사용하고 있을 것입니다. 보통 인터넷과 웹을 동일선상에 두고 말을 많이 하며, 흔히 인터넷 서핑을 한다 또는 웹 서핑을 한다라는 말을 많이 합니다. 정리하자면 둘 다 큰 범위에서는 맞는 말입니다. 다시 한번 인터넷과 웹을 정의하자면 아래와 같습니다. 인터넷 거대한 통신망으로 정보들이 지나갈 수 있게 만든 통신 시스템 웹 인터넷이라는 거대한 통신망을 사용하여 데이터들을 저장하고 보여줄 수 있는 인터넷 통신망을 이용한 서비스 결국 지금 이 글을 보시는 여러분과 같이 인터넷이라는 통신시스템을 통해 서버로부터 데이터를 가져와 클라이언트 또는 브라우저(크롬, 에지 등)이라는 창구를 통해 데이터를 볼 수 ..

2021.08.14

컴퓨터/WEB

Commnet

인터넷에 올라온 최초의 웹

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 저번 글에 이어서 오늘은 1990년 팀 버너스리가 만들어 인터넷상에 최초로 올라온 웹페이지에 대해 알아보겠습니다. The First website - info.cern.ch 더보기 역사의 시작점 지난 글에서 1990년대 팀 버너스리에 의해 웹이 등장하게 되었다고 했습니다. 사실 이 글을 쓰고 있는 지금으로 부터 불과 30년 전에 일입니다. 그리고 지금도 우리는, 우리가 사용하고 있는 이 웹기술의 역사의 시작점을 직접 찾아가서 확인 할 수 있습니다. 웹 기술을 공부하기에 앞서, 직접 최초의 웹사이트를 방문해 보는것은 어떨까요? info.cern.ch 방문하기 웹페이지를 ..

2020.11.21

컴퓨터/WEB

Commnet