인터넷과 HTML

프로토콜과 웹사이트 구조와 VS Code

Linuxpia4U 2023. 3. 21. 22:11
반응형

프로토콜

프로토콜은 컴퓨터나 통신장비 사이에서 메시지를 주고받는 양식과 규칙 체계를 뜻합니다. 인터넷을 이용하는 사용자들 간의 규약, 약속도 프로토콜의 일종입니다.

패킷 전송 방식은 데이터를 일정한 크기로 나누어 전송하여 효율적인 전송을 가능하게 하는 방식입니다. 이때, 나누어진 데이터의 단위를 패킷이라고 부릅니다.

TCP/IP 프로토콜은 TCP와 IP 프로토콜로 이루어져 있으며, TCP는 송신자와 수신자 사이에서 패킷의 주소와 내용을 담당하는 프로토콜이고, IP는 패킷을 목적지까지 보내는 규칙을 정의한 프로토콜입니다. IP 주소는 숫자와 점으로 구성된 12자리의 숫자로 이루어져 있으며, 이는 전 세계적으로 유일한 숫자를 가지게 됩니다.

 

프런트엔드와 백엔드

프런트엔드는 사용자가 웹사이트에 접속했을 때, 사용자에게 보이는 부분을 담당합니다. 이 부분은 웹사이트의 외관적인 모습과 사용자 인터페이스를 담당하며, 사용자가 입력한 정보를 서버로 보내기 전에 검증하고 가공하는 역할을 합니다. 주로 HTML, CSS, JavaScript를 사용하여 웹페이지를 디자인하고, 개발합니다.

반면 백엔드는 사용자가 웹사이트에 접속했을 때, 웹사이트의 데이터 관리와 서버 연동 등의 내부적인 처리를 담당합니다. 이 부분은 웹사이트의 뒷단에서 동작하며, 사용자가 입력한 정보를 받아서 서버에서 처리한 후 결과를 프런트엔드에 전송합니다. 백엔드에서는 데이터베이스, 서버 구성, API 개발 등의 기술이 사용됩니다.

즉, 프론트엔드는 사용자 인터페이스와 디자인을 담당하고, 백엔드는 데이터 관리와 내부 처리를 담당합니다. 두 영역은 각자의 역할을 수행하면서 웹사이트를 완성시키는데, 서로 협력하여 최종적으로 웹사이트를 완성합니다.

 

HTML, CSS 그리고 JavaScript

웹 프론트엔드에서는 HTML, CSS, JavaScript가 동시에 작동됩니다. HTML은 페이지의 제목, 문단, 표, 이미지 연결, 동영상 구현 등을 담당하는 핵심입니다. HTML은 아름답게 꾸미는 것이 아니고 의미적으로 구조를 갖추는 역할을 맡습니다. 실제 화면에서 예쁘게 보이는 것은 CSS에서 담당합니다. 실제 화면에 보이는 방식을 결정합니다. 스타일을 담당하는 스타일리스트 역할입니다. JavaScript는 내용을 변경하고 움직이는 등의 동적인 페이지 관리를 담당합니다. 

 

이 세가지를 구분하면서 유기적으로 연결되게 하기 위해 파일을 따로 관리합니다. 한꺼번에 섞어 코딩을 하면 추후 관리가 어렵습니다.

 

VS Code 설치

Visual Studio와 Visual Studio Code는 다릅니다. Visual Studio Code(VS Code)는 소스 코드 편집기입니다. 마이크로소프트가 개발한 편집기로 매우 다양한 프로그래밍 언어를 관리하고 코딩할 수 있습니다. 앞으로 소개할 웹 페이지는 VS Code를 이용하여 소개할 것입니다.

Visual Studio Code

설치를 위해 https://code.visualstudio.com에 에 접속하여 압축 파일을 다운로드합니다. 압축을 해제하면 설치 파일이 나타납니다. 해당 파일을 클릭하여 설치합니다.

 

사용법은 이어지는 포스트에서 계속됩니다.

반응형

'인터넷과 HTML' 카테고리의 다른 글

[Windows] 파이썬과 git 버전 확인 방법은 무엇입니까?  (4) 2023.08.05
인터넷과 웹앱  (9) 2023.03.21