[SPC 9기] 0주차 - 사전준비/과제 및 이론수업

0주차 사전과제의 목표 3가지
1. 강의자료 사용법을 익히고, 수업에 필요한 프로그램을 모두 설치한다.
2. 웹의 전반을 다루는 이론 강의를 수강한다.
3. 사전과제 퀴즈를 제출한다.

필수 프로그램 설치 : 노트북
- Chrome
- Github Desktop
- Pycharm Professional (설치 후 JetBrains 계정으로 로그인하면 됨)
- Slack

 

필수 프로그램 설치

- Slack

 

가입
- Github
- JetBrains (가입 후 프로모션 코드입력 또는 구매로 파이참 프로페셔널 구매)

 

 

목적

 

처음하는 사람 대상으로 실습 위주로, 빠른 시간 내 혼자 만들 수 있는 단계로, 어떻게 더 공부해야할지 
아무질문이나 막 해도 됨. 이해보다 해보자. 코딩의 본질은 삽질이다. 
에러를 내보고 왜 나는지 보자. 에러를 구글링
집념과 구글만 있으면 누구나 만들 수 있다.

 

 

커리큘럼

 

1~5주
- 1주차 : 프론트엔드 (HTML, CSS, Javascript) - 서버가 주는 것들을 미리 만들어 본다. 4주차에 클라이언트에 보내줄 HTML과 CSS파일을 만드는 과정. 2주차에 JavaScript(JS)를 다루기 위한 문법을 먼저 배움

- 2주차 : 프론트엔드+서버통신 (JS응용, iQuery, Ajax) - 뒤에서 데이터를 주고받을 수 있게 한다.  서버가 이미 HTML 파일을 보내줬다고 가정하고, JS로 서버에 데이터를 요청하고 응답받은 데이터를 처리하는 방법을 배운다.

- 3주차 : 약간의 백엔드, 파이썬 (크롤링, 몽고디비) - 파이썬 사용 및 DB를 파이썬으로 제어. 파이썬 문법을 연습학 ㅗ라이브러리를 활용, 몽고디비 다루기

 

- 4주차 : 미니프로젝트1,2(flask) - 프레임워크를 이용해 API 제작. 서버(백엔드)를 만든다. 거기에 HTML과 몽고디비를 연동하여 프로젝트를 완성한다.

# 참고 : 로컬 개발환경

- 서버가 없으니깐;; 같은 컴퓨터에 서버도 만들고 요청하는 클라이언트역할도 하는 

 

-5주차 : 미니프로젝트3 (1~4주차 종합) - 프레임워크를 이용해 API 제작

6~8주
- AWS에 프로젝트 올리기
- 개인/팀 코딩 프로젝트 진행 (튜터가 함께 기획 & 코드리뷰)

 

 

 

 

 

 

 

 

이론 수업

 

서버와 클라이언트 개념 잡기
- 서버의 주된 역할은 중앙에서 데이터를 주고 받는 것. 덕분에 모든 사용자들이 일관된 정보를 본다.
- 서버는 그냥 컴퓨터고, 그 컴퓨터의 역할이 서버이다. 서버 프로그램이 컴퓨터에 깔린 것.
- 서버는 직업이다. 클라이언트, 디비, 라우터, 모니터링 다 컴퓨터의 직업이라고 생각하면 좋다.

실습 : 클라이언트에서 네이버 사이트 바꿔보기

- 이 실습은 Windows 기준입니다.

- 크롬에서 네이버 접속

- 붉은색 네모 표시된 네이버뉴스를 오른클릭 후, "검사" 선택

- 다음과 같은 새 창 (또는 브라우저 하단이나 오른쪽 등에) 이 뜬다. 그리고 파란색으로 표시된 부분이 "네이버뉴스" 부분이다.

- 왼쪽에 작은 삼각형을 누르면 다음과 같이 나온다. (또는 맨 왼쪽에 ... 을 클릭)

- 네이버뉴스 글귀를 다른 글자로 바꿔보자. 실제 사이트도 바뀐 것을 확인할 수 있다.

 

이렇게 바꿀 수 있는 이유는, 브라우저에서 서버에 요청해서 받은 페이지이기 때문이다. 네이버 서버 안에 있는 실시간 페이지가 아니고, 네이버에게 요청해 받아온 페이지이다. 이미 받은 것이므로 내가 마음대로 바꿀 수 있는 것. F5로 새로고침 하면, 다시 원래대로 돌아온다. 당연히 네이버를 통해 새로 받으니까.

 

웹서버는 미리 이러한 페이지를 준비해 가지고 있다가 클라이언트의 요청을 받아 페이지를 보내준다.

브라우저는 1. 요청,  2. 요청받은 것을 화면에 그림 = 2가지 역할을 한다.

 

 

 

웹과 앱의 차이점은?

- 앱은 껍데기를 미리 단말기에 받아놓고, 요청받거나 필요한 데이텀만 가져옴. 그래서 업데이트가 필요할 수 있음.

- 웹은 그런 일 없음. 웹은 받아놓는게 하나도 없고 전체를 다 가져와서 그리기 때문.

 

 

http란?

- 웹은 http (hypertext transfer protocol) 이라는 통신규약 (규칙)을 따른다. url에서 http:// 가 바로 http 라는 통신규약을 따른다 라는 의미이다.

- http에서 request 하는쪽을 클라이언트, 요청을 처리해 response하는 쪽을 서버라고 한다.

 

 

 

 

웹의 동작원리 (설명서를 주는 방법)

1. 브라우저에서 주소를 입력

2. 브라우저는 서버에 요청한다. 

3. 서버는 이렇게 그리라고 설명서 같은 것을 준다. 브라우저는 그걸 보고 어디에 메뉴를 그리고 이미지를 1초마다 넘기는 등

 

웹의 동작원리 (데이터만 주기)

- 주소창에 주소를 쳐서 전체를 받는 형식이 아니라, 그 사이트에 데이터 일부만 받는 것.

- 웹페이지는 말그대로 데이터를 예쁘게 그려 놓은 것인데, 이걸 새로고침 하지않고 데이터만 받을 수 있다. 

- 예를들어 좌석예약할 때 여러사람이 연결해서 데이터가 갱신될때마다 새로고침이 된다면 매우 좋지 않다.
- 그래서 전체를 새로고침 해서 다시 그리지 않고, 데이터만 받아서 갈아끼우는 방식이 있다.

- 이것을 JSON 형식이라고 한다. 더 이상 자세한 설명은 생략한다.

 

 

API란?

 

서버에 데이터가 많은데, 특정 데이터를 요청할 수 있다. 데이터를 요청하는 방식은 여러가지가 있다. 은행에 예를 들어보면, 은행(서버)에 데이터를 요청 (출금, 대출, 공과금납부 등) 하면, 요청하는 종류에 따라 필요한 정보가 있다. 그래서 정해진 기능에 대해 정해진 방식으로만 커뮤니케이션 하겠다 라는 "창구" 가 필요하다. 이것이 API 이다.

 

예를 들어, 출금요청을 하면 출금에 필요한 정보, 출금해주는 등 정형화된 루틴이 있는데 그 루틴을 구현해놓은 것이다. 이러한 창구는 은행이 만들겠지? 서버도 마찬가지로 서버 프로그래머가 API를 만든다. 

API는, 서버가 클라이언트에게 요청을 받았을 때

- 어떤 데이터를 받아서

- 어떻게 처리해서

- 어떤 데이터를 줄 지

서버 프로그래머가 동작을 미리 짜둔 것이다.

 

웹서버는 클라이언트가 오기 전까지 아무것도 안하고 가만히 있는다. 클라이언트가 와서 요청하면 그때부터 일을 시작한다.

 

예를들어 api는 https://naver.com에 에 접속할 때, naver.com 서버에 있는 "/" 창구에 요청을 보냈다 라고 이해할 수 있다. 그래서 그 창구에 있는 html파일을 받아서 가져오는 것임. "html 파일을 받아서 가져온다" 라는 약속을 한 것임.

 

 

 

서버 규모에 따른 클라이언트/서버 구조

100명의 개발자가 있는 회사에, 서버 프로그래머는 통상 몇명일까? 90명정도 된다. 대부분 서버프로그래머이다.

 

 

 

이런 전체 내용이 모아지면 통칭해 시스템 아키텍쳐라고 한다. 복잡해보이지만 이해할 필요는 없다.

일반 개발자가 이러한 것들을 하나하나 다 알 수 없다. 핵심은 서버쪽에서 해야 할일이 매우 많다는 것.

 

 

 

 

 

프로그래밍 언어란?

- 컴퓨터와 대화하기 위해 필요하다. -> 꼭 "서버"를 만들기 위해 필요한 게 아니라 컴퓨터에 모든 동작을 명령하는 것.

- 위와 같은 서버/클라이언트 프로그램들을 만든다. 그외에도 DB와 소통, 파일 100개 이름바꾸기, 1시간 뒤에 꺼지게 하기 등등 여러가지 일을 할 수 있음.

 

언어의 종류 

인터프리터 언어 : 위부터 아래로 차근차근 실행된다. 편하고 빠르게 개발할 수 있다. 

컴파일 언어 : 실행되기 전에 실행파일을 만들고 그것을 실행한다. 한번 실행파일을 만들면 끝. 하지만 개발 및 변경할때마다 실행파일을 만들어야 한다.

 

 

어떤 언어를?

- 파이썬은 문법이 직관적이라 쉽고, 자료가 많고 라이브러리가 매우 많다. 

- 라이브러리는 남이 짜놓은 코드이다. 갖ㅈ다 쓰기 좋다.

 

 

 

프레임워크란?

- 3분카레, 백종원 양념장 같은거

- 남이 짜놓은 틀 안에서 프로그래밍을 하므로 매우 편하게 할 수 있다.

- 라이브러리와 프레임워크 없이 개발한다는 건 치즈떡볶이를 만드는데 고추장 재료를 고추부터 키우고 치즈는 소부터 키우는 것이다.