"코딩이 처음이어도 쉽게 배우는 웹개발"
1주차 D+1
1. 목차 및 계획
[수업목표]
- 웹의 작동원리와 웹을 개발하기 위해 배워야 할것을 알 수 있다.
- 웹의 뼈대와 HTML과 꾸미기인 CSS를 이해하고 사용 할 수 있다.
- 부트 스트랩을 활용하여 웹을 다양하게 구현 할 수 있다.
(배울것)
*웹은 개발의 기초!
- (게임 개발자의 기초라는데 게임배울때는 UNITY , C , C++ 위주로 햇던것같은 느낌???)
- 1주차 (HTML, CSS)
√ 웹의 뼈대를 만들 수 있음(HTML 활용)
√ 부트 스트랩도 활용
- 2주차 (Bootstrap, "Javascript")
√ 자바스크립트로 웹을 움직이게 만든다.
√ 자바학습 후 요청해서 받아온 데이터를 브라우저에 붙여 보여줄 수 있다.
√ HTML 파일이나 데이터가 바뀔떄 마다 맞는 데이터를 보여줘야 하기떄문.
√ 주내용 = Javascript.
- 3주차(JQuery, Fetch)
√ JQuery와 Fetch를 이용해 요청을 브라우저에 보여줄 수 있게 문법 배우기
√ 문법 연습 후, 라이브러리 활용하여 데이터 가져오기
- 4주차 (Firebase Project1)
√ 파이어베이스에 연동하여 프로젝트 1,2 만들기
- firebase를 통해 데이터를 데이터베이스에 넣고 가져오기
- Javascript, Firestore Database, Firebase 모두 활용
※ 헷갈리면 안되는것
= 원래는, 요청하는 클라이언트와 요청받은 데이터를 돌려주는 서버는 다른컴퓨터이다.
- 5주차 (Firebase Project2, Github, Python)
√ 프로젝트 최종 완성 및 배포
2. 웹 브라우저 작동원리
- 웹의 동작 개념
· 서버 / 클라이언트
1. ex) 네이버 들어가기 → 뉴스 스탠드 우클릭 → 검사
→ 뉴스스탠드라는 단어 더블클릭 → 원하는 단어로 수정 (내가 보는 네이버 화면만 바뀜)
2. 인터넷을 끄더라도 페이지는 유지된다.
3. 새로고침하면 뉴스 스탠드로 다시 돌아온다.
√ 이 3가지를 바탕으로 웹페이지가 어떻게 동작하는지 추론 가능!!!!!
√ 브라우저의 역할이란?
- naver.com 이라고 하고, 엔터를 땅치면 naver.com에 대응되어 있는 컴퓨터한테 브라우저가 가서
' 똑똑, 나 가져갈 거 있는데 그것 좀 줘' 라고 하면 브라우저가 뭔갈 줍니다.
그럼 그걸 받아와서 가져와서 그대로 보여주는 것
√ 인터넷과 상관없이 이 페이지가 계속 보여지는 이유는?
- 이미 내 컴퓨터에 가져왔기 떄문. (내것이 되어버림)
※ 틈새 용어정리
클라이언트 (요청하는 쪽) : 브라우저, 핸드폰, 컴퓨터
주는쪽 : 서버
★서버로 부터 무엇을 받아오냐???
HTML,CSS,JS를 준비 했다가 주다.
→ 우리는 그대로 그리는것.
HTML,CSS,JS는 뭐길래 그대로 그리기만 하면 웹페이지가 보여질까?
- HTML : 뼈대
- CSS : 꾸미기
- JS : 움직이기