전영호의 개발 블로그

파라미터 값 받기

DAO, DTO 활용하기

EL

EL 의 출력방법, jstl 의 if 문, 반복문은 Spring 에서도 사용되니 기억하기 !!!

EL 문법의 ${} 는 자바스크립트에서 사용하는 표현 문법인 ${} 과 같이 사용할 수 없다

( jsp 파일에서는 자바스크립트의 ${} 를 사용할 수 없음 )

EL scope

JSTL

JSTL 다운로드 사이트

액션 태그

forward 태그

sendRedirect() : 클라이언트에게 주소를 전송한 뒤 클라이언트가 서버에 전달받은 주소를 다시 요청

forward() : 클라이언트에게 주소를 요청하지 않고 서버에서 처리하여 내부의 경로를 출력

include 태그

각각 jsp 액션 태그와 기본 태그를 사용하여 작성

>> jsp 액션 태그를 사용해서는 include 로 가져온 변수를 사용할 수 없다. ( 기존 태그를 사용해야 함 )

useBean 태그

create table mem_jsp(
id varchar2(20) primary key,
pwd varchar2(20),
name varchar2(20),
addr varchar2(100),
tel varchar2(20)
);

insert into mem_jsp values('aaa','aaa','홍길동','산골짜기','010-xxx-xxx');
insert into mem_jsp values('bbb','bbb','김개똥','개똥별','010-xxx-xxx');
insert into mem_jsp values('ccc','ccc','고길똥','마포구','010-xxx-xxx');

commit;

sql 문 실행

단, setProperty 를 이용해서 bean 객체에 저장할때 넘어오는 이름과 DTO 의 변수 이름이 동일해야 한다

DB 연동

create table member_jsp(
id varchar2(20) primary key,
name varchar2(20),
kor number,
eng number,
math number
);
insert into member_jsp values('aaa','Hong',100,100,100);
insert into member_jsp  values('bbb','Kim',90,90,90);
insert into member_jsp  values('ccc','Go',80,80,80);

commit;

sql 문 실행

DriverManager 와 Connection 클래스 import 필요

response

Scope

page : 요청한 페이지 내에만 유지 ( 페이지가 이동되면 삭제 )

request : 요청한 페이지에서 다음 페이지까지 유지된다

session : 현재 켜져있는 브라우저에서만 작동 ( 예를 들어, 크롬에서 scope 를 받고 네이버 웨일로 동일 웹을 작동시키면 session 이 유지되지 않음, 주로 로그인에서 사용 )

application : 작동하는 브라우저를 변경해도 application 은 유지되며 서버가 종료되면 application 도 삭제

request 를 다음페이지 까지 유지하고 싶으면 forward 를 사용하여 전달 받은 request 값을 전달해야 한다.

cookie

쿠키 : 클라이언트에서 관리

쿠키 생성

테스트 해보면 cookie 는 발급된 파일의 상위 파일이 실행될때는 존재하지 않는다.

자신의 상위 파일이 실행될때도 쿠키값을 존재하게 하려면 cookie.setPath() 메소드를 사용하여 쿠키의 경로를 설정해줘야 한다.

※ 쿠키는 삭제하는 코드가 따로 없기 때문에 쿠키의 유지 시간을 0초로 조정하여 응답하여 삭제시킨다 ※

session

세션 : 서버에서 관리

session.removeAttribute("age") : age 라는 키의 세션을 삭제시킨다.

session.setMaxInactiveInterval(5) : 5초 후 모든 세션을 만료시킨다.

session.invalidate() : 모든 세션을 만료시킨다.

세션으로 로그인을 관리하는 페이지 작성 완료

JSP

이클립스 다운로드

아파치 톰캣 9 버전 다운로드

워크스페이스 생성 및 설정

▼ 만약 서버를 실행시켰는데 에러가 출력된다면 사용하려는 포트 번호가 겹친 경우!! ▼

인코딩 방식 변경

JSP 기본 태그

스크립트릿

주석

표현식

선언문

메소드는 선언문에서만 생성할 수 있다!

지시자

( 아래서 자세하게 다룸 )

경로 이동 방식

새로운 dynamic web project 생성

절대경로와 상대경로 사용 방식

Get 방식, Post 방식

!!! post 방식으로 값을 넘길땐 받는 쪽에서 인코딩 방식을 꼭 명시해주기 !!!

지시자

page 지시자

include 지시자

taglib 지시자

실습 예제

예제 풀이

Request / Response

반환형태는 Enumeration<String> 형태이며 while 문을 사용하여 다음 내용이 있는지 확인하여 nextElement() 메소드를 사용하여 변수로 해당 파라미터명을 담아서 사용한다.

게시판 구현 ( 댓글 기능 추가, 페이징, 게시글 수정, 게시글 삭제, 이미지 수정 )

게시글 상세보기 기능 추가

<%- include ("../default/header") %>
<div class="content wrap">
    <div style="width:600px; margin: 0 auto;">
    <h3 style="text-align: center; margin-bottom: 10px;"> - 개 인 정 보 - </h3>
    <table border="1" align="center">
        <tr>
            <th width="100">글 번호</th> <td width="200"><%= data.WRITE_NO %></td> 
            <th width="100">작성자</th>  <td width="200"><%= data.ID %></td>
        </tr>
        <tr>
            <th>제목</th> <td><%= data.TITLE %></td> 
            <th>등록일자</th> <td><%= data.SAVE_DATE %></td>
        </tr>
        <tr>
            <th>내용</th><td><%= data.CONTENT %></td> 
            <td colspan="2">
                <% if( data.ORIGIN_FILE_NAME === "nan"){%>
                    <b>이미지가 없습니다
                <%}else{%>
                    <b>이미지 : <%=data.ORIGIN_FILE_NAME%> </b>
                <%}%>
            </td>
        </tr>
        <tr>
            <td colspan="4" align="center">
                <%if(username === data.ID){%>
                    <input type="button" onclick="" value="수정하기"> 
                    <input type="button" onclick="" value="삭제하기">
                <%}%>
                <input type="button" onclick="" value="답글달기"> 
                <input type="button" onclick="" value="리스트로 돌아가기">
            </td>
        </tr>
        </table>
    </div>
</div>

data.ejs 코드

게시글 상세보기 기능 구현 완료

이미지 출력 구현

글에 들어가면 이미지 출력 구현 완료

글 조회수 기능 추가

조회수 증가 기능 구현 완료

글 삭제 기능 구현

글 삭제 구현 완료

글 수정 기능 구현

<%- include ("../default/header") %>
<script src="/static/js/image_read.js"></script>
<div class="content wrap">
<div style="width:300px; margin: 0 auto;">
    <form action="/board/modify" enctype="multipart/form-data" method="post" >
        <input type="hidden" name="write_no" value="<%=data.WRITE_NO%>">
        <input type="hidden" name="change_file_name" value="<%=data.CHANGE_FILE_NAME%>">
        <input type="hidden" name="origin_file_name" value="<%=data.ORIGIN_FILE_NAME%>">
        제목  <input type="text" size="30" name="title" value="<%=data.TITLE%>"><hr>
        내용  <textarea rows="5" cols="30" name="content"><%=data.CONTENT%></textarea>
        <hr>
        <img width="200px" height="100px" id="img"
                        src="/board/download/<%=data.CHANGE_FILE_NAME%>">
        <input type="file" name="image_file_name" onchange="readURL(this)">
        <hr>
        <input type="submit" value="수정하기">
        <input type="button" onclick="history.back()" value="이전으로 돌아가기">
    </form>
</div>
</div>

modify_form.ejs 코드

게시글 수정 구현 완료

페이징 기능 구현

    <% if( start <= 1){ %>
        <button disabled>이전</button>
    <%}else{%>
        <button type="button" onclick="
            location.href='/board/list?start=<%=start - 1%>'">이전</button>
    <% }for(let i=1 ; i <= totalPage ; i++ ){ %>
        <a href="/board/list?start=<%= i %>"><%= i %></a>
    <% }if( start < totalPage ){%>
        <button type="button" onclick="
            location.href='/board/list?start=<%=start + 1%>'">다음</button>
    <% }else{ %> <button disabled>다음</button> <% } %>
    <%= start %> / <%= totalPage %>

추가 코드

페이징 구현 완료

댓글 기능 구현

create table reply(
id varchar(20),
title varchar(50),
content varchar(300),
write_group number(10),
save_date date default sysdate,
constraint fk_test1 foreign key(write_group) references board(write_no) on delete cascade,
constraint fk_test2 foreign key(id) references members(id) on delete cascade
);

db에 sql 문 실행

#modal_wrap{
    display: none; position: fixed; z-index: 9;
    margin: 0 auto; top:0; left: 0; right: 0;
    width:100%; height:100%;
    background-color: rgba(0, 0, 0, 0.4);
}
#first{ 
    position: fixed; z-index: 10; margin: 0 auto;
    top:30px; left: 0; right: 0; display:none;
    background-color: rgba(212, 244, 250, 0.9);
    height:350px; width:300px;
}

reply.css 코드

function reply_form(){
    $("#first").slideDown('slow'); 
    $("#modal_wrap").show();
}
function reply_hide(){
    $("#first").slideUp('fast'); 
    $("#modal_wrap").hide();
}
function rep(){
    let form={}; 
    let arr = $("#frm").serializeArray();
    arr.forEach( d => { form[d.name] = d.value; })
    fetch("/boardrep/register", {
        method : "post",
        headers : {"Content-Type" : "application/json"},
        body : JSON.stringify( form )
    })
    .then(res => res.json() )
    .then( result => {
        if(result === 1)
            alert("답글이 달렸습니다!!")
        reply_hide();
    })
}

reply.js 코드

<link href="/static/css/reply.css" rel="stylesheet" >
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/static/js/reply.js"></script>
<div id="modal_wrap">
    <div id="first">
        <div style="width:250px;margin: 0 auto;padding-top: 20px;">
            <form id="frm">
                <input type="hidden" name="write_no" value="<%= data.WRITE_NO %>">
                <input type="hidden" name="id" value="<%= username %>">
                <b>답글 작성 페이지</b> <hr>
                <b>작성자 : <%= username %></b> <hr>
                <b>제목</b><br><input type="text" size="30" name="title"><hr>
                <b>내용</b><br>
                <textarea name="content" rows="5" cols="30"></textarea>
                <hr>
                <button type="button" onclick="rep()">답글</button>
                <button type="button" onclick="reply_hide()">취소</button>
            </form>
        </div>
    </div>
</div>

reply_form.ejs 코드

function init( groupNum ){
        fetch(`/boardrep/replyData/`+groupNum )
        .then( res => res.json() )
        .then( data => {
            let html = ""
            data.forEach((d)=>{
                html += "<div align='left'><b>아이디 : </b>"+d.ID+"님 / ";
                html += "<b>작성일</b> : "+d.SAVE_DATE+"<br>"
                html += "<b>제목</b> : "+d.TITLE+"<br>"
                html += "<b>내용</b> : "+d.CONTENT+"<hr></div>"
            });
            const content = document.getElementById("content");
            content.innerHTML = html;
        });
    }

reply_view.js 코드

현재는 답글 달면 새로고침 하기 전에 보이지 않는데 바로 댓글 입력한 데이터를 바로 출력하게끔 입력 받은 값을 덧붙여서 출력 ( 새로 고침을 하게 되면 DB 에서 끌고온 데이터가 출력되며, 이 방법은 일시적으로 데이터를 출력할 뿐 )

댓글 기능 구현 완료

코드 실행

게시판 구현 ( 페이징, 답변 )

create table paging(
num number not null,
title varchar2(30) not null,
pdate varchar2(10) not null,
count number not null,
primary key(num)
);
create sequence test_num;

DB 테이블 생성

npm 설치

게시판 목록보기 구현

게시판 목록보기 구현 완료

글 작성기능 구현

글 작성부분 구현 완료

글 상세보기 구현

글 상세보기 구현 완료

조회수 증가시키는 부분 구현

글 조회수 증가 구현 완료

페이징 처리

rownum : 가상의 행의 수

( 의미는 없지만, 만약 글의 번호로 데이터를 처리한다고 가정했을 때 한 페이지에 글을 5개씩 출력하고자 할 때 2번째 작성 글이 삭제되었다면 오류가 발생하거나 첫번째 페이지에 1, 3, 4, 5 글 4개만 출력되게 된다..... 그래서 오라클에서 지원하는 가상의 행{결과 값이 출력되는 행만큼 임의의 번호를 붙여주는 rownum}인 rownum 을 사용하여 글이 삭제되었어도 빈 값이 없이 1, 3, 4, 5, 6 식으로 출력되게끔 설정한다 )

페이징 처리 완료

댓글

create table board(
write_no number(10) primary key,
title varchar2(100),
content varchar2(300),
save_date date default sysdate,
hit number(10) default 0,
origin_file_name varchar(100),
change_file_name varchar(100),
id varchar(20) not null,
constraint fk_test foreign key(id) references members(id) on delete cascade
);
create sequence board_seq;

sql developer 에서 쿼리문 작성하여 테이블 생성

write no : 글 번호

title : 제목

content : 내용

save_date : 저장 날짜

id : 글 작성자

multer npm 설치

( multer - 파일 업로드를 위해 사용되는 Node.js 의 미들웨어 )

* { margin: 0; }
.wrap { width: 1000px; margin: auto; }
.header { width: 1000px; }
.navdiv { width: 100%; background-color: olive; }
.nav { background-color: olive; width: 1000px;}
.nav ul { list-style: none; display: flex;
        justify-content: end; }
.nav ul li { padding: 10px; }

.nav ul li a { text-decoration:none; color:white; }
.nav ul li a:hover{
color: orange; border-bottom: 2px solid black;
transition : all 0.25s; padding-bottom: 3px;
}
.title{ text-shadow: 10px 10px 15px black; 
    font-size: 70pt;
    text-align: center;
    margin-top: 0; 
    padding-bottom: 20px;
    color: burlywood;
    font-family: Gabriola;
}
.content { margin-top: 50px;  }

header.css 코드

<link href="/static/css/header.css" rel="stylesheet">
<script >
window.onload = () =>{
    console.log(document.cookie);
    let msg ="<li><a href='/'>HOME</a></li>";
    if(document.cookie.indexOf("isLogin=true") !== -1 ){
        msg += '<li><a href="/member/logout">로그아웃</a></li>';
        msg += '<li><a href="/member/list">회원정보</a></li>';
    }else{
        msg += '<li><a href="/member/login">로그인</a></li>';
        msg += '<li><a href="/member/login">회원정보</a></li>';
    }
    document.querySelector("#nav ul").innerHTML = msg
}
</script>
<div class="wrap">
    <div class="header">
        <h1 class="title">CARE LAB</h1>
    </div>
</div>
<div class="navdiv">
    <div class="wrap">
        <nav id="nav" class="nav">
            <ul></ul>
        </nav>
    </div>
</div>
<hr>

header.ejs 코드 변경 ( link 로 외부 css 파일 적용 )

<%- include ("../default/header") %>
<div class="content wrap">
    <table border="1" style="width:100%;">
        <tr>
            <th>번호</th> <th>id</th> <th>제목</th> <th>날짜</th>
            <th>조회수</th> <th>원본 이미지이름</th> <th>변경 이미지이름</th>
        </tr>
        <% if( list.length == 0){ %>
            <tr>
                <th colspan="7">등록된 글이 없습니다</th>
            </tr>
        <%}else{
            list.forEach(data=>{%>
            <tr>
                <td><%=data.WRITE_NO%></td><td><%=data.ID%></td>
                <td><%=data.TITLE%></td><td><%=data.SAVE_DATE%></td>
                <td><%=data.HIT%></td><td><%=data.ORIGIN_FILE_NAME%></td>
                <td><%=data.CHANGE_FILE_NAME%></td>
            </tr>
            <%})
        }%>
        <tr>
            <td colspan="7" align="right">
                <a href="/board/write_form">글 작성</a>
            </td>
        </tr>
    </table>
</div>

list.ejs 코드

<%- include ("../default/header") %>
<script src="/static/js/image_read.js"></script>
<div class="content wrap">
    <div style="width: 400px; margin: 0 auto; ">
        <h1 style="text-align: center">글쓰기</h1>
        <form method="post" action="/board/write" 
                                        enctype="multipart/form-data">
            <b>작성자</b><br>   <!-- readonly : 읽기 전용 -->
            <input type="text" name="id" value="<%= username %>" readonly />
            <hr>
            <b>제목</b> <br> <input type="text" size="50" name="title" /><hr>
            <b>내용</b> <br>
            <textarea name="content" rows="10" cols="50"></textarea><hr>
            <b>이미지파일 첨부</b><br>
            <input type="file" name="image_file_name" onchange="readURL(this);" /> 
            <img id="img" src="#" width=100 height=100 alt="선택된 이미지가 없습니다" />
            <hr> 
            <input type="submit" value="글쓰기">
            <input type=button value="목록보기" onClick="location.href='/board/list'">
        </form>
    </div>
</div>

write_form.ejs 코드

const readURL = (input) => {
    console.log(input);
    console.log(input.files[0]);
    const file = input.files[0];
    if(file != ""){
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
            console.log(e.target.result);
            // 파일에 대한 정보가 담겨있는 곳
            document.getElementById("img").src = e.target.result;
        }
    }
}

image_read.js 코드

const multer = require("multer");
const stg = multer.diskStorage({
    destination : ( req , file, cb ) => {
        cb(null,  "upload_file")
    },
    filename : ( req, file, cb) => {
        cb(null, Date.now()+"-"+file.originalname );
    }
})
const f_filter = (req, file, cb)=>{
    const type = file.mimetype.split("/");
    if( type[0] == "image" ){
        cb(null, true);
    }else{
        req.fileValidation = "이미지만 저장하세요";
        cb(null, false);
    }
}
const upload = multer({storage : stg, fileFilter : f_filter })
module.exports = upload;

file_config.js 코드