1. 웹 개발 기초

1.1 웹(Web)이란?

웹은 World Wide Web(WWW)의 줄임말로, 전 세계적으로 분산된 수많은 문서와 리소스들이 서로 연결되어 있는 거대한 정보의 네트워크를 의미합니다. 일반적으로 웹 페이지라고 불리는 문서 형식으로 제공되며, HTML이라는 마크업 언어로 작성됩니다. 우리가 흔히 사용하는 웹 브라우저(Chrome, Safari, Firefox, Edge 등)를 통해 이러한 웹 페이지를 열어 볼 수 있습니다.

초창기 웹 브라우저(1990년, 팀 버너스 리)는 HTML(1991년) 리더기였습니다. 약 20개의 태그만 지원하는 단순한 형태였으며, 이미지조차도 별도의 링크를 통해 보여주었습니다. 그러나 웹은 빠르게 발전하였습니다. 그다음 나온 언어가 CSS(1996년)입니다. CSS는 HTML을 꾸며주는 역할을 합니다. JavaScript(1996년, 브렌던 아이크)는 모카라는 이름으로 처음 넷스케이프 네비게이터2에 탑재되었습니다. 이후 모카는 라이브스크립트로 이름이 바뀌었고, 현재의 자바스크립트로 발전하게 되었습니다.

이렇게 HTML, CSS, JavaScript가 웹을 이루는 가장 기초적인 구성 요소입니다.

기술	역할	비유
HTML	웹 콘텐츠의 의미와 구조 정의	건물의 뼈대
CSS	웹페이지의 모양/표현 담당	건물의 인테리어
JavaScript	웹페이지의 기능/동작 담당	건물의 전기/기계 시스템

웹은 단지 이 3개로 구성되어 있진 않습니다. 이미지, 비디오, 오디오, 폰트, 스타일시트, 스크립트 파일 등 다양한 리소스들이 웹을 이루고 있습니다. 이러한 리소스들은 웹 서버에 저장되어 있으며, 웹 브라우저를 통해 사용자에게 전달됩니다.

1.2 인터넷(Internet)이란?

인터넷은 글로벌하게 연결된 컴퓨터 네트워크의 시스템을 의미합니다. 인터넷은 우리가 사용하는 공유기나 랜선, 스위치, 서버 등의 하드웨어로 이뤄져 있고, 그 하드웨어를 통해 웹, 이메일, 파일 전송, 채팅 등 다양한 서비스를 이용할 수 있습니다.

Web !== Internet

웹은 인터넷과 다릅니다. 웹은 인터넷을 기반으로 한 수많은 서비스 중 하나입니다. 간단히 말해서, 인터넷은 인프라(기반 구조)이며, 웹은 그 위에서 동작하는 서비스 중 하나입니다.

웹은 HTTP(HyperText Transfer Protocol)라는 프로토콜을 사용하여 정보를 전송합니다. 프로토콜은 컴퓨터나 장치 간에 데이터를 주고받는 전송 규칙 또는 약속을 의미합니다.

예를 들어 실생활에서 우리는 택배를 보낼 때, 집 밖에 물건을 놓고 하늘에 '택배 가져가세요!'라고 외치지 않습니다. 택배 회사의 규칙에 따라 택배를 보내게 됩니다. 이때 택배 회사의 규칙이 바로 프로토콜이라고 할 수 있습니다.

웹만 인터넷 위에 있는 것이 아닙니다. 이메일, FTP(파일 전송), SSH(원격 제어) 등 다양한 서비스들이 인터넷 위에 존재합니다. 이들은 각각 다른 프로토콜을 사용합니다.

인터넷 위에 올라가 있는 여러 프로토콜

이름	프로토콜
WWW(웹)	HTTP/HTTPS
FTP(파일전송)	FTP/SFTP
Email(이메일)	SMTP/POP3/IMAP

2. 웹의 동작

우리는 웹 브라우저로 웹 페이지를 열어 볼 수 있습니다. 웹 브라우저는 사용자가 입력한 주소(URL)를 웹 서버에 요청하고, 서버는 요청받은 데이터를 조회하여 사용자에게 전달합니다. 이때 사용자가 보는 웹 페이지는 HTML, CSS, JavaScript와 이미지, 비디오, 오디오 등 다양한 리소스들로 이루어져 있습니다.

2.1 프론트엔드와 백엔드

프론트엔드는 사용자 인터페이스(UI)를 다루며, 백엔드는 서버와 데이터 처리를 다룹니다.

프론트엔드 개발자는 HTML, CSS, JavaScript를 사용하여 사용자가 웹 애플리케이션과 상호작용하고 정보를 볼 때 필요한 모든 것을 다룹니다. 백엔드 개발자는 선호하는 언어를 선택하여 서버와 데이터 처리를 다룹니다.

2.1.1 프론트엔드 개발자

프론트엔드 개발자는 주력 언어로 3가지를 다루게 됩니다. HTML, CSS, JavaScript입니다. 이는 웹 브라우저가 이해할 수 있는 언어가 3개이기 때문입니다. 실무에서 많이 사용하는 React나 Vue와 같은 프레임워크도 결국 JavaScript를 기반으로 하고 있습니다.

이런 언어를 사용하여 사용자가 보는 화면을 만들고, 사용자가 클릭하거나 스크롤할 때의 동작을 구현합니다. 또한 서버에서 받아온 데이터를 화면에 보여주는 역할도 합니다.

어떤 것을 어느 시기에 배워야 하는지 아래 로드맵을 참고해 주세요.

프론트엔드 개발자 로드맵

2.1.2 백엔드 개발자

백엔드 개발은 프론트엔드와는 다르게 사용자에게 보이지 않는 부분을 다룹니다. 웹 애플리케이션의 동작 로직, 데이터 관리, 사용자 인증 및 보안, 데이터베이스와의 상호작용 등을 처리합니다. 프론트엔드와는 다르게 다양한 프로그래밍 언어(Python, Java, C…)가 있어 개발자 취향이나 프로젝트 특성에 맞는 언어를 사용할 수 있습니다.

프로그래밍 언어가 얼마나 많고, 각 언어의 특징이나 점유율을 보고 싶다면 아래 링크를 확인해 주세요.

가장 인기 있는 언어 언어의 특징과 점유율

언어를 선택하였다면 각 언어의 웹 개발 프레임워크를 선택해야 합니다. 백엔드는 참 선택할 것이 많죠? 이렇게 웹 프레임워크까지 선택하였다면 이제 프론트엔드와 어떤 것을 주고받을지 기획하고, 개발을 시작하면 됩니다.

백엔드 개발자는 백엔드만 알아서는 안 됩니다. 프론트엔드와 백엔드는 상호작용하며 동작하기 때문입니다. 백엔드 개발자는 프론트엔드의 동작 방식을 이해하고 있어야 합니다. 아래 백엔드 개발자 로드맵을 참고해 주세요.

백엔드 개발자 로드맵

이렇게 백엔드를 개발하였다면 사용자 요청에 응답할 수 있게 된 것입니다. 사용자가 이미지를 요청하면 이미지를 보내주고, 사용자가 로그인을 요청하면 로그인을 처리해주며, 사용자가 상품을 구매하면 결제를 처리해주는 것입니다. 이렇게 사용자의 요청에 응답하는 것을 서버라고 합니다.

서버가 준 데이터는 개발자 도구(F12)의 네트워크 탭에서 확인할 수 있습니다.

3. HTML, CSS, JavaScript 소개

앞서 소개한 이미지를 다시 한번 보겠습니다. HTML은 캐릭터의 이미지가 조각조각 나 있고, 네모로 각져있는 것을 볼 수 있습니다. 구성요소만 있을 뿐이죠. CSS는 이 이미지를 올바른 위치에 배치하고, 색상을 입히고, 크기를 조절하는 역할을 합니다. 이제 예쁜 케릭터가 되었습니다. JavaScript는 이 이미지를 움직이게 하거나, 클릭했을 때 반응하게 하는 역할을 합니다.

3.1. HTML

HTML은 HyperText Markup Language의 줄임말로, 웹 콘텐츠의 의미와 구조를 정의하는 마크업 언어입니다. HTML은 프로그래밍 언어가 아닌 콘텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 태그를 사용하여 문서의 구조를 정의합니다. 확장자는 .html이며 이 파일 안에는 HTML, CSS, JS를 모두 작성할 수 있습니다. 아래 위니북스 예시를 살펴보세요.

<h1>WeniVooks</h1>
<p>위니북스에서는 HTML, CSS, JavaScript를 바로 실행시켜 볼 수 있습니다.</p>

<h1>WeniVooks</h1>
<p>위니북스에서는 HTML, CSS, JavaScript를 바로 실행시켜 볼 수 있습니다.</p>

3.2. CSS

CSS는 Cascading Style Sheets의 줄임말로, 웹페이지의 모양/표현을 담당하는 스타일 시트 언어입니다. HTML이 웹페이지의 구조를 정의한다면, CSS는 이 구조를 꾸며주는 역할을 합니다. CSS는 HTML 문서 내부에 작성할 수도 있고, 별도의 CSS 파일로 분리하여 작성할 수도 있습니다. 분리한다면 확장자는 .css입니다. 아래 위니북스 예시를 살펴보세요. 위와 똑같은 HTML 구성요소를 CSS로 꾸민 것인데 느낌이 다르죠? CSS는 아래처럼 단지 구성요소를 꾸미는 것이 아니라 요소의 배치도 함께 다룹니다.

<h1>WeniVooks</h1>
<p>위니북스에서는 HTML, CSS, JavaScript를 바로 실행시켜 볼 수 있습니다.</p>

<h1>WeniVooks</h1>
<p>위니북스에서는 HTML, CSS, JavaScript를 바로 실행시켜 볼 수 있습니다.</p>

body {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0;
  background-color: #4267b2;
  color: white;
}
p {
  margin-top: 20px;
  color: green;
  text-align: center;
}

body {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0;
  background-color: #4267b2;
  color: white;
}
p {
  margin-top: 20px;
  color: green;
  text-align: center;
}

3.3. JS(JavaScript)

JavaScript는 웹페이지의 기능/동작을 담당하는 프로그래밍 언어입니다. HTML과 CSS로는 웹페이지의 모양과 구조를 정의할 수 있지만, 사용자와 상호작용하거나 동적인 기능을 추가하기 위해서는 JavaScript가 필요합니다. JavaScript는 HTML 문서 내부에 작성할 수도 있고, 별도의 JS 파일로 분리하여 작성할 수도 있습니다. 확장자는 .js입니다. URL 창에 about:blank를 입력하고 F12를 눌러 개발자 도구를 열고 콘솔 탭을 열어 아래 코드를 실행해 보세요. 첫 번째 입력은 넓이 200과 높이 200을 입력해 보세요.

const width = prompt('이미지의 넓이를 입력하세요.');
const height = prompt('이미지의 높이를 입력하세요.');
 
document.write(
  `<img width=${width} height=${height} src="https://weniv.link/static/img/2_chilli.svg" alt="칠리">`,
);

const width = prompt('이미지의 넓이를 입력하세요.');
const height = prompt('이미지의 높이를 입력하세요.');
 
document.write(
  `<img width=${width} height=${height} src="https://weniv.link/static/img/2_chilli.svg" alt="칠리">`,
);

4. 개발 환경 설정

개발 환경은 개발을 위해 필요한 도구와 환경을 의미합니다. 메모장으로도 개발을 할 수 있지만, 빠르고 쉬운 개발 환경을 설정하면 개발 속도를 높이고 효율적으로 개발할 수 있습니다. 이번 장에서는 웹 개발을 위해 필요한 도구와 환경을 설정해 보겠습니다.

4.1 코드 편집 도구: VSCode(Visual Studio Code)

코드를 작성하고 편집하는 도구로, 가장 인기 있는 코드 편집기 중 하나입니다. 확장 기능을 통해 다양한 언어와 프레임워크를 지원하며, 자동 완성, 코드 힌트, 디버깅, Git 등 다양한 기능을 제공합니다. 특히 코파일럿(Copilot)의 등장으로 코딩을 더 쉽고 빠르게 할 수 있습니다.

VSCode 말고도 Sublime Text, Atom, WebStorm 등 다양한 코드 편집기가 있지만, VSCode가 가장 많은 개발자들이 사용하고 있습니다. 가장 많은 개발자들이 사용하기 때문에 다양한 확장 기능을 Extension으로 제공받을 수 있습니다.

Visual Studio Code - Code Editing. Redefined

4.1.1 확장 도구(Extension)

VSCode를 설치하면 왼쪽 사이드바에 확장(Extensions) 아이콘이 있습니다. 여기서 다양한 확장 기능을 설치할 수 있습니다. 아래는 웹 개발을 위해 유용한 확장 기능 몇 가지입니다. 이것 말고도 실제 실무에서는 다양한 수십 가지의 확장 기능을 설치하여 사용합니다.

Prettier - Code formatter
- ctrl + , → Default formatter 설정 및 format on save 설정
- 적용이 안 될 때는 Ctrl + , 혹은 File > Preferences > Settings 를 선택해 설정에 진입한다. 설정 중 formatter 를 입력해 Editor: Default Formatter 를 찾아 Prettier - Code formatter를 선택한다. https://technote.kr/384
Prettier - Code formatter - Visual Studio Marketplace
Live Server

라이브 서버(Live Server)는 VSCode에서 HTML 파일을 작성할 때 편리한 기능을 제공합니다.
Live Server - Visual Studio Marketplace

핸드폰에서도 확인하고 싶어요!

핸드폰과 PC의 동일한 와이파이로 연결되어 있어야 합니다.

라이브서버mac.png

라이브서버window.png

기타
vscode-icons
vscode-icons - Visual Studio Marketplace
indent-rainbow
indent-rainbow - Visual Studio Marketplace
Gitmoji
Gitmoji - Visual Studio Marketplace
Ayu : Ayu Mirage Bordered
Ayu - Visual Studio Marketplace
Power Mode
Power Mode - Visual Studio Marketplace

4.2 웹브라우저: Chrome

수업에서 사용하는 웹 브라우저는 Chrome입니다. Chrome은 가장 많은 사용자를 보유하고 있으며, 개발자 도구가 가장 잘 되어 있습니다. 개발자 도구를 통해 웹 페이지의 HTML, CSS, JavaScript를 확인하고 수정할 수 있습니다.

Chrome 웹브라우저

4.3 개발자 도구

개발자 도구는 웹 페이지의 HTML, CSS, JavaScript를 확인하고 수정할 수 있는 도구입니다. Chrome에서는 F12 키를 눌러 개발자 도구를 열 수 있습니다. 개발자 도구를 통해 웹 페이지의 요소를 확인하고 수정할 수 있으며, 네트워크, 콘솔, 소스, 성능 등 다양한 탭을 통해 웹 페이지의 동작을 확인할 수 있습니다.

개발자도구	Window	MacOS
단축키	Ctrl+Shift+I / F12	Cmd + Opt + I / F12

HTML/CSS 베이스캠프

웹 기초와 개발환경 설정