구글에서 제공하는 웹페이지 품질 개선을 위항 오픈 소스 자동화 툴.
성능, 접근성, 권장사항, SEO, PWA 에 대한 검사 가능.

중요 측정 항목

  • FCP (First Contentful Paint)
    • 페이지 로드가 시작된 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링되는 시점까지의 시간 측정.
    • 1.8초 이하 권장
    • FCP
  • LCP (Lagest Contentful Paint)
    • 페이지가 로드되기 시작한 시점부터 가장 큰 텍스트 믈록 또는 이미지 요소가 화면에 렌더링되는 시점 까지의 시간 측정.
    • 2.5초 이하 권장
    • LCP
  • INP (Interaction to Next Paint)
    • 페이지에서 이루어지는 모든 탭, 클릭, 키보드 상호작용의 지연 시간.
    • 상소작용 수를 기반으로 페이지의 최악 상호작용 지연시간을 페이지의 전반적인 응답성으로 판단.
    • INP
  • TBT (Total Blocking Time)
    • 사용자가 화면에서 페이지를 이용(상호작용)할 수 있기 전까지 브라우져가 상호작용을 차단하는 시간.
    • 50 ms 권장
    • TBT
  • CLS (Cumulative Layout Shift)
    • 레이아웃 변경 횟수.
    • 콘텐츠 로딩으로 인해 사용자가 읽던 위치를 잃거나 잘못된 링크 또는 버튼을 클릭하게 되는 레이아웃의 변경 횟수.
    • 0.1 점 이하 권장
    • CLS
  • TTFB (Time to First Byte)
    • 리소스 요청과 응답의 첫 번째 바이트가 도달하는 시작점간의 시간의 측정도.
    • TTFB

결과 요약 항목

  • Performance : 웹페이지의 로딩 속도와 같은 성능 측정.
  • Accessibility : 접근성 지표 (버튼 간의 간격이나 글 폰트 싸이즈 등)
  • Best Practices : 권장 사항을 따라 개발되었는지 확인.
  • SEO (Search Engine Optimization) : 검색엔진 최적화 지표.
  • PWA (Progressive Web App) : 웹과 네이티브 앱의 기능 모두 이점을 가지도록 만들어진 서비스인지 확인.
728x90
반응형

'WEB > CLIENT_SIDE' 카테고리의 다른 글

[FE] 이벤트 버블링 (Event Bubbling)  (0) 2023.07.14
Webpack과 Babel 그리고 Polyfill  (0) 2020.11.30

이벤트 버블링

아래 코드의 이벤트는 div에 할당되어 있지만, em이나 code 같은 자식 태그를 클릭해도 동작합니다.

  <div onclick="console.log('click div');">
    <em><code>EM</code></em>을 클릭했는데도, <code>div</code>에 할당된 핸들러가 동작합니다.</em>
  </div>

버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다.
가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

3개의 요소가 FORM > DIV > P 형태로 중첩된 구조에 각각 핸들러가 할당되어 있습니다.

  <form onclick="console.log('click form')">
    FORM
    <div onclick="console.log('click div')">
      DIV
      <br/>
      <p onclick="console.log(p)">P</p>
    </div>
  </form>

가장 안쪽의 p를 클릭하면 순서대로 다음과 같은 일이 벌어집니다.

  1. p에 할당된 onclick 핸들러 동작.
  2. div에 할당된 onclick 핸들러 동작.
  3. form에 할당된 onclick 핸들러 동작.
  4. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러 동작.

이런 동작 방식 때문에 p 요소를 클릭하면 p -> div -> form 순서로 3개의 콘솔 로그가 출력되는 것이조.
이런 흐름을 '이벤트 버블링'이라고 부릅니다.
이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 형세 입니다.

거의 모든 이벤트는 버블링 됩니다.
focus와 같이 버블링 되지 않는 이벤트도 있습니다.

event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다.
이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다.
event.target과 this (event.currentTarget)은 다음과 같은 차이가 있습니다.

  • event.target은 실제 이벤트가 시작된 '타켓'요소 입니다. 버블링이 진행되어도 변하지 않습니다.
  • this 는 현재 요소로, 현재 실행중인 핸들러가 할당된 요소를 참조합니다.

버블링 중단하기

이벤트 버블링은 타깃 이벤트에서 시작해서 html 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다.
몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.

핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 할 수 있습니다.
event.stopPropagation()을 사용하면됩니다.

event.stopImmediatePropagation()

한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작합니다.
event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다.
버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 합니다. 이 메소드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러들이 모두 동작하지 않습니다.

꼭 필요한 경우를 제외하곤 버블링을 막지 마세요

버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니면 버블링을 막지 마세요. 아키텍쳐를 잘 고려해서 진짜 막아야 하는 상황에서만 버블링을 막으세요.
event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어 낼 수 있습니다.

  • 예시 시나리오
    1. 중쳡 메뉴를 만들었다 가정합니다. 각 서브메뉴에 해당하는 요소에서 클릭이벤트를 처리하도록 하고, 상위 메뉴의 클릭 이벤트 핸들러는 동작하지 않도록 stopPropagation을 적용합니다.
    2. 사람들이 페이지에서 어디를 클릭했는지 등의 행동 패턴을 분석하기 위해, window내에서 발생하는 클릭 이벤트 전부를 감지하기로 결정합니다. 일부 분석 시스템은 그렇게 분석합니다. 이런 분석 시스템의 코드는 클릭이벤트를 감지하기 위해 document.addEventListener('click', ...)을 사용합니다.
    3. stopPropagation으로 버블링을 막아놓은 영역에선 분석 시스템의 코드가 동작하지 않기 때문에 분석이 제대로 되지 않습니다. 안타깝게도 stopPropagation을 사용한 영역은 죽은 영역(dead zone)이 되어버립니다.

이벤트 버블링을 막아야 하는 경우는 거의 없습니다.
버블링을 막아야 해결 되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다.
핸들러의 event 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모 요소의 핸들러에게 전달할 수 있으므로, 이 방법으로도 이벤트 버블링을 통제할 수 있습니다.

 


참고 : https://ko.javascript.info/bubbling-and-capturing

728x90
반응형

'WEB > CLIENT_SIDE' 카테고리의 다른 글

[성능 측정] Google Lighthouse  (0) 2024.04.01
Webpack과 Babel 그리고 Polyfill  (0) 2020.11.30

윈도우 10 IIS 및 클래식 ASP 설정

IIS 란

IIS는 Internet Information Service의 약자로 MS에서 만든 윈도우 OS 상에서 동작하는 웹서버임.
Windows에서 GUI 기반이라 설정도 편하고 Httpd에 비해서 기능이 많다고는 하는데, 사실 나는 Httpd가 더 편한 것 같음.

IIS 장점

  • Windows OS 상에서 설치가 쉬움,
  • GUI라서 편하다고 함(본인은 동의하지 않음)
  • 플러그인을 쉽게 설치 관리가 가능하다고 함.

IIS 단점

  • Windows OS 상에서만 사용 가능,
  • 구글링 시 정보의 질과 양이 Apache httpd보다 떨어짐.
  • 윈도우 버젼에 따라, IIS 버젼에 따라 디테일하게 다른점이 있어서 검색 결과가 나랑 맞지 않은 경우가 많음.

 


IIS 설치

  1. "Windows 기능 켜기/끄기" 찾아 실행
    • 제어판 > 프로그램 추가 제거 > "Windows 기능 켜기/끄기" 로 실행할 수도 있지만,
    • 키보드 ctrl과 alt 사이에 있는 "win" 단축키를 열어 "Windows 기능 켜기/끄기"를 검색해서 실행할 수 있다
  2. Windows 기능 켜기/끄기에서 "인터넷 정보 서비스"찾기
  3. 다음 선택된 항목들 모두 체크하기
  4. 활성화 완료 후 확인버튼 클릭시 설치가 시작 됨.
  5. "win" 단축키를 열어 "IIS"를 검색하여 실행시킬 수 있다면 설치가 완료된 것 임.
  6. IIS 실행
  7. 브라우져 주소창에 localhost로 접근해서 IIS 정상 작동 확인
  8. IIS에 설정된 사이트의 기본 경로는 C:\inetpub\wwwroot이다. 해당 경로의 폴더에 들어가면 다음과 같은 파일이 있음은 볼 수 있다
  9. 테스트 웹 사이트이므로 포트 변경이 가능하지만 방화벽 설정이 귀찮으므로 나는 80포트를 그대로 사용하기로 함.
    •  
  10. ASP 동작 테스트를 하기 위해 8의 기본 경로 C:\inetpub\wwwroot아래에 ex-01.asp파일을 만듦.
    • <!DOCTYPE html>
      <html lang="ko">
      <head>
        <title>First ASP</title>
      </head>
      <body>
        <%
          response.write("<h1>Hell The World!</h1>")
          response.write("<p>빌어먹을 레거시 ASP!</p>")
        %>
      </body>
      </html>
  11. ASP 동작 테스트로 브라우져에서 http://localhost/ex-01.asp로 접속.
    역시나 한글이 깨지긴 하지만 다행히 ASP가 정상 작동 한다는 것을 알 수 있음.
    •  

 


참고

728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP] AJAX  (0) 2021.08.30
[ASP] global.asa  (0) 2021.08.30
[ASP] #include  (0) 2021.08.27
[ASP] 어플리케이션  (0) 2021.08.27
[ASP] 세션  (0) 2021.08.27

ASP AJAX

AJAX는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트 하는 것임.

AJAX = Asynchronouse JavaScript ans XML의 약자로 동적인 웹페이지를 만드는 기술임.
AJAX는 인터넷 표준을 기반으로 다음을 조합하여 사용함.

  • XMLHttpRequest 객체 : 서버와 비동기적으로 데이터 교환
  • JavaScript/DOM : 정보 표시 / 상호작용
  • CSS
  • XML : 종종 데이터 전송 형식으로 사용됨.

나머지 기초적인 설명은 패스하도록 함.

 

Example 1

  <% @CODEPAGE="65001" language="vbscript" %>
  <% session.CodePage = "65001" %>
  <% Response.CharSet = "utf-8" %>
  <% Response.buffer=true %>
  <% Response.Expires = 0 %>
  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * { background-color : black; color : white; margin : 1em; }
    </style>
    <title>The XMLHttpRequest Object</title>
  </head>
  <body>
    <head>
      There are <%=application( "visitors" )%> on online now!
    </head>
    <h1>Start typing a name in the input field below</h1>
    <br/><hr/><br/>

    <form action="">
      <label for="txt">INPUT</label>
      <input
        type="text" name="txt" id="txt"
        onkeyup="showHint(this.value)"
      />
    </form>

    <p>Suggestions : <span id="hint"></span></p>

    <script>
      const showHint = ( str ) => {
        let xhttp;

        if( str.length == 0 ) {
          document.getElementById( 'hint' ).innerHTML = '';
          return;
        }

        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
          if( this.readyState == 4 && this.status == 200 ) {
            document.getElementById( 'hint' ).innerHTML = this.responseText;
          }
        };

        xhttp.open( 'GET', '01-getHint.asp?q=' + str, true);
        xhttp.send();
      }
    </script>

  </body>
  </html>
  <% @CODEPAGE="65001" language="vbscript" %>
  <% Response.buffer = true %>
  <%
    response.expires = -1

    ' array 선언
    dim arr(30)
    arr(1) = "Anna"
    arr(2) = "Brittany"
    arr(3) = "Dianna"
    arr(4) = "Eva"
    arr(5) = "Fiona"
    arr(6) = "Gunda"
    arr(7) = "Hege"
    arr(8) = "Inga"
    arr(9) = "Johanna"
    arr(10) = "Kitty"
    arr(11) = "Linda"
    arr(12) = "Nina"
    arr(13) = "Ophelia"
    arr(14) = "Petunia"
    arr(15) = "Amanda"
    arr(16) = "Raquel"
    arr(17) = "Cindy"
    arr(18) = "Doris"
    arr(19) = "Eve"
    arr(20) = "Evita"
    arr(21) = "Sunniva"
    arr(22) = "Tove"
    arr(23) = "Unni"
    arr(24) = "Violet"
    arr(25) = "Liza"
    arr(26) = "Elizabeth"
    arr(27) = "Ellen"
    arr(28) = "Wenche"
    arr(29) = "Vicky"
    arr(30) = "cinderella"


    ' QueryString에서 q의 값 가져오기
    q = ucase( request.querystring( "q" ) )

    if len( q ) > 0 then
      hint = ""
      for i = 0 to 30
        if q = ucase( mid( arr( i ), 1, len( q ) ) ) then
          if hint = "" then
            hint = arr( i )
          else
            hint = hint & ", " & arr( i )
          end if
        end if
      next
    end if

    ' hint가 없다면 "No Suggestion"
    ' 있다면 hint
    if hint = "" then 
      response.write( "No Suggestion" )
    else
      response.write( hint )
    end if

  %>

 

 

Example 2 : AJAX 데이터 베이스 연결

DB 연결은 당장 여건이 안되므로 스킵 해둔다.

 


728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP IIS] 윈도우 10 IIS 및 클래식 ASP 설정  (0) 2021.09.06
[ASP] global.asa  (0) 2021.08.30
[ASP] #include  (0) 2021.08.27
[ASP] 어플리케이션  (0) 2021.08.27
[ASP] 세션  (0) 2021.08.27

ASP Global.asa 파일

Global.asa 파일은 ASP 어플리케이션의 모든 페이지에서 엑세스 할 수 있는 객체, 변수 및 메소드의 선언을 포함할 수 있는 선택적 파일임.

유효한 모든 프라우져 스크립트(JS, VBScript, JScript, PerlScript)등 Global.asa 파일내에서 사용 가능.

Global.asa 파일에는 다음 항목만 포함할 수 있음.

  • 어플리케이션 이벤트
  • 세션 이벤트
  • <object> 선언
  • TypeLibrary 선언
  • #include 지시문

Global.asa 파일은 ASP 어플리케이션의 루트 디렉토리에 저장해야 하며 각 어플리케이션에는 Global.asa 파일이 하나만 있을 수 있음

 


Global.asa의 이벤트

Global.asa에서 어플리케이션/세션이 시작될 때 수행할 작업과 어플리케이션/세션이 종료될 때 수행할 작업을 어플리케이션 및 세션 객체에 알릴 수 있음. 이에 대한 코드는 이벤트 핸들러에 배치됨. Global.asa 파일에는 네 가지 유형의 이벤트가 포함될 수 있음.

  • Application_OnStart : First 사용자가 ASP 어플리케이션의 첫 페이지를 호출할 때 발생.
    이 이벤트는 웹 서버를 다시 시작한 후 또는 Global.asa 파일을 편집 후에 발생함.
    Session_OnStart 이벤트는 이 이벤트 직후에 발생함.
  • Session_OnStart : 이 이벤트는 새 사용자가 ASP 어플리케이션에서 첫 페이지를 요청할 때마다 발생.
  • Session_OnEnd : 이 이벤트는 사용자가 세션을 종료할 때마다 발생함.
    사용자 세션은 지정된 시간(기본 20분) 동안 사용자가 페이지 요청하지 않으면 종료됨.
  • Application_OnEnd : 이 이벤트는 마지막 사용자가 세션을 종료한 후에 발생함.
    일반적으로 이 이벤트는 웹 서버가 중지될 때 발생함. 이 절차는 레코드 삭제 또는 텍스트 파일에 정보 쓰기와 같이 어플리케이션이 중지된 후 설정을 정리하는데 사용됨.

Global.asa

  <script language="vbscript" runat="server" >

    sub Application_OnStart
    'some code
    end sub

    sub Application_OnEnd
    'some code
    end sub

    sub Session_OnStart
    'some code
    end sub

    sub Session_OnEnd
    'some code
    end sub

  </script>

 

 


<객체> 선언

<object> 태그를 사용하여 Global.asa에서 세션 또는 어플리케이션 범위의 객체를 만들 수 있음.
<object> 태그는 <script> 태그 밖에 있어야 함.

  <object runat="server" scope="scope" id="id" {porgid="progID" | classid="classID"}>
    ...
  </object>
  • scope :
    Sets the scope of the object (either Session or Application)
  • id :
    Specifies a unique id for the object
  • progId :
    An id associated with a class id. The format for ProgID is [Vendor.]Component[.Version]
    Either ProgID or ClassID must be specified.
  • ClassId :
    Specifies a unique id for a COM class object.
    Either ProgID or ClassID must be specified.

ex

첫 번째 예는 ProgID 매개변수를 사용하여 MyAd라는 세션 범위 객체 생성임.
<obejct runat="server" scope="session" id="MyAd" progId="MSWC.AdRotator" > </object>

두 번째 예는 ClassID 매개변수를 사용하여 MyConnection이라는 어플리케이션 범위 객체 생성임.

  <object
    runat="server" scope="application" id="MyConnection"
    classid="Clsid:8AD3067A-B3FC-11CF-A560-00A0C9081C21">
  </object>

Global.asa 파일에 선언된 개체는 응용프로그램의 모든 스크립트에서 사용 가능함.

  <object runat="server" scope="session" id="MyAd" progid="MSWC.AdRotator">
  </object>
  <%=MyAd.GetAdvertisement("/banners/adrot.txt")%>

 

 



TypeLibrary 선언

TypeLibrary는 COM 개체에 해당하는 DLL 파일의 내용에 대한 컨테이너임. Global.asa 파일에 TypeLibrary에 대한 호출을 포함하면 COM 개체의 상수에 엑세스할 수 있으며 ASP 코드에서 오류를 더 잘 보고할 수 있음. 웹 어플리케이션이 형식 라이브러리에서 데이터 형식을 선언한 COM 객체에 의존하는 경우 Global.asa에서 형식 라이브러리를 선언할 수 있음.

문법

  <!-- METADATA TYPE="TypeLib"
    file="filename" uuid="id" version="number" lcid="localeid"
   -->
Parameter Description
file 유형 라이브러리의 절대 경로를 지정함. 파일 매개변수 또는 UUID 매개변수가 필요함.
UUID 유형 라이브러리의 고유 식별자 지정. 파일 매개변수 또는 UUID 매개변수가 필요함.
version 선택사항으로 버젼을 선택하는데 사용. 요청된 버젼이 없다면 가장 최근 벼전이 사용됨.
lcid 선택사항으로 유형 라이브러리에 사용할 지역 식별자.

오류 값

서버는 다음 오류 메세지중 하나를 반환할 수 있음.

Parameter Description
ASP 0222 잘못된 라이브러리 사양
ASP 0223 라이브러리 찾을 수 없음
ASP 0224 라이브러리 로드 불가
ASP 0225 라이브러리 래핑 불가

METADATA 태그는 Global.sas 파일의 모든 위치에 나타날 수 있음. (<script> 태그 내 외부).
BUT, METADATA 태그는 Global.sas 파일의 상단에 표시하는 것이 좋음.

제한

Global.asa 파일에 포함할 수 있는 항목데 대한 제한 사항 :

  • Global.asa 파일에 작성된 텍스트는 표시할 수 없음. 이 파일은 정보를 표시할 수 없음.
  • Application_OnStart 및 Application_OnEnd 서브루틴에서는 서버 및 어플리케이션 개체만 사용할 수 있음.
    Session_OnStart 서브루틴에서 내장 객체를 사용할 수 있음.
    Session_OnEnd 서브루틴에서 서버, 어플리케이션 및 세션 개체를 사용할 수 있음.

서브루틴 사용법

Global.asa는 종종 변수를 초기화 하는 데 사용함.
방문자가 웹 사이트에 처음 도착한 시간을 감지하는 방법임.
시간을 "started"라는 세션 변수에 저장되며 "started" 변수의 값은 어플리케이션의 모든 ASP 페이지에 엑세스할 수 있음.

  <script language="vbscript" runat="server" >
    sub Session_OnStart
      Session( "started" ) = now()
    end sub
  </script>

아래 예는 모든 신규 방문자를 다른 페이지로 리다이렉션 하는 방법

  <script language="vbscript" runat="server">
    sub Session_OnStart
      response.redirect( "newpage.asp" )
    end sub
  </script>

그리고 Global.asa 파일에 기능을 포함할 수 있음.

Application_OnStart 서브루팅은 웹 서버가 시작될 때 발생함.
그런 다음 Application_OnStart 서브루틴은 "getcustomers" 라는 다른 서브루틴을 호출함.
"getcustomers" 서브루틴은 DB의 "customers" 테이블에서 데이터를 배열로 가져옴.

  <script language="vbscript" runat="server">
    sub Application_OnStart
      getCustomers
    end sub

    sub getCustomers
      set conn = Server.CreateObject( "ADODB.Connection" )
      conn.Provider = "Microsoft.Jet.OLEDB.4.0"
      con.Open "c:/webdata/northwind.mdb"

      set rs = conn.execute( "SELECT NAME FROM customers" )

      Application( "customers" ) = rs.GetRows

      rs.close
      conn.close
    end sub
  </script>

 

 

Global.asa 예

현재 방문자수를 계산하는 Global.asa 파일을 만들어 봄

  • Application_OnStart는 서버가 시작될 때 어플리케이션 변수 "visitors"를 0으로 할당.
  • Session_OnStart 서브루틴은 새 접속자가 접근할 때 마다 변수 "visitors"를 1씩 추가.
  • Session_OnEnd 서브루틴은 접속자가 나갈 때 마다 변수 "visitors"를 1씩 감소.
  sub Application_OnStart
    Application( "visitors" ) = 0
  end sub

  sub Session_OnStart
    Application.lock
    Application( "visitors" ) = Application( "visitors" ) + 1
    Application.unlock
  end sub

  sub Session_OnEnd
    Application.lock
    Application( "visitors" ) = Application( "visitors" ) - 1
    Application.unlock
  end sub
  <head>
    There are <%=application( "visitors" )%> on online now!
  </head>

728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP IIS] 윈도우 10 IIS 및 클래식 ASP 설정  (0) 2021.09.06
[ASP] AJAX  (0) 2021.08.30
[ASP] #include  (0) 2021.08.27
[ASP] 어플리케이션  (0) 2021.08.27
[ASP] 세션  (0) 2021.08.27

ASP include file

#include 지시문

#include 지시문을 사용하여 서버가 실행하기 전에 한 ASP 파일의 내용을 다른 ASP 파일에 삽입할 수 있음.
#include 지시문은 여러 페이지에서 재사용될 함수, 머리글, 바닥글, 또는 요소를 만드는 데 사용됨.


#include 지시문 사용하는 방법

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * { background-color : black; color : white; margin : 1em; }
    </style>
    <title>include my page</title>
  </head>
  <body>
    <h1>include my page</h1>
    <br/><hr/><br/>

    <h3>Word of Wisdom :</h3>
    <p><!--#include file="01-wisdom.inc" --></p>

    <br/><hr/><br/>

    <h3>The Time is :</h3>
    <p><!--#include file="01-time.inc" --></p>

  </body>
  </html>

01-wisdom.inc

"One should never increase, beyond what is necessary,
the number of entities required to explain anything."

01-time.inc

<% response.write( time ) %>

파일 포함 구문

ASP 페이지에 파일을 포함하려면 주석 태그 안에 #include 지시문을 넣어야 함.

<!-- #include virtual = "someFileName" -->
of
<!-- #include file = "someFileName" -->

virtual 키워드

virtual 키워드를 사용하여 가상 디렉토리로 시작하는 경로를 나타냄.
"header.inc"라는 파일이 /html 이라는 가상 디렉토리에 있는 경우 다음 줄은 "header.inc"의 내용을 삽입함.
<!-- #include virtual = "/html/header.inc" -->

file 키워드

file 키워드를 사용하면 상대경로를 나타냄. 산대경로는 포함 파일이 포함된 디렉토리로 시작함.
html 디렉토리에 파일이 있고, "header.inc"파일이 html/headers에 있는 경우 다음 줄은 파일에 "header.inc"를 삽입함.
<!-- #include file = "headers/header.inc" -->

포함된 파일의 경로 (header/header.inc)는 포함된 파일에 상대적임. 이 #include 문이 포함된 파일이 html 디렉토리에 없으면 명령문은 작동하지 않음.


기타 참고사항

위 섹션에서는 포함된 파일에 대해서 확장자 .inc를 사용했음. 사용자가 inc 파일을 직접 탐색하려고 하면 해당 내용이 표시됨. 포함된 파일에 기밀 정보나 다른 사용자에게 보여주고 싶지 않은 정보가 포함되어 있다면, ASP 확장자를 사용하는 것이 좋음. ASP 파일의 소스 코드는 해석 후에 보이지 않음. 포함된 파일에는 다른 파일명도 포함될 수 있으며 하나의 ASP 파일에는 동일한 파일이 두번 이상 포함될 수 있음.

중요 : 포함된 파일은 스크립트가 실행되기 전에 처리되고 삽입됨. 다음 스크립틍는 ASP가 변수 값을 할당하기 전에 #include 지시문을 실행하기 때문에 작동하지 않음.

  <%
    filename = "header.inc"
  %>
  <!-- #include file = "<%filename%>" -->

inc 파일에서 스크립트 구분 기호를 열거나 닫을 수 없음. 다음 코드는 작동하지 않음.

  for i = 1 to n
    <!-- #include file = "count.inc" -->
  next
  <% for i = 1 to n %>
    <!-- #include file = "count.inc" -->
  <% next %>

728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP] AJAX  (0) 2021.08.30
[ASP] global.asa  (0) 2021.08.30
[ASP] 어플리케이션  (0) 2021.08.27
[ASP] 세션  (0) 2021.08.27
[ASP] 쿠키  (0) 2021.08.26

ASP 응용프로그램 객체

어떤 목적을 수행하기 위해 함께 작동하는 ASP 파일 그룹을 응용 프로그램이라고 함.

 


응용프로그램 객체

웹상의 응용 프로그램은 어떤 목적을 수행하기 위해 함께 작동하는 여러 ASP 파일로 구성될 수 있음. Application 객체는 이러한 파일을 함께 묶는 데 사용됨.

어플리케이션 개체는 세션 개체와 마찬가지로 모든 페이지의 변수를 저장하고 엑세스하는 데 사용됨. 차이점은 모든 사용자가 하나의 응용 프로그램 개체를 공유한다는 것임. (세션에는 각 사용자에 대해 하나의 세션 개체가 있음.)

어플리케이션 개체는 데이터베이스 연결 정보와 같은 어플리케이션의 많은 페이지에서 사용할 정보를 보유함. 정보는 모든 페이지에 엑세스 가능. 정보 변경도 한 곳에서 가능하며, 변경 사항은 자동으로 모든 페이지에 반영됨.

 

 


어플리케이션 변수 저장 및 검색

어플리케이션 변수는 어플리케이션의 모든 페이지에서 엑세스하고 변경 가능함.
"Global.asa"파일에서 어플리케이션 변수를 만들 수 있음.

  <script language="vbscript" runat="server">
    // vartime, users라는 두개의 응용프로그램 변수 생성
    sub Application_OnStart
      application( "vartime" ) = ""
      application( "users" ) = 1
    end sub
  </script>
  There are <%=application( "users" )%> active connections.

 

 


콘텐츠 컬렉션을 통해 반복문

Contents Collection에는 모든 어플리케이션 변수가 포함됨. 콘텐츠 컬렉션을 반복하여 컬렉션에 무엇이 저장되어 있는지 확인 가능.

  dim ac
  for each ac in application.contents
    response.write( ac & "<br/>" )
  next

contents에 대해 count 속성 사용 가능

  dim acCnt
  acCnt = application.contents.acCnt

  for ac = 1 to acCnt
    response.write( application.contents( ac ) & "<br/>" )
  next

 

 


StaticObjects collection을 통해 반복문

StaticObjects 컬렉션을 반복하여 어플리케이션 객체에 저장된 모든 개체의 값을 볼 수 있음.
세션에선 안 됐는데 이게 될 까?

  dim so

  for each so in application.staticojbects
    response.write( so & "<br/>" )
  next

 

 


잠금 및 잠금 해제

"lock"으로 어플리케이션을 잠글 수 있음. 어플리케이션이 잠긴 경우 사용자는 현재 액세스 중인 변수를 제외한 어플리케이션변수를 변경할 수 없음.
"unlock"으로 어플리케이션의 잠금을 해제할 수 있음.

  application.lock
  ' do come application object operation
  application.unlock

728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP] global.asa  (0) 2021.08.30
[ASP] #include  (0) 2021.08.27
[ASP] 세션  (0) 2021.08.27
[ASP] 쿠키  (0) 2021.08.26
[ASP] form  (0) 2021.08.26

ASP 세션 객체

컴퓨터에서 어플리케이션으로 작업할 때 어플리케이션을 열고 일부 변경한 다음 닫음.
이건 세션와 유사한데, 컴푸터는 작업자가 누군지 알고있고, 어플리케이션을 열 때와 닫을 때를 알고 있음.
그러나 인터넷에는 한 가지 문제점이 있는데, HTTP 주소는 상태 유지를 지원하지 않기 때문에 웹서버는 당신이 누구이고, 무엇을 하는지 모름.

ASP는 각 사용자에 대해 고유 쿠키를 만들어 이 문제를 해결함. 쿠키는 컴퓨터로 전송되며 사용자를 식별하는 정보가 포함됨.
이 인터페이스를 Session 객체라고 함.

Session 객체는 사용자 세션에 대한 정보를 저장하거나 설정을 변경함.

Sessio 객체에 저장된 변수는 단일 사용자에 대한 정보를 보유하며, 하나의 어플리케이션의 모든 페이지에서 사용할 수 있음. 세션 변수에 저장되는 공통 정보는 이름, ID 및 기본 설정등임. 서버는 각각의 새 사용자에 대해 새 Session 객체를 만들고, 세션이 만료되면 session 객체를 삭제함.

 


세션의 시작

  • 새 사용자가 ASP 파일을 요청하고 Global.asa 파일에는 Session_OnStart 프로시져가 포함됨.
  • 값은 세션 변수에 저장됨.
  • 사용자가 ASP 파일을 요청하고 Global.asa 파일은 <object> 태그를 사용하여 세션 범위의 개체를 인스턴스화 함.

세션의 종료

사용자가 지정된 기간 (기본 시간은 20분) 동안 어플리케이션에서 페이지를 요청하거나 새로 고치치 않으면 세션은 종료됨.

기본보다 짧거나 긴 시간 초과 간격을 사용하려면 Timeout 속성을 사용해야 함.

  //  세션 유지 시간을 5분으로 설정함.
  Session.Timeout = 5

Abandon 메소드를 사용하여 세션을 즉시 종료함.

  Session.Abondon

세션의 주요 문제는 세션을 종료해야하는 시간임. 사용자의 마지막 요청이 마지막 요청인지 아닌지 알 수 없음. 따라서 세션을 "활성" 상태로 유지해야하는 기간을 알 수 없음. 유휴 세션을 너무 오래 기다리면 서버의 리소스가 소모되지만 세션이 너무 빨리 삭제되면 서버가 모든 정보를 삭제했기 때문에 사용자가 처음부터 다시 시작해야 할 수 있음. 적절한 세션초과 시간을 찾는 것은 어려움.
세션 변수에 데이터를 너무 많이 저장해 둬도 좋지 않음.

 

 


세션 변수 저장 및 검색

세션 객체에서 가장 중요한 것은 변수를 저장할수 있다는 것임.

  <%
    session( "username" ) = "borry"
    seesion( "age" ) = 3
  %>

값이 세션 변수에 저장되면 ASP 어플리케이션의 모든 페이지에서 이 값에 도달할 수 있음.

Welcome <%response.write( session( "username" ) ) %>

세션 객체에 사용자 기본 설정을 저장한 다음 해당 기본 설정에서 엑세스하여 사용자에게 반환할 페이지를 선택할 수도 있음.

  <%IF session( "screenres" ) = "low" THEN%>
    This is the text version of the page
  <%ELSE%>
    This is the multimedia version of the page
  <%END IF%>

 

세션 변수 제거

Contents 컬렉션에는 모든 세션 변수가 포함됨.
remove 메소드를 사용하면 세션 변수를 제거할 수 있음.
"age"값이 18보다 작은 경우 세션 변수 "sale"을 제거함

  <%
    session.( "sale" ) = true

    if session.contents( "age" ) < 18 then
      session.contents.remove( "sale" )
    end if
  %>

세션의 모든 변수를 제거하려면 removeAll 메소드를 사용함.

  session.contents.removeAll()

 

 


컨텐츠 컬렉션을 통해 반복문

contents collection에 모든 세션 변수가 포함됨. contents collection을 반복하여 컬렉션에 무엇이 저장되어 있는지 확인 가능함.

  session( "username" ) = "borry"
  session( "age" ) = 3

  dim i
  for each i in session.contents
    response.write( i & "<br/>" )
  next

contents collection의 항목 수를 모르는 경우 count 속성을 사용할 수 있음.

  <%
    dim i, j
    j = session.contents.count
    response.write( "session variables : " & j )

    for i = 1, to j
      response.write( session.contents( i ) & "<br/>" )
    next
  %>

 

StaticObjects Collection을 통한 반복문

StaticObjects Collection을 반복하여 session 객체에 저장된 모든 개체의 값을 볼 수 있음. 나는 이 코드가 작동 안 하는데 원인은 모르겠다.

  <%
    dim k
    for each k in session.staticObjects
      response.write( k & "<br/>" )
    next
  %>

728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP] #include  (0) 2021.08.27
[ASP] 어플리케이션  (0) 2021.08.27
[ASP] 쿠키  (0) 2021.08.26
[ASP] form  (0) 2021.08.26
[ASP] 반복문  (0) 2021.08.26

ASP 쿠키

쿠키는 사용자 식별에 사용됨.
동일한 브라우져로 페이지를 요청할 때마다 쿠키도 보냄.
ASP로 쿠키 값을 만들 수도 검색할 수도 있음.

환영 쿠키

  <%
    dim numvisits
    ' response.cookies로 쿠키 생성,
    ' **response.cookies 명령은 <html> 태그보다 앞에 있어야 함
    ' 방문 1일 뒤 쿠키 만료
    response.cookies( "NumVisits" ).expires = date + 1
    ' 쿠키가 만료될 날짜 설정도 가능함
    ' response.cookies( "NumVisits" ).expires = #Dec 10, 2021#

    ' 쿠키의 값 검색
    numvisits = request.cookies( "NumVisits" )

    if numvisits = "" then

      response.cookies( "NumVisits" ) = 1
      response.write( "First Time!" )
    else
      response.cookies( "NumVisits" ) = numvisits + 1
      response.write( numvisits )

      if numvisits = 1 then
        response.write " Time before!"
      else
        response.write " Times BEFORE!"
      end if
    end if
  %>
  <!DOCTYPE html>
  <html>
  <body>
  </body>
  </html>

 

 


A Cookie with Keys

쿠키에 여러 값의 컬렉션이 포함되어 있다면 쿠키에 키가 있다고 함
user라는 쿠키 컬렉션을 만들고, 사용자에 대한 정보가 포함된 키와 값을 할당함

  <%
    Response.Cookies("user")("firstname")="SorR"
    Response.Cookies("user")("lastname")="Ki"
    Response.Cookies("user")("country")="Nowhere"
    Response.Cookies("user")("age")="25"
  %>

서버가 위의 모든 쿠키를 사용자단에 보냈다고 가정하면,
사용자에게 전송된 쿠키를 읽을 수 있어야 함.

  <%
    dim x, y
    for each x in request.cookies
      response.write "<p>" 
      if request.cookies( x ).HasKeys then
        for each y in request.cookies( x )
          response.write( x & " : " & y & " = " & request.cookies( x )( y ) )
          response.write( "<br/>" )
        next
      else
        response.write( x & " = " & request.cookies( x ) & "<br/>" )
      end if
      response.write "</p>"
    next
  %>

출력 결과
user : age = 25
user : country = Nowhere
user : lastname = Ki
user : firstname = SorR

 


브라우져에서 쿠키를 지원하지 않는다면

어플리케이션이 쿠키를 지원하지 않는 브라우져를 다루는 경우 어플리케이션의 한 페이지에서 다른 페이지로 정보를 전달하기 위해 다음 두 가지 방법이 있음.

 

1. URL에 매개변수 추가

URL에 매개변수를 추가할 수 있음.
<a href="welcome.asp?fname=John&lname=Smith">Go to Welcome Page</a>
이후 다음 페이지에서 값을 읽을 수 있음.

  <%
    fname=Request.querystring("fname")
    lname=Request.querystring("lname")
    response.write("<p>Hello " & fname & " " & lname & "!</p>")
    response.write("<p>Welcome to my Web site!</p>")
  %>

 

2. FORM 사용

form을 사용 사용자가 요청을 하면 form은 사용자의 입력 값을 다음 페이지로 전달함.

  <form method="post" action="welcome.asp">
    First Name: <input type="text" name="fname" value="">
    Last Name: <input type="text" name="lname" value="">

    <input type="submit" value="Submit">
  </form>

이후 다음 페이지에서 값을 읽을 수 있음.

  <%
    fname=Request.form("fname")
    lname=Request.form("lname")
    response.write("<p>Hello " & fname & " " & lname & "!</p>")
    response.write("<p>Welcome to my Web site!</p>")
  %>

 

 


728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP] 어플리케이션  (0) 2021.08.27
[ASP] 세션  (0) 2021.08.27
[ASP] form  (0) 2021.08.26
[ASP] 반복문  (0) 2021.08.26
[ASP] 조건문  (0) 2021.08.26

ASP form과 사용자 입력

Request.QueryString 및 Request.Form 명령은 form 에서 사용자 입력을 검색하는데 사용함.

 

GET 방식

Request.QueryString 명령어를 사용하여 사용자의 입력을 받음.

  <body>
    <form action="req_query.asp" method="GET">
      String : <input type="text" name="string" size="20" value='<%=request.querystring("string")%>' />
      <input type="submit" value="submit" />
    </form>
    <%
      dim string
      string = request.querystring("string")

      if string <> "" then
        response.write( "string is " & string & "!" )
      end if
    %>
  </body>

POST 방식

Request.Form 명령어를 사용하여 사용자의 입력을 받음.

  <body>
    <form action="02-post_form.asp" method="POST">
      String : <input type="text" name="string" size="20" value='<%=request.form("string")%>' />
      <input type="submit" value="submit" />
    </form>
    <%
      dim string
      string = request.form("string")

      if string <> "" then
        response.write( "string is " & string & "!" )
      end if
    %>
  </body>

 

input:type=[radio]

Request.Form 명령으로 라디오 버튼을 통해 입력을 받음.

  <body>
    <%
      dim cars
      cars = request.form("cars")
    %>
    <form action="03-post_radio_form.asp" method="POST">
      <p>
        SELECT ANY CAR : 
      </p>

      <label for="volvo">volvo</label>
      <input
        type="radio" name="cars" id="volvo"
        value="volvo"
        <%
          if cars = "volvo" then response.write( "checked" )
        %>
      />

      <label for="saab">saab</label>
      <input
        type="radio" name="cars" id="saab"
        value="saab"
        <%
          if cars = "saab" then response.write( "checked" )
        %>
      />

      <label for="BMW">BMW</label>
      <input
        type="radio" name="cars" id="BMW"
        value="BMW"
        <%
          if cars = "BMW" then response.write( "checked" )
        %>
      />

      <br/><br/>

      <input type="submit" value="submit" />
    </form>
    <%
      if cars <> "" then
        response.write( "<p>SELECTED VALUE IS " & cars & "</p>" )
      end if
    %>
  </body>

 

 


사용자 입력

request 객체틑 form에서 정보를 검색하는 데 사용할 수 있음.
사용자 입력은 request.qeurtystring 또는 request.form 명령으로 검색 가능함.

 


request.querystring

request.querystring는 GET 메소드 방식의 request에서 값을 수집하는데 사용함.

  <body>
    <form method="get" action="04-get.asp">
      <label for="fname">First Name<label> : 
      <input
        type="text" name="fname" id="fname"
        value='<%=request.querystring("fname")%>'
      />
      <br/>
      <label for="lname">Last Name<label> : 
      <input
        type="text" name="lname" id="lname"
        value='<%=request.querystring("lname")%>'
      />
      <br/>
      <input type="submit" value="Submit" />
    </form>

    <br/>
    Welcome
    <%
      response.write(request.querystring("fname"))
      response.write(" " & request.querystring("lname"))
    %>
  </body>

request.form

request.form은 POST 메소드 방식의 request에서 값을 수집하는데 사용함.

  <body>
    <form method="post" action="05-post_method.asp">
      <label for="fname">First Name<label> : 
      <input
        type="text" name="fname" id="fname"
        value='<%=request.form("fname")%>'
      />
      <br/>
      <label for="lname">Last Name<label> : 
      <input
        type="text" name="lname" id="lname"
        value='<%=request.form("lname")%>'
      />
      <br/>
      <input type="submit" value="Submit" />
    </form>

    <br/>
    Welcome
    <%
      response.write(request.form("fname"))
      response.write(" " & request.form("lname"))
    %>
  </body>

 

 


form 유효성 검사

사용자 단에서 유효성 검사를하는 것이 빠르고 서버 부하를 줄임.
사용자 입력이 DB에 입력 될 경우 서버단에서 유효성 검사를 해야함.
서버에서 유효성 검사를 하는 제일 좋은 방법은 다른 페이지로 이동하는 대신 양식 자체에 POST 하는 방법임.
이렇게 하면 사용자는 동일한 페이지에서 오류를 확인할 수 있고, 오류를 더 쉽게 찾을 수있음.

 

 


728x90
반응형

'WEB > ASP' 카테고리의 다른 글

[ASP] 세션  (0) 2021.08.27
[ASP] 쿠키  (0) 2021.08.26
[ASP] 반복문  (0) 2021.08.26
[ASP] 조건문  (0) 2021.08.26
[ASP] Procedure  (0) 2021.08.26

+ Recent posts