첫째날 PyCharm, Slack, AWS(Amazon Web Service) 다운로드/가입등 사전준비를 마치고
본격적으로 배우기에 앞서 자주 쓰게 될 단축키를 정리해 보았음

• 새로고침
  • F5
• 저장
  • Windows: Ctrl + S
  • macOS: command + S
• 전체선택
  • Windows: Ctrl + A
  • macOS: command + A
• 잘라내기
  • Windows: Ctrl + X
  • macOS: command + X
• 콘솔창 줄바꿈
  • shift + enter
• 코드정렬
  • Windows: Ctrl + Alt + L
  • macOS: option + command + L
• 들여쓰기
  • Tab
  • 들여쓰기 취소 : Shift + Tab
• 주석
  • Windows: Ctrl + /
  • macOS: command + /

1) 서버/클라이언트/웹의 동작 개념

1. 네이버 웹페이지를 해킹(?)해보기

크롬 창에서 보이는 웹페이지는 어떤 원리로 보여지나?

'네이버뉴스' 혹은 '뉴스홈' 이라 쓰인 곳을 우클릭 검사
(촬영당시와 현재 업데이트로 네이버뉴스탭이 뉴스홈으로 바뀐듯?)
👉 음영영역의 글자 찾기
👉 스파르타로 바꿔쓰기 

그럼 이랬던 페이지가

이렇게 바뀜
하지만 새로고침을 누르면 다시 원래대로 돌아옴
이 개념을 이어서 배운다

2. 웹의 동작 개념 (HTML을 받는 경우)

앞서 본 네이버 포함 우리가 보는 웹페이지는 모두

서버에서 미리 준비해두었던 데이터를 
"받아서" "보여준다"

즉, 브라우저가 하는 일은

1) 요청을 보내고 2) 받은 HTML 파일을 보여주기

그럼, 1)은 어디에 요청을 보낼까?
서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보낸다

예) https://naver.com/

→ 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

3. 웹의 동작 개념 (데이터만 받는 경우)

그럼 항상 이렇게 HTML만 내려줄까?
아니다 데이터만 내려 줄 때가 훨~씬 많다고 한다

사실 HTML도 줄글로 쓰면 이게 다 '데이터'아닌가?

자, 월드컵 직관 티켓을 예매하고 있는 상황을 상상해보자
좌석갯수가 바뀔때마다 보던 페이지가 새로고침 되면...

이럴 때! 아래의 그림과 같이 데이터만 받아서 갈아 끼우게 되는데

이렇게 데이터만 내려올 경우

'JSON 형식'이라고 한다

4. 1~5주차에 배울 순서!

- 1주차: HTML, CSS, Javascript

오늘은 HTML과 CSS를 배우는 날!
즉, 4주차에 내려줄 HTML파일을 미리 만들어 두는 과정입니다. +
또, 2주차에 자바스크립트를 능숙하게 다루기 위해서, 오늘 문법을 먼저 조금 배워둘게요!

- 2주차: jQuery, Ajax, API

HTML파일을 받았다고 가정하고, Javascript로 서버에 데이터를 요청하고 받는 방법을 배워볼거예요

- 3주차: Python, 크롤링, mongoDB

드디어 '파이썬'을 배울거예요.
먼저 문법을 연습하고, 라이브러리를 활용하여
네이버 영화목록을 쫙 가져와보겠습니다. (기대되죠!)
그리고, 우리의 인생 첫 데이터베이스. mongoDB를 다뤄볼게요!

- 4주차: 미니프로젝트1, 미니프로젝트2

서버를 만들어봅니다! HTML과 mongoDB까지 연동하여
미니프로젝트1, 2를 완성해보죠! 굉장히 재미있을 거예요!

나중에 또 이야기하겠지만 헷갈리면 안되는 것!
우리는 컴퓨터가 한 대 잖아요...
그래서 같은 컴퓨터에다 서버도 만들고, 요청도 할 거예요.
즉, 클라이언트 = 서버가 되는 것이죠.

이것을 바로 "로컬 개발환경"이라고 한답니다! 그림으로 보면, 대략 이렇습니다.

- 5주차: 미니프로젝트3, AWS

오늘은 아직 익숙해지지 않았을 당신을 위해! 같은 난이도의 유사한 한 개의 프로젝트를 더 진행합니다.

그치만 우리 컴퓨터를 24시간 돌려둘수는 없잖아요!

그래서 두구두구.. 인생 첫 배포!를 해볼 예정입니다! 클라우드 환경에서 컴퓨터를 사고, 거기에 파일을 올려 실행해보겠습니다.

2) 1~5주차가 끝나면 만들게 되는 것들 - 구경하기!

스파르타피디아: http://spartacodingclub.shop/web/movie
화성땅 공동구매: http://spartacodingclub.shop/web/mars
버킷리스트: http://spartacodingclub.shop/web/bucket
(숙제) 팬명록: http://spartacodingclub.shop/web/homework