Wisdom

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.... 일상 생활에서 너무 많이 쓰이는 단어들이라서 내가 이 용어들에 대해 정확히 알고 있는지 아닌지 조차 모르고 있었던것 같다.

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

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