2. 웹 개발이란?

nnoobbaagguu·2022년 11월 4일

5분 뒤의 인터넷

💡 인터넷이 어떻게 동작하는지 high-level에서 대략적으로 살펴본다.

인터넷은 기본적으로 연결된 장치들의 묶음일 뿐이다. → 글로벌 네트워크의 네트워크

인터넷은 모든 것을 가능하게 하는 인프라이다. → 기계, 컴퓨터, 장치, 케이블, 해저 케이블, 광케이블, 시립 네트워크, 홈 Wi-Fi 네트워크 등 모든 것이 연결되어 이메일, 월드 와이드 웹, 파일 공유, 온라인 게임, 스트리밍 서비스와 같은 서비스를 가능하게 한다.

웹이란?

💡 웹이 무엇인지 high-level에서 대략적으로 살펴본다.

World Wide Web으로 알려진 Web은 인터넷을 통해 문서와 리소스를 공유할 수 있는 정보 시스템이다.

Web으로 공유하는 리소스와 문서들은 URL, Uniform Resource Locator으로 식별된다.

인터넷은 Web 이상의 역할을 하는데, 예를 들면 스트리밍 서비스와 이메일이 있다.

Web의 정보 전송 방식에는 HTTP, HyperText Transfer Protocold이 있다.

HTTP는 리소스나 웹 페이지를 요청하고 공유하는 방식의 기초가 된다.

클라이언트가 서버에 HTTP 요청(request)를 보내면, 서버는 요청을 분석하고 클라이언트에게 HTTP 응답(response)합니다.

요청/응답 주기

서버는 클라이언트가 요청(request)을 보내면, 우리가 일반적으로 인식하는 웹 페이지의 모습이 아닌, 브라우저가 인식할 수 있는 코드를 통해 클라이언트에게 응답(response)한다.

브라우저의 역할은 사람이 인식할 수 있도록 HTTP 응답을 통해 받은 코드(HTTP, CSS, JavaScript)를 가져와 렌더링하는 것이다.

프런트 엔드(Front-End)와 백 엔드(Back-End)

클라이언트에서 서버로 요청을 보내면, 서버는 클라이언트가 원하는 것이 뭔지, 권한이 있는지, 로그인 되어 있는지 등을 알아내기 위해 클라이언트에게 응답을 보내기 전에 코드를 실행한다. → 백 엔드

그 다음에 서버는 HTML, CSS, JavaScript 형태로 클라이언트에 응답을 보낸다. → 프론트 엔드

HTML/CSS/JS의 역할은 무엇인가?

👉 The purple dino danced.

HTML, CSS, JavaScript는 웹 페이지를 만드는 역할을 한다. → 브라우저가 이해하는 유일한 언어

dino → 명사 → HTML → 웹 페이지의 내용

purple → 형용사 → CSS → HTML 요소인 웹 페이지의 내용 설명을 보조(글꼴 크기를 변경하고, 테두리를 만들거나 음영을 줌)

danced → 동사 → JavaScript → 웹 페이지를 동작하게 함(웹 페이지의 실질적인 논리, 동작을 구축)

개발자 환경 설정하기

웹 브라우저 개발의 표준인 Google Chrome을 설치한다.

0개의 댓글