Web 시작

■ 응용 프로그램

-> Java + DB => 운영체제 위에서 동작하는 프로그램

■ 웹 프로그램

-> 브라우저 위에서 동작하는 프로그램
-> 언어:

1) FrontEnd

▶ HTML(Hyper Text Markup Language)

: 화면 구성 = GUI
ex ) 회원가입 폼, 로그인 폼, 상품등록 폼, 방명록, 게시판 화면.. 장바구니 화면 등

: 주로사용자의 입력값을 받는 화면 구성, 요청에 대한 결과화면을 출력하는 역할(VIEW)

:version - HTML4 --> HTML5 사용한다.

: HTML5는 기존의 마크업을 지원하면서 + 다양한 API 제공 (WebStorage, Drap&Drop, AIdio, Veio, WebSocket.. )

:대소문자를 안 가린다. 오타가 나면 실행은 되지만, 원하는 결과가 나오지 않는다.

▶ CSS(Cascading Style Sheet의 약자로 HTML에 디자인을 추가하는 것) - 화면의 레이아웃(template)

: Css를 이용하면 시각적으로 풍부하게 만들 수 있다(과거에는 플래시, 포토샵을 이용해서 많이 작업했으나 요즘 Css3에는 다양한 애니메이션 효과나 시각적으로 풍부하게 해주는 속성을 제공하기 때문에 Css3를 많이 이용한다)

: 대소문자를 가린다. 다만, 오타가 나면 실행은 되지만 디자인 적용이 안 된다.

▶ JavaScript

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

: 사용자의 액션이 일어났을 때 기능을 동작하게 만드는 것

: 완벽하게 대소문자를 가린다. 자바의 개념과 비슷하며 객체기반의 언어(객체 = 메소드 + 속성)

: 인터프린터 언어로 코딩을 하고 나면 파싱이라는 과정을 걸쳐 소스코드를 분석한다. 에러가 나면 실행이 안 된다..

• 웹 브라우저(IE, Chrome, Opera, Safari..)는 해석할 수 있는 언어는 딱 3가지
  - HTML : 화면의 구조
  - Css : 화면의 표현
  - JavaScript : HTML의 동작, 브라우저마다 해석하는 방식이 조금씩 달라서 브라우저에 따라 실행이 다를 수 있다는 단점이 있음. 이러한 단점을 해결하기 위해서 요즘은 다양한 javaScript 기반의 다양한 형태의 lib를 제공한다.(ex jQuery)
  • jQuery
    : javaScript로 미리 만들어 놓은 경량의 라이브러리
    : 모든 브라우져에서 동일하게 동작할 수 있ㄷ로고 노력을 해놓은 라이브러

• javaScript 기반으로 만들어 놓은 FrontEnd의 Framework - MVVM(Model + View + ViewModel)
  • Angular.js 1, 2 : 구글 + 개별 커뮤니티에서 만듦
  • React.js : 페이스북에서 만듦
  • Vue.js : Evan You라는 사람이 개인적으로 만듦
• FullStack 개발자 = FontEnd + BackEnd
• Mean Stack 개발자
  1) MongoDB - No_SQL(비관계형 DB)
  2) Express JS - Angular 와 Node를 연결해주는 역할(Controller의 개념)
  3) Angular.js - View
  4) Node.js - BackEnd 기술
•  
• 폴리그랏?
  프로그램에 가장 적합한 언어를 선택에서 그 언어로 개발하는 것
  상황에 맞는 언어들을 적절하게 쓰는 것
• HTML5 + Css3 + javaScript + jQuery 사용할 것

■ FonrtEnd 언어의 단점

• 소스가 100% 공개, 영속성의 문제가 있음
  : 예를 들어 게시판의 글을 남겨두면 그 글을 어딘가에 저장해야하는데 DB 연동의 기능이 없음
  : HTML에서 페이지를 이동하고 이동하면서 값을 전송할수는 있지만 다음 페이지에서 전송된 데이터를 받을 수 없다.
  그래서 결론은! BackEnd 기술이 필요함

■ BackEnd(Servelet & JSP or ASP or PHP)

: 우리는 Servelet & JSP를 사용해서 웹 프로젝트 진행

• Java 영역
  - J2SE
  - J2EE
  - J2ME

■ Servlet & JSP

: servlet이 곧 jsp , jsp가 곧 servlet

• JSP : View(jsp 문서엔에 html, css, javaScript을 그대로 코딩)
• Servlet : Controller (프론트와 백엔드를 연결함 백엔드에서 받은 것을 프론트로 전달하고, 프론트에서 오는 걸 백엔드로 전달하고)
• Java : Model (DTO, Service, DAO, ....)

-> 웹프로젝트, 즉 웹사이트를 구축할 때는 최소한 Html, Css, JavaScript, jQuery, Servlet, JSP, java, DataBase 정도가 있어야 구축 가능

-> 요즘은 웹개발을 쉽고 빠르게 개발하기 위해서는 FrameWork 기술을 사용한다.

• Html, Css, JavaScript, jQuery => Angular, React or Vue로 사용
• Servlet, JSP, java => Spring
• DataBase(JDBCAPI) => ORM Framewokr
• Ajax(ASynchronous JavaScript And XML) 기술 (언어X, 개념O)
  - 비동기화 기술
  - 화면의 새로고침 없이 화면의 일부분을 갱신(update) 하는 것
• javaScript --> jQuery : 비동기화 통신을 할 수 있도록 이벤트 처리해주는 것
• XML(MarkUp Language) --> JSON : Front와 Back에서 주고 받는 데이터의 타입
  xml구조 - 문법 엄격!!
  <과일>배</과일> / <선박>배</선박>

 

■ Web 구조

 

■ 준비사항

1) 웹브라우저 준비 - IE, chrome, opera(우리는 Chrome)
2) where? : 기본은 메모장, Vs_code tool, 우리는 eclipse(front 코딩 지원)
3) 어떻게 실행할까? 로컬에서 실행할 수 있지만, WebServer를 미리 준비해서 http://ip:port /파일이름으로 실행한다.
ex) https://www.naver.com/main.jsp
- Apache tomcat 준비
http://tomcat.apache.org - tomcat 9
- 다운로드

1) install version : 운영모드 사용

2) 압축 versoin : 개발모드 사용64-bit Windows zip


3) 설정 : tomcat 기본 port 8080 이다.
-> oracle이 내부적으로 8080 port를 사용한다.
-> 때문에 충돌날 것...
-> tomcat의 port를 변경한다 -> server.xml 문서에서 변경
-> 이클립스 standart 버전이면 안됨..


4) 프로젝트 생성
Dynamic Web Project 생성
: directory 구조
src/main/java --> ~.java 문서만 작성

src/main/webapp --> 브라우저에서노출되는 root directory
: html, css, javascript, 이미지...

scr/main/webapp/WEB-INF 폴더에 front 파일 넣으면 절대 실행 안 된다!!
scr/main/webapp/WEB-INF/lib 폴더는 BackEnd관련 lib 넣는 곳(ex, orcle driver)

        http://localhost:8000/step01_HTML/index.html -> 이 로컬 호스트가 WAS가 설치되어있는 것이라고 생각
        
        http://www.w3schools.com 사이트 주로 접속해서 레퍼런스 씀 
       

 

■ CSS

www.w3schools.com - css 참고하기 좋은 사이트

• Selector : hmtl에 마크업 되어있는 element들을 찾는 것(디테일하고 정확하게)
• 속성 : value
• 여러개일 경우 ;로 연결
• 대소문자 가림
• 단어 조합에 하이픈(-)이 들어감 : javaScript에서 동적으로 css 변경(~.style.textAlign = 낙타 표기법)
• External CSS: 외부에 공통 페이지를 하나 만들고 공통으로 css 적용
• Internal CSS : 각각 적용
• 0 이외는 뒤에 단위를 꼭 붙여야하며, 값과 단위 사이에 공백은 허용하지 않는다
• https://jsbin.com/?html,output
• emmit 이클립스에 적용하기
• https://colorhunt.co/
• top, right, left, bottom에서 얼마나 떨어지냐? - 무조건 position과 함께 사용!