이국진의 개발블로그

MySql 서버 실행하기 -> mysql.server start (Mac) 

MySql 접속하기 -> mysql -u root     // -uroot 라고 붙여도 된다. 

Character set 확인 -> status; 에서 4가지가 모두 utf-8로 되어있는지 확인. 

DB 만들기 -> create database dbName; --> show create databases dbName; 으로 상태 확인

권한 설정 
-> grant all privileges on dbName.* to userName@localhost identified by 'password123';
-> grant all privileges on dbName.* to userName@'%' identified by 'password123';

<input type="text" id="postCode" name="postCode" id="postCode" placeholder="우편번호" />&nbsp;&nbsp;&nbsp;<input type="button" value="우편번호 찾기&nbsp;" onClick="execDaumPostCode()"><br/>											
<input type="text" id="roadAddress" name="roadAddress" id="roadAddress" placeholder="도로명주소"/>
<input type="text" id="detailAddress" name="detailAddress" id="detailAddress" placeholder="상세주소"/>
											
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">

위와 같이 태그를 추가. 

onClick="execDaumPostCode()

아래 스크립트의 함수를 실행시킨다. 변수명 일치 시키는게 중요.

<!-- 우편번호 찾기 -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

다음 우편번호 찾기 api를 추가하고.

수정할 부분은 html 태그의 id 이름과 api 안에 id값을 일치시키기만 하면 된다.

중간에 

document.getElementById('postCode').value = data.zonecode; //5자리 새우편번호 사용 document.getElementById('roadAddress').value = fullAddr; document.getElementById('detailAddress').focus();

document.getElementById안의 값인 postCode, roadAddress, detailAddress의 값은 맨 위에 있는

<input type="text" id="postCode"

<input type="text" id="roadAddress"

<input type="text" id="detailAddress"

 input 태그의 id와 동일하게 해주면 저절로 입력이 된다.

<script>
    // 우편번호 찾기 화면을 넣을 element
    var element_layer = document.getElementById('layer');

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element_layer.style.display = 'none';
    }

    function execDaumPostCode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var fullAddr = data.address; // 최종 주소 변수
                var extraAddr = ''; // 조합형 주소 변수

                // 기본 주소가 도로명 타입일때 조합한다.
                if(data.addressType === 'R'){
                    //법정동명이 있을 경우 추가한다.
                    if(data.bname !== ''){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있을 경우 추가한다.
                    if(data.buildingName !== ''){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                    fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('postCode').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('roadAddress').value = fullAddr;
                
                document.getElementById('detailAddress').focus();
                // iframe을 넣은 element를 안보이게 한다.
                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                element_layer.style.display = 'none';
            },
            width : '100%',
            height : '100%'
        }).embed(element_layer);

        // iframe을 넣은 element를 보이게 한다.
        element_layer.style.display = 'block';

        // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
        initLayerPosition();
    }

    // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
    // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
    // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
    function initLayerPosition(){
        var width = 300; //우편번호 서비스가 들어갈 element의 width
        var height = 460; //우편번호 서비스가 들어갈 element의 height
        var borderWidth = 5; //샘플에서 사용하는 border의 두께

        // 위에서 선언한 값들을 실제 element에 넣는다.
        element_layer.style.width = width + 'px';
        element_layer.style.height = height + 'px';
        element_layer.style.border = borderWidth + 'px solid';
        // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
        element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
        element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
    }
</script>

참고 : http://postcode.map.daum.net/guide#usage

실행 결과는 Connection 객체가 만들어지는 것을 확인할 수 있어야 함.

package test;

import java.sql.Connection;

import javax.inject.Inject;
import javax.sql.DataSource;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations={"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
public class DataSourceTest {
	

	@Inject
	private DataSource ds;
	
	@Test
	public void testConnection() throws Exception{
		
		try (Connection con = ds.getConnection()){
			System.out.println(con);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
}

        pom.xml에서 자바 버전 수정.

<properties>
      	<java-version>1.8</java-version>
    	<org.springframework-version>4.1.7.RELEASE</org.springframework-version>
      	<org.aspectj-version>1.6.10</org.aspectj-version>
      	<org.slf4j-version>1.6.6</org.slf4j-version>
</properties>

        properties 에서 project facets에서 버전 수정.

        pom.xml의 추가 라이브러리

        <dependency>
    		<groupId>org.springframework</groupId>
    		<artifactId>spring-test</artifactId>
    		<version>${org.springframework-version}</version>
    	</dependency>
    
        <dependency>
    		<groupId>org.springframework</groupId>
    		<artifactId>spring-jdbc</artifactId>
    		<version>${org.springframework-version}</version>
    	</dependency>

        <dependency>
    		<groupId>mysql</groupId>
    		<artifactId>mysql-connector-java</artifactId>
    		<version>5.1.35</version>
    	</dependency>

    	<dependency>
    		<groupId>org.mybatis</groupId>
    		<artifactId>mybatis</artifactId>
    		<version>3.2.8</version>
    	</dependency>

        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis-spring</artifactId>
          <version>1.2.2</version>
        </dependency>

        <dependency>
    		<groupId>org.bgee.log4jdbc-log4j2</groupId>
    		<artifactId>log4jdbc-log4j2-jdbc4</artifactId>
    		<version>1.16</version>
    	</dependency>

        <!-- Servlet -->
    	<dependency>
    		<groupId>javax.servlet</groupId>
    		<artifactId>javax.servlet-api</artifactId>
    		<version>3.1.0</version>
   	</dependency>
   
     <!-- Test -->
     <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.12</version>
          <scope>test</scope>
     </dependency>

        src/main/resources 폴더 안에 

        log4jdbc.log4j2.properties 파일과 logback.xml, mybatis-config.xml 파일을 추가한다.

log4jdbc.log4j2.properties 안에 소스코드

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator

logback.xml 안에 소스코드

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <include resource="org/springframework/boot/logging/logback/base.xml"/>

    <!-- log4jdbc-log4j2 -->
    <logger name="jdbc.sqlonly"        level="DEBUG"/>
    <logger name="jdbc.sqltiming"      level="INFO"/>
    <logger name="jdbc.audit"          level="WARN"/>
    <logger name="jdbc.resultset"      level="ERROR"/>
    <logger name="jdbc.resultsettable" level="ERROR"/>
    <logger name="jdbc.connection"     level="INFO"/>
</configuration>

mybatis-config.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>
  
  </configuration>

root-context.xml

1. 네임스페이스 추가.

beans, context, mybatis-spring 총 3가지 체크 확인.

2. SessionFactory, SqlSessionTemplate 추가.

<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
		<property name="url" value="jdbc:log4jdbc:mysql://127.0.0.1:3306/web"></property>
		<property name="username" value="bill"></property>
		<property name="password" value="bill"></property>
	</bean>
	
	
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<property name="configLocation" value="classpath:/mybatis-config.xml" />
		<property name="mapperLocations" value="classpath:mappers/**/*Mapper.xml" />
	</bean>
	
	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate" destroy-method="clearCache">
		<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
	</bean> 
	
	<context:component-scan base-package="com.web.service"></context:component-scan>	
	<context:component-scan base-package="com.web.dao"></context:component-scan>
</beans>

service 와 dao에 component-scan 확인할 것!

컨트롤러는  servlet-context.xml에 추가할것

<context:component-scan base-package="com.web.controller" />

web.xml에 추가.

<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>

</filter>

<filter-mapping>

       <filter-name>encodingFilter</filter-name>

       <url-pattern>/*</url-pattern>

</filter-mapping>

jsp에서 한글 인코딩

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

@RequestMapping(value="/uploadForm", method=RequestMethod.POST)
public String uploadForm(MultipartFile file, Model model) throws Exception{ 
		
		logger.info("originalName : " + file.getOriginalFilename());
		logger.info("size : " + file.getSize());
		logger.info("contentType : " + file.getContentType());
	
		String savedName = uploadFile(file.getOriginalFilename(), file.getBytes());
		model.addAttribute("saveName", savedName);
		
		return "uploadResult";
}

	
private String uploadFile(String originalName, byte[] fileDate) throws Exception{
		
		UUID uid = UUID.randomUUID();
		
		String savedName = uid.toString() + "_" + originalName;
		
		File target = new File(uploadPath, savedName);
		
		FileCopyUtils.copy(fileDate, target);
		
		return savedName;
}

파일 이름이 중복될 경우 문제가 발생하기 때문에 고유값을 가진 파일이름으로 저장해야 된다.

uploadFile이라는 함수를 만들어서 UUID.randomUUID()을 이용하여 고유값을 가진 값 + 파일명으로 새로운 파일명을 만들고 업로드 함수로 리턴한다.

(출처 : 코드로 배우는 스프링 웹프로그래밍)

endPage 

endPage = (int) (Math.ceil(현재 페이지() / (double)페이지 번호의 수) * displayPageNum);

endPage는 현재의 페이지 번호를 기준으로 계산함.

현재 페이지가 3일 경우 : Math.ceil(5/10) * 10 = 10

현재 페이지가 1일 경우 : Math.ceil(1/10) * 10 = 10

현재 페이지가 20일 경우 : Math.ceil(20/10) * 10 = 20

현재 페이지가 21일 경우 : Math.ceil(21/10) * 10 = 30

startPage

endPage가 20이라면 startPage는 11이 됨. 

startPage = (endPage - 페이지 번호의 수 ) + 1;

100개의 데이터(totalCount)를 10개씩 보여준다면 endPage는 10. 20개씩 보여줘야 하는 경우 endPage는 5가 된다.

int tempEndPage = (int)(Math.ceil(totalCount / (double)cri.getPerPageNum());

if(endPage > tempEndPage){

endPage = tempEndPage;

}

Prev and Next

prev = startPage == 1 ? false : true;

next = endPage * cri.getPerPageNum() >= totalCount ? false : true;

- 코드로 배우는 스프링 웹 프로젝트 - 

다음과 같이 상대 경로로 리다이렉트 사용할 수 있음.

@Controller

public class RedirectController {

@RequestMapping("/studentConfirm")

public String studentRedirect(HttpServletRequest httpServletRequest, Model model){

String id = httpServletRequest.getParameter("id");

if(id.equals("abc")) {

return "redirect:studentOk";

}

return "redirect:studentNg";

}

절대 경로로도 리다이렉트를 사용할 수 있음.

@RequestMapping("/studentURL1")

public String studentURL1(Model model) {

return "redirect:http://localhost:8181/spring_14_3_ex1_srpingex/studentURL1.jsp";

}

소스코드에 색 입히기

소스코드를 작성하고 블로그나 문서파일로 복붙을 하게 되는 경우가 많은데 매번 Syntax는 제외하고 복사가 됩니다. 

하나하나 색을 입히기도 힘들고 어떻게 소스코드에 색을 입힐 수 있나 찾는 중 좋은 사이트를 찾았네요.

아래와 같이 Syntax가 적용 안된 html 소스코드를 보면 가독성도 안좋고 갑갑합니다..

<html>

    <head></head>

    <body>

<input type="text">

    </body>

</html>

하지만 https://tohtml.com/ 에 가면 아래와 같이 Syntax가 적용된 html 소스코드로 바꿀 수 있습니다.

<html>
    <head></head>
    <body>
        <input type="text">
    </body>
</html>

https://tohtml.com/에 접속하면 아래와 같은 화면이 반깁니다. 

Source code 부분에 원하는 소스코드를 넣고 오른쪽에 Type 에서 어떤 언어의 Syntax로 바꾸고 싶은지 택하고 Style에서 배경을 택합니다. 

그리고 Highlight 버튼을 누르면 싹 변하게 됩니다.

짠 ! 하고 Syntax가 적용된 소스코드가 나옵니다. 이걸 복붙하면 끝!!