Wisdom

1. 자바 웹 어플리케이션 생성하기

eclipse에서 File > New > Dynamic Web Project를 클릭합니다.

project name을 입력 후, New Runtime을 클릭합니다.

저는 이미 프로젝트를 만들어서 Tomcat을 설정해 놓은 상태라 8.0버전으로 설정되어 있습니다.

8.0버전을 선택 후, Next를 클릭합니다.

Browse를 클릭 후, Tomcat을 설치한 경로를 입력해 줍니다.

여기서 문제가 발생합니다!!

설치한 Tomcat은 8.0버전인데 eclipse는 8.0버전까지밖에 지원을 하지 않는다고 합니다.ㅜ

그래서 저는 이걸 https://sarc.io/index.php/tomcat/582-eclipse-tomcat-8-5-x

이 블로그를 참고해서 고쳤습니다. 저는 야매같지만 첫번째 방법으로 수정했습니다.

잘돌아갑니다.ㅎㅎ

2. 자바 웹 어플리케이션 작성

방금 만든 웹 어플리케이션을 클릭 후, New > Servlet을 클릭합니다.

다음과 같이 패키지와 클래스 이름을 입력하고 next를 클릭합니다.

다음과 같은 창이 뜹니다.

여기에서 제일 중요한 부분은 URL mappings입니다.

이 HelloServlet클래스가 WAS에 배포될 때 사용할 이름을 지정한 부분입니다.

지금은 eclipse가 자동으로 생성한 이름으로 설정되어 있는 상태입니다.

기본적으로 URL은 다음과 같은 규칙으로 생성됩니다.

http://localhost:8080/{프로젝트이름}/{URL Mapping값}

따라서 위와같이 어플리케이션을 만든다면 URL은 

http://localhost:8080/firstweb/HelloServlet 이렇게 되겠죠?

그다음 next를 누르고

doGet만 체크되게하고 finish해줍니다.

기본 코드에서 doGet 메소드를 변경해 줍니다.

이제 이 코드를 실행해봅시다.

src > servlet파일 > 우클릭 > run as 를 클릭해 줍니다.

항상 Tomcat을 사용할 것이기 때문에 밑에 always....체크박스를 체크해줍니다.

그후 실행하면

이렇게 잘 돌아갑니다!!!! :)

1. eclipse 설치

eclipse는 이미 설치되어 있어서 따로 설치할 필요 없었습니다.

perspective는 Java EE로 설정했습니다.

Java는 Java프로그래밍을 할때, JavaEE는 Java로 웹 어플리케이션을 만들때 더 유용한 perspective입니다.

2. Tomcat 설치

Apache Tomecat이란??

아파치 톰캣은 아파치 소프트웨어 재단에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다.

자바를 이용하여 작성되는 웹 어플리케이션은 WAS가 있어야만 실행할 수 있습니다.

톰캣은 처음 사용해보는거라 다운 및 설치 과정을 적어보겠습니다.

http://tomcat.apache.org로 이동한 후 "Tomcat 8"을 선택합니다.

Tomcat 8버전은 JDK 7이상에서 동작하며 Servlet Spec 3.1을 지원합니다.

Tomcat 9버전은 JDK 8이상에서 동작하며 Servlet Spec 4.0을 지원합니다.

zip 파일을 다운 후, 압축을 해제하여 파일을 엽니다.

다운받은 파일이 이렇게 생성되어 있습니다. 이중, bin파일을 클릭합니다.

저는 window라 window버전으로 진행해 보겠습니다.

startup.bat파일을 실행시켜 줍니다.

그럼 cmd창이 띄워지고 뭔가 촤라라라락 실행됩니다.

우리가 할 것은 잠시 기다린 후, 새로운 브라우저를 켜고

주소창에 http://localhost:8080 나 http://127.0.0.1:8080를 입력해 들어가보는 것입니다.

만약 잘 동작한다면,

다음과 같은 창이 띄워집니다.

Tomcat을 종료하려면, 다시 bin폴더로 들어가서 shutdown.bat을 더블클릭합니다.

종료후 다시 위의 주소로 들어가면 "사이트에 연결할 수 없음"오류가 뜹니다.

저는 8080포트 서버에 접속할 때,

다음과 같은 오류가 발생 했습니다.

https://monny.tistory.com/42

위의 티스토리에 오류 해결과정이 자세이 나와있어서 참고해서 오류를 수정했습니다.

8주간의 피로그래밍 활동이 끝났다.

HTML&CSS

Python

Django

세가지를 속성으로 정말 알차게 배웠다!!

멋진 선배분들의 강의와 온라인 강의로 기본 지식을 쌓아나갔다.

온라인 강의를 집중적으로 들은 후, 선배 기수분들의 강의로 실습하고 추가적으로 필요한 지식을 채웠다.

온라인 강의를 들을때 지루함을 조금 느꼈지만, 외부의 압박이 없었다면 그 많은 강의는 나 혼자의 의지로 절대 완강하지 못했을 것 같다.

또한 이 과정을 함께한 동기들이 없었다면 더더욱 불가능했을것 같다.

주 3회의 강의이외의 시간에는 매일 과제가 나갔다.

과제의 난이도가 어려운 듯 했지만, 열심히 하면 충분히 멋지게 완료하여 제출 할 수 있을 정도였다.

과제를 통해서 학습한 내용을 거의 완벽하게 체득했다고 보아도 무방할 정도로 과제의 퀄리티가 좋았다.

과제를 통해 구글링하는 실력도 많이 상승한것같다.

무엇보다 가치있었던 것은 일주일에 한번 있는 팀과제였다.

팀을 꾸려 하루동안 과제를 수행한 후 제출하는 방식이었다. 

혼자 틀어박혀 과제를 하는것이 아니다보니 장소 지정부터 과제 수행의 방향성, 아이디어 까지 의견을 조율할 것들이 생각보다 많았다.

그러나 모두들 열심히 하고자 했기 때문에 항상 좋은 방향으로 팀과제가 진행되었다.

팀과제를 통해 협업에 대한 양질의 경험을 쌓았다.

마지막 3주는 최종 팀프로젝트를 진행했다.

12기 동기들 모두가 각자의 프로젝트 아이디어를 발표하고 투표와 선배 기수분들의 심사로 최종 6개의 프로젝트 주제가 결정되었다.

자신의 아이디어가 채택된 사람은 팀장으로한 팀이 꾸려저 3주간 프로젝트를 완성했다.

감사하게도 나의 아이디어로 팀 프로젝트를 진행할 기회가 주어졌다.

팀장이라는 타이틀이 조금 부담스러웠지만, 응원해주고 열심히 참여해준 팀원들 덕분에 프로젝트를 성공적으로 마무리할 수 있었다.

팀프로젝트의 진행 과정과 결과물에 대한 포스팅을 추가로 작성할 계획이다.

피로그래밍 12기는 방학 뿐만아니라 학기중에도 각종 스터디로 모임을 계속해 나갈 예정이다.

피로그래밍을 통해 코딩을 배우고자 하는 열정 넘치는 좋은 사람들과 계속해서 공부할 수 있는 기회를 가질 수 있어서 너무 감사하다. 

이 소중한 인연을 계속해서 이어나가고 싶다!!

피로그래밍 13기에는 운영진으로 활동할 예정이다. 13기에는 어떤 멋진 사람들을 만나게 될 지 벌써부터 기대가 크다.

2학년이 끝나고 맞은 겨울 방학을 피로그래밍 활동을 통해 아쉬움 하나 없이 알차게 보낸것 같다.

대학생활 내내 이렇게 열심히 방학을 보낸 적이 없는데, 이제까지 왜 이렇게 방학동안 열정적으로 공부하지 않았나 약간의 후회가 든다ㅎㅎㅎ

앞으로의 방학 뿐 아니라 학기중의 시간들도 나의 미래를 위해 건전한 투자를 아낌없이 하고싶다!!

피로그래밍 너무 고마웠고, 우리 12기 동기들 너무 감사하고 사랑한다....♥

1. HTML layout태그

layout태그는 웹 페이지의 개요을 설정하는 태그입니다.

laydout태그를 사용한다고 해서 특별한 기능이 추가되는 것은 아닙니다.

기능은 div태그와 동일하나, 코드의 가독성의 높여줍니다.

종류로는..

- header

- section

- nav

- footer

- aside  등이 있습니다.

화면은 위와같이 구성하면 개요가 어떤지 한눈에 알기 쉽습니다.

2. HTML 구조설계

웹페이지를 만드는 것은 문서의 잡는 것이기 때문에 문서구조를 만드는 것이 가장 먼저 할 일 입니다.

이런식으로 큰 layout을 먼저 잡습니다.

ul, li, button, img등의 태그를 사용하여 내용을 채워줍니다.

브라우저에서 실행하면 다음과 같이 보여집니다. 아직 CSS작업을 하지 않았기 때문에

흰바탕에 검은 글씨 이지만, 문서의 개요는 다 짜여졌습니다.

3. class와 id 속성

위의 실습에서 li태그, div태그, img태그들이 여러번 중복되어 사용된 것을 확인 할 수 있습니다.

그런데 만약 이 태그들을 구분하여 사용하고 싶다면 어떻게 해야할 까요??

- id 속성

• 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
• 고유한 id값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도  용이합니다.

- class 속성

• 하나의 HTML 문서 안에 중복해서 사용 가능합니다.
• 하나의 태그에 여러개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
• 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.

위의 실습 코드에서 <li><h3>What we do 를 일관성있게 관리하기 위해서는 id가아닌 class속성을 부여해야 합니다.

왜냐하면, 위의 태그는 문서에서 3회 사용되었기 때문입니다.

이렇게 id는 문서당 하나만 사용가능하기 때문에 제약이 많습니다.(id를 중복 사용한다고해서 오류가 발생하지는 않습니다.)

그래서 실제로 HTML문서를 작성할 때에는 id보다 class 사용을 지향합니다.

1. CSS 선언방법

먼저 CSS의 구성에 대해 알아보도록 하겠습니다.

선택자는 HTML의 태그, class, id속성 등을 통해 어떤 것을 꾸며줄지 선택합니다.

CSS를 HTML안에 선언하는 방식은 크게 3가지가 있습니다.

• inlineHTML 태그 안에다 CSS를 선언하는 방식입니다.
• internalstyle 태그로 지정합니다.
• external외부파일(.css)로 지정하는 방식입니다. 가급적 이 방법으로 구현하는 것이 좋습니다.

위의 세 방식으로 같은 속성 값에 다른 value를 준다면,

inline > internal > external 순으로 가중치가 주어져서 적용됩니다.

만약, inline엔 빨강, internal엔 초록, external엔 보라색 value를 주었다면, 빨강색이 적용되는 것이죠!

3. 선택자

- tag로 지정하기

- id로 지정하기

- class로 지정하기

위의 3가지가 가장 대표적인 선택자 입니다. 위를 잘 응용하여 선택자를 다양하게 활용할 수 있습니다.

추가로, 상속관계를 표현하기 위한 자손 선택자와 후손 선택자가 있습니다.

자손이나 후손이나 그게 그말아니냐 하실 수 있습니다. 그러나 둘은 큰 차이점이 있습니다.

자손 선택자는 바로 직계 상속관계의 자식만 선택합니다.

후손 선택자는 직계 자식이 아니더라도 후손이라면 선택합니다.

자손 선택자를 사용한다면 div태그 바로 아래 p태그만 red가 적용됩니다.

그러나 후손 선택자를 사용하면, div태그 아래의 모든 p태그에 red가 적용됩니다.

5. Element가 배치되는 방법(CSS layout)

element를 화면에 배치하는 것을 layout 작업, Rendering과정이라고 합니다.

엘리먼트는 위에서 아래로 순서대로 블럭을 이루며 배치되는 것이 기본입니다.

그러나 웹 사이트는 보다 다양한 표현을 해야하기 때문에 css에서 추가적인 속성을 제공합니다.

• display(block, inline, inline-block)
• position(static, absolute, relative, fixed)
• float(left, right)

- display

각태그는 기본으로 가지는 display속성을 가지고 있습니다. 거의 대부분의 태그는 block속성이지만,

span, a태그 등의 소수의 태그는 inline속성을 가지고 있습니다.

우리는 display 속성을 사용하여 css를 통해 display를 임의로 변경할 수 있습니다.

display속성을 사용하여 배치가 위아래, 좌우로 흐르면서 쌓이기만 하면, 다양한 배치가 어렵습니다.

그래서 position속성을 사용합니다.

- position

position속성을 기본으로 static입니다.

absolute는 기준점에 따라 특별한 위치에 배치합니다.

기준점은 top/left/right/bottom으로 설정합니다.

기준점을 어떤 엘리먼트로 하느냐는 상위 엘리먼트를 단계적으로 찾아가 결정하는데,

static이 아닌 position이 기준입니다. 즉, 상위 엘리먼트를 확인했는데 static이면 넘어가고, 상위엘리먼트를 확인하고......이런식으로 기준점을 찾습니다.

relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다.

top/left/right/bottom으로 설정합니다.

absolute를 사용하기 위해 상위 엘리먼트에 relative를 선언하는 경우가 많습니다.

 fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.

- float

float속성을 통해서 원래의 flow에서 벗어나 둥둥 떠다닐 수 있습니다.

일반적인 배치에 따라 배치된 상태에서 float는, 벗어난 형태로 특벌히 배치됩니다. 

따라서 block엘리먼트가 float엘리먼트를 인식못하고 중첩되서 배치됩니다.

- 엘리먼트가 배치되는 방식 (box-model)

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정합니다.

margin, padding, border, outline으로 생성되는 것입니다.

box-shadow 속성도 box-model에 포함지어 설명할 수 있습니다.

box-shadow는 border 밖에 테두리를 그릴 수 있는 속성입니다.

- box-sizing과 padding

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있습니다.

box-sizing 속성으로 이를 컨트롤 할 수 있습니다.

box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있습니다.

학습을 마치며..

복잡한 layout을 직접 많이 만들어보는 것만이 자유자제로 element를 배치할 수 있는 실력을 갖추는 길인것 같다.

당연히 될 줄 알았던 것이 안되는 것을 경험하고,

생각한 방향으로 고치는 과정에서 많은 배움이 있었다.

05_browser에서의 웹 개발

개발자 도구를 열어서 newtwork확인

<script>태그 - Javascript코드

<meta>태그 - 어떤 형식의 문서인지

## html과 css코드가 예측하기 어려운 곳에 배치!! script태그도!

# javascript코드는 body태그 아래에 넣어주는게 좋다(프론트 로딩이 지연됨 방지)

06_웹서버

웹서버의 역할 : 클라이언트가 요청하는 HTML문서나 각종 resource를 전달

    - 리소스는 정적인 데이터나 동적인 결과가 될 수 있다.

웹 크롤러란?

    - 웹 사이트 정보를 읽어오는 것에 사용되는것

Rendering이란?

    - 웹 서버가 html문서와 여러 응답을 한데 모아서 웹 페이지로 보여지게 하는 것

웹 서버 소프트웨어의 종류

• Apache : 오픈 소스 sw. 거의 대부분의 운영체제에서 사용 가능
• Nginx : 더 적은 자원으로 빠르게 데이터를 서비스 하는것을 목적으로 만들어짐. 차세대 웹서버로 불림
• Microsoft

07_WAS(Web Application Server)

client / server구조

Client는 서비스를 제공하는 Server에게 정보를 요청하여 응답받은 결과를 사용합니다.

DBMS(database management system)

다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어

즉, 데이터베이스를 관리하는 소프트웨어입니다.

대표적인 제품 : MySQL, oracle...

단점 : DBMS에 클라이언트가 직접 접근하여 동작하는 방식에 문제가 있음

해결 : MiddleWare

MiddleWare

클라이언트와 DB사이에 또 다른 서버를 두는 방식입니다.

클라이언트는 middleWare 서버에게 요청을 보냅니다. 그럼 대부분의 로직은 MiddleWare 서버에서 처리하고, 

데이터를 조작할 일이 있으면 DB에게 부탁을 하고 결과를 클라이언트에게 보냅니다.

클라이언트는 복잡한 로직처리를 모두 서버에 맡기고 요청을 보내 결과만 출력하면 되게 됩니다.

이렇게 되면, 비즈니스 로직이 바뀌더라도 모든 클라이언트를 다시 배포할 필요없이 미들웨어 로직만 바꾸면 되게 됩니다.

WAS(Web Application Server)

웹의 역사가 길어질수록 사용자들의 요구가 많아졌습니다.

동적인 웹의 수요가 생긴것입니다. 

이런 웹의 경우, 브라우저에서 DBMS를 건드리는 경우가 많습니다.

브라우저를 클라이언트로 본다면, 브라우저와 DBMS사이에서 동작하는 미들웨어가 필요하게 되었습니다.

이 미들웨어가 WAS입니다.

! WAS의 주요기능 3가지 !

• 프로그램 실행 환경과 DB접속 기능의 제공
• 여러개의 트랜잭션을 관리
• 업무를 처리하는 비즈니스 로직의 처리

WAS는 웹서버의 기능도 기본적으로 제공합니다!!!

이번 부스트코스 웹과정에서는 Apache등의 서버를 설치하지 않고, TomCat만 설치해서 사용합니다.

웹 서버 vs WAS

웹 서버는 보통 정적인 콘텐츠를 웹 브라우저에게 전송합니다.

WAS는 동적인 결과를 브라우저에 전달합니다.

WAS도 자체 웹 서버 기능을 내장하고 있어서 웹서버와 WAS를 따로 설치할 필요는 없지만,

규모가 큰 서비스일수록 이 둘을 분리합니다

이전에는 브라우저의 동작에 대해 개발자가 알 필요가 없다고 생각했었다고 합니다.

그런데 간혹 개발자의 의도와는 다르게 브라우저가 작동하는 것,

브라우저의 동작을 어떻게 빠르게 할 수 있을까에 대한 고민에서 브라우저의 동작에 대한 이해가 소개되기 시작했습니다.

브라우저의 구성

- UI : 화면에 보이는 홈버튼, 되돌아가기 버튼등이 이에 해당합니다.

  이는 os수준에서 설정됩니다. 예를들어, Mac은 브라우저 왼쪽에 빨강 초록 노랑 동그라미로, window는 브라우저 오른쪽 -, ㅁ, x로 작은 아이콘이 표시됩니다.

- 브라우저 엔진 : 소스코드를 실행해서 브라우저에 보여주는 역할을 합니다.

  이는 브라우저를 실행하기 위한 핵심 엔진입니다.

- 렌더링 엔진 : 화면에 직접 위치를 잡고 색을 칠해주는 등의 역할을 합니다.

- 네트워킹

- 자바스크립트 인터프리터 : 자바스크립트 코드를 해석하는 역할을 합니다.

브라우저 엔진의 메인 플로우

인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있습니다.

그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.

브라우저마다 서로 다른 엔진을 포함하고 있습니다.

아래 그림이 대표적인 내용입니다.

HTML을 해석해 DOM Tree를 만들고, CSS를 해석해 Style Rules를 만듭니다.

그런데 DOM이 뭘까요..??

• HTML문서와 문서의 각 요소들의 데이터로 만든 큰 오브젝트
• 그 오브젝트를 조작하기 위한 인터페이스들(DOM API)

HTML문서를 프로그래밍 가능하도록 문서로 만든것! 이라고 정리할 수 있겠습니다.

(API : 쉽게말하자면 함수들의 묶음)

DOM은 xml, html등 마다 다르게 나옵니다.

우리는 스크립트 언어(자바스크립트)를 사용해 DOM에 접근할 수 있습니다.

이 과정에서 parsing과정이 필요하고 토큰단위로 해석되는 방식입니다.

CSS가 parsing되는 과정은 다음과 같습니다.

DOM Tree는 화면에 표시되어야 하기 때문에 CSS가 필요합니다.

스타일과 문서를 합하여 Render Tree를 만듭니다. 렌더트리는 화면 어디에 배치될 지, 어떻게 보일지를 결정합니다.

최종적으로 화면에 표시합니다.

학습을 마치며..

HTML과 CSS는 다른 언어인데 어떻게 한 화면에 표시될까...?하는 의문이 있었다.

오늘 학습을 통해 그 의문을 해소한 듯 하다.

사진 출처 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

1. 웹 Front_End란??

프론트 엔드는 client가 작업을 수행 할 수 있게 하기위해 client의 눈에 보여지는 부분입니다.

프론트 엔드는 사용자에게 사진, 동영상, 문서 등의 다양한 콘텐츠를 제공합니다.

또한, 사용자의 요청에 반응하여 동작합니다.

2. 웹프론트엔드의 역할

웹프론트엔드는 3가지 정도의 역할을 수행합니다.

- 웹 콘텐츠의 구조를 만들어 보여줍니다.(신문, 책과 같이)(제목, 본문, 메뉴리스트 등의 구조)

  : HTML

- 콘텐츠의 적절한 배치와 일괄된 디자인을 제공합니다.(예쁘게)

  : CSS

- 사용자의 요청을 잘 반영해야 합니다. (사용자와 소통하듯)

  : Javascript

3. 각각의 코드 예시

프론트엔드의 코드는 웹 에서 F12키를 눌러 개발자 도구로 볼 수 있습니다.

저는 부스트코스 강좌목록 페이지에서 확인해 보았습니다.

1) HTML

HTML은 콘텐츠의 구조를 나타내는 역할을 하기때문에

표시해 둔 부분과 같이 계층적인 구조로 되어 있습니다.

2) CSS

CSS는 HTML 문서를 예쁘게 꾸미는 역할을 합니다.

HTML태그(문서의 구조를 표현한 각 조각 단위)각각에 스타일(색, 폰트 사이즈, 여백...)을 주어서 표현합니다.

3) Javascript

Javascript는 웹의 동작을 표현하는 언어이기 때문에 코드가 위의 두 언어보다는 복잡할 수 있습니다.

강의를 모두 수강하고 나면 이 코드 해석할 수 있겠죠...??ㅎㅎㅎㅎ

4. 웹 Back_End란?

이미지 출처 : http://suhorukov.com/news_akademy/organizovyvaem-znakomstvo-s-back-endom-kurs-php-online

앞서 배운 프론트엔드는 수면위로 보여지는 모습이라면, 백엔드는 수면아래에 보여지지 않는 부분입니다. 

프론트엔드가 client side라면, 백엔드는 server side라고 할 수 있습니다.

백엔드에서는 프론트에 보여질 정보를 처리하고 저장하며, 사용자의 요청에 따라 정보를 내려주는 역할을 합니다.

5. 백엔드 개발자가 알아야 할 것

- 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)

   Javascript는 프론트엔드에서 많이 쓰이는 언어이지만, 새로운 기능이 많이 추가되면서 백엔드에서도 사용되는 언어입니다.

   부스트코스에서는 JAVA를 사용하여 백엔드를 개발하는 방법을 배울 예정입니다.

- 웹의 동작 원리

- 알고리즘, 자료구조 등 프로그래밍 기반 지식

- 운영체제, 네트워크등에 대한 이해

- 프레임워크에 대한 이해 (ex | spring)

- DBMS에 대한 이해와 사용방법(ex | MySQL, Oracle등)

학습을 마치며..

백엔드 개발자가 되기 위해 알아야 할 것들 중 아직 모르는것들에 대해 알게 되었다.

특히 DB에 대한 지식이 아직 부족한 것 같다..

부지런히 공부해야지...

부스트코스 웹 프로그래밍 코스 수강을 시작했습니다!!

부스트 코스를 통해 프론트엔드, 백엔드 + 실무에 필요한 기초적인 웹 애플리케이션을 만드는 방법을 학습 할 예정입니다.

1. 인터넷 (네트웍 통신)의 이해

인터넷(internet) = 웹(web) 이라고 생각하시는 분들이 많습니다.

저 또한 인터넷이나 웹이나 그 말이 그 말이지 뭐....라고 생각했습니다.ㅎㅎ

하지만 둘 사이에는 미묘한 차이가 있는데요.

인터넷은 컴퓨터들 사이의 네트워크를 일컫는 말입니다.

반면, 웹은 인터넷상에 얽혀있는 무형의 정보 네트워크를 일컫는 말입니다.

또한, www.(World wide Web) = 인터넷 !! 이라고 생각하시는 분들도 많습니다.

그러나 www는 인터넷 기반의 대표 서비스 중 하나입니다.

컴퓨터의 각 서버들이 '포트'라는 값으로 동작합니다.

웹은 그 서버들 중 하나인거죠..

그래서 인터넷은 TCP/IP을 기반으로 하는 네트워크 결합체라고 할 수 있겠죠!!

2. HTTP(Hypertext Transfer Protocol)란?

HTTP는 서버와 클라이언트가 인터넷 상에서 데이터를 주고 받기 위한 프로토콜입니다.

여기서 프로토콜이 무슨말인지 저는 잘 몰랐는데욯ㅎㅎ

프로토콜(protocol)은 컴퓨터 사이에서 데이터 통신을 원활하게 하기 위한 통신 규약입니다.

우리가 웹 서버에 접속해(블로그나, 쇼핑몰 등...) 자료를 볼 때,

사진을 볼 수 있고, 텍스트도 읽을 수 있고, BGM(오디오)도 들을 수 있죠??

또, 회원가입을 하거나 설문을 작성할 때는 우리가 타이핑을 해서 내용을 제출할 수 도 있습니다.

우리가 이런 서비스를 사용 할 수 있는 이유는 HTTP가 어떤 종류의 데이터도 전송 할 수 있기 때문입니다.

HTTP를 통해 주고받는 대표적인 파일은 html 문서파일이 있습니다. 

3. HTTP의 특징

- 서버/ 클라이언트 모델을 따른다.

- 요청(request)/응답(response) 방식으로 동작한다.

- 연결 상태를 유지하지 않는 비연결성 프로토콜이다.

쉽게 말해 우리가 노트북에서 부스트코스에 접속해 강의를 수강한다면,

강의를 수강하는 우리는 클라이언트!! 그리고 강의 페이지를 제공하는 부스트코스는 서버!!라고 할 수 있습니다.

우리가 부스트코스 강의 페이지 보여줘! 라고 요청하면, 서버에서 요청을 받아 응답해서 강의 페이지를 보여 주는것이죠ㅎㅎ

요청/응답 중요합니다!

서버는 클라이언트에게 응답을 하고나면, 바로 연결을 끊어버립니다.

그래서 클라이언트가 요청에 대한 응답을 받은 직후 또다시 요청을 보내더라도 동일한 클라이언트의 요청임을 알 수가 없습니다.

이런 특징을 무상태(Stateless) 라고 합니다.

stateless는 클라이언트와 서버가 연결을 계속 유지하지 않기 때문에 클라이언트/서버간의 최대 연결수 보다 훨씬 많은 요청과 응답을 처리할 수 있습니다.

이 특징 덕분에 HTTP는 불특정 다수를 대상으로 하는 서비스에 적합하다는 장점을 가집니다.

반면에, 서버가 클라이언트와의 연결을 끊어서 클라이언트의 요청 이전상황을 알 수 없다는 단점이 있습니다.

이 단점을 보완하기 위해 Cookie와 같은 기술을 도입해 정보를 유지 합니다.

4. HTTP의 작동방식

왼쪽의 pc가 클라이언트, 오른쪽이 서버입니다.

클라이언트에서 요청을 보내면, 서버에서 요청에 맞는 응답을 보내는 방식으로 작동합니다.

5. URL(Uniform Resource Locator)

URL = 인터넷 상의 자원의 위치 입니다.

쉽게 말해, URL은 특정 웹 서버의 특정 파일의 주소 입니다.

하나의 물리적 컴퓨터 안에는 여러 서버가 동작할 수 있는데,

이 서버는 포트 값이 다르게 동작해야 합니다.

HTTP서버는 기본 포트 값이 80번 입니다.

IP주소는 집의 주소이고, 포트는 집에 있는 방의 번호라고 할 수 있습니다.

6. HTTP작동 자세히 보기

요청에는 여러가지 방법이 있습니다.

요청시에 어떤 메서드로 요청을 보내느냐에 따라 방식이 정해집니다. 

요청 메서드는 요청의 종류를 서버에 알려주기 위해 사용합니다.

요청 메서드에는 GET, PUT, POST, DELETE, PUSH, OPTIONS등이 있습니다.

주요 4개의 메서드의 기능을 살펴보자면.....

- GET : 정보를 요청하기 위해서 사용한다. (SELECT)

- POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)

- PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)

- DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)

google페이지에 접속해서 F12를 눌러 개발자 모드를 실행 시키면

페이지에 접속하기 위해 get요청을 보냈음을 확인할 수 있습니다!!

학습을 마치며..

인터넷, 웹, http.... 일상 생활에서 너무 많이 쓰이는 단어들이라서 내가 이 용어들에 대해 정확히 알고 있는지 아닌지 조차 모르고 있었던것 같다.

이번 학습을 통해서 기본적인 웹의 동작 방식을 배웠지만,

웹에 대해 정확히 안다고 말할 수 있기까지는 더 많은 학습이 필요할 것 같다.