MSA Full-Stack 개발자 양성 과정 -36일차 노트 필기_HTML 개요_220914

웹 프로그래밍 언어

Web FrontEnd

- HTML

: Hyper Text Markup Language
: 화면 구성 = GUI
ex) 로그인 화면, 가입폼, 게시판폼, 게시판 목록, 방명록, 장바구니 화면
      주로 사용자 입력 값을 받는 폼 구성
      사용자가 요청한 결과를 화면 폼에 출력
: version - HTML4 → HTML5

  HTML5는 다양한 API를 제공

 (Web Storage, Drag&Drop, Audio, Video, WebSocket....)

: 대소문자를 구분하지 않음, 오타를 내면 적용이 되지 않지만, 실행은 가능

 

- CSS

: Cascading Style Sheet의 약자로 HTML에 디자인을 추가한다. (화면의 레이아웃 - template)

  CSS를 이용하면 시각적으로 풍부하게 만들 수 있다.

  → 과거에는 플래쉬나 포토샵을 이용해서 시각적으로 풍부하게 만들었으나 요즘에는 CSS3로 가능

: 대소문자를 구분, 다만 오타를 내면 실행은 되나 css가 적용되지 않는다.

   

- JavaScript

: HTML에 기능(동작 = Event)을 추가

  대소문자를 완벽하게 구분

  자바의 개념과 비슷 → 객체 기반의 언어로 객체의 개념, 메소드 + 속성

  인터프리터 언어 → 소스 코드를 한줄씩 해석하면서 오류를 순차적으로 출력

 

** 웹브라우저(IE, Chrome, 파이어폭스, 사파리, 오페라...)는 기본적으로 위의 3가지 언어만 지원

: 브라우저가 해석할 수 있는 언어는 3가지

1) HTML: 구조

2) CSS: 표현

3) JavaScript: 동작

 

: Web Front 언어의 단점은 소스가 100% 공개된다.

: CS(Client Side) 언어, 클라이언트가 가지고 있는 웹브라우저에서 실행되는 언어로 브라우저의 영향을 받음

  같은 소스라도 브라우저마다 해석하는 방식이 달라 실행결과가 달라질 수 있다. 

  → 각 브라우저마다 단위 테스트 및 로직 수정이 필요함

 

** 위 단점을 해결하기 위해 최근 다양한 JavaScript 기반의 LIB를 제공한다.

     그 중 대표적인 lib jQuery → 모든 브라우저에서 동일하게 동작할 수 있도록 만들어놓은 경량의 javaScript 기반 lib이다.

 

: DB 연동의 기능이 없다.(영속성의 문제)

: HTML로 사용자 입력 값은 Back단으로 전송할 수 있으나 전송된 다음 페이지에서 해당 전송된 데이터를 받을 수 없다.

: 웹은 많은 페이지를 이용하는데, 이동할때마다 새로운 요청(request - response)이 이루어지는 것으로 상태정보를 유지할 수 없다.

** 위 3가지 단점으로 인해 Web BackEnd 기술 언어가 필요하다. - Servlet&JSP or ASP or PHP

 

Static Web Application: HTML, CSS, JavaScript로 이루어진 프로그램

Dynamic Web Application: HTML, CSS, JavaScript + BackEnd 언어로 함께 만들어진 프로그램

 

* MEAN Stack 개발자

1. MongoDB: noSQL

2. Express JS: Angular와 Node를 중간에 연결해주는 역할 - Controller의 개념

3. Angular JS: View

4. Node JS: BackEnd 기술

: 규모가 작은 웹사이트에 유리

 

*JavaScript기반의 언어가 새롭게 등장

: js기반으로 만들어놓은 LIB 형태 = FrameWork(Model+View+ViewModel) - MVVM

  1. Angular1.js → Angular2.js : 구글+개별 커뮤니티에서 만듦

  2. React.js: 페이스북에서 만듦

  3. Vue.js: EvanYou라는 개인이 만들어서 제공

 

Web BackEnd

: Servlet&JSP or ASP or PHP

 

**Java 기반의 Servlet&JSP

  - Java SE: 응용프로그램 개발

  - Java EE: 웹프로그램 개발

  - Java ME: 모바일 환경 프로그램 개발

 

: Servlet&JSP Dynamic Web Application

- JSP 문서에서 HTML, CSS, JavaScript 작성: View 역할

- Servlet: Controller 역할

- Java SE: Model 역할 (Service, DAO, DTO=VO,...)

 

** 웹 프로그래밍: MVC 구조로 웹사이트를 구축

    DB 연동을 통해 데이터 영속성을 유지할 수 있다. - JDBC 이용

   

**웹 브라우저는 HTML, CSS, JavaSript만 해석

   Servlet&JSP는 브라우저가 해석하지 못함

   따라서, BackEnd언어를 해석해서 브라우저가 해석할 수 있는 HTML 언어로 변환해주는 WebContainer가 필요함

   WebContainer = WebServer + Web Application Server로 구성, 대표적으로 Apache Tomcat을 무료로 이용

 

*Ajax 기술: 비동기화 통신 = ASynchronous JavaScript and XML

 : 화면의 새로고침 없이 서버와 통신(XMLHttpRequest)을 해서 그 결과를 받아 화면의 일부분을 갱신(Update)

 : JavaScript 언어를 이용해서 서버와 통신하고 그 결과를 XML 형태로 받아 화면을 갱신

 : 요즘은 JavaScript는 jQuery로, XML은 JSON의 형태로 많이 사용

 

XML (Extensible Markup Language)

: 필요한 태그를 직접 만들어서 사용 가능

: 서로 다른 언어 사이에서 데이터를 주고 받을 때, 데이터 포맷 형태로 많이 사용

ex) <과일>배</과일> // <운송수단>배</운송수단> -- 태그 사이에 element을 넣어 표현

ex) 게시판 목록을 뷰로 전달

     <boards>

         <board>

                  <no>1</no>

                  <subject>제목</subject>

                  <content>내용</content>

         </board>

         <board>

                  <no>2</no>

                  <subject>제목</subject>

                  <content>내용</content>

         </board>

         <board>

                  <no>3</no>

                  <subject>제목</subject>

                  <content>내용</content>

         </board>

 

      </boards>

 

**XML은 문법이 엄격하고 무거우며, 결과를 가져와서 파싱(해석)하는 과정이 복잡

   최근에는 XML 형태를 가볍게 사용할 수 있는 JSON형태로 많이 사용

   JSON의 구조: [{no:1, subject: "제목", content: "내용"},{no:2, subject: "제목", content: "내용"},{},....]

   요즘 XML은 주로 설정문서(configuration)에 사용

    ex)web.xml, server.xml

 

↔ HTML(Hyper Text Markup Language)

: 이미 DTD(definition)에 정의되어 있는 태그만 사용할 수 있음

: MarkUp은 태그로(< >) 이루어진 언어

 

---

웹 프로그래밍을 시작하기 위한 준비

1. 웹브라우저

: 크롬을 많이 사용

2. 어디서 코딩할까?

: 메모장에서 작성을 하지만 코딩을 손쉽게 할 수 있도록 도와주는 다양한 tool이 제공된다.

3. 코딩하는 코드를 실행할 때 어떻게 실행하나?

: FrontEnd 언어는 브라우져를 선택하고, 브라우저에서 그냥 실행하면 된다.

파일이 실행될 때, local이 아니라 웹서버에서 동작할 수 있도록 WebContainer가 필요

http://도메인:port/파일이름 실행을 해야만 was에서 동작

 

tomcat.apache.org 사이트에 가서 다운로드 받는다. - tomcat9

1) install version: 운영모드에서 권장

2) 압축 version: 개발모드에서 권장

** 주의: tomcat의 port 번호가 기본 8080이다.

             oracle에서 이미 8080 port를 사용

             충돌이 나지 않도록 tomcat의 port를 변경해서 사용한다.

 

---

Dynamic web project dirctory 구조

1. src/main/java: servlet과 자바 관련 파일 (~.java)

 

2. src/main/webapp: frontEnd 관련 소스들

                             HTML, CSS, JavaScript 등이 있는 곳

                             JSP 문서

   - webapp이 웹의 root이다.

 

3. src/main/webapp/WEB-INF 폴더에 frontEnd 관련 파일을 넣으면 실행이 되지 않음

4. src/main/webapp/WEB-INF lib 폴더:  backEnd 관련 lib 넣는 곳(ex> 오라클라이브러리)

 

---

HTML의 기본 골격

<!DOCTYPE html> <!--문서의 version을 나타낸다-->
<html>
<head>
<title>Page Title</title>
</head>
<body>
 <!--화면 구성을 하는 영역-->

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

: <!HTML의 버전   html만 간략하게 쓰면 HTML5를 뜻함

 

HTML 태그의 형태

: <태그 이름 속성="값" 속성 = '값'....>

     내용

  </태그 이름>