* 웹개발 초보라 강의 그대로 요약해서 잘못된 정보가 있을 수도 있습니다.
* 경희대학교 소프트웨어융합학과에서는 실제 강의가 되었던 여러 영상을 오픈하고 있습니다. 필요하신 분들은 찾아서 들으시면 좋을 듯 합니다. 본 게시글의 강의의 출처는 Web Programming: Lecture 17. Introduction to Web입니다.
<강의 내용>
- 웹 프로그래밍은 비교적 쉽다. 배울 것들이 몇 가지 있는데, 여러가지를 얕게 훑어서 깊이가 없다고 느껴질 수도 있습니다.
- HTML, CSS, Javascript - 클라이언트 관련
- Python, Node.js(server-side) - 파이썬으로도 서버를 구축할 수 있다. node.js는 굉장히 많이 쓰입니다.
- 컴공과에 웹 서비스 프로그래밍이라는 과목이 있다. 그 때 이 내용이 반복이 될 것이다.
- 이 수업만으로는 많이 부족할 테지만, 기본 지식으로서 이번 수업에 배운 것들이 많이 쓰일겁니다.
<Basic>
- Web programming이란 writing, markup, coding 등을 통칭합니다.
Web content, Web client, server scripting, Network security
- Most common languages : HTML, CSS, Javascript, (XML, Python, Perl 5, PHP)
- whois.domaintools.com 여기서 웹사이트의 IP 주소를 알 수 있다. 누가 가지고 있는지도.
IP address = protocol
- ip 주소를 dns(domain name service)로 해주는 주체는? 인터넷 공급자(kt, lg u+...)
사용자가 주소를 입력하면 서버에 신호가 가고 서버에서 웹을 보내준다.
- HTML : HyperTextMarkup Language
무언가 표시를 해주는 툴. 동작이 있거나 그러지는 X. 거의 모든 웹페이지의 기본.
- http는 통신 규약. The main protocol of the web
사용자 -> 인터넷 -> 서버
서버 -> 인터넷 -> 사용자
- HTML 빈 페이지 코드(기본 코드). (메모장으로도 확인 수 있음.)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>- HTML은 에디터들이 여러가지가 있는데, 그 중 추천하는 무료 에디터는 notepad++, visual studio code도 많이 써요.
- HTML은 태그로 이루어진 언어. 대부분 태그를 열었다면 닫아야 한다.
- HTML 탭 이름 추가 <title> - Hello
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
</body>
</html>
- HTML 구성.
<!DOCTYPE html>
<html>
<head>
Title CSS Javascript
<title> Title of the document</title>
</head>
<body>
Contents - 이 부분이 실제로 보이는 부분.
</body>
</html>
- 태그의 종류가 굉장히 많다.
- HTML 내용 추가 - <body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
I am going to learn to love HTML.
</body>
</html>- Bold체 - <b>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
I am going to learn to <b>love</b> HTML.
</body>
</html>
- 기울임체 - <em>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
I am <em>going to learn</em> to love HTML.
</body>
</html>
- <a> 태그 - 링크를 걸때 필요한 태그.
특성(Attribute)을 쓰는 태그가 있다.
<Tag Attr="value">Contents</Tag>의 형식.
<a href="http://swcon.khu.ac.kr">click here</a>여기서 href는 Atrribute name, "주소"는 value, click here은 contents이다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://swcon.khu.ac.kr">click here</a>
</body>
</html>- <br> 태그 - 줄바꿈 태그
닫는 태그가 필요없다. HTML은 빈칸을 인식하지 못하기 때문에 띄워라라는 태그를 입력해주어야 함.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
I am going to learn to love HTML. <br>
<a href="http://swcon.khu.ac.kr">click here</a>
</body>
</html>- <img> 태그
닫는 태그가 필요 없다. 형식은 <img src="value" alt="text">Contents
attribute가 여러개 있으면 그냥 attribute 쓰고 값쓰고 띄우고 attribute 쓰고 값쓰고... 의 형식으로 나열만 해주면 된다. 즉, 태그 하나에 여러개의 attribute를 쓸 수 있다.
여기서 alt는 대안책이라는 의미인데 이미지가 깨졌을 때 text가 뜰 수 있도록 한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src=http://www.udacity.com/cs253x/hipmunk.png alt="hupmunk!">
</body>
</html>- <p> 태그 - 줄바꿈 태그.
<br>과의 차이점은? 1. 닫는 태그가 필요하다. 2. <br>은 줄바꿈만. <p>는 문단 구분할 수 있을 정도로 줄바꿈에 간격이 있음.
-Inline/block Tag
<br> - inline 태그(예. <b>,<em>,<a>,<img>,<span>,<strong>(여기서 <strong>은 <b>와 마찬가지로 bold체로 만들어 주는데 <b>가 가끔 안 먹힐 때 사용한다. 그냥 처음부터 <b>보다는 <strong>태그를 쓰는 것을 권장.)
예) text<br>text
-> 그냥 단순히 줄바꿈 한 것. 추후 조작을 할 수 없음.
<p>Contents</p> - block 태그(예. <p>,<div>,<form>)
예) <p>text</p>text
-> 보이지 않는 영역이 구분되어 있음. 그래서 영역에 해당하는 문단에 다른 조작을 가할 수 있음.
- 두개의 예시 결과가 보기만 하면 비슷해 보임.
-> text
text
- 웹을 구성하는 용어들.
-URLs
: Uniform Resource Locator
예) http://www.naver.com/
여기서 http는 Protocol, www.naver.com은 Host name(domain name), /는 path(서버컴퓨터가 나에게 보내줄 path)를 의미함.
-URL : Query parameters(GET parameters)
URL에 정보를 담아 보낼 수 있다. 하지만 보안이 필요한 정보를 보낼 때는 적합하지 않은 방법이다.
예) http://example.com/foo?p=1
- URL : fragments
어떤 웹페이지를 보고 있는지 표시해주는 요소
예) http://www.example.com/foo#fragment
- URL: port
서버 컴퓨터가 있는데, 문을 열어놓을 수 있는데 열어놓은 문의 번호를 port라고 한다.
웹사이트를 구축하고 있는데 사람들이 도메인주소를 알고 있고, 완성이 덜 된 상태이다. 그러면 port를 지정하면 port번호까지 입력해야 웹사이트에 접속 할 수 있게 됨.
- 하지만 보안으로 쓰기에는 애매한 면이 있다. 때려맞히면 맞힐수 있기 때문에.
예) http://localhost:8000/
- HTTP
주소창에 주소를 적으면 브라우저가 request line을 보냅니다.
request line : GET / HTTP/1.1
-> GET이 method, /가 path, HTTP/1.1은 version이다.
- Given the following URL(문제)
http://example.con/foo/logo.png?p=1#tricky
What is the request line to GET this URL using HTTP/1.1?
-> GET /foo/logo.png?p=1 HTTP/1.1
- HTTP Request - a request line and headers
| A request line | GET /foo?p=1 HTTP/1.1 |
| Followed by headers. | Host: www.example.com |
| Name: value | User-Agent: Chrome v.17 |
request line은 일종의 우편물인데, 누구에게 갈지는 이미 정해져 있거든요. 가서 request line을 주는 것이기 때문에 사실 Host 이름을 헤더로 줄 필요는 없지 않느냐, 라고 할 수도 있어요. 이미 host에게 갔는데, 내가 찾고 있는 host를 쓸 필요가 없죠.
이게 어떤 때 쓰이냐면, 개인 웹사이트의 경우 크기가 작아서 서버 한 대에 여러개의 웹사이트를 구축할 수 있습니다. 한달에 1$를 내고 서버 컴퓨터를 빌려쓸 수 있다.
브라우저 정보 같은 경우는 홈페이지 관리자가 고객센터로 부터 항의를 받을 수 있다. 그 때 접속 기록을 볼 수가 있다. request line의 헤더들을 보고.
- responses
서버에 request를 보내면 응답을 할 것이다. 그게 responses.
Request (Request line)
: GET /foo HTTP/1.1
Response (Status line)
: HTTP/1.1 200 OK
여기서 HTTP/1.1은 version, 200은 Status code, OK는 Reason phrase이다.
- Status code
- 200 OK : The document is found
- 302 Found : The document is located somewhere else.
- 404 Not Found : The document is not found.
- 500 Server Error : The server broke while handling your request
-HTTP Response(서버의 헤더)
서버의 헤더에는 서버의 현재 시각, (서버의 종류), Content-Type, Content-Length 등을 보내준다.
- 확인할 수 있는 방법은? Yet Another REST Client(크롬 웹스토어-그냥 제일 위에 있는 거 선택함.)
'✨ 공부 기록 > 웹 개발' 카테고리의 다른 글
| [Ubuntu] error: XDG_RUNTIME_DIR not set in the environment. (0) | 2020.12.04 |
|---|---|
| [Ubuntu] sudo: unable to resolve host 해결 (0) | 2020.11.10 |
| IX클라우드 사용기(완전 첫걸음) (0) | 2020.11.10 |
