'홈' 731건

레이아웃울 정할 수 있습니다. 공통되는 레이아웃 부분을 따로 관리할 수 있어 좋습니다. include와도 함께 사용하곤 합니다. 레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둡니다. block은 여러 개 만들어도 됩니다. block은 [등록명]으로 선언합니다.block이 되는 파일에서는 extends 키워드로 레이아웃 파일을 지정하고 block 부분을 넣습니다. block 선언보다 한 단계 더 들여쓰기되어 있어야 합니다. 나중에 익스프레스에서 res.render('body')를 사용해 하나의 HTML로 합쳐 렌더링할 수 있습니다. 퍼그 확장자는 생략 가능합니다. block 부분이 서로 합쳐집니다.layout.pugdoctype html html hea..

쿠키(Cookie)란 웹 페이지들 사이의 공유 정보를 클라이언트 PC에 저장해 놓고 필요할 때 여러 웹 페이지들이 공유해서 사용할 수 있도록 매개 역할을 하는 방법입니다.쿠키의 특징은 다음과 같습니다.정보가 클라이언트 PC에 저장됩니다.저장 정보 용량에 제한이 있습니다(파일 용량은 4kb).보안이 취약합니다.클라이언트 브리우저에 사용 유무를 설정할 수 있습니다.도메인당 쿠키가 만들어집니다(웹 사이트 당 하나의 쿠키가 만들어집니다).쿠키는 클리이언트 PC에 정보를 저장해서 사용하므로 보안에 취약합니다. 따라서 쿠키를 이용한 방법은 주로 보안과 무관한 경우에 한해 사용합니다.쿠키는 다음과 같이 두 종류로 나눌 수 있습니다.속성Persistence 쿠키Session 쿠키생성 위치파일로 생성브라우저 메모리에 생..

컴포넌트는 자신의 모양을 스스로 그린다.모든 GUI 플랫폼에서 그리기(painting)의 기본은 GUI 컴포넌트가 스스로 그린다는 점입니다. 자바의 스윙도 마찬가지이며, 각 스윙 GUI 컴포넌트는 자신의 모양을 그리는 메서드를 가지고 있습니다. 이제, 스윙에서 각 컴포넌트가 자신의 모양을 그리는 paintComponent() 메서드에 대해 알아봅시다. paintComponent()모든 스윙 컴포넌트가 가지고 있는 메서드로서, 스윙 컴포넌트가 자신의 내부를 그리는 paintCompontent() 메서드의 원형은 다음과 같습니다,void paintComponent(Graphics g) // 컴포넌트의 내부 모양을 그립니다. 또한 paintComponent()는 JComponent의 추상 메소드이므로 모든 스..

반복문HTML과 다르게 반복문도 사용할 수 있으며, 반복 가능한 변수인 경우에만 해당됩니더.다음과 같이 each로 반복문을 돌릴 수 있습니다. each 대신 for를 써도 됩니다. 반복문 사용 시 인덱스도 가져올 수 있습니다. 조건문조건문으로 편리하게 분기 처리할 수 있습니다. if, else if, else를 사용할 수 있습니다. 다음은 isLoggedIn 변수로 로그인 여부에 따라 다르게 HTML을 렌더링하는 예시입니다. case문도 가능합니다. include다른 퍼그나 HTML 파일을 넣을 수 있습니다.헤더나 푸터, 내비게이션처럼 웹 제작 시 공통되는 부분을 따로 관리할 수 있어 매 페이지마다 동일한 HTML을 넣어야 하는 번거로움을 없앱니다. include 파일 경로로 사용합니다.

1. 새로운 패키지를 만들고 LoginServlet, SecondServlet 클래스 파일을 준비합니다. 2. LoginServlet 클래스를 다음과 같이 작성합니다. 로그인창에서 입력 받은 ID와 비밀번호를 태그의 두 번째 서블릿으로 보내기를 클릭하면 로그인창에서 입력한 ID와 비밀번호 그리고 다른 정보들을 GET 방식을 이용해 두 번째 서블릿으로 전송헙니다.package sec01.ex02;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;imp..

JSliderJSlider는 슬라이드 바(Bar)를 출력하여, 마우스로 값을 선택하도록 하는 슬라이더 컴포넌트입니다. 슬라이더의 종류는 수평 슬라이더와 수직 슬라이더가 있으며, 생성 당시 선택하거나 생성 후 변경할 수 있습니다. 손잡이손잡이(knob)는 사용자가 값을 선택하기 위해 움직이는 그래픽 심볼입니다.minimum과 maximum사용자가 선택할 수 있는 최솟갑과 최댓값입니다.orientation슬라이더의 방향으로 나타내는 값으로 JSliber.HORIZONTAL과 JSlider.VERTICAL의 둘 중 하나이며 각각 수평, 수직 슬라이더를 말합니다.track슬라이더의 트랙 바(bar)를 말합니다. 트랙 바는 보이게 할 수도 있고 보이지 않게 할 수도 있습니다.majorTickSpacing과 min..

HTML과 다르게 자바스크립트 변수를 템플릿에 렌더링할 수 있습니다. res-render를 호출할 때 보내는 변수를 퍼그가 처리합니다. routes/index.js의 코드를 보면 다음 부분이 있습니다.router.get('/', (req, res, next) => { res.render('index', { title: 'Express' });}); res.render(템플릿, 변수 객체)는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드입니다.index.pug를 HTML로 렌더링하면서 { title: 'Express' }라는 객체를 변수로 집어넣습니다. layout.pug와 index.pug의 title 부분이 모두 Express로 치환됩니다. 즉, HTML에도 변수를 사용할 수 있게 된..

1. 새 프로젝트 pro09를 만들고 sec01.ex01 패키지를 생성한 후 다음과 같이 LoginServlet 클래스 파일과 login,html을 준비합니다. 2. login.html을 다음과 같이 작성합니다. 로그인창에서 ID와 비밀번호를 입력하면 미리 태그에 저장된 주소, 이메일, 휴대폰 번호를 서블릿으로 전송합니다. 아이디 : 비밀번호: 3. LoginServlet 클래스를 다음과 같이 작성합니다. getParameter() 메서드를 이용해 전송된 회원 정보를 가져온 후 브라우저로 다치 출력합니다.package sec01.ex01;import jakarta.servlet.ServletException;impo..

JComboBoxJComboBox는 텍스트필드, 버튼, 드롭다운(drop down) 리스트로 구성되는 콤보박스 컴포넌트를 구현합니다. E는 콤보박스에 삽입되는 아이템의 타입으로, 콤보박스를 생성할 때 E 대신 아이템의 타입을 대입하여 구체화해야 합니다. JComboBox 컴포넌트의 생성콤보박스 컴포넌트는 다음 생성자를 이용하여 생성합니다. JComboBox() // 빈 콤보박스JComboBox(Vector listData) // 백터로부터 아이템을 공급받는 콤보박스JComboBox(Object [] listEData) // 배열로부터 아이템을 공급받는 콤보박스 JList와 같이, JComboBox(Vector listData)나 JComboBox(Object [] listData) 생성자를 이용하여 벡터..

기준 HTML과 다르게 화살괄호()와 닫는 태그가 없습니다. 탭 또는 스페이스로만 태그의 부모 자식 관계를 구명합니다. 탭 한번, 스페이스 두 번 또는 스페이스 네 번 모두 상관없습니다. 모든 파일에 동일한 종류의 들어쓰기를 적용하면 됩니다. 자식 태그는 부모 태그보다 들여쓰기되어 있어야 합니다. 들여쓰기에 오류가 있으면 제대로 렌더링되지 않으니 주의하길 바랍니다. doctype html은 html>과 같습니다. html, head, title 태그에서는 자식 태그일수록 한 단계씩 더 들여쓰기되어 있는 모습을 볼 수 있습니다. 화살괄호가 없으므로 태그의 속성도 조금 다르게 표현합니다. 태그명 뒤에 소괄호로 묶어 적습니다. 속성 중 아이디와 클래스가 있는 경우에는 다음과 같이 표현할 수 있습니다. di..

JListJList는 여러 개의 아이템을 리스트 형식으로 보여주고 아이템을 선택하도록 하는 리스트 컴포넌트를 구현합니다. JDK7부터 JList에 제네릭(Generic)을 도입하여 JList(이하 JList 또는 리스트)로 사용합니다. E는 리스트에 삽입하는 아이템의 타입으로, 리스트를 생성할 때 E 대신 아이템 타입을 대입하여 구체화해야 합니다. 문자열과 이미지가 아이템으로 사용 가능하며, 사용자는 하나 이상의 아이템을 선택할 수 있습니다.JList는 자체적으로 스크롤을 지원하지 않기 때문에 JScrollPane에 삽입되어야 스크롤이 가능합니다. JList 리스트 생성과 특징리스트는 다음 생성자를 이용하여 생성합니다.JList() // 빈 리스트JList(Vector listData) // 벡터로부터 ..

퍼그(제이드) 문법이 간단해서 코드양이 줄어들기 때문입니다. 루비(Ruby)를 사용해봤다면 문법이 비슷해서 빠르게 적응할 수 있으며, 물론 루비를 잘 모르더라도 문법이 쉬워서 빠르게 배울 수 있습니다. 퍼그를 설치합니다. $ npm i pug 익스프레스와 연결하려면 app.js에 다음과 같이 작성되어야 합니다.const express = require("express");const morgan = require("morgan");const cookieParser = require("cookie-parser");const session = require("express-session");const dotenv = require("dotenv");const path = require("path");dot..