[WEB] 2. 웹 개발이란?

11. 섹션 주제

https://www.canva.com/design/DAD-t74BeDA/kYaUhDPSBh57hi4xE8AQNQ/view?utm_content=DAD-t74BeDA&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton 

 

 

https://trello.com/b/0PVRE1XQ/web-developer-bootcamp

Web Developer Bootcamp

 

12. 5분 뒤의 인터넷

자, 인터넷 작동 방식에 대한 높은 수준의 개관으로 시작하죠 아주 높은 수준이 될겁니다 

 

여기서 확실한 질문은 인터넷이 뭐냐는 겁니다 

기본적으로 인터넷은 연결된 장치 묶음일 뿐입니다 그리고 오늘날에는 모든 장치가 그 묶음에 포함됩니다 데스크탑 컴퓨터, 노트북 태블릿, 모바일 장치 인터넷이 가능한 멋진 냉장고도 있죠 거기에 손목 시계, 온도 조절기 비디오 게임 콘솔 등 수많은 장치들이 있습니다 전 세계에 수십억 개는 있겠네요 이 장치들은 어떻게 서로 소통할까요? 어떻게 이 네트워크에 편입될까요? 

 

무척 복잡한 질문이지만 간단한 예부터 시작해 보겠습니다 컴퓨터가 두 대뿐이라면 어떨까요? 내가 집에 있는데 친구가 놀러왔다고 생각해 봅시다 

 

둘 다 컴퓨터가 있고 게을러서 평범한 대화는 싫어해서 마우스로 대화하려고 합니다 그래서 이렇게 하기로 합니다 컴퓨터를 서로 연결하는 거죠 그래서 케이블을 이용해 두 컴퓨터를 물리적으로 연결합니다 자, 이제 컴퓨터끼리 통신이 가능하게 됐습니다 좋아요 아주 간단하네요 

 

이제 약간 범위를 넓혀보죠 신나는 파티가 있다고 가정해 봅시다 6명이 노트북을 들고 옵니다 감이 오나요? 갑자기 여러 대의 컴퓨터가 모두 통신을 하려면 얼마나 많은 케이블이 필요할까요? 그럼 100개의 노트북이 있고 각각이 노트북들과 연결되어 있다면 수십억 개의 노트북이 서로 연결되어 있다면 어떨까요? 분명 이 방법으론 안 되겠죠 

 

다행히도 인터넷은 라우팅이라는 걸 사용하는데 그런 물리적 장치가 있습니다. 내 정보나 데이터를 다른 사람에게 연결하는 작업을 하는 다른 기계도 있습니다. 다이얼 방식의 구식 전화망과 비슷합니다 교환원에게 전화 걸어본 적은 없으시겠지만 그냥 수화기를 들고 교환원에게 어떤 사람과 연결해 달라고 요청하면 교환원이 연결해 주는 식입니다 그것과 원리는 같은데 연결의 숫자가 기하급수적으로 늘어난 것뿐입니다.

그래서 각각의 기기는 IP 주소로 개별 시스템을 식별합니다.

인터넷 프로토콜이라는 용어는 들어보셨을 겁니다 아직 다루지는 않겠습니다 우리가 알아야 할 것은 제 컴퓨터가 여러분의 컴퓨터나 수십억 개의 다른 기계에 대해 굳이 알 필요가 없다는 거예요.

여기 이건 아주 작은 하나의 네트워크입니다 하지만 실제 인터넷은 네트워크의 네트워크입니다 여기에서 말하는 네트워크는 아주 작은 네트워크에 불과한 거죠.

 

온라인에는 마땅한 설명이 없는데 그래도 몇 가지 살펴보죠 약 10년, 15년 전의 일입니다

누군가 인터넷의 작은 부분을 매핑하려고 했습니다 지리적으로는 아니고 연결을 매핑하려고 한거죠 다시 말씀드리지만 이것은 인터넷의 아주 작은 부분입니다.하지만 이 작은 네트워크와 연결된 다른 네트워크를 확인할 수 있죠

 

이 작은 별빛들 좀 보세요 각각은 하나의 컴퓨터 네트워크이며 서로 연결되어 네트워크의 네트워크를 형성합니다

여기 인터넷의 아주 작은 부분을 보여주는 또 다른 예입니다 패턴 그러니까 네트워크의 네트워크를 보여줍니다

세부 사항은 중요치 않다고 말한 이유가 바로 이겁니다 IP 주소나 TCP에 대해서는 아직 신경쓰지 않아도 됩니다 데이터가 인터넷을 통해 전송되는 방식도 마찬가지고요 여러분의 데이터가 케이블을 통해 전달된다는 것만 말해두죠

제 집에 Wi-Fi 네트워크가 있다고 말할 수는 있습니다 하지만 Wi-Fi 네트워크는 AT&T의 케이블을 통해 집으로 들어오죠 땅속 깊은 곳에서 묻혀서 제 경로를 따라 가겠죠 그리고는 어느 지점에서 다른 케이블과 만나 서로 연결됩니다 또 전 세계를 연결하는 수많은 해저 케이블이 있고요 이렇게 생겼어요 지하에 묻혀 있거나 깊은 바다 속 보호 케이스에 들어있죠 그것은 전 세계를 연결하는 인터넷에서 가장 중요한 인프라입니다

아무튼 제 데이터는 빛의 펄스 형태로 케이블을 따라 이동합니다 손전등을 켰다 껐다 하는 그런 게 아니고 케이블을 따라 흐르는 전자로요 이 모든 작동 방식을 보면 정말 놀랍습니다 간단히 말해서 우리가 신경 쓸 일은 없습니다 우리가 할 일은 훨씬 더 높은 수준의 일이에요

 

요약하자면 인터넷은 네트워크들의 글로벌 네트워크입니다 그냥 서로 통신할 수 있는 수많은 기기들이죠

그리고 인터넷은 모든 것을 가능하게 하는 인프라입니다. 기계, 다른 컴퓨터 및 장치, 케이블, 해저 케이블, 광케이블 같은 것들이죠  시립 네트워크, 홈 Wi-Fi 네트워크 모든 것이 연결되어 이 거대한 웹을 형성합니다 그리고 이메일, 월드 와이드 웹 파일 공유, 온라인 게임 스트리밍 서비스 등의 서비스와 물품도 운반할 수 있죠

그래서 저는 인터넷을 전 세계의 모든 기기를 연결하는 방대한 인프라를 갖춘 거대한 고속도로 또는 고속국도 네트워크라고 생각합니다.

 

인터넷을 통해 전송되는 콘텐츠도 있습니다

그리고 그 중 우리가 눈여겨볼 시스템이 바로 다음에 나올 웹입니다.

이 영상에서 꼭 배워가야 할 것이 있다면 인터넷이 연결된 컴퓨터들의 묶음이라는 사실입니다.

그리고 그것이 우리가 웹사이트를 공유하고 관심 있는 웹을 작동할 수 있도록 해주는 거죠

 

13. 웹 이란?

 

웹의 개념에 대해 이야기할텐데요 물론 웹 개발과도 관련이 있습니다 

그래서 자연스럽게 조금 더 중요해진 모양입니다 

하지만 이번 시간은 웹이 무엇인지 논의하고 배울 수 있는 첫 번째 기회가 될 겁니다 

 

인터넷은 네트워크의 네트워크입니다. 월드 와이드 웹을 포함하여 많은 것을 가능하게 하는 인프라죠.

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

이러한 리소스, 그리고 문서들은 URL, 즉 균일 리소스 로케이터로 식별됩니다.

URL로 이동하거나 웹 브라우저로 웹 사이트를 볼 때 우리는 기본적으로 웹을 사용하고 있습니다.

Reddit이나 Wikipedia에 가서 이런저런 페이지 중 링크 하나를 클릭하면 그것이 바로 웹입니다.

 

웹 브라우저에 표시되는 모든 것이요.

웹 브라우저에서 일어나는 일들이 이게 전부는 아니지만 웹 브라우저는 우리가 웹 리소스를 요청하고 볼 수 있게 해줍니다. 인터넷은 웹 이상의 역할을 한다는 걸 기억하세요.

스트리밍 서비스와 이메일도 예시가 되겠네요.

 

웹은 이런 케이블을 통해 전달되는 것들 중 하나입니다. 그러니까 웹은 인터넷을 통해 리소스를 공유하게 하는 정보 시스템인 것이죠.

그리고 말씀드린 바와 같이 이러한 리소스는 URL로 식별됩니다.

 

그리고 웹의 실제 작동 방식으로서의 정보 전송 방식에는 이 프로토콜 바로 HTTP, Hypertext Transfer Protocol이 있고요. 다들 브라우저에서 HTTP 또는 HTTPS라는 용어를 다뤄 보셨거나 최소한 보신 적이 있을 것입니다.

이것은 월드 와이드 웹이 작동하는 방식 커뮤니케이션 방식 리소스나 웹 페이지를 요청하고 공유하는 방식의 기반입니다.

 

다시 말해 HTTP는 프로토콜입니다.

특정한 의사 소통이 이루어지는 방식에 대한 일련의 표준화된 규칙입니다. 인터넷에는 다른 프로토콜도 여럿 있습니다 TCP IP 프로토콜 같은 것들이죠. 깊이 다루지는 않겠지만 엄청나게 많은 프로토콜이 있습니다

 

HTTP는 우리의 목표에 있어 가장 중요한 프로토콜입니다.

 

작동 방법에 대해 높은 수준에서 이야기해 보죠

제가 어떤 웹 페이지 가령 reddit으로 갈 때면 reddit 링크나 북마크를 클릭하거나 지금 저처럼 페이지를 새로 고침하겠죠 새로고침 해보겠습니다. 전 이 URL에 대한 요청을 생성하게 됩니다. 그 다음은 어떨까요? 제 요청이 실제 reddit 서버 중 하나에 도달하려면 아주 긴 여정이 필요합니다.

이것이 특정 리소스를 요구하는 요청입니다.

그리고 어느 시점에는 reddit 서버 중 하나에서 제 컴퓨터로 응답을 보냅니다. 여러분이 요청한 결과를 말이죠.

브라우저의 역할은 우리의 정보를 웹 페이지에 보기좋게 표시하는 것입니다. 항상 보기가 좋은 건 아니지만 육안으로 볼 수 있는 일종의 페이지입니다. 이 과정은 아주 빨리 일어납니다.

하지만 여기에서 Enter 키를 누르면 제 요청은 reddit 서버로 이동했다가 다시 저에게 응답으로 돌아옵니다.

그러면 내 브라우저가 그것을 식별하고 또 그걸 제가 알아보는 거죠.

인터넷 속도에 따라, 그리고 존재하는 리소스를 요청한다는 가정 하에 이 모든 작업은 비교적 빠르게 일어납니다.

 

제가 서버라는 용어를 언급했다면 그건 웹 서버를 가리키는 겁니다. 통상적으로 다양한 유형의 서버가 있습니다만 이 강의의 목적과는 별 상관이 없습니다. 예를 들자면 비디오 게임 서버가 있겠네요.

우리는 인터넷에 연결된 기계가 있는 웹 서버에 대해 이야기하고 습니다 그것들의 역할은 웹을 통해 들어오는 요청을 충족시키는 것입니다.

 

그럼 웹 요청이 왔습니다.

우리는 결국 이 과정에서 요청을 만족시키기 위한 자체 서버 코드를 구축하고 작성할 것입니다.

일부 페이지를 요청하는 요청을 받을 수도 있고 우리는 이에 대해 정보로 회신할 수 있습니다. 다른 것도 많습니다 누군가에게 어떤 권한이 있는지 확인해야 하는 경우도 있습니다. 로그인은 되어 있는지 권한이 있는지, 이것이 그들이 요구하는 실제 리소스인지 말이죠.

구현 방법을 배우려면 알아둬야 합니다.

 

그러나 그 핵심은 웹이 인터넷을 통해 리소스를 공유하는 시스템이며, HTTP라는 것을 기반으로 한다는 겁니다.

 

HTTP에 대해서는 잠시 후에 살펴볼 겁니다 이 강의의 후반부에선 더 깊이 다루게 될 거고 훨씬 낮은 수준에서 살펴볼 겁니다.

요청과 응답을 살펴봤습니다. 지금은 그냥 이런 게 있다는 것만 알면 됩니다.  HTTP는 사물입니다.

 

다음은 서버 작업의 또 다른 예입니다. reddit.com이라는 서버에 존재하지 않는 subreddit을 요청하면 reddit 서버는 모른다고 말할 겁니다.

제가 그 치킨 어쩌구 같은 subreddit에 가려고 하면 reddit 서버는 해당 요청을 분석하고 자기는 그런 건 모른다는 사실을 깨닫게 됩니다. 그리곤 다른 리소스 다른 페이지를 다시 보냅니다.

또 다른 용어로는 클라이언트가 있습니다. 서버에서 무언가를 요청하는 장치인 컴퓨터를 가리키는 말일 뿐인데요.

제가 클라이언트일 수도 브라우저가 클라이언트일 수도 있습니다.

제 컴퓨터는 클라이언트로서 reddit 서버 또는 Wikipedia 서버에 리소스를 요청합니다.

기본적으로 브라우저에서 발생하는 모든 일은 클라이언트 측에서 발생하며 이는 매우 일반적인 것입니다.

reddit이나 Wikipedia 서버에서 발생하는 모든 일이나 우리가 자체 서버 로직을 작성할 경우 모든 코드는 서버 측에서 발생합니다.

 

자, 개요를 간략하게 살펴보았습니다 지금까지 다음 영상에 대한 간략한 소개를 마쳤고요.

다음에는 실제 회송 내용에 대해 좀 더 자세히 알아보겠습니다. 내 브라우저는 무엇을 수신하고 무엇을 할까요?

 

14. 요청/응답 주기

해당 서버가 응답할 때 실제로 어떤 일이 발생하는지 이야기해 보죠.

 

레딧에서 /chicken이나 r/chicken을 다시 입력합니다 .

제 웹 브라우저가 HTTP 요청을 보내고 있는데요. 결국 reddit 서버로 가는 경로를 찾습니다.

reddit 서버는 웹 페이지로 응답하고, 그리고 여기 마술처럼 웹 페이지가 보입니다.

하지만 정확한 작동 방식은 다릅니다. 제가 보낸 요청이 reddit 서버에 도착하면 어떤 일이 일어날까요?

 

reddit 서버는 여기 보이는 것과 같이 완성된 웹 페이지로 응답하지 않습니다.

당장은 이 웹 페이지처럼 보이지 않는다는 거죠.

대신 제 브라우저가 인식할 수 있는 지침 코드를 통해 응답하게 됩니다.

그러니까 제 브라우저의 역할은 본질적으로 저를 위해 인간이나 인간의 눈을 위해 스크린 리더를 사용한다면 귀를 위해 서버나 HTTP 응답이 보낸 코드를 가져와 어떤 식으로든 렌더링 하는 겁니다.

 

저는 IKEA 사용 설명서를 예로 들기를 좋아하는데요. IKEA에 방문하여 가구를 구입해 보셨다면 IKEA에서 소파를 만들기 위한 설명서와 부품을 제공하는 방식이 서버의 응답 방식과 유사하게 느껴지실 겁니다.

하지만 소파 자체가 아닌 설명과 부품일 뿐입니다. 그 다음엔 가져와서 실제로 소파를 만들어야 하죠. 거의 비슷한 개념이라고 생각하시면 됩니다.

 

제가 reddit.com/r /chickens/top을 요청하면, 저는 요청을 보낸 겁니다. 그 후 웹페이지에 대한 지침이라는 응답을 받고, 그 다음엔 브라우저가 해당 지침을 받아 웹 페이지를 구축합니다.

이 지침은 실제로 어떤 모습일까요? 이 지침이란 뭘까요?

 

Chrome을 쓰고 계시다면, 우클릭으로 페이지 소스를 확인할 수 있습니다.

그렇게 할 필요는 없지만, 할 수 있다는 걸 아는 건 중요하죠.

 

이것이 기본 페이지입니다. 바로 여기 이 웹 페이지라는 결과를 도출하는 실제 콘텐츠입니다.

이것이 실제 응답이 포함하고 있는 내용입니다. 이것이 서버에서 돌아옵니다. 이게 웹 페이지용 IKEA 설명서인거죠.

그 다음 브라우저로 여기서는 Chrome으로 들어오죠.

 

여러분이 어떤 브라우저를 쓰고 있건, 브라우저의 주 작업은 이러한 지침을 이해하고 인간이 알아볼 수 있게 바꾸는 것입니다.

여러분도 인간일테니 대부분의 수강생은 이 웹 페이지를 이해할 겁니다.

이것이 우리가 보는 모든 웹 페이지로 바뀝니다. 그것이 여기거나 Wikipedia거나 말이죠.

 

페이지 소스를 봅시다. 이것은 기본 코드입니다.

이 경우 Wikipedia 서버에서 되돌아오는 이 웹 페이지의 소스입니다.

그리고 이것이 브라우저가 손을 댄 이후 즉, 렌더링 이후 보이는 모습입니다.

여기 있는 코드는 HTML, CSS JavaScript를 모두 포함합니다.

이것이 내 브라우저가 이해할 수 있는 웹 페이지를 구성하는 세 가지 핵심 기술입니다.

설명을 위해 또 다른 도표를 오랜 시간을 들여 만들어 봤습니다.

만약 Google에서 뭔가를 검색할 경우 예를 들어 제가 기르는 닭의 품종인 Silkie chicken을 찾을 경우, Google에서 검색을 누릅니다 HTTP 요청을 보내는 거죠. 해당 요청은 최종적으로 Google 서버에 전달됩니다 그리고 이러한 Google 서버 중 하나가 들어오는 요청을 받습니다.

저는 google.com/search/ .../silkiechicken을 요청합니다.

서버에서는 들어오는 요청과 제가 요청하는 URL을 기반으로 내가 무엇을 요청하는지 알아냅니다.

그 후 웹 페이지를 구축하는데 이 경우엔 Google에서 대부분을 진행합니다.

그것이 무엇이든 그 웹 페이지를 구축하고 순위와 다양한 결과, 광고 및 온갖 재미난 것들을 알아내는 마법 같은 작업을 하죠.

그리고 나서 HTML, CSS JavaScript로 응답합니다.

그 후 여기 무지개에 올라탄 중간의 작은 상자에 세 가지 기술을 작성합니다 그게 여기 보이는 기본 코드입니다.

그러면 브라우저는 그것을 가져와 이 웹 페이지로 바꿉니다.

이제 Silkie Chicken이 보이네요 아주 재밌게 생긴 닭이죠 이건 요리인... 모양이지만요 이건 좀 재미없네요

 

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

웹 개발에서는 프런트 엔드와 백 엔드라는 두 가지 용어를 자주 듣게 될겁니다.

역할도, 스택의 비율도 서로 다른데요. 그러고보니 아직 스택이라는 용어도 다루지 않았네요.

 

일단은 해당 용어를 빠르게 정의하고, 이것이 왜 중요하며 왜 구분되는지 설명드리겠습니다.

우리는 이런 통상 과정에 대해 이야기했습니다. HTTP 요청을 통해 웹 페이지를 요청합니다. 우리가 의식적으로 요청하지 않더라도 브라우저가 우리 대신 HTTP 요청을 보내죠. 그러면 서버는 HTTP 응답을 통해 회신하게 됩니다.

그런데 그렇게 간단하지는 않습니다. 무엇으로 응답할지 파악하기 위해, 서버 자체에 코드를 실행해야 합니다.

여기에서 프런트 엔드와 백 엔드라는 용어가 등장합니다.  저는 이걸 주방과 손님용 좌석이 있는 홀을 갖춘 음식점에 가는 데에 비유하거나 묘사하고 싶군요. 둘의 위치는 서로 다르지만 레스토랑을 레스토랑답게 그리고 성공하게 만드는데 중요합니다.

도표를 통해 조금 더 자세히 설명드리죠. 이 도표의 저는 Google로 이동하여 무언가를 찾고 있습니다. 제가 요청을 보내면 어느 순간 Google 서버에 도달합니다.

Google에게 할 일이 생긴 거죠. 검색 결과가 무엇인지 ,순위는 어떤지 몇 개가 있는지 ,몇 페이지나 만들지, 어떤 광고를 띄울지 누가 공유하는지 등을 밝혀야 합니다.

일단은 페이지부터 구성해야 합니다. 그러니까 제가 누구인지 알아내는 데는 많은 논리가 필요합니다. 내가 원하는 게 뭔지 권한이 있는지, 로그인되어 있는지 등, 이 모든 코드가 저에게 뭔가를 보내기도 전 부터 Google 서버에서 발생합니다.

이것이 백 엔드입니다. 응답을 구성하는 레스토랑의 주방이라고 할 수 있죠.

그 후 HTML이나 CSS, JavaScript 형태로 다시 응답을 보냅니다. 다시 보내와서 제 브라우저에서 실행되는 코드 이 모두가 클라이언트 측 혹은 프런트 엔드 코드입니다.

 

이 단계에서는 발생하는 일은 여러 언어 중 하나로 일어나게 됩니다. 여러분이 배우게 될 Python, C, Java 등인데요.

여기 서버 측에서는 JavaScript를 사용할 수도 있고요

백 엔드 언어 또는 서버 측 언어는 정말이지 여러 가지입니다.

그러나 모든 웹 페이지의 구성 도구는 단 세 가지뿐입니다. HTML, CSS, JavaScript 이렇게 세 가지입니다.

 

프론트 엔드 개발은 브라우저에서 실행되는 이러한 도구에 중점을 두고,

백 엔드 개발은 브라우저가 아닌 서버에서 실행되는 것에 초점을 맞춥니다.

둘은 연결되어 있습니다. 그리고 이 강의에서는 이 방정식의 양쪽을 다룰 것입니다.

 

이 세 가지를 이해하는 것부터 출발하여,

서버를 만들고

데이터베이스에 연결하거나

요청을 처리하고

응답하는 등

여러 재밌는 요소를 살펴볼 겁니다.

 

이 퍼즐의 마지막 조각은 응답이 다시 전송된다는 것입니다. 브라우저는 그것을 수신하고 표시하고요. 그러니까 이 점선의 양쪽에서 작업이 이뤄지게 됩니다.

사람들은 평생 동안의 경력을 들여 백 엔드 코드의 작은 조각 또는 프런트 엔드의 작은 부분을 위해 일합니다.

제가 이걸 보여드리는 이유는 일종의 흐름과 프로세스 조각이 맞춰지는 방법을 개관해드리기 위해서입니다. 하지만 여러분이 이 거대한 퍼즐의 모든 조각을 알아야 한다는 인상을 드리려는 건 아닙니다.

다음 영상에서는 HTML CSS, Javascript에 대해 본격적으로 배워보기 전에 그 역할을 알아보겠습니다.

 

 

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

HTML, CSS, JavaScript에 대해 간단히 설명드리겠습니다.

각각이 무엇을 담당하고 어떤 일을 하며 어떻게 함께 작동하는지에 대해서요.

이 강의에서는 이 세 가지 도구에 많은 시간을 할애하게 될 겁니다. 앞으로 다루게 될 모든 내용은 적어도 이 셋 중 하나를 포함합니다. 모두 배우게 되면 셋 다 활용하겠죠. 우선 이것이 무엇인지 이해하는 것부터 시작합시다 .

 

이 세 가지 기술은 웹 페이지를 만드는 역할을 합니다. 당신의 브라우저가 이해하는 유일한 언어죠. 이 세 가지 언어가 전부는 아니지만, 우리의 브라우저가 웹 페이지를 활용하는 과정에서 예상하는 유일한 기술들입니다.

또 각자 담당하는 부분도 다르고요.

여기 문장이 하나 있습니다. 보라색 공룡이 춤춘다 Dinosaurs는 너무 기니까 Dino만 적었습니다.

THE를 제외하면 세 개의 단어가 있습니다.

공룡이 있고요. 공룡은 무엇에 해당합니다. 이 문장의 명사죠. 제가 보기엔 HTML이 여기에 상응합니다. 웹 페이지의 HTML은 페이지의 내용을 설명합니다.

그런 다음 형용사, 보라색 공룡의 형용사인 보라색이 있습니다. 공룡에 대해 설명하는 거예요. 이것이 CSS의 역할입니다

HTML 요소, 페이지의 내용 설명을 보조하죠.

공룡을 보라색으로 만들 듯 더 크게 만들고, 글꼴 크기를 변경하고 테두리를 만들고 음영을 주죠. 그리고 Javascript가 있습니다. 보라색 공룡이 춤춘다는 문장의 동사인 춤입니다 이것은 행동, 그것이 하는 일 즉, 동사입니다.

 

Javascript를 중점적으로 다루겠지만 그 전에 HTML과 CSS부터 시작하죠

여기에 웹 페이지가 있습니다 여기는 Code Pen이라는 사이트입니다 나중에 더 자세히 배워볼 텐데요 지금 알아야 할 것은 HTML CSS, Javascript를 사용하여 브라우저에서 코드를 공유하고 작성하고 조정하는 방법이라는 겁니다

창이 3개 있습니다 3가지 기술을 말하고 이것이 최종 결과입니다

이 계산기를 통해 간단한 계산을 할 수 있죠 98 곱하기 6은 588입니다

JavaScript나 그 외의 부분은 제쳐두고 처음엔 HTML을 중점적으로 보겠습니다.

 

여기서 이것들은 제쳐두고요 페이지의 기본 요소를 확인하실 수 있습니다.

버튼이 있는데 보기도 흉하고 아무 역할도 안합니다. 그러니까 형식이 매우 다른거죠. 동작이나 상호 작용이 존재하지 않는 겁니다. 이 페이지의 무엇만 있는 걸까요? 여기 있는 것은 모두 명사죠. HTML 즉, 물건이자 콘텐츠입니다

그러니까, 우리에게는 버튼 텍스트, 그리고 클리어 버튼이 있습니다.

디스플레이가 있는데 지금은 0이라고 표시됩니다 리셋 버튼도 있네요.

이제 CSS를 다시 추가하면 완전히 다르게 보일 겁니다.

동일한 콘텐츠가 이제 완전히 다른 색상, 글꼴, 배경 색상으로 표시됩니다 많이 변했죠.

가운데 정렬되었고, 이건 주황색이 됐고 글꼴 크기도 다릅니다.

아주 많은 것이 바뀌었죠.

이제 레이아웃이 격자형으로 바뀌었지만, 계산기는 실제로 작동하지 않습니다. 버튼을 클릭할 수는 있지만 뭔가 추가되는 것은 없습니다. 아무 계산도 할 수 없죠. 초기화도 못하죠. 초기화 버튼이 안보이네요. 아무 반응도 없어요.

이제 Javascript를 추가하죠 이것은 동작, 즉 동사입니다 우리에게는 HTML, 페이지의 내용이자 '무엇'이 있습니다.

보기는 안 좋지만 내용은 들어 있습니다. 그리고 해당 콘텐츠를 설명하는 CSS가 있습니다.

각 버튼을 정사각형으로 만들고 배경색을 지정하고 글꼴 크기와 글꼴 색상을 지정합니다. 이 모든 것이 CSS입니다. JavaScript는 동작입니다 다시 추가해보죠 큰 변화는 없어 보이지만 지금 클릭하면 디스플레이 업데이트가 표시되고 실제 계산이 가능합니다.

 

985+2=987 다시 3으로 나누면 329 3으로 나눈 값이 맞나요? 모르겠네요 다시 7로 나누어 봅시다 아무튼 지웁시다 이제 상호작용이 생겼습니다 뭔가를 하고 있어요 모양만 있는 게 아니라 실제로 작동하고 있죠

 

Javascript는 단순히 덧셈이나 곱셈을 계산해 표시해주기만 하는게 아닙니다. JavaScript는 실시간 알림 팝업이나 온갖 채팅, 온갖 자동 완성 기능 및 검색을 담당합니다. 그밖에도 많은 기능을 담당하죠 브라우저에서 스도쿠나 십자말 풀이 같은 2048 게임을 해본 적이 있으실 텐데, 모두 Javascript, HTML CSS로 만들어진 겁니다.

 

요약하자면 HTML은 페이지의 본질 그러니까 내용입니다. 못생겼지만 기반이 되는 구조인 것이죠.

CSS는 구조와 어떻게 보여야 하는지를 설명하며 그 뿐입니다. 보기 좋게 만드는 일 외에는 아무 것도 하지 않지만 매우 중요합니다.

그리고 많은 일을 하는 JavaScript가 있습니다.

여기에서는 다소 제한적이지만요 계산기를 위한 논리를 추가했을 뿐이니까요 하지만 JavaScript는 웹페이지의 실질적인 논리, 동작, 동사를 구축합니다 이 3개의 도구는 함께 작동하는데 나머지 강의에서도 사용할 수 있도록 배워볼 겁니다 일단 HTML부터 시작할 텐데 그 전에 환경 설정이 필요합니다

 

17. 개발자 환경 설정하기

자, 이 섹션이 거의 끝나가는군요 이제 정리하고 다음으로 넘어가서 코딩에 관해 알아볼 겁니다 강의를 진행하면서 몇 가지 도구를 사용할 텐데요 Windows든 Mac이든 상관없는 무료 교차 플랫폼도 꼭 사용해 보실 것을 추천드립니다 필수는 아니지만요 

첫 번째 도구는 웹브라우저 Google Chrome입니다 제가 강력히 추천하는 도구죠 Edge, Explorer Firefox, Safari 등 다른 브라우저가 편하다면 그걸 써도 됩니다 하지만 제가 계속 사용할 도구들, 특히 코드를 점검하고 인식하고 디버그하기 위한 개발 도구들은 Chrome에 특화되어 있습니다 다른 브라우저에도 아날로그가 있지만 Chrome이나 Firefox를 백업 옵션으로 강력 추천합니다 그중에서도 Chrome이 가장 편리할 겁니다 그러니 Chrome을 다운로드하세요 아주 쉽습니다 google.com/chrome에서 다운로드 받고 파일을 열어서 인증하여 설치하시면 됩니다 다시 말씀드리지만 Chrome을 쓰는 이유는 Chrome이 오늘날 개발자의 표준이기 때문입니다 다른 브라우저를 사용하셔도 상관은 없습니다 아까 언급한 Firefox도 많이들 사용하죠 그래도 Chrome을 쓰는 사람이 더 많습니다 실행해서 이상이 없는지 확인합니다 열어 볼게요 됐습니다 Chrome이 열렸군요 서로 축하해 줍시다.

 

제가 강력히 추천드리는 두 번째 도구는 텍스트 편집기인 VSCode, Visual Studio Code입니다. Microsoft에서 만든 제품이죠 지난 몇 년간 다양한 텍스트 편집기를 추천드렸는데 Sublime text를 강의에 쓰기도 했죠.

하지만 지금은 VSCode가 훨씬 좋은 무료 툴입니다 관련 커뮤니티가 생길 정도로 강력한 도구죠 업데이트도 활발하고 재밌고 유용한 확장기능도 많습니다.

VSCode는 편집기일 뿐입니다. 강의를 진행하면서 여기에 코드를 작성할 겁니다 원한다면 VSCode로 문서를 작성할 수도 있습니다 Python, JavaScript HTML, CSS 코드도 작성할 수 있죠. 그러라고 있는 도구니까요 그럼 이걸 다운받을게요 좋아하는 편집기가 따로 있다면 그걸 써도 됩니다 하지만 제가 사용할 몇몇 단축키와 확장기능은 VSCode에 특화되어 있습니다 그러니 효율성을 생각한다면 VSCode를 추천합니다 그럼 이것도 다운받을게요 제 컴퓨터는 새 것이어서 아무것도 설치되어 있지 않습니다 원래는 설치된 프로그램을 다시 설치하는 척하며 보여드렸는데 지금은 여러분과 똑같이 설치하면서 녹화하고 있습니다 자, 이게 VSCode, 즉 Visual Studio Code입니다 다음 영상에서는 외관을 조금 다듬을 겁니다 여러분이 관심 있으실지는 모르겠지만요 제가 바꿀 건 이것들... 일단 세팅을 조금 변경할 거고 평소대로 질문을 받겠습니다 그건 다음 영상에서 다룰게요 지금은 기본적인 흐름만 보여드리겠습니다

 

아주 간단합니다 새 파일을 만듭니다 여기를 클릭하면 되는데 저는 보통 단축키 cmd+N을 씁니다 여기 빈 파일이 있네요 저장하겠습니다.

File에서 Save를 누르거나 cmd+S를 쓰면 됩니다 Windows 기본 편집기를 쓰신다면 아마 Ctrl+S일 겁니다.

 

HTML, CSS, 자바스크립트 같은 다른 언어를 배우며 코딩에 아주 편리한 몇 가지 특징을 살펴보겠습니다.

지금은 기본이니까 일단 새 파일을 만들고 저장합니다. 파일명은 hello.txt로 할게요 단순한 텍스트 파일이죠.

여기 텍스트를 치면 됩니다. 사실 지금 할 일은 그것뿐입니다. 조만간 HTML로 넘어가서 HTML 파일 만들기를 할 텐데 그 전에 편집기가 잘 설치됐는지 확인하세요. 이 글씨 크기는 키우거나 줄일 수 있습니다. 여러분이 보기 편하게 크기를 키울게요 색깔과 글씨체 바꾸는 건 다음 영상에서 보여드리죠.

 

제가 추천하는 마지막 도구는 Spectacle인데 필수는 아닙니다 Mac을 사용하신다면 많이 쓰실텐데 Spectacle이 Mac에서만 작동하기 때문입니다 Windows용은 없어요 하지만 Windows에서는 애초에 이런 도구가 필요 없을 것 같네요 Spectacle은 창을 정렬해 줍니다 화면을 분할해서 쓸 때 저는 종종 텍스트 편집기를 반으로 줄입니다 어설프게나마 보여드리죠 이런 식으로 편집기를 옮기고 Chrome은 여기 둡니다 특히 앱을 개발하고 있을 때는 작업 중인 실제 웹 페이지를 여기에 둡니다 손이 많이 가서 번거롭네요 그래서 Spectacle이 필요합니다 PC에는 스냅 또는 스냅 윈도우라는 기능이 있는데 윈도우 버튼을 누른 채 화살표 키를 누르면 될 겁니다 어쨌든 Spectacle은 여기입니다 spectacleapp.com입니다 개발이 끝난 상태라 기능이 추가되지는 않지만 경쟁 앱이나 대체 앱이 있습니다 적어도 저에겐 Spectacle이 편하니 한번 열어보죠 설치하면... 끝났습니다 이제 Spectacle을 쓸 수 있습니다 Spectacle의 기본 단축키는 여기서 확인하시면 됩니다 제가 평소에 쓰는 기본 단축키는 창을 좌우로 옮기거나 반으로 줄이거나 위아래로 옮기는 겁니다 사람마다 다르겠지만 저는 좌우 분할을 선호합니다 이렇게 쉽게 창을 옮길 수 있어요 Mac에서 전체화면으로 바꾸려면 cmd+option+F를 누릅니다 다른 플랫폼에도 비슷한 기능이 있습니다 하지만 여러 개의 창을 관리해야 하니 분할할 것을 추천드립니다 여러 개발자들도 이 도구를 좋아고요 이번에는 간단하게 테마를 바꾸는 방법을 알아볼게요 딱히 중요하지는 않지만 신경 쓰는 분들이 많으니까요.