프론트엔드 개발자가 알아야 할 CS 지식(Web)

박찬영·2023년 5월 10일
1
post-thumbnail

📚 CS


CS는 Computer Science의 약자로, 컴퓨터와 컴퓨터 시스템의 이론과 응용을 다루는 학문 분야입니다.


📗 웹 브라우저 동작 방식

📜 서버와 클라이언트

서버(Server)와 클라이언트(Client)는 인터넷에서 컴퓨터끼리 통신할 때 사용되는 개념입니다

서버는 인터넷에 연결된 컴퓨터 중에서, 다른 컴퓨터들이 사용할 수 있는 파일이나 정보를 저장하고, 다른 컴퓨터들이 요청하면 그것을 제공하는 컴퓨터입니다. 쉽게 말해, 서버는 공유하는 파일이나 정보를 저장하고, 다른 컴퓨터들이 그것을 사용할 수 있도록 제공하는 컴퓨터라고 생각하면 됩니다.

반면, 클라이언트는 인터넷에 연결된 컴퓨터 중에서, 서버에 접속하여 파일이나 정보를 요청하고, 그것을 받아서 사용하는 컴퓨터입니다. 쉽게 말해, 클라이언트는 다른 컴퓨터에 있는 파일이나 정보를 요청하고, 그것을 받아서 사용하는 컴퓨터라고 생각하면 됩니다.

예를 들어, 인터넷에서 웹 사이트를 보려면 웹 사이트가 저장된 서버에 접속해야 합니다. 사용자가 브라우저를 열고 웹 사이트의 주소를 입력하면, 사용자의 컴퓨터는 해당 웹 사이트가 저장된 서버에 접속하여 웹 사이트를 요청합니다. 서버는 해당 웹 사이트의 파일을 사용자의 컴퓨터로 보내줍니다. 사용자의 컴퓨터는 그 파일을 받아서 브라우저에서 웹 사이트를 보여줍니다.

📜 HTTP

HTTP는 인터넷에서 데이터를 주고받는 방법 중 하나입니다.

쉽게 말해, 인터넷에서 정보를 주고받을 때, 그 정보를 어떻게 주고받을지에 대한 약속이라고 생각하면 됩니다.

HTTP는 웹 브라우저와 웹 서버 간의 통신에 사용됩니다. 예를 들어, 사용자가 인터넷에서 웹 페이지를 보려고 할 때, 사용자의 컴퓨터는 웹 서버에 HTTP 요청을 보내서 해당 웹 페이지의 내용을 받아옵니다. 그리고 해당 웹 페이지를 사용자의 브라우저에 표시합니다.

HTTP 요청은 "GET", "POST", "PUT", "DELETE" 등의 방식으로 이루어집니다. 예를 들어, "GET" 요청을 보내면 해당 URL에 해당하는 웹 페이지를 요청하고, 서버는 해당 웹 페이지를 사용자의 컴퓨터로 전송합니다. "POST" 요청을 보내면, 사용자가 입력한 정보를 서버에 전송하여 처리할 수 있습니다.

📜 웹 브라우저의 구조

  1. 사용자 인터페이스(UI)
    사용자 인터페이스는 웹 브라우저에서 사용자가 조작할 수 있는 부분입니다. 주소 표시줄, 뒤로/앞으로 가기 버튼, 북마크, 새로고침 버튼 등이 대표적인 예입니다.

  2. 브라우저 엔진
    브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 상호작용을 관리합니다. 브라우저 엔진은 HTML과 CSS를 파싱하고, 렌더링 엔진으로부터 요청을 받아 처리합니다.

  3. 렌더링 엔진
    렌더링 엔진은 HTML과 CSS를 이용하여 웹 페이지를 브라우저 화면에 표시하는 역할을 합니다. 렌더링 엔진은 HTML 문서의 구조를 파악하고, CSS로 스타일을 적용한 후, 이를 브라우저 화면에 표시합니다.

📜 HTML

HTML은 Hyper Text Markup Language의 약자로, 웹 페이지를 만들 때 사용하는 언어입니다. HTML은 텍스트 문서를 작성하듯이 태그를 이용해 내용을 작성하며, 이를 브라우저가 읽어서 웹 페이지를 표시합니다.

HTML 태그는 <와 "로 묶인 단어로 이루어져 있습니다. 예를 들어, <p>태그는 문단(paragraph)을 만드는 태그입니다. <h1> 태그는 큰 제목을 만드는 태그이며, <img> 태그는 이미지를 표시하는 태그입니다.


📗 쿠키와 세션

📜 쿠키

쿠키(Cookie)는 사용자의 컴퓨터에 저장되는 작은 데이터 파일입니다.

서버는 쿠키를 생성하여 사용자의 브라우저에 전송하고, 브라우저는 이를 저장합니다. 이후, 같은 서버에 요청을 보낼 때마다 브라우저는 저장된 쿠키를 서버에 전송합니다. 쿠키를 사용하면, 서버는 사용자를 식별하고, 사용자의 상태를 유지할 수 있습니다. 예를 들어, 쇼핑몰 사이트에서 로그인한 사용자의 정보를 저장하는데에 쿠키를 사용할 수 있습니다.

하지만 쿠키에는 몇 가지 단점도 있습니다. 쿠키는 사용자의 컴퓨터에 저장되기 때문에, 사용자가 다른 컴퓨터나 다른 브라우저를 사용할 때에는 이전에 저장된 쿠키를 사용할 수 없습니다. 또한, 쿠키는 사용자의 개인정보를 저장하기 때문에 보안에 취약할 수 있습니다.

📜 세션

세션(Session)은 쿠키와 마찬가지로 사용자의 상태를 유지하는데에 사용되지만, 쿠키와는 다르게 서버 측에서 관리됩니다.

서버는 각각의 사용자에게 고유한 세션 ID를 부여하고, 이를 사용하여 각각의 세션을 구분합니다. 사용자가 로그인하면, 서버는 해당 사용자에 대한 정보를 세션에 저장하고, 이후에 같은 사용자로부터 요청이 들어올 때마다 해당 세션을 참조하여 사용자의 상태를 유지합니다.

세션은 쿠키와 달리 사용자의 개인정보가 서버에 저장되기 때문에, 보안성이 높습니다. 또한, 사용자가 다른 브라우저나 컴퓨터를 사용해도 이전의 세션 정보를 사용할 수 있기 때문에, 쿠키에 비해 더욱 유연하게 상태를 유지할 수 있습니다.

profile
오류는 도전, 코드는 예술

0개의 댓글