240215 스프링 프로젝트

오늘은 조금 더 빨리 13, 14일 진행했던 스프링 진행해보기

 

직접 DB 에 연결해서 DB 에 작성되어 있는 Board List 들 출력해보기

 

먼저

db-context.xml 생성

classpath > spring 패키지 > Spring Bean Configuration file 생성

내부에 기존 작성했던 db 접속 정보들 작성하기

  <!-- DB 접속 정보 -->
  <bean class="org.springframework.jdbc.datasource.DriverManagerDataSource" id="dataSource">
    <property name="username" value="--"></property>
    <property name="password" value="--"></property>
    <property name="url" value="----"></property>
    <property name="driverClassName" value="org.maraidb.jdbc.Driver"></property>
  </bean>
	
  <!-- name = dataSource 인 Property 는 객체를 포함하고 있기 때문에 ref 로 값을 받음 -->
  <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource"></property>
    <property name="mapperLocations" value="classpath:/mybatis/mappers/*-Mapper.xml"></property>
    <property name="configLocation" value="classpath:/mybatis/config/mybatis-Config.xml"></property>
  </bean>
  
  <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
    <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactoryBean"/>
  </bean>
</beans>

 

저번에는 List<Map<String, Object>> 로 받았지만 DTO 로 받을 수 있게 mybatis 안에 DTO 를 인식하도록 설정

mybatis-config.xml 파일에는 mybatis 홈페이지에서 config 로 인식할 수 있게 태그 추가

 

mybatis – 마이바티스 3 | 시작하기

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-config.dtd">
  
  <configuration>
    <typeAliases>
      <typeAlias type="org.solbum.dto.BoardDTO" alias="boardDTO"/>
    </typeAliases>
  </configuration>

 

mapper 에 sql 구문 추가, * 쓰는건 안좋지만 지금은 어떤 값이 들어가는지 다 알고 있기 때문에 * 로 작성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
  <mapper namespace="board">
    <select id="boardList" resultType="boardDTO">
      select * from boardview
    </select>
  </mapper>

 

전체 다 작성하고 계속 서비스, 리포지토리 등을 찾지 못한다는 오류가 발생하였는데

내가 servlet-context.xml 에 scan 과 db-context.xml 을 import 하지 않아서 생긴 오류였음

<context:component-scan base-package="org.solbum.*" />
<beans:import resource="classpath:/spring/db-context.xml"/>

 

정상 출력

 

에러 페이지 만들기

<!-- 개발 중에는 에러 메세지를 볼 수 없기 때문에 배포 이후 에러페이지를 공개하는 것이 좋음 -->
<error-page>
  <exception-type>java.lang.Throwable</exception-type>
  <location>/WEB-INF/views/error/error.jsp</location>
</error-page>
<error-page>
  <error-code>404</error-code>
  <location>/WEB-INF/views/error/404.jsp</location>
</error-page>
<error-page>
  <error-code>500</error-code>
  <location>/WEB-INF/views/error/500.jsp</location>
</error-page>

 

인코딩 하는 것 만들기, 페이지를 UTF-8 로 인코딩 해줌

<filter>
  <filter-name>encodingFilter</filter-name>
  <filter-class> org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  <init-param>
    <param-name>encoding</param-name>
    <param-value>UTF-8</param-value>
  </init-param>
  <init-param>
    <param-name>forceEncoding</param-name>
    <param-value>true</param-value>
  </init-param>
</filter>

<filter-mapping>
  <filter-name>encodingFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

 

로그 보기, pom 에 라이브러리 추가

<!-- log찍기 -->
<dependency>
  <groupId>org.lazyluke</groupId>
  <artifactId>log4jdbc-remix</artifactId>
  <version>0.2.7</version>
</dependency>

<!-- db+ -->
<dependency>
  <groupId>commons-dbcp</groupId>
  <artifactId>commons-dbcp</artifactId>
  <version>1.4</version>
</dependency>

 

db-context.xml 에 값 중간에 확인할 수 있는 bean 추가

<bean id="dataSourceSpied" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
  <property name="username" value="-----"/>
  <property name="password" value="-----" />
  <property name="url" value="-----" />
  <property name="driverClassName" value="org.mariadb.jdbc.Driver"/>
</bean>
  
<bean id="dataSource" class="net.sf.log4jdbc.Log4jdbcProxyDataSource">
  <constructor-arg ref="dataSourceSpied" />
  <property name="logFormatter">
    <bean class="net.sf.log4jdbc.tools.Log4JdbcCustomFormatter">
      <property name="loggingType" value="MULTI_LINE" />
      <property name="sqlPrefix" value="SQL : " />
    </bean>
  </property>
</bean>

 

log4j2.xml 파일 추가, log4j.xml 은 이미 있어 2 로 새로 추가하기

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE log4j:configuration PUBLIC "-//APACHE//DTD LOG4J 1.2//EN" "http://logging.apache.org/log4j/1.2/apidocs/org/apache/log4j/xml/doc-files/log4j.dtd">
<Configuration>
  <Appenders>
    <Console name="console" target="SYSTEM_OUT">
      <PatternLayout pattern="%d %5p [%c] %m%n" />
    </Console>
    <!--추가된 부분 -->
    <Console name="console-infolog"	class="org.apache.log4j.ConsoleAppender">
      <layout class="org.apache.log4j.PatternLayout">
        <param name="ConversionPattern" value="%d %5p %m%n" />
      </layout>
    </Console>
  </Appenders>
  <Loggers>
    <Logger name="java.sql" level="info" additivity="false">
      <AppenderRef ref="console" />
    </Logger>
    <Logger name="egovframework" level="DEBUG" additivity="false">
      <AppenderRef ref="console" />
    </Logger>
    <!-- log SQL with timing information, post execution -->
    <Logger name="jdbc.sqltiming" level="info" additivity="false">
      <AppenderRef ref="console" />
    </Logger>
    <Logger name="org.springframework" level="DEBUG" additivity="false">
      <AppenderRef ref="console" />
    </Logger>
    <!-- Query Loggers -->
    <Logger name="jdbc.sqlonly" additivity="false">
      <level value="DEBUG" />
      <appender-ref ref="console-infolog" />
    </Logger>
    <logger name="java.sql.ResultSet" additivity="false">
      <level value="OFF" />
    </logger>
    <Root level="DEBUG">
      <AppenderRef ref="console" />
    </Root>
  </Loggers>
</Configuration>

 

부트스트랩 사용해보기

 

이 테마 사용할 것

Start Bootstrap

 

스프링에서 .html 파일은 열리지 않아 index.jsp 파일을 만든 후 

내용을 복사 붙여넣기 진행

 

해당 내용 중 css 의 link 가

<link href="css/styles.css" rel="stylesheet" />

 

로 되어 있는데, 이렇게 되면 파일을 불러오지 못함

 

servlet-context 에서

<resources mapping="/resources/**" location="/resources/" />
<resources mapping="/assets/**" location="/resources/assets/" />
<resources mapping="/css/**" location="/resources/css/" />
<resources mapping="/js/**" location="/resources/js/" />
<resources mapping="/img/**" location="/resources/img/" />

 

경로의 입력이 들어오면 해당 내용을 매핑을 진행해주어야 함

 

css/** 을 조회해달라는 요청이 오면 (** 은 하위 폴더까지 전부 포함하는 뜻), css 밑의 어떤 파일을 조회하는 명령이 오든

해당 내용을 /resource/ 밑의 모든 파일을 조회한다.

mapping 을 location 으로 변환

 

해서 css/ 로만 적어도 css 하위의 모든 파일에 접근이 가능함

 

부트스트랩 페이지의 메뉴바의 a 링크 중

<li class="nav-item"><a class="nav-link" href="#halp">Halp</a></li>
<li class="nav-item"><a class="nav-link" href="#">###</a></li>

 

href="#halp" 면 해당 페이지 중 id=halp 인 위치로 이동함

href="#" 는 해당 페이지의 최상단으로 이동

 

페이지 상단에 있는 meta 태그, 검색어들에 대한 설명

메타 요약문 (meta 요소)에 대한 SEO 최적화 - 어센트 코리아

 

favicon 설정해보기

원하는 아이콘, 사진을 받아 사진을 favicon 으로 만들어주는 사이트에서 변환

Favicon & App Icon Generator

 

변환 시 나오는 파일 받아서 해당 파일과 링크 태그들을 집어넣기

<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

 

모바일 홈 화면에 추가 시 이런식으로도 파비콘 아이콘 출력

 

index 복사하여 board.jsp 로 만들기

 

section 하나, footer 쪽 남기고 나머지 내용 삭제

<%@page import="org.springframework.context.annotation.Import"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico" />
<!-- 파비콘 링크가 너무 많아 생략 -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<title>게시판만들기</title>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
  <!-- Navigation-->
  <c:import url="menu.jsp" />

  <!-- 게시판 -->
  <section class="page-section" id="services">
    <div class="container">
      <div class="text-center">
        <h2 class="section-heading text-uppercase">게시판</h2>
      </div>
      <div class="row text-center">
        <table>
          <thead>
            <tr>
              <th>번호</th>
              <th>제목</th>
              <th>글쓴이</th>
              <th>날짜</th>
              <th>읽음</th>
            </tr>
          </thead>
          <tbody>
            <c:forEach items="${list }" var="list">
              <tr>
                <td>${list.board_no }</td>
                <td>${list.board_title }[${list.comment }]</td>
                <td>${list.mname }</td>
                <td>${list.board_date }</td>
                <td>${list.board_count }</td>
              </tr>
            </c:forEach>
          </tbody>
        </table>
      </div>
    </div>
  </section>
  <!-- Bootstrap core JS-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Core theme JS-->
  <script src="js/scripts.js"></script>
  <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>

 

그리고..

부트스트랩 문서는 여기로..

Bootstrap 시작하기

 

시작하기