Section 2. 웹 개발이란?

이번 섹션에 포함된 강의명은 다음과 같다.

^{(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)}

순서	강의명	소요 시간	중요도 (필수crucial/중요important/선택nice to have)
01	인터넷이 어떻게 동작하는가? (5분 이내로 설명) The Internet in 5 minutes	5' 42"	중요 (but 필수는 ×)
02	웹이란? Intro to the Web	6' 01"	중요 (but 필수는 ×)
03	HTTP 요청 및 응답 과정 HTTP Request/Response Cycle	4' 21"	중요 (but 필수는 ×)
04	프론트엔드와 백엔드 Front-end and Back-end	3' 59"	-
05	HTML/CSS/JS의 역할 What do HTML/CSS/JS do?	5' 36"	필수
06	개발자 환경 설정하기 Setting up Our Developer Environment	5' 59"	필수
07	VSCode 테마 설정하기 OPTIONAL VSCode Theme	4' 28"	선택

 

가벼운 개념적인 내용이니 이 1개의 포스팅에 모두 정리하고 넘어갈 예정이다.

 

01. 인터넷이 어떻게 동작하는가?

 

     인터넷 = 어떤 연결된 장치(네트워크)의 묶음. 서로 통신할 수 있는 수많은 기기들의 연결.

                    모든 것들을 가능하게 해주는 ^*인프라_{infrasturcture}

                                        ^{* 인프라: 사회 기반 시설. 각종 생산 활동의 기반이 되는 시설의 효용을 증진시키거나 이용자의 편의를 도모함.}

The "Internet" is Global network of interconnected computers that communicate via TCP/IP. Network of Networks.

해석: 인터넷은 TCP/IP를 통해 소통하는 컴퓨터들이 서로 연결된 글로벌 네트워크이다. 네트워크를 연결한 네트워크.

 

         → 요즘은 웬만한 장치가 그 묶음에 포함된다.

                 ex, 데스크탑 컴퓨터, 노트북, 태블릿, 모바일 장치, 인터넷이 되는 냉장고, 손목시계, 온도 조절기, 비디오 게임 콘솔 등

 

         → 인터넷은 ^**라우팅_routing이라는 물리적 장치를 사용한다.

                       ^{** 라우팅: 데이터를 보내기 위해 최적의 경로를 선택하는 과정}

 

         → 기계, 다른 컴퓨터·장치, 케이블, 해저 케이블, 광케이블, 공적_public 네트워크, 홈 Wi-Fi 네트워크 등 모든 것이 연결

                 ⇒  거대한 웹_Web을 형성.

 

         → 각각의 기기는 'IP 주소'라는 것으로 각각을 식별_identifying한다.

 

 

 

 

 

02. 웹이란?

 

The "World Wide Web(also known as Web)" is an information system where documents and others resources and available over the Internet.

Documents are transferred via HTTP.

"월드 와이드 웹(일명 웹)"은 문서와 다른 리소스들을 인터넷상에서 공유할 수 있는 정보 시스템이다. 문서는 HTTP를 통해 전송된다.

         → 인터넷상의 수많은 문서와 리소스는 URL_{uniform resource locator, 균일 리소스 로케이터}로 식별할 수 있다.

 

         → '웹 브라우저_{web browser}'라는 도구를 사용하여 '웹 사이트_website'를 볼 때, 기본적으로 이 '웹_web'을 사용한다.

                       ^{cf, '브라우저'의 역할: 사용자가 요청한 정보를 웹 페이지에 보기 좋게 표시해줌.}

 

         → 문서와 리소스를 전송하는 방식의 예로는 HTTP_{HyperText Transfer ***Protocol}이 있다.

                             ^{*** protocol: 특정한 의사소통이 이루어지는 방식에 대한 일련의 표준화된 규칙.      ex, TCP, IP, HTTP ...}

 

         → HTTP 또는 HTTPS는 웹이 작동하는 방식이자 소통하는 방식이며, 리소스나 웹 페이지를 불러와 달라고 요청하거나 공유하는 방식이다.

 

         → '웹 서버_{web server}'의 역할은 '웹'을 통해 들어온 사용자의 요청을 충족시키는 것, 사용자에게 어떤 권한이 있는지 확인하는 것(예, 로그인) 등이 있다.

 

         → '클라이언트_client'는 웹 서버에 무언가를 요청하는 장치·컴퓨터. 나 자신 또는 웹 브라우저가 클라이언트가 될 수 있다.

 

 

 

 

 

03. HTTP 요청 및 응답 과정

     

     Google 검색창에 뭔가를 쓰고 검색 → 

     어딘가에 있는 Google 서버로 내 요청이 전송 → 

     요청을 받은 Google 서버는 사용자(즉, 클라이언트)가 필요로 할 내용을 찾아서 응답 → 

     서버의 응답 방식은 어떠한 코드로 되어있어 사용자가 이해할 수 있는 형태가 아님 → 

     웹 브라우저가 이 코드를 받아서 어떤 식으로든 사용자가 이해할 수 있는,

     즉 웹 표준에 맞는 형태로 화면에 적절히 그려내줌. (=렌더링_rendering).

 

 

 

 

 

04. 프론트엔드와 백엔드

     프론트엔드와 백엔드는 레스토랑에서의 상황에 비유하자면 다음과 같다.

손님이 자리에 앉아서 요리를 주문 = 클라이언트가 어떤 요청을 보냄

↓

주문을 주방에 전달 = 서버에 요청 전달

↓

요리사가 주방에서 주문 받은 요리 만듦 = 서버가 요청에 맞는 것을 찾음

↓

만들어진 요리를 웨이터에게 전달 = 요청에 응답

↓

요리를 들고 테이블로 이동 = 코드로 이루어진 응답 전송

↓

요리 먹는 방법 알려줌 = 여러 언어로 된 코드를 웹 브라우저가 (보통) HTML/CSS/JS로 변환해서 읽음

↓

손님이 식사를 함 = 웹 브라우저가 읽어낸 정보를 사용

 

 

 

 

 

05. HTML/CSS/JS의 역할

 

     HTML, CSS, Javascript 이 세 가지 기술은 웹 페이지를 만드는 역할을 하며, 브라우저는 오직 이들만 이해할 수 있다.

     사실은 이 세 가지가 전부는 아니지만, 브라우저가 웹 페이지를 활용하는 과정에서 예상하는 기술은 오직 이들 뿐이다.

 

     이 세 기술은 각각 담당하는 부분이 다르다.

•      HTML: 웹 페이지의 내용을 설명한다. (페이지의 본질)
•      CSS: HTML 요소, 페이지의 내용 설명을 보조한다. (구조와 어떻게 보이는지)
•      Javascript: HTML, CSS의 동작 및 상호작용을 담당한다. (실질적 논리, 동작 구축)

                                                                                       ^{↳ ex, 덧셈, 뺄셈, 곱셈, 나눗셈, 실시간 알림 팝업, 채팅, 자동완성 기능 등}

 

 

 

 

 

06. 개발자 환경 설정하기

     강의에서는 웹 브라우저 Google Chrome과  텍스트 에디터 Visual Studio Code(made by Microsoft)를 사용할 예정이다.

     계속 사용할 도구, 코드의 점검 및 인식, 디버깅을 주로 오늘날 개발자의 표준인 Chrome에 맞춰 진행할 것이다.

     이미 책과 강의를 통해 둘 다 가지고 있기에 나는 다운로드 과정은 생략^^

 

 

   

     기본 단축기 몇 가지! (Windows OS 기준)

•      새 파일 만드는 단축키: Ctrl + N 
•      문서를 만들고 저장하는 단축키: Ctrl + S
•      화면에서 둘 이상의 창으로 화면 분할하는 단축키: Windows 키 + 방향키

 

 

 

 

 

07. VSCode 테마 설정하기

왼쪽 아래 설정에서 많은 것들을 바꿀 수 있다. (단축키 Ctrl + ,(쉼표))

 

 

설정할 수 있는 것들 예시 (글꼴, 폰트 크기, 폰트 굵기 등)

설정의 검색창에 '테마'를 검색하면 아래쪽 Workbench: Color Theme에서 원하는 테마로 바꿀 수 있다. (Visual Studio Code 홈페이지에서 다른 것을 다운로드 받을 수도 있다)