패스트캠퍼스 프로그래밍 첫걸음 두 번째 학습후기는 웹에 대한 이해 및 환경 설정이다.
처음 진도를 나가면서 느낀점은 강의 내용에 핵심만 담겨 있고
퀴즈와 과제로 잘 따라가고 있는지 확인이 가능하다는 점이었다.
오늘의 키워드는 다음과 같다.
오늘의 키워드
- 프로그래밍
- HTML
- GitHub
- 클라이언트와 서버
- HTTP
- 개발환경과 브라우저
00. ORIENTATION
오리엔테이션에서는 프로그래밍이 무엇이고 앞으로 우리가 어떤 것들을 배우게 될 것인지 알게했다.
프로그래밍은 쉽게말해 '프로그램 코드'라는 것을 작성하여 컴퓨터와 대화를 하게 해준다.
기술이 발달하여 우리에게 일상 그 자체가 되어 버렸다. 그 기술의 중점이 바로 프로그래밍이다.
그래서 우리가 직접 프로그래밍을 해볼 수 없는걸까? 그렇다면 어떤 프로그래밍 기술을 배워야 하는걸까?
프로그래밍첫걸음 수업에서 HTML, CSS, JavaScript, Python 을 배우고
플러스 알파로 부트스트랩과 파이어베이스도 배운다.
물론 수업을 잘 따라가는 것 뿐만 아니라 과제를 하는 시간도 가져야 하고
개발 프로젝트를 진행하고 Gist로 강사님과의 코드 리뷰도 진행한다.
수업 진행은 다음과 같다.
먼저 HTML, CSS로 웹 구조를 배우고 JavaScript 으로 웹 구조를 다룬다.
마지막으로 여태 배운 웹 지식을 기반으로 파이썬이라는 언어로 웹 크롤러를 개발하게 된다.
수업 마지막으로 수업 진행에 필요한 Github 사이트를 소개했다.
Github 사이트를 가입하고 프로그래밍첫걸음 강의 코드가 있는 저장소로 들어가 즐겨찾기를 해두었다.
여기까지가 오리엔테이션이다.
파이어베이스도 가르친다는 점이 새로웠고 Gist 기능으로 강사님이 직접 코드 리뷰도 해준다는 점이 신선했다.
오리엔테이션이라 과제는 따로 없고 바로 웹에 대한 이해 및 환경 설정으로 넘어갔다.
01. [HTML] HTML 소개
HTML 이란 무엇일까? 간단히 말해 모든 웹페이지의 기본이다.
즉 웹 페이지 문서는 HTML 으로 개발을 해야 한다는 것이다.
우리가 눈으로 보았던 모든 웹 사이트는 HTML 으로 개발이 된 것이다!
아래 그림의 패스트캠퍼스 홈페이지도 당연히 HTML 코드로 개발됐다.
여기서 오른쪽 마우스를 눌러 소스 보기를 클릭하면 HTML 코드가 보인다.
알 수 없는 영어들이 많이 보이지만 프로그래밍 첫걸음을 이수하고 나면 이해가 될 것만 같다!
얼른 곧 바로 클라이언트와 서버로 넘어가자.
02. [웹에 대한 이해 및 환경 설정] 클라이언트 vs 서버
흔히들 착각하는 것이 인터넷이 바로 웹이라고 하는 것이다. 엄밀하게 말하자면 다르다.
웹은 인터넷에 연결된 사람들이 정보를 공유할 수 있게 해주는 기술을 뜻한다.
그 다음 주제는 클라이언트와 서버다! 클라이언트와 서버 하면은 아래의 개그짤이 생각난다.
둘 다 친숙한 말이지만 정확히 그 개념들은 무엇일까? 이번 강의로 확실하게 개념을 알고가보자!
클라이언트와 서버는 서로 상호작용을 한다. 클라이언트는 서버에게 요청을 하면, 서버는 요청에 적절한 응답을 클라이언트에게 전해준다. 클라이언트는 이 응답의 결과로 다시 우리에게 보여준다!
이는 웹브라우저를 켜 구글에서 직접 만날 수 있다. 구글의 검색창에 '패스트캠퍼스'를 입력하고 검색을 해보자
그럼 무엇이 일어날까? 바로 페이지가 변하면서 검색 결과를 나에게 정리해서 보여준다.
여기서 바로 클라이언트와 서버가 하는 일을 알 수 있다.
클라이언트인 나의 브라우저가 구글 웹 서버에게 '패스트캠퍼스' 키워드 검색 결과를 요청하고
구글 웹 서버는 '패스트캠퍼스' 키워드 결과를 모아 다시 브라우저에게 전달해준다.
마지막으로 브라우저는 구글 웹 서버에게 받은 결과를 위 사진처럼 보여준다.
그런데 여기서 의문점이 든다. 웹 서버에서 클라이언트에게 결과를 전달할 때 어떤 브라우저든지 받을 수 있다. 어떻게 이런 일이 가능한걸까?
바로 웹 정보를 주고 받는 약속이 있기 때문이다. HTTP 기술이 그것이다.
HTTP는 HyperText Transfer Protocol의 준말이다. HyperText는 무엇일까? HyperText는 연결 링크이다. 위 사진에서 파란색 글씨를 누르면 새 웹 페이지 문서가 열린다는 것을 다들 경험으로 안다.
이런 웹 페이지 문서들을 서로 링크로 연결해주는 기술이 HyperText 이다.
그리고 HyperText 기술로 페이지를 이동하면서 데이터를 주고 받는다. 데이터를 전송해주는 Transfer 기능이 있다.
이것들을 가능해주는 규칙, 규약(Protocol)이 바로 HTTP 이다.
03. [ 웹에 대한 이해 및 환경 설정 ] 개발환경과 브라우저
세 번째 강의에서 개발환경을 구축하는 법 어떤 브라우저를 준비해야할 지를 강의했다.
개발환경을 이야기할 때 운영체제가 나온다. 대표적으로 다음 세 가지 운영체제를 주로 사용한다.
많은 사람들이 Windows 운영체제를 쓰고 그 다음에 Mac, Linux 이다. Mac 운영체제는 예술가 분들도 많이 쓰시는 걸로 알고 있다. 그러나 Linux를 주 운영체제로 쓰는 일반인은 아마 없지 않을까 싶다.
개발환경에서는 프로그래밍 언어, 데이터베이스, 프레임워크 등도 의미한다. 제일 중요한 개발 환경은 소스 코드를 작성하는 스케치북을 잘 선택해야 한다.
스케치북에 해당하는 개발 도구, 그 중 텍스트 에디터는 Notepad++, EditPlus, Atom, Sublime Text 등등 많은 프로그램이 출시되었다.
많은 선택 중, 자기가 가장 잘 다루는 개발환경으로 구성을 하는 것이 나은 선택이다.
VS Code 는 설치도 간편하고 확장 플러그인 설치도 용이하다는 장점이 있다. 맥과 윈도우, 리눅스 버전도 있다.
그 다음은 브라우저다. 브라우저는 매개체로서 웹 기술을 우리에게 직접 보여준다.
강사님께선 개발을 위한 브라우저로 구글 크롬과 모질라 파이어폭스를 추천했다.
그 이유는 바로 통계적으로 타 브라우저와 다른 압도적인 점유율이기 때문이다.
마지막으로 브라우저에 숨겨져 있는 개발 도구인 개발자 도구를 소개했다.
개발자 도구로 원본 소스 코드를 볼 수 있고 이미지 같은 웹 자원을 볼 수 있다. 그리고 서버와 어떤 통신을 하는지도 지켜볼 수 있다. 구글 크롬에는 웹 개발에 필요한 다양한 플러그인을 이용할 수도 있어 매우 편리하다.
기본적으로 웹 개발을 할 때 개발자 도구가 필수적이기 때문에 꼭 알아둬야 할 사항이다.
프로그래밍첫걸음 과제
첫 번째 과제는 Github 계정 만들기다! 강의에서 알려준 강사님의 저장소를 북마크를 하면 된다.
Github 가입은 홈페이지 첫 화면에 바로 가입할 수 있다.
강사님의 저장소에서 Star 버튼을 누르면 북마크를 해둘 수 있다.
Star를 해두면 프로필에서 Stars 탭에서 저장소들을 볼 수 있다. 우측 프로필을 클릭하면 your profile 또는 Your stars 메뉴를 클릭할 수 있다!
두 번째 과제는 HTTP 이해하기다. 강사님이 작성해준 Github 마크다운 문서를 읽는 것이 과제이다.
수업 내용을 글로 간단히 정리했고 더 자세한 내용은 언제 보자는 예고까지 있었다.
마지막 과제는 개발환경을 직접 설치해보고 개발자 도구로 log 를 찍어보는 것이다.
마찬가지로 강사님 Github 마크다운 문서를 쭉 읽으면 된다. 마크다운 문서에는 VS Code 설치하는 법, 개발자 도구로 log 찍어보는 법이 포함되어 있었다.
개발자 도구 콘솔(Console) 탭에서 console.log("할말") 을 치고 엔터를 누르면 바로 아래에 로그가 찍힌다.
콘솔 탭에서 자바스크립트 코드를 직접 입력하여 실행시킬 수 있다.
자바스크립트로 재미있는 작업을 많이 해보았었는데 이는 자바스크립트 시간에 기회가 되면 소개해보겠다!
느낀점
독자 중에 학창시절 정보 시간에 메모장으로 간단한 HTML 홈페이지를 만들어봤던 경험이 있을지도 모르겠다.
그 때 투박하게 타이핑했던 HTML 를 다시 만나고 개념도 정확히 알고가니 도움이 많이 되었을 것이다!
다음 강의는 본격적으로 HTML 태그를 공부하게 된다.
질문 사항 있으면 댓글로 받도록 하겠습니다!
- 패스트캠퍼스 서포터즈 1기 다람쥐
댓글