<progress> 태그

2020/HTML 2020. 3. 20. 16:56
반응형
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <progress value="0" max="100"></progress>
    <script>
      const progress = document.querySelector("progress");
      const interval = setInterval(function() {
        progress.value += 10;
        if (progress.value >= 100) clearInterval(interval);
      }, 1000);
    </script>
  </body>
</html>

1초에 10씩 10초동안 게이지가 차는걸 보여줍니다.

progress는 bar라고 생각하시면 됩니다.

 

반응형

'2020 > HTML' 카테고리의 다른 글

<html> 위 첨자, 아래 첨자  (0) 2020.03.19
<mark> <em>  (0) 2020.03.19
HTML 약어 설정하기 <abbr>  (0) 2020.03.19
<a> 링크 새창에 띄우기.  (0) 2020.03.19
블로그 이미지

꽃꽂이하는개발자

,
반응형

며칠전 면접을 보았는데 거기 필기문제에 Page, Reqest, Session, Application 의 Scope에 관한 문제가 나오더군요.

 

1. (JSP) Page scope

실제 선언된 JSP페이지 내에서만 사용할 수 있습니다.

  • PageContext추상 클래스를 사용하며,
  • JSP페이지에서 pageContext라는 내장객체로 사용이 가능합니다.
  • pageContext이름.setAttribute(), pageContext이름.getAttribute()등의 방법으로 바로 사용이 가능합니다.
  • forward가 될 경우 해당 Page scope에 지정된 변수는 사용할수가 없습니다. 어떤 페이지로 요청이 들어온 뒤, 다른 페이지로 forward될 경우 이전 page scope내에 있던 변수는 forward된 page scope내에서 사용할 수가 없습니다.
  • 그러나 Request는 forward와 상관없이, 한번 요청 후 응답할 때까지 계속 유지 됩니다.
  • 마치 지역변수처럼 사용된다는 것이 다른 Scope들과 다른 점입니다.
  • pageScope는 지역변수와 별 차이가 없기 때문에 많이 쓰이지는 않지만, 종종 필요한 경우가 있습니다. JSP에서 pageScope에 값을 저장한 후 해당 값을 EL 표기법 등에서 사용할 때, 지역 변수처럼 해당 JSP나 Servlet이 실행되는 동안에만 정보를 유지하고자 할 때 사용됩니다.

2. Request scope

  • 클라이언트로부터 하나의 요청이 들어와서 서버가 일을 수행한 후 응답을 보낼때까지, 계속 사용할수 있는 scope입니다.
  • Web container 안에 있는 Servlet에 대한 http요청을, WAS가 받아서 웹 브라우저에게 응답할 때까지 변수 값을 유지하고자 할 경우 사용합니다. 모든 요청이 들어올 때마다, WAS는 request 객체와 response 객체를 만듭니다. forward여부 등과 상관없이, 하나의 요청이 들어와서 응답이 나갈 때까지 계속 유지됩니다.
  • Servlet의 service() 메소드가 끝날 때 Request Scope가 끝납니다.(request객체가 없어집니다.)
  • JSP에서는 request 내장 변수를 사용합니다.
  • Servlet에서는 HttpServletRequest 객체를 사용합니다.
  • 값을 저장할 때는 request 객체의 setAttribute() 메소드를 사용합니다.
  • 값을 읽어 들일 때는 request객체의 getAttribute() 메소드를 사용합니다.
  • 사용목적은 forward시 값을 유지하고자 사용합니다.
  • forward 하기 전에 request 객체의 setAttribute()메소드로 값을 설정한 후, Servlet이나 JSP에게 결과를 전달하여 값을 출력하도록 하였는데, 이렇게 forward되는 동안 값이 유지되는 것이 Request scope를 이용한 것입니다.

3. Session scope

  • session 객체가 생성되고 소멸 될 때까지 request는 하나의 요청과 응답이 나갈때까지이지만, Session scope는 session객체가 만들어 져서 소멸될 때까이므로, 하나가 아닌 여러개의 요청이 들어와도 계속 남아 있습니다.
  • 웹 브라우저 별로 변수를 관리하고자 할 경우 사용하며, 보통 웹 브라우저를 클라이언트라고 지칭하는데, 이는 여러 개가 있을 수 있습니다. Session scope는 하나의 클라이언트마다 객체를 만들어서 관리하는 것입니다. 따라서 session scope는 한 클라이언트 내의 여러 개의 request들을 다 커버합니다.
  • 웹 브라우저 탭 간에는 세션정보가 공유되기 때문에, 각각의 탭에서는 같은 session정보를 사용할 수 있습니다.
  • Request scope와 달리, 하나의 session scope내에서는 하나의 request가 끝난다고 해도 session객체는 계속 유지될 것입니다. 미리 지정해 놓은 시간이 초과되거나, 탭이 닫히는 경우에 session이 종료됩니다. 즉 request보다는 정보를 오래 유지하게 되는 것입니다.
  • HttpSession 인터페이스를 구현한 객체를 사용합니다.
  • JSP에서는 session 내장 변수를 사용합니다.
  • Servlet에서는 HttpServletRequest의 getSession() 메소드를 이용하여 session 객체를 얻습니다.(여기서 Request의 메소드를 사용하는 이유는, session 객체가 어떤 클라이언트의 요청인지 알아야 하기 때문입니다.)
  • 값을 저장할 때는 session객체의 setAttribute()메소드를 사용합니다.
  • 값을 읽어 들일 때는 session객체의 getAttribute()메소드를 사용합니다.
  • 쇼핑몰 장바구니처럼 사용자 별로 유지되어야 할 정보가 있을 때 사용합니다.

4. Application scope

  • 하나의 application이 생성되고 소멸될 때까지 계속 유지합니다.
  • Eclipse에서 하나의 Project가 하나의 Application이라고 생각하면 되고, 하나의 Server에는 여러 개의 Web application이 존재할 수 있습니다.
  • 웹 어플리케이션이 시작되고 종료(혹은 다시 시작)될 때까지 변수를 사용할 수 있습니다.
  • ServletContext 인터페이스를 구현한 객체를 사용합니다.
  • JSP에서는 application 내장 객체를 이용합니다.
  • Servlet의 경우는 getServletContext() 메소드를 이용하여 application 객체를 이용합니다.
  • 웹 어플리케이션 하나당 하나의 application 객체가 사용됩니다.
  • 값을 저장할 때는 applciation객체의 setAttribute() 메소드를 사용합니다.
  • 값을 읽어 들일 때는 application객체의 getAttribute() 메소드를 사용합니다.
  • 모든 클라이언트가 공통으로 사용해야 할 값들이 있을 때 사용합니다. 하나의 application scope는 여러 클라이언트들이 사용할 수 있기 때문입니다.

 

 

참고 사이트

https://starkying.tistory.com/entry/Servlet-JSP%EC%9D%98-4%EA%B0%80%EC%A7%80-Scope

반응형
블로그 이미지

꽃꽂이하는개발자

,
반응형
x<sup>4</sup>+y<sup>3</sup> <br />
    엄마 코끼리<sub>아기코끼리</sub>

 

반응형

'2020 > HTML' 카테고리의 다른 글

<progress> 태그  (0) 2020.03.20
<mark> <em>  (0) 2020.03.19
HTML 약어 설정하기 <abbr>  (0) 2020.03.19
<a> 링크 새창에 띄우기.  (0) 2020.03.19
블로그 이미지

꽃꽂이하는개발자

,

<mark> <em>

2020/HTML 2020. 3. 19. 23:15
반응형
<mark>사랑</mark>해   //mark태그는 배경이 형광색으로 변하면서 강조해주는 태그
<em>사랑</em>해       //단순한 의미 강조 표시(중첩가능, 중첩될수록 강해짐, 기본 이탤릭)
<strong>사랑</strong> //기본적으로 두껍게 표시
<i>사랑</i>해         // 일반 글자와 구분하기 위해(아이콘, 특수기호)사용. 기본 이탤릭체
반응형

'2020 > HTML' 카테고리의 다른 글

<progress> 태그  (0) 2020.03.20
<html> 위 첨자, 아래 첨자  (0) 2020.03.19
HTML 약어 설정하기 <abbr>  (0) 2020.03.19
<a> 링크 새창에 띄우기.  (0) 2020.03.19
블로그 이미지

꽃꽂이하는개발자

,
반응형
Using <abbr title="Hyper Text Markup Language">HTML</abbr> is Fun and Easy.

위와 같이 abbr 태그를 사용하면 HTML에 점선이 표현되면서 마우스를 HTML에 올려 놓으면 title에 적어놓은 Hyper Text Markup Language 가 보입니다.

 

 

반응형

'2020 > HTML' 카테고리의 다른 글

<progress> 태그  (0) 2020.03.20
<html> 위 첨자, 아래 첨자  (0) 2020.03.19
<mark> <em>  (0) 2020.03.19
<a> 링크 새창에 띄우기.  (0) 2020.03.19
블로그 이미지

꽃꽂이하는개발자

,
반응형
<a href="http://www.google.co.kr" target="_self"> 현재 출력되고 있는 페이지에 google 띄우기</a>

<a href="http://www.google.co.kr" target="_blank">새로운 창에 google 띄우기</a>

기본적으로 target은 _self로 설정되어 있으며 target="_blank"를 통하여 새로운창에 링크를 띄울 수 있습니다.

 

반응형

'2020 > HTML' 카테고리의 다른 글

<progress> 태그  (0) 2020.03.20
<html> 위 첨자, 아래 첨자  (0) 2020.03.19
<mark> <em>  (0) 2020.03.19
HTML 약어 설정하기 <abbr>  (0) 2020.03.19
블로그 이미지

꽃꽂이하는개발자

,
반응형

Q. Servelt, JSP

A.

Servlet - Container가 이해할 수 있도록 구성된 자바코드로 이루어진 Html in JAVA

JSP(Java Server Page) - Html기반에 자바코드를 블록화하여 삽입한 것(JAVA in Html)

 

Q. Get과 Post차이

A. 

1. GET방식

  • 클라이언트에서 서버로 데이터를 전달할 때, 주소 뒤에 "이름"과 "값"이 결합된 쿼리 스트링 형태로 전달
  • 주소창에 쿼리 스트링이 그대로 보여지기 때문에 보안성이 떨어진다.
  • 길이에 제한이 있다.
  • Post방식보다 상대적으로 전송 속도가 빠르다.

2.POST방식

  • 일정 크기 이상의 데이터를 보내야 할 때 사용한다.
  • 서버로 보내기 전에 인코딩하고, 전송 후 서버에서는 다시 디코딩 작업을 한다.
  • 주소창에 전송하는 데이터의 정보가 노출되지 않아 Get방식에 비해 보안성이 높다.
  • 속도가 Get방식보다 느리다.
  • 쿼리 스트링(문자열)데이터 뿐만 아니라. 라디오 버튼, 텍스트 박스 같은 객체들의 값도 전송이 가능하다.

3. GET, POST차이

  • Get은 주로 웹 브라우저가 웹 서버에 데이터를 요청할 때 사용
  • Post는 웹 브라우저가 웹 서버에 데이터를 전달하기 위해 사용
  • GET을 사용하면 웹 브라우저에서 웹 서버로 전달되는 데이터가 인코딩되어 URL에 붙는다.
  • POST방식은 전달되는 데이터가 보이지 않는다
  • GET방식은 전달되는 데이터가 255개의 문자를 초과하면 문제가 발생할 수 있다.
  • 웹 서버에 많은 데이터를 전달하기 위해서는 POST방식을 사용하는 것이 바람직하다.

Q. Session가 Cookie

A.

1. Session과 Cookie 사용이유

  현재 우리가 인터넷에서 사용하고 있는 HTTP 프로토콜은 연결 지향적인 성격을 버렸기 때문에 새로운 페이지를 요청할 때마다 새로운 접속이 이루어지며 이전 페이지와 현재 페이지 간의 관계가 지속되지 않는다. 이에 따라 HTTP프로토콜을 이용하게 되는 웹사이트에서는 웹페이지에 특정 방문자가 머무르고 있는 동안에 그 방문자의 상태를 지속시키기 위해 쿠키와 세션을 이용한다.

 

2. Session

  • 특정 웹사이트에서 사용자가 머무르는 기간 또는 한 명의 사용자의 한번의 방문을 의미한다.
  • Session에 관련된 데이터는 Server에 저장된다.
  • 웹 브라우저의 캐시에 저장되어 브라우저가 닫히거나 서버에서 삭제시 사라진다.
  • Cokkie에 비해 보안성이 좋다.

3. Cookie

  • 사용자의 정보를 유지할 수 없다는 HTTP의 한계를 극복할 수 있는 방법
  • 인터넷 웹 사이트의 방문 기록을 남겨 사용자와 웹사이트 사이를 매개해주는 정보이다.
  • Cookie는 인터넷 사용자가 특정 웹서버에 접속할 때, 생성되는 개인 아이디와 비밀번호, 방문한 사이트의 정보를 담은 임시파일로써, Server가 아닌 Client에 텍스트 파일로 저장되어 다음에 해당 웹서버를 찾을 경우 웹서버에서는 그가 누구인지 어떤 정보를 주로 찾았는지 등을 파악할 때 사용된다.
  • Cookie는 Client PC에 저장되는 정보이기 때문에, 다른 사용자에 의해서 임의로 변경이 가능하다.

Q. 보안성이 낮은 Cookie대신 Session을 사용하면 되는데 안하는 이유?

A. 모든 정보를 Session에 저장하면 Server의 메모리를 과도하게 사용하게 되어 Server에 무리가 가게된다.

 

Q. MVC패턴

A.

1. MVC?

  • 객체지향프로그래밍에서, MVC란 사용자 인터페이스를 성공적이며 효과적으로 데이터 모형에 관련 시키기 위한 방법론 또는 설계 방식중 하나이다. MVC방식은 자바 Smalltalk
  • MVC패턴은 목적 코드의 재사용에 유용한 것은 물론, 사용자 인터페이스와 응용프로그램 개발에 소요되는 현저하게 줄여주는 형식이라고 많은 개발자들이 평가

2.MVC 구성요소

  • Model - 소프트웨어 응용과 그와 관련된 고급 클래스 내의 논리적 데이터 기반 구조를 표현, 이 목적 모형은 사용자 인터페이스에 관한 어떠한 정보도 가지고 있지 않다.
  • View - 사용자 인터페이스 내의 구성요소들을 표현(사용자에게 보여지는 화면)
  • Controller - Model과 View를 연결하고 있는 클래스를 대표, Model과 View 내의 클래스들 간의 정보교환 하는데 사용
반응형
블로그 이미지

꽃꽂이하는개발자

,
반응형

1. Framework

  • 특정 형태의 소프트웨어 문제를 해결하기 위해 상호 협력하는 클래스 프레임과 인터페이스 프레임의 집합
  • 특정한 틀을 만들어 놓고 거기에 내가 만든 부품을 조립하여 작업시간을 줄여주는 것
  • 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성
  • 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의
  • 프레임워크는 좀 더 높은 수준에서 패턴을 조작
  • 프레임워크가 중요한 이유는 객체지향 개발을 하게 되면서 개발자의 취향에 따라 다양한 프로그램이 나오게 되었다. 프로그램 개발에 투입되는 개발자도 점점 늘어남에 따라 전체 시스템의 통합성, 일관성이 부족하게 되었기 때문이다. 그래서 개발자의 자유를 제한하기 위해 프레임워크를 도입했다.

 

  • 프레임워크가 가져야 할 특징
  • - 개발자들이 따라야할 가이드라인을 가진다
  • - 개발할 수 있는 범위가 정해져 있다.
  • - 개발자를 위한 다양한 도구들이 지원된다.

 

  • 프레임워크의 장단점
  • 장점 - 개발 시간을 줄일 수 있고 오류로부터 자유로울 수 있다.
  • 단점 - 프레임워크에 너무 의존하면 개발 능력이 떨어져서 프레임워크 없이 개발하는 것이 불가능해진다.

 

2. Spring Framework(스프링 프레임워크)

  • 자바(JAVA)플랫폼을 위한 오픈소스 애플리케이션 프레임워크이다.
  • 자바 엔터프라이즈 개발을 편하게 해주는 오픈소스 경량급 애플리케이션 프레임워크
  • 자바 개발을 위한 프레임워크로 종속 객체를 생성해주고, 조립해주는 도구
  • 자바로 된 프레임워크로 자바 SE로 된 자바 객체(POJO)를 자바 EE에 의존적이지 않게 연결해주는 역할

3. 스프링의 특징

  • 가볍다
  • 제어 역행(IoC)이라는 기술을 통해 애플리케이션의 느슨한 결합을 도모
  • 관점 지향 프로그래밍(AOP)을 위한 풍부한 자원
  • 애플리케이션 객체의 생명주기와 설정을 포함하고 관리한다는 점에서 일종의 컨테이너(Container)라고 할 수 있다.
  • 간단한 컴포넌트로 복잡한 애플리케이션을 구성하고 설정할 수 있다.

4. 스프링의 특징

  • 경량 컨테이너로써 자바 객체를 직접 관리한다. 각각의 객체 생성, 소멸가 같은 라이프 사이클을 관리하며 스프링으로부터 필요한 객체를 얻어 올 수 있다.
  • 스프링은 POJO(Plain Old Java Object)방식의 프레임워크이다. 일반적인 J2EE 프레임워크에 비해 구현을 위하여 특정한 인터페이스를 구현하거나 상속을 받을 필요가 없어 기존에 존재하는 라이브러리등을 지원하기에 용이하고 객체가 가볍다.
  • 스프링은 제어의 역행(IoC : Inversion of Control)을 지원한다. 컨트롤의 제어권이 사용자가 아니라 프레임워크에 있어서 필요에 따라 스프링에서 사용자의 코드를 호출한다.
  • 스프링은 의존성 주입(DI: Dependency Injection)을 지원한다. 각각의 계층이나 서비스들 간에 의존성이 존재할 경우 프레임워크가 서로 연결시켜준다.
  • 스프링은 관점 지향 프로그래밍(AOP: Aspect-Oriented Programming)을 지원한다. 따라서 트랜잭션이나 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우 해당 기능을 분리하여 관리할 수 있다.
  • 스프링은 영속성과 관련된 다양한 서비스를 지원한다. MyBatis나 Hibernate등 이미 완성도가 높은 데이터베이스 처리 ㄱ라이브러이와 연결할 수 있는 인터페이스를 제공한다.
  • 스프링은 확장성이 높다. 스프링 프레임워크에 통합하기 위해 간단하게 기존 라이브러리를 감싸는 정도로 스프링에서 사용이 가능하기 때문에 수많은 라이브러리가 이미 스프링에서 지원되고 있고 스프링에서 사용되는 라이브러리를 별도로 분리하기도 용이하다.

5. Spring MVC 구조의 처리과정

  • DispatcherServlet: 어플리케이션으로 들어오는 모든 Request를 받는 관문이다. Request를 실제로 처리할 Controller에게 전달하고 그 결과값을 받아서 View에게 전달하여 적절한 응답을 생성할 수 있도록 흐름을 제어한다.
  • HandleMapping: Request URL 각각 어떤 Controller가 실제로 처리할 것인지 찾아주는 역할
  • Controller: Request를 직접 처리한 후 그 결과를 다시 DispatcherServlet에게 돌려준다.
  • ModelAndView: Controller가 처리한 결과와 그 결과를 보여줄 View에 관한 정보를 담고있는 객체이다.
  • ViewResolver: View관련 정보를 갖고 실제 View를 찾아주는 역할을 한다.
  • View: Controller가 처리한 결과값을 보여줄 View를 생성한다.

참고 사이트

https://sas-study.tistory.com/58?category=774876

반응형
블로그 이미지

꽃꽂이하는개발자

,