참조/관심 사이트

spring 및 java 면접관련

http://rongscodinghistory.tistory.com/category/%EA%B0%9C%EB%B0%9C/%EC%9B%B9%EA%B0%9C%EB%B0%9C%20%EB%A9%B4%EC%A0%91%EC%A7%88%EB%AC%B8

로그인 구현 관련

http://elvis-note.tistory.com/61

객체지향 vs 절차지향

http://blog.wishket.com/%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-vs-%EC%A0%88%EC%B0%A8%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D

Spring 페이징, 업로드 관련

http://blog.naver.com/woosuk288/220328838561

정보처리기사/기능사 요점

1. 요점정리

https://trello.com/b/wEVlOMCN/%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC

 

http://ykh9300.tistory.com/19

 

2. CBT(정보처리기사)

http://gunsystem.tistory.com/48

http://www.comcbt.com/xe/j4/2633933

3. 동강

http://blog.naver.com/ungkmi

 

4.정보처리기사 실기…

1. 직접 답을 적어야 합니다.
2. 검정색 펜으로 작성해야 합니다.
http://blog.naver.com/frogramo/221008784192http://kin.naver.com/editor/ogTagView.nhn?mode=view&showLink=false&layoutType=small_image&no=0&title=2017%EB%85%84%20%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC%20%EC%8B%A4%EA%B8%B0%EC%8B%9C%ED%97%98%20%EC%83%88%EB%A1%AD%EA%B2%8C%20%EB%8B%AC%EB%9D%BC%EC%A7%80%EB%8A%94%20%EA%B2%83&description=2017%EB%85%84%20%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC%2C%20%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EC%82%B0%EC%97%85%EA%B8%B0%EC%82%AC%20%EC%8B%A4%EA%B8%B0%EC%8B%9C%ED%97%98%EC%9D%B4%20%EB%AC%B8%ED%95%AD%20%EC%88%98%EC%99%80%20%EB%B0%B0%EC%A0%90%EC%9D%B4%20%EB%B0%94%EB%80%8C%EC%97%88%EC%8A%B5%EB%8B%88%EB%8B%A4.%20%EA%B8%B0%EC%A1%B4%EC%9D%98%20%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC(…&domain=blog.naver.com&linkUrl=http%3A%2F%2Fblog.naver.com%2Ffrogramo%2F221008784192&thumbUrl=http%3A%2F%2Fblogthumb2.naver.net%2FMjAxNzA1MThfMjkx%2FMDAxNDk1MDk0OTUwMjY1.sHxfKl1cT4L6b3lqS0WLiC12jqoFnEF96SEdGbuz9iIg._vrwaXoxQU-mcAt52mKq5CGVgwpZ9pAKA15kpawEAHAg.PNG.frogramo%2F%25C0%25CE%25C5%25A9%25B7%25B9%25C6%25C4%25BD%25BA_%25C1%25A4%25BA%25B8%25C3%25B3%25B8%25AE%25B1%25E2%25BB%25E7.png%3Ftype%3Dw2

3. 게시판 Read

3.1 DB에서 게시글을 불러오기 위한 코딩 구현

먼저 게시글을 불러올 테이블 데이터 및 VO는 아래와 같다.

Table: board
-----------------------------------
Name Datatype Comment
idx int(11) // 게시글 번호
title varchar(100)  //게시글 제목
content varchar(2000)  //게시글 내용
writer varchar(100)  //작성자
credt date //작성일
uptdt date //작성 업데이트 날짜
showed int(11) 조회수
deleteyn char(1) 삭제 여부

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

BoardVO
---------------------------------------
content : String
credt : String
deleteyn : String
idx : int
showed : String
title : String
uptdt : String
writer : String
---------------------------------------

bean 설정 생략.

그리고 게시글을 볼러오기 위한 게시글 리스트 반환형 getBoardList 메소드를 생성하였다.

(본 게시글에서 페이징은 생략.)

List voList = boardService.getBoardList();

캡처-게시글반환형-예제1

여기서 주목할 점은 인터페이스를 통하여 구현하고자 할 메소드명 정의 후

실제 구현은 클래스(BoardService)에서 한다.

DAO도 마찬가지로 메소드명을 정의후 실구현을 클래스에서 한다. (아래 그림 참고)

캡처-게시글반환형-예제2.PNG

3.2 Mybatis에서 쿼리하여 데이터 불러오기

불러와야 할 VO의 typealias,  sql을 실행할 mapper 가 필요한데

이는 src/main/resources/mybatis.xml에 구현되어 있다. (아래 xml 참조)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
<typeAliases>
<typeAlias alias="BoardVO" type="com.christof.board.vo.BoardVO"/>
</typeAliases>
<mappers>
<mapper resource="/com/christof/board/dao/impl/sql/sampleMapper.xml" />
<mapper resource="/com/christof/board/dao/impl/sql/boardDao.xml" />
</mappers>
</configuration>
설정은 rootContext.xml에서 mybatis경로가 지정되어 있음. -

아래는 sql 질의부이다.

캡처-게시글반환형-예제3.PNG

dao클래스 구현부에서  네임스페이스  BoardVO와  id인getBoardList를 호출하여

BoardVO 타입으로 리스트를 생성된 VO 리스트를 dao->service->view로 보내준다. (아래 참고)

캡처-게시글반환형-예제4.PNG

이제 리스트는 _board_ 로 정의하여 모든 리스트를 게시글로 보여주면된다.

voList를 _board_로 정의하고

jstl의 forEach구문을 통하여 모든 게시글을 불러온다.

캡처-게시글반환형-예제5.PNG

위의 테이블은 템플릿이고, 맨 아래의 글은 DB로 부터 게시글을 불러온 데이터이다.

이제 저 템플릿에 맞게 넣기만 하면 된다.

아래는 jstl 템플릿이다.

캡처-게시글반환형-예제6-R.PNG

/*UsersVO: 사용자 객체를 받는 User Value Object*/

MapType으로 받을 경우 set을 해주고 type을 map으로 해주면 됨

SELECT
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<resultMap type="UsersVO" id="loginMap">
<id property="emailId" column="EMAIL_ID"/>
<result property="password" column="PWD"/>
<result property="userName" column="USR_NM"/>
<result property="registeredDate" column="CRT_DT"/>
<result property="modifiedDate" column="MDFY_DT"/>

</resultMap>

<select id="login" parameterType="UsersVO" resultMap="loginMap">
SELECT EMAIL_ID
, PWD
, USR_NM
, CRT_DT
, MDFY_DT
FROM USRS
WHERE EMAIL_ID = #{emailId}
AND PWD = #{password}
</select>

idx int(11) NO PRI select,insert,update,references
title
content
writer
credt
uptdt
show
deleteyn
</mapper>

INSERT
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<insert id="yourId" parameterType="YourVO">
INSERT INTO TABLE_NAME (
COLUMN1
,COLUMN2
...
)
VALUES (
#{yourGetterMethodName1}
, #{yourGetterMethodName2}
...
)
</insert>

</mapper>

UPDATE
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<update id="yourId" parameterType="YourVO">
UPDATE BOARD
SET COLUMN1 = #{ yourGetterMethodName1}
,COLUMN2 = #{ yourGetterMethodNam2 }
WHERE ID = #{yourGetterMethodName }
</update>

</mapper>

DELETE
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<delete id="deleteArticle" parameterType="_int">
DELETE FROM BOARD
WHERE ID= #{yourParamName}
</delete>

</mapper>

UPSERT : 삽입과 업데이트가 동시에 되는 쿼리

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<insert id="registAndUpdate" parameterType="UsersVO">
MERGE INTO USRS d
USING DUAL
ON (EMAIL_ID = #{emailId})
WHEN MATCHED
THEN
UPDATE SET
<if test="password != null">
PWD = #{password},
</if>

<if test="userName != null">
USR_NM = #{userName},
</if>

<if test="deleteFlag != null">
PWD = #{deleteFlag},
</if>
MDFY_DT = SYSDATE
WHEN NOT MATCHED
THEN
INSERT (
EMAIL_ID
, PWD
, USR_NM
, CRT_DT
, MDFY_DT
, DEL_FG)
VALUES (
EMAIL_ID
, #{emailId}
, #{password}
, #{userName}
, SYSDATE
, SYSDATE
, #{deleteFlag})
</insert>

</mapper>

2. 웹 페이지 navigation 적용

아래와 같은 페이지를 목표로…게시글 웹페이지를 작성한다.

2.1 웹페이지 template 적용

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active

위와 같은 Navigation 생성 예제가 있다.

아래와 같이 기술하면 다음과 같은 화면으로 변경된다.

<div class="container">
<div class="header">
<ul class="list-ul">
	<li class="list-li"><a class="active" href="#home">홈으로</a></li>
	<li class="list-li"><a href="#news">News</a></li>
	<li class="list-li"><a href="#contact">Contact</a></li>
	<li class="list-li"><a href="#about">로그인</a></li>
</ul>
</div>
<!-- Header end -->

캡처-header1

캡처-header-pseudo

이는 CSS 스타일 적용이 되지 않아서 발생되는 문제이므로 CSS 스타일을 추가적으로 넣어야

한다.

ul.list-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li.list-li {
float:left
}

li.list-li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.list-li a:hover:not(.active) {
background-color: #111;
}

적용 후 결과

캡처-header2