Lecture 5
이번 강의에서는 Web programming에 대해 알아보았다.
컴퓨터가 정보를 교환하기 위한 방법으로 TCP/IP라는 프로토콜을 사용한다. 우편물과 마찬가지로 우편은 보낸사람과 받는 사람의 주소가 있는 것처럼 인터넷에도 요청주소와 리턴주소가 존재한다고 한다.
그 주소는 위와 같은 포맷으로 IP주소가 구성이 되며 각 자리에는 0~255까지의 정수가 들어간다. 즉 4자리의 주소로 표현할 수 있는 주소의 가짓수는 4 billion이 된다. 그리고 특별하게 필요한 것이 있는데 바로 port라는 것이며 http라고 알려진 것이다.
그리고 대게 위와 같은 이름으로 해당 주소로 접근하게 되며 이는 URL(Uniform Resource Locator)이라고 불린다. 이때 DNS(Domain Name System)로 접근이 가능하며 도메인 이름을 IP주소로 연결을 해준다.
위의 예시에서 .com이 의미하는 바는 TDL(Top Level Domain)이며 각 사이트의 성격에 맞게 바뀌며 com, net, org, mil, us, jp 등이 있다. 앞쪽의 www는 Subdomain이라고 하며 다른 카테고리의 도메인으로 연결할 때 유용하게 쓰인다.
위와 같이 실제적인 파일을 요청할 때 뒤쪽에 내용이 추가되는데 보통 html로 작성된 내용을 의미한다. 맨 앞의 HTTP(Hyper Text Transfer Protocol)는 예전부터 사람이 사용해왔던 관습같은것으로 request-return의 규약이다.
맨 윗줄을 http에 따라 IP주소 1.1의 내용을 얻겠다는 내용이며 밑줄에서 누가 해당 주소를 hosting하는지 알려주며 누가 domain name에 대해 서버운용을 담당하는지 알 수 있다.
위의 내용과 실질적으로 같은 내용이며 내재적으로 index.html을 요청하는 것으로 정해져있다고 한다.
요청 후 서버로부터 오는 응답은 1.1 주소의 내용을 제대로 가져왔다라고 숫자 200으로 알려주게 된다고 한다. content-type은 대부분 위와 같이 text/html이다.(human convention)
이번에 하버드 주소로 들어가보는데,
개발자툴로 창을 활성화하면 Network tap에서 브라우저에서 서버로 접근할때 일어나는 일들을 확인할 수 있다.
맨위쪽의 항목을 선택하면 서버에 요청했을 때 하버드 홈페이지에서는 HTTP/1.1 301 Moved Permanently라고 표기되어있는데 조금 밑에 보면 Location : https://www.harvard.edu/로 영구적으로 옮겼다는 내용을 확인 할 수 있다. 물론 바뀐주소로 접근한다면 제대로 요청했다는 의미로 Status에 200이라는 숫자를 볼 수 있다.
요청에 따른 응답 내용은 위와 같은 종류로 나뉘는 데 301은 규약에 따라 도메인 서버를 옮겼다는 내용인 것을 알 수 있다. 보통 우리가 자주 볼 수 있는 숫자는 404로 site not found의 경우가 에러메세지로 뜨는 것을 알고 있다.
이번엔 safetyshool.org라는 사이트로 접은했을때 yale 홈페이지로 redirecting된 것을 확인 할 수 있다.(301 Moved permanently)
html도 C와 같이 코드의 구조를 가지고 있으며 mark-up language라고 한다. 위는 CS50의 html source code를 보여주며 설명을 하고 있다.
html의 구조는 보통 위와 같으며 맨 위의 <!DOCTYPE heml>은 해당 코드가 html로 구성이 되어 있음을 알려주며 그 이후의 <>로 쌓인 것들은 tag라고 하며 html은 보통 이 태그들로 구성이 된다. tag들을 통해 어떤 내용이 어디에 위치하고 싶은지 결정할 수 있다. 태그를 통해 내용을 시작하고 (<title>) 종료한다(</title>)
위의 내용을 그대로 구현하여 테스트 서버를 통해 접근했을 때 구현이 되는지 확인하는 모습이다. 여기서 port가 8080으로 지정된 것을 볼 수 있는데 이는 일종의 관습이라고 한다. 25는 이메일에 443은 https에 쓰인다고 한다.
위의 브라우져 tap에 hello, title이라고 적혀있고 내용에는 hello, body라고 잘 표기되어 있는 것을 확인 할 수 있다.
여기서는 body에 하버드 홈페이지를 링크로 연결하는 모습이며,
이처럼 하이퍼링크로 연결을 시킬 수 있다. 다른 예시로는 이미지를 삽입하여 올리는 것을 보았다.
링크를 통해 paypal 사이트에 접근하여 source를 긁어 온뒤 html 코드를 그대로 붙여넣어서 실행하여도 그대로 구현이 되는것을 확인 할 수 있었다. 물론 DB와 제대로 연계가 되지 않을 것이기 때문에 모든 기능이 제역할은 못하겠지만 그만큼 html의 재현성이 우수함을 보여준다.(잘만 활용하면 좋은 소스가 된다)
이번엔 html의 다양한 기능을 사용하는 데 strong이라는 tag를 이용하여
이렇게 강조를 하기도 하고
위와 같이 p(paragraph)라는 tag를 이용하여 문구를 띄어주기도 한다.
h라는 태그를 통해 글자의 크기를 결정하는 것도 보여준다.
h뒤의 숫자가 커질수로 글자크기가 작아지는 것을 확인할 수 있다.
여기서는 휴대폰 숫자패드와 같이 나타내도로 구성하는 tag들을 소개하는데 tr과 td가 사용되었다. 또한 html 코드가 유효한지 아닌지 검토할 때 validator.w3.org라는 사이트에서 손쉽게 확인할 수 있다. (특히 브라우저에 따라 접근이 되고 안되는 문제에 있어 확인 가능-rendering)
이번엔 구글에서 cats를 검색했을 때 보이는 주소가 굉장히 복잡해보이는데 주소뒤에 search?q= 를 붙이고 검색어를 넣으면 똑같이 동작하는 것을 확인할 수 있다. 이는 기본적으로 search기능이 프로그램적으로 동작하기 때문이며 복잡하게 표현되는 것은 구글에서 html을 업데이트하기 때문에 나타나는 현상이라고 한다.
이번엔 search버튼을 만들어 검색을 시도할 때 구글 검색창에서 검색어에 대한 결과가 나타나도록 꾸미는 화면이다.
위처럼 검색창을 만들고,
form 태그를 통해 링크를 걸어주면 완성된다.
이번에는 사이트의 스타일을 조작하고자 할때 사용되는 CSS(Cascading Style Sheets)를 소개한다. 이 또한 프로그래밍 언어는 아니다.
위의 내용을 통해 글을 삽입하고,(©는 카피라이트 특수문자)
구성을 잡아둔 뒤에
위와 같이 좀 더 다듬어 주게 되면, (text-align:center가 짤린 내용이긴 하지만)
원하고자 하는 형식으로 변화시킬 수 있다. 내용은 바뀐 것이 없지만 스타일만 변경이 된 것이다.
위에서는 가운데 정렬을 각각의 header 태그에 기입했지만 이번에는 그 상단의 body 태그에 한번만 입력하면 똑같이 정렬이 되는 것을 알 수 있다. 이는 자식태그(header)가 부모태그(body)의 영향을 받는 특성을 가지고 있다고 할 수 있다.(heritage)
여기서 style태그를 통해 양식을 class로써 정의하는 모습이며 이렇게 하여 스타일에 대해 손쉽게 정의할 수 있음을 알 수 있다.
좀 더 용이하게 작업하는 방법을 css4.html에서 소개하는데 html과 css를 분리하여 저장하고 연동이 되도록 구성하는 방법에 대해 얘기한다. 스타일에 대한 내용을 따로 css로 저장하여 html에는 위와 같이 link 태그로 연결하면 깔끔해지게 된다.
JavaScript는 web programming에 특화된 언어이며 이전에 봐왔던 언어(C) 비슷한 특징들을 가지고 있다. 특히 user experience를 중요시하는 언어라고 한다. 특히 html내에서 동작을 담당한다.
Scratch와 Javascript를 비교하는 모습이다. C에서는 data type을 줬던 대신 let이라는 명령을 통해 초기화를 진행하는 모습이며 타입에 대한 고민을 하지 않아도 된다는 내용에서 더 쉬움을 알 수 있다.
대부분 C와 완전히 같은 문법을 표명하며 if문이나 while문 또한 같다.
for문도 거의 같지만 위에서 본 것과 같이 data type만 정하지 않고 let으로 설정하는것이 다름을 확인할 수 있다.
html에서 왼쪽과 같이 구성하면 오른쪽과 같이 메모리 상에서 우측과 같이 구조가 pointer를 통해 구성이 된 것처럼 완성이 된다.
hello1.html에서는 Javascript를 이용하여 좀 더 상호작용하는 모습으로 변환하는데 이름을 입력하면 팝업메세지로 hello,[name]을 출력하는 프로그램이다. greet라는 함수를 정의하여 입력받은 이름을 name이라는 변수로 관리하여 ID에 이용할 것이며 hello, world 부분을,
이처럼 단순하게 + 연산자와 name 변수를 이어주기만 하면 된다. C보다 굉장히 쉽게 짤 수 있다는 것을 알 수 있다.
이번 예시에서는 웹페이지 바탕색을 R, G, B 중 하나를 클릭하면 해당 색으로 변경이 되도록하는 코드이며 .onclick이라는 함수를 통해 클릭했을 시에 동작하도록 설정한 것을 볼 수 있다. 클릭했을 시에만 뒤의 function()의 명령이 수행되는 순서인것이다.
여기서 눈여겨 볼 점은 body의 경우 그대로 사용되고 red, green, blue의 경우 #표시가 붙어있는데 이는 body는 태그로 인식이 되어있기 때문이고 red, green blue는 태그가 아닌 id이기때문에 인식자로 사용하기 위해서 #를 붙여준다고 한다.
이번 예시에서는 같은 문구에 대해 문자크기를 선택하여 조정할 수 있는 코드이다. select 태그를 통해 값을 지정할 수 있고 밑에는 select 값이 변경이 되었을 때 (.onchange) style.fontSize가 변경되는 함수가 실행되는 구조이다.
마지막으로 GPS를 통해 현위치를 위도와 경도(수치)로 반환하는 코드이다. navigator라는 함수는 현위치를 반환하는 역할을 수행하며 마찬가지로 위도와 경도를 순서대로 출력해주는 것을 알 수 있다.
이런식으로 출력이 된다. 왜 오클라호마로 표기되는지는 알 수 없지만...(당황하는 David)
이번 강의에서는 Web programming에 대해 알아보았다.
컴퓨터가 정보를 교환하기 위한 방법으로 TCP/IP라는 프로토콜을 사용한다. 우편물과 마찬가지로 우편은 보낸사람과 받는 사람의 주소가 있는 것처럼 인터넷에도 요청주소와 리턴주소가 존재한다고 한다.
그 주소는 위와 같은 포맷으로 IP주소가 구성이 되며 각 자리에는 0~255까지의 정수가 들어간다. 즉 4자리의 주소로 표현할 수 있는 주소의 가짓수는 4 billion이 된다. 그리고 특별하게 필요한 것이 있는데 바로 port라는 것이며 http라고 알려진 것이다.
그리고 대게 위와 같은 이름으로 해당 주소로 접근하게 되며 이는 URL(Uniform Resource Locator)이라고 불린다. 이때 DNS(Domain Name System)로 접근이 가능하며 도메인 이름을 IP주소로 연결을 해준다.
위의 예시에서 .com이 의미하는 바는 TDL(Top Level Domain)이며 각 사이트의 성격에 맞게 바뀌며 com, net, org, mil, us, jp 등이 있다. 앞쪽의 www는 Subdomain이라고 하며 다른 카테고리의 도메인으로 연결할 때 유용하게 쓰인다.
위와 같이 실제적인 파일을 요청할 때 뒤쪽에 내용이 추가되는데 보통 html로 작성된 내용을 의미한다. 맨 앞의 HTTP(Hyper Text Transfer Protocol)는 예전부터 사람이 사용해왔던 관습같은것으로 request-return의 규약이다.
맨 윗줄을 http에 따라 IP주소 1.1의 내용을 얻겠다는 내용이며 밑줄에서 누가 해당 주소를 hosting하는지 알려주며 누가 domain name에 대해 서버운용을 담당하는지 알 수 있다.
위의 내용과 실질적으로 같은 내용이며 내재적으로 index.html을 요청하는 것으로 정해져있다고 한다.
요청 후 서버로부터 오는 응답은 1.1 주소의 내용을 제대로 가져왔다라고 숫자 200으로 알려주게 된다고 한다. content-type은 대부분 위와 같이 text/html이다.(human convention)
이번에 하버드 주소로 들어가보는데,
개발자툴로 창을 활성화하면 Network tap에서 브라우저에서 서버로 접근할때 일어나는 일들을 확인할 수 있다.
맨위쪽의 항목을 선택하면 서버에 요청했을 때 하버드 홈페이지에서는 HTTP/1.1 301 Moved Permanently라고 표기되어있는데 조금 밑에 보면 Location : https://www.harvard.edu/로 영구적으로 옮겼다는 내용을 확인 할 수 있다. 물론 바뀐주소로 접근한다면 제대로 요청했다는 의미로 Status에 200이라는 숫자를 볼 수 있다.
요청에 따른 응답 내용은 위와 같은 종류로 나뉘는 데 301은 규약에 따라 도메인 서버를 옮겼다는 내용인 것을 알 수 있다. 보통 우리가 자주 볼 수 있는 숫자는 404로 site not found의 경우가 에러메세지로 뜨는 것을 알고 있다.
이번엔 safetyshool.org라는 사이트로 접은했을때 yale 홈페이지로 redirecting된 것을 확인 할 수 있다.(301 Moved permanently)
html도 C와 같이 코드의 구조를 가지고 있으며 mark-up language라고 한다. 위는 CS50의 html source code를 보여주며 설명을 하고 있다.
html의 구조는 보통 위와 같으며 맨 위의 <!DOCTYPE heml>은 해당 코드가 html로 구성이 되어 있음을 알려주며 그 이후의 <>로 쌓인 것들은 tag라고 하며 html은 보통 이 태그들로 구성이 된다. tag들을 통해 어떤 내용이 어디에 위치하고 싶은지 결정할 수 있다. 태그를 통해 내용을 시작하고 (<title>) 종료한다(</title>)
위의 내용을 그대로 구현하여 테스트 서버를 통해 접근했을 때 구현이 되는지 확인하는 모습이다. 여기서 port가 8080으로 지정된 것을 볼 수 있는데 이는 일종의 관습이라고 한다. 25는 이메일에 443은 https에 쓰인다고 한다.
위의 브라우져 tap에 hello, title이라고 적혀있고 내용에는 hello, body라고 잘 표기되어 있는 것을 확인 할 수 있다.
여기서는 body에 하버드 홈페이지를 링크로 연결하는 모습이며,
이처럼 하이퍼링크로 연결을 시킬 수 있다. 다른 예시로는 이미지를 삽입하여 올리는 것을 보았다.
링크를 통해 paypal 사이트에 접근하여 source를 긁어 온뒤 html 코드를 그대로 붙여넣어서 실행하여도 그대로 구현이 되는것을 확인 할 수 있었다. 물론 DB와 제대로 연계가 되지 않을 것이기 때문에 모든 기능이 제역할은 못하겠지만 그만큼 html의 재현성이 우수함을 보여준다.(잘만 활용하면 좋은 소스가 된다)
이번엔 html의 다양한 기능을 사용하는 데 strong이라는 tag를 이용하여
이렇게 강조를 하기도 하고
위와 같이 p(paragraph)라는 tag를 이용하여 문구를 띄어주기도 한다.
h라는 태그를 통해 글자의 크기를 결정하는 것도 보여준다.
h뒤의 숫자가 커질수로 글자크기가 작아지는 것을 확인할 수 있다.
여기서는 휴대폰 숫자패드와 같이 나타내도로 구성하는 tag들을 소개하는데 tr과 td가 사용되었다. 또한 html 코드가 유효한지 아닌지 검토할 때 validator.w3.org라는 사이트에서 손쉽게 확인할 수 있다. (특히 브라우저에 따라 접근이 되고 안되는 문제에 있어 확인 가능-rendering)
이번엔 구글에서 cats를 검색했을 때 보이는 주소가 굉장히 복잡해보이는데 주소뒤에 search?q= 를 붙이고 검색어를 넣으면 똑같이 동작하는 것을 확인할 수 있다. 이는 기본적으로 search기능이 프로그램적으로 동작하기 때문이며 복잡하게 표현되는 것은 구글에서 html을 업데이트하기 때문에 나타나는 현상이라고 한다.
이번엔 search버튼을 만들어 검색을 시도할 때 구글 검색창에서 검색어에 대한 결과가 나타나도록 꾸미는 화면이다.
위처럼 검색창을 만들고,
form 태그를 통해 링크를 걸어주면 완성된다.
이번에는 사이트의 스타일을 조작하고자 할때 사용되는 CSS(Cascading Style Sheets)를 소개한다. 이 또한 프로그래밍 언어는 아니다.
위의 내용을 통해 글을 삽입하고,(©는 카피라이트 특수문자)
구성을 잡아둔 뒤에
위와 같이 좀 더 다듬어 주게 되면, (text-align:center가 짤린 내용이긴 하지만)
원하고자 하는 형식으로 변화시킬 수 있다. 내용은 바뀐 것이 없지만 스타일만 변경이 된 것이다.
위에서는 가운데 정렬을 각각의 header 태그에 기입했지만 이번에는 그 상단의 body 태그에 한번만 입력하면 똑같이 정렬이 되는 것을 알 수 있다. 이는 자식태그(header)가 부모태그(body)의 영향을 받는 특성을 가지고 있다고 할 수 있다.(heritage)
여기서 style태그를 통해 양식을 class로써 정의하는 모습이며 이렇게 하여 스타일에 대해 손쉽게 정의할 수 있음을 알 수 있다.
좀 더 용이하게 작업하는 방법을 css4.html에서 소개하는데 html과 css를 분리하여 저장하고 연동이 되도록 구성하는 방법에 대해 얘기한다. 스타일에 대한 내용을 따로 css로 저장하여 html에는 위와 같이 link 태그로 연결하면 깔끔해지게 된다.
JavaScript는 web programming에 특화된 언어이며 이전에 봐왔던 언어(C) 비슷한 특징들을 가지고 있다. 특히 user experience를 중요시하는 언어라고 한다. 특히 html내에서 동작을 담당한다.
Scratch와 Javascript를 비교하는 모습이다. C에서는 data type을 줬던 대신 let이라는 명령을 통해 초기화를 진행하는 모습이며 타입에 대한 고민을 하지 않아도 된다는 내용에서 더 쉬움을 알 수 있다.
대부분 C와 완전히 같은 문법을 표명하며 if문이나 while문 또한 같다.
for문도 거의 같지만 위에서 본 것과 같이 data type만 정하지 않고 let으로 설정하는것이 다름을 확인할 수 있다.
html에서 왼쪽과 같이 구성하면 오른쪽과 같이 메모리 상에서 우측과 같이 구조가 pointer를 통해 구성이 된 것처럼 완성이 된다.
hello1.html에서는 Javascript를 이용하여 좀 더 상호작용하는 모습으로 변환하는데 이름을 입력하면 팝업메세지로 hello,[name]을 출력하는 프로그램이다. greet라는 함수를 정의하여 입력받은 이름을 name이라는 변수로 관리하여 ID에 이용할 것이며 hello, world 부분을,
이처럼 단순하게 + 연산자와 name 변수를 이어주기만 하면 된다. C보다 굉장히 쉽게 짤 수 있다는 것을 알 수 있다.
이번 예시에서는 웹페이지 바탕색을 R, G, B 중 하나를 클릭하면 해당 색으로 변경이 되도록하는 코드이며 .onclick이라는 함수를 통해 클릭했을 시에 동작하도록 설정한 것을 볼 수 있다. 클릭했을 시에만 뒤의 function()의 명령이 수행되는 순서인것이다.
여기서 눈여겨 볼 점은 body의 경우 그대로 사용되고 red, green, blue의 경우 #표시가 붙어있는데 이는 body는 태그로 인식이 되어있기 때문이고 red, green blue는 태그가 아닌 id이기때문에 인식자로 사용하기 위해서 #를 붙여준다고 한다.
이번 예시에서는 같은 문구에 대해 문자크기를 선택하여 조정할 수 있는 코드이다. select 태그를 통해 값을 지정할 수 있고 밑에는 select 값이 변경이 되었을 때 (.onchange) style.fontSize가 변경되는 함수가 실행되는 구조이다.
마지막으로 GPS를 통해 현위치를 위도와 경도(수치)로 반환하는 코드이다. navigator라는 함수는 현위치를 반환하는 역할을 수행하며 마찬가지로 위도와 경도를 순서대로 출력해주는 것을 알 수 있다.
이런식으로 출력이 된다. 왜 오클라호마로 표기되는지는 알 수 없지만...(당황하는 David)
댓글
댓글 쓰기