2020.02.17 과제 - 국여주

[국여주]

1. 02.14 수업내용 정리

Web api 에서 사용해주는 규칙들

DOM3, documentation object3

현재 페이지에서 발생되는 것들에 대한 구조 파악

ex. DOC html 에서 html == root tree

meta = 정보, 메타데이터

equiv : 문서의 초기정보

content 보통 웹은 생략

utf8 주의점 : 일관성있게 써줘야함 대소문자 일치 등

script 위치 주의 : 안먹힐때는 스크립트를 밑으로 내림. 링크를 걸어버릴때도

div - span 같이 생각해야

sementic elements 의미있는 요소들 ex. header, section..... footer

h = headtype , 함부로 쓰지 말아야하는 이유? 웹 접근성

h1 = 첫 번째 화면에 나오는 제목

on~ . : 이벤트 적인 것

onformatInput

node : 맨 마지막 단계

label 화면에 보여주는것 value 리턴값

embed?외부 응용프로그램이나 플러그인을 삽입하는 태그

geolocation api

alert 대신에 console.log 라는 것 쓸 수 있음 -- 중간중간 데이터 확인 가능

web storage :세션 처리 하는 동안에 기억

local ~

web socket 알림 뜨는거 , 브라우저 상의 메신저

web GL 그래픽적인 것 표현할때 사용

----------------------------

elements = objects

<input value ="" name ="age" id = "age" class = "star 다른클래스명1 2 3~~" ~~~~

식별자? : 자바에서의 식별자 = 변수, 클래스명, 홈페이지명

id = 하나일때 , 유일해야함 --> 스크립트에서 제어할 때 주로 씀

class = 클래스명 - 주로 stylesheets 에서 쓰일 때

star 라고 쓰여있는 곳은 획일화 시켜서 변하라는 명령 --> css에서 제어할 떄 주로 씀

name

서버단에서 데이터를 주고 받고 하는 것 : name 호출

파라미터에 무엇을 집어넣어! 등등 할때

request.getparameter(age) --- name

document.getElementsByClassName(name) -- 여러 개의 배열로 리턴하는 형태

element.attribute = new value == add.attribute == element.setAttribute(attribute, value)

document.write(text) ; 출력

document.getElementById(id).xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxonclick = function(){code}

-- 이 function 을 여기에서만 쓸것, 많이 쓸때는? 이름 넣어줘야(id X)

; 자바에서는 이너 클래스

<h1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxonclick="this.innerHTML='Ooops!'">Click on this text!</h1>

click on text 클릭하면 자리 바꾸라는 명령

<h1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxonclick="changeText(this)">Click on this text!</h1>

<script>

function changeText(id) {

  id.innerHTML = "Ooops!";

}

온클릭 누르면 현재 이벤트가 발생이 된 주체 -- 주체에다가 이벤트 집어넣으란 명령

===> 이벤트 적인 것을 처리할 때는 script 밑으로 내려 쓰자(습관들이는것이 편함)

다른 자리에 나타내 주려면?

<p>Click the button to display the date.</p> //p태그 밸류 없음

<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxonclick="displayDate()">The time is?</button>

<script>

function displayDate() { //inner html

document.getElementById("demo").innerHTML = Date();

}

</script>

<p id="demo"></p>

c.f. document.getElementById("myBtn").xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxonclick = displayDate;

여기서 displayDate 는 함수명,

이벤트 발생하는 걸 처리할거라는 선언, 지금 실행 X

토글기능 : 한 번 누르면 다른 것 나왔다가 하는 것

오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고,

다시 한번 누르면 다른 값으로 변하는 것을 의미

------------------------------------------

2. 02.17 수업내용 정리

1) 용어정리

■ WAS(Web Application Server) 

인터넷 상에서 HTTP를 통해 사용자 컴퓨터나 장치에 애플리케이션을 수행해 주는 미들웨어(소프트웨어 엔진)로 다음의 기능들을 제공한다.

① 응용 프로그램과 데이터베이스와의 원활한 접속 및 처리

② 여러 개의 트랜잭션에 대한 원활히 관리

③ 비즈니스 로직 수행

■ Servlet Container(JSP Container 또는 웹 컨테이너)

클라이언트의 요청에 의해 Servlet, JSP의 Instance를 생성하고 ,초기화시켜 주고 클라이언트의 요청을 스레드 단위로 처리하고 관리하는 서버측 자바 프로그램

Servlet, Spring Web MVC, Spring Boot(mvc와 환경설정만 다름)

C S

html, js, asp, JSP, php, WebServer : Web service 제공 DBServer : oracle, mySQL,SQlight ..

thymleaf....

요청 응답 -작업 용도에 따라 선택

tomcat 사용 FTP Server(file)

webServer, dbsever, ftpserver : 따로 잡아주는 것이좋음

지도 와 관련된 서버 - 웹서버에 넣으면 성능 저하, 웹2서버

Client 요청 -> Web Server 가 쓰레드 단위로 Server를 제공

- tomcat: client와 응답을 하기위한 컨테이너 -> WebServer로 구축해도 될만큼 성능 좋음

java 장점 : 플랫폼에 독립적-> os 아무거나 와도 좋고, web server 종류 관계없이 war 로 배포하면 됨

EJB 개선-> struts

<-> spring 선호↑

String 나오게 된 동기? ejv, struts 문제점 개선

진입장벽은 비슷하게 있으나 나중에 써먹기 좋음

■ 스트럿츠(Struts)

MVC(Model View Controller) 패턴의 FrameWork

■ Spring

스트럿츠가 자바 기반 웹 어플리케이션 전용이라면 스프링은 개발자와 프로젝트를 위한 자바(닷넷) 전 분야에서 사용할 수 있는 다목적 프레임워크

■ EJB(Enterprise JavaBeans)

기업 환경의 시스템을 구현하기 위한 서버측 컴포넌트 모델

//■출처 : 예제로 쉽고 빠르게 배우는 서블릿&JSP 파워포인트 자료

e-gov(전자정부표준 프레임워크)에서도 tomcat 사용

c.f. 속도전 시에는? db에서 곧바로 처리x,

db에서 처리할 데이터를 웹서버의 메모리에 똑같이 구축(mirroring) -> 클라이언트에 제공

db - 껐다가 저장하고 다시 켜야함

ex. 은행서버 12시에 내리는 이유? 저장, read , 메모리정화, log확인, 문제확인...

자바스크립트 역할? 못들음

asp - visual c++계열에서 클라이언트 요청 담당

ASP라는 페이지는 Web을 프로그래밍 할 수 있도록 해 주는, 서버에서 동작하는 페이지로써 기존의 HTML 페이지와는 상당히 다른, 동적인 구성을 가질 수 있게 해 준다.

apl com

---> JSP 등장(java server page)

tomcat

/conf

/lib : jar파일

/logs

/webapps : 우리가 지금부터 만들어줄것(Web application)

각각의 어플리케이션에 들어가는 것 ; web-inf, index.html, index.jsp ..

web app

web app name

폴더들

web files

~~~jsp, ~~html, ~~js, ~~css...

WEB-INF

classes // 백엔드 어플리케이션(서버구축 위한 자바파일들)

~~~.java

~~~.class

//배포시 보통은 자바파일 빼고, 조건 확인해야

web.xml : 환경설정파일(배포서술자, DD(Deployment Descriptor))

index.~~

------------login. do 주소 입력시

HTTP 상태 405 – 허용되지 않는 메소드

메시지 HTTP 메소드 GET은 이 URL에 의해 지원되지 않습니다.

---> 찾았는데 부를 수 없는 상황에서의 에러

//id-script, name-web, server쪽에서 값을 받아낼 때,class-css

===> 이것들 전부 식별자

get-post 방식 차이

get : 주소 뒤에 내용 뜸

post : 내가 써주는 내용이 url에 쓰면 안되거나, 너무 길때

3. LoginProcessServlet 분석과제 

[1] 설치 및 환경설정

1  eclipse EE 다운로드 - 실행

2 tomcat 다운로드 - 실행

- 이 때, 자바 버전에 맞춰 다운로드 받아야 함

2 preference _인코딩 UTF-8로 정리

c.f. 계속 복사하기 싫으면? 한 번 인코딩을 UTF-8로 통일한 뒤

workspace/ .metadata 폴더를 복사해 붙여넣는다.

preference - installed JREs - jdk 경로설정

3 tomcat 연동확인

- window > show view > server 클릭

4 동일 포트로 사용시 충돌 가능성이 있음 -> port 변경

이 때, localhost:8080 === tomcat/ROOT/index.jsp의 내용과 같음

** 충돌 시 해결방법

1) os상에서 실행 X, or startup의 포트 바꾸기

2) eclipse 에서 포트바꾸기 --> 수업 중에는 2번으로 실행함

[2]프로젝트 생성

프로젝트 생성 new> dynamic webproject>

context root(path , web app ) : 웹 어플리케이션 이름 -> 줄여써도 됨

- 프로젝트를 호출하는 이름이지 프로젝트이름 은 아님

content directory : 웹 어플리케이션이 올자리(html, css 등)

deployment descriptor : web.xml 에 자동으로 들어간다

<형태>

http://ip:port/webapp/index.~(html, jsp..)

http://ip:port/webapp/program명

예시 -> http://ip:port/HelloWeb/h.do //HelloWeb ->hw 로 줄여쓸수 있음!

톰캣은 web.xml 파일을 확인하여 Servlet 클래스를 매핑한 후, 이를 실행

url-pattern 을 기본으로 둔 경우 web.xml파일을 수정하여 바꿀 수 있음!

index.jsp 생성( 주의 : 첫글자가 소문자여야함) 

body부에 처리내용 입력

 1 action="login.do" : jsp 안에서 form 태그 안의 내용들을 처리해달라고 요청

    method : post방식으로 보낼 것으로 url창에 내용 보이지 않게함

    각각의 param 입력

 1 LoginProcessServlet 생성

  1) String 으로 멤버변수 userName, pw 각각 생성해준다.

doPost() : JSP에서 request한 내용 처리

request.getParameter("userName") : 요청한 userName을 싣고 가는 객체로, getParameter로 문자열을 반환한다.

     if문에서 입력한 데이터 값이 일치하면? setAttribute통해 각각 key, value값 넣어줌

   getAttribute => welcome.jsp 로 분기하며 foward(보냄)

        일치하지 않으면? 연결 끊고 loginFail.jsp로 재접속

login 성공시 호출할 페이지 Welcome

EL 태그 통해 msg의 value값 가져옴

login 실패시 불러오는 loginfail.jsp 파일

href 태그로 링크를 걸어 index.jsp 파일을 호출한다.