초보 개발자의 프로그래밍 공부방

픽셀을 %로 바꾸기 - 가변그리드

Front-End/반응형 웹 2019. 5. 29. 23:02

가변 그리드 공식

가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술입니다.

(가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 % 값

예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px 이고, 가변 크기로 만들 박스의 가로 너비가 300px 이라면 노란 박스를 가변

크기로 만들기 위한 공식은 다음과 같습니다. (곱하기 100은 백분율을 표현하기 위함)

(300px ÷ 960px) X 100 = 31.25%

서로 다른 크기의 박스를 가변 크기로 변환하기

-예제-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
 
//모든 태그를 감싸고 있는 박스를 만들기 위해 'wrap' 라는 아이디를 가진 <div> 태그를 작성
wrap 또는 wrapper이라는 요소로 박스 전체를 감싸면 웹 문서 내용 전체의 크기나 배경색 등을 한꺼번에 조절할 수 있을 뿐만아니라
브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수도 있기 때문.
 
#wrap{ //wrap 박스는 가장 상위의 박스이므로 가변 그리드 계산기 기준이 될 박스가 없기 때문에 (가장크기 때문)
    width:90%; //임의로 설정한 값인 90%로 설정
    /*960px*/
    height: 500px;
    margin:0 auto;
    border:4px solid #000;
}
 
 
본래 크기인 900px를 가변 크기로 변환하기 위해 container 박스의 부모 박스인 wrap 박스의 가로 너비를 900px ÷ 960px 공식을
이용해서 얻은 값인 93.75%로 설정한다.
 
 
.container{
    width:93.75%;
    /*900px ÷ 960px*/ //공식을 주석으로 적어놓으면 나중에 코드를 확인할 때 편하다.
    height: 492px;
    margin:0 auto;
    border: 4px solid #000;
}
 
.container div{
    display: inline-block; //자식 박스의 가변 크기 설정, inline-block는 display 속성의 값 중 inline 속성값처럼
    height: 100%; //요소들이 한 줄로 보이고, <block> 태그에 적용할 수 있는 속성들도 사용할 수 있는 속성값입니다.
}
 
.container div:first-child{
 
첫 번째 <div> 태그의 가로 너비인 300px를 가변크기로 변환합니다.
300px ÷ 900px 공식을 이용해서 얻은 값인 33.3%를 가로 너비로 설정 900px는 자신을 감사고 있는 부모 박스의 가로 너비
    
 width:33.3333333%; 
    /*300px ÷ 900px*/
    background:#e75d5d;
}
 
두 번째 <div> 태그 역시 가로 너비인 600px에 동일한 공식을 이용해서 가변 크기인 66.6%를 가로 너비로 설정합니다.
 
 
.container div:first-child+div{
    width:66.66666667%; 
    /*600px ÷ 900px*/
    background: #2dcc70;
 
}
 
</style>
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div></div><div></div>
        </div>
    </div>
</body>
</html>
Colored by Color Scripter

cs

-웹 사이트의 요소에 마진과 가변 패딩 이해하기-

마진이란?

어떠한 물체와 물체 사이의 빈 공간을 말합니다.

웹 사이트를 만들 때도 이러한 여백이 필요합니다.
예를 들어 웹사이트 구조를 보면 사이 사이 벌어져 있는 공간들이 잇는데, 이것을 여백 또는 간격이라고 합니다.

패딩(두께)이란?

면과 면 사이가 물체나 공간 등으로 채워져 있는 것을 말하며, 속 또는 충전재라고도 합니다.
우리가 겨울에 입는 패딩 점퍼의 면과 면 사이가 오리털로 채워져 있듯이 패딩은 면과 면 사이에 어떠한 것이
채워져 있는 상태를 말합니다.
웹 사이트에서도 특정 요소에 두께를 만들거나 빈 공간 또는 간격을 만들 때 마진과 패딩이 사용 됩니다.

반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다.

기존의 고정되어 있는 마진 (여백) 을 변할 수 있게 설정해줘야 합니다.

가변 마진은 가변 그리에서 사용했던 공식과 같습니다.

(가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 마진값

-가변 패딩을 적용하는 두 가지 방법-

-기본 방법-

가변 그리드 공식을 이용해서 가변 패딩으로 적용

(가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값

-제한적인 조건이 있을 때-

박스에 패딩을 적용하더라도 박스의 정해진 너빗값 이상이 되지 말아야 하는 경우에 이용하는 방법입니다.

(가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값

-가변 패딩 예제-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{ /*wrap라는 아이디를 가진 태그를 만든다.*/
    width:90%;   /*너비는 90%로 한다.*/
    /*960px*/
    height:500px; /*높이는 500px로 입력해 스타일을 지정*/
    margin:0 auto; //마진값과 선값을 입력한다.
    border:4px solid #000;
}
 
#wrap div{
    width:31.25%; //300px를 가변 크기로 설정한다.
    /*300px ÷ 960px*/ //공식을 이용해 31.25값을 얻음
    display: inline-block;
}
 
#wrap div:first-child{ //자식박스 중 첫번째 박스에 50px크기의 가변 패딩을 적용, 50px ÷ 960px 공식을 이용해서
    padding:50px 5.208333%; //얻은 값을 패딩값으로 설정, 왼쪽과 오른쪽 패딩값이 실제로는 50+50이 되서 총 100px크기가 된다.
    /*50px ÷ 960px*/
    background:#1f518b;
}
 
#wrap div:first-child+div{ //자식박스 중 두번째 박스에 130px 크기의 가변 패딩을 적용한다. 130px ÷ 960px 공식을 이용해서
    padding:130px 13.541666%; //얻은 값을 패딩값으로 설정, 그러면 왼쪽과 오른쪽 패딩값이 130+130이 되어 총 260 크기의
    /*130px ÷ 960px*/ //가변 패딩이 적용됨
    background: #f7e041;
}
 
</style>
</head>
<body>
    <div id="wrap">
    <div></div><div></div>
    </div>
</body>
</html>
Colored by Color Scripter

cs

-가변 폰트 이용-

기존의 웹사이트를 개발할 때는 고정 단위인 픽셀(px)를 많이 사용했습니다.

하지만 픽셀은 모니터의 해상도를 기준으로 하기 때문에 화면이 확대되거나 축소되는 환경에는 맞지 않습니다.

웹 페이지를 표시하는 모니터 해상도에 따라 픽셀 크기가 달라지기 때문입니다.

따라서 정확하게 글자 크기를 나타내려면 상대적인 단위인 em을 사용하는 것이 좋습니다.

em의 단위는 대문자 M의 너비를 1em으로 표현한 것으로, 16px이 1em에 해당합니다.

반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때 상속 문제를 해결해주는 방법을 가변 폰트라고 합니다.

가변 폰트는 지금까지 이용한 가변 그리드 공식을 이용해서 적용할 수 있다.

(가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값

-rem 단위-

em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속됩니다.

그래서 자식 박스의 글자 크기를 지정할 때 공식을 이용하여 글자 크기를 지정해야 하는 등 복잡해집니다.

rem 단위는 최상위, 즉 웹 문서의 시작인 <html>, </html> 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않아

유용하게 사용할 수 있는 단위 중 하나입니다.

- vw(viewport width) 단위 -

vw 단위는 웹 브라으저의 너비를 100을 기준으로 하여 크기를 결정하는 단위입니다.

(vw 단위를 적용할 글자 크깃값 x 브라우저의 너빗값) ÷ 100 = 크깃값

- vh(viewport height) 단위 -

vh 단위는 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위입니다.

(vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값) ÷ 100 = 크깃값

- vmin (viewport minimum) 단위 -

vmin 단위는 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위입니다.

만약 글자 크기를 5vmin으로 설정하면 글자 크기는 웹 브라우저의 너비, 높이 중 작은 쪽을 100을 기준으로 해서 결정합니다.

- vmax (viewport maximum) 단위 -

vmax 단위는 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위입니다.

만약 글자 크기를 5vmax로 설정하면 글자 크기는 브라우저의 너비와 높이 중 큰 쪽을 100으로 하고, 기준으로 해서 결정합니다.

- width와 max-width의 차이점 -

width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있습니다.
width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만, max-width 속성은 속성값을 100%로 설정할 경우
요소의 기본 크기 이상으로는 크기가 조절되지 않습니다.

- 상/하 퍼센트 패딩값의 기준 -

상/하 퍼센트 패딩 값은 해당 요소의 부모 요소 가로 너비를 기준으로 합니다.
보통은 부모 요소의 높이를 기준으로 할 것으로 생각하지만, CSS 스펙을 살펴보면 상/하 퍼센트 패딩 값은 부모 요소의 너빗값을
기준으로 한다고 명시되어 있습니다. 헷갈릴수도 있으니 반드시 기억!!

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > 반응형 웹' 카테고리의 다른 글

미디어 쿼리와 뷰포트 (0)	2019.05.30
웹 호스팅 설정 정보 (0)	2019.05.28
반응형 웹 기본 개념 이해하기 (0)	2019.05.27
반응형 웹 학습 일정 (0)	2019.05.22

Controller와 View의 연결 방법

Back-End/Spring 2019. 5. 29. 18:21

Controller와 view의 연결 실습

기본적인 코드는 spring01 -> src/main/java -> com.example.spring01 패키지 안에다가 파일 생성

-연결의 흐름-

컨트롤러에 갔다가 모델에 값을 저장하고 페이지로 넘겨서 출력을 시킨다.

-ajax란??-

Asynchronous JavaScript and XML의 약자 입니다.

javascript와 xml을 이용하여 비동기 통신을 하는 기능입니다.

쉽게 말해서 새로고침 없이 새로 고침 효과를 볼 수 있는 기능 (실시간으로 변화하는 페이지..)

ajax는 데이터를 갱신하는 곳에서 사용한다면 페이지 전환 없이 동적으로 변화하는 모습을 자연스럽게 구현할 수 있습니다.

-동기식과 비동기식-

동기식 방식 : 클라이언트가 서버에게 요청하고 응답이 올 때까지 기다리는 것.

비동기식 방식 : 클라이언트가 서버에게 요청을 하고 응답이 오기 전까지 다른일을 할 수 있다.

- JSON (JavaScript Object Notation) 이란? -

* JSON은 경량(Lightweight) 의 DATA-교환 형식

* Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.

* JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.

* 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

-예제-

main.jsp (메인)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 설정상 jsp파일을 직접 실행할 수 없다. WEB-INF안에 있기 때문에 직접실행 불가 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@include file = "Include/header.jsp" %>
</head>
<body>
<%@include file = "Include/menu.jsp" %>
<h2>${message }</h2>
</body>
</html>
Colored by Color Scripter

cs

header.jsp (상단)

1
2
3
4
5
6
7
8
9
10

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!-- 태그 라이브러리에서 c, fmt(숫자 지원) 태그를 작성 -->
<!-- pom.xml에 jstl이 라이브러리에 들어있기 때문에 바로 사용할 수 있다. -->
<c:set var = "path" value = "${pageContext.request.contextPath }"/>
<!-- contextpath가 사이트의 식별자(한서버에 여러가지 사이트가 돌아갈 경우에) -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
 
Colored by Color Scripter

cs

menu.jsp (메뉴)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- views/include/menu.jsp -->
<!-- taglib랑 c:set는 header.jsp 에 있지만 만약 작성하지 않을시에 에러가 발생할 수 있으므로 작성한다. -->
<%@ taglib prefix = "c"
uri = "http://java.sun.com/jsp/jstl/core"%>
<c:set var = "path" value = "${pageContext.request.contextPath }"/>
<!-- 자바 코드에서 String path =request.getContextPath()와 같은뜻이다 -->
 
<div style = "text-align: center;">
    <a href = "${path }/">main</a>
    <a href = "${path }/gugu.do?dan=7">구구단</a>
    <!-- do를 jsp로 바꾸어도 WEB-INF폴더 안에 파일이 있으면  컨트롤러를 거치지 않으면 바로 이동할 수 없다. (보안 때문에) -->
 <!-- 컨트롤러 파일로 이동한다 -->
    <a href = "${path }/test.do">테스트</a>
    <a href = "${path }/member/list.do">회원관리</a>
</div>
<hr>
Colored by Color Scripter

cs

MainController.java (메인 컨트롤러 클래스)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

package com.example.spring01.controller;
 
import java.util.HashMap;
import java.util.Map;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
 
import model.dto.ProductDTO;
 
@Controller //@컨트롤러 어노테이션을 사용해야 서버가 구동될때 자동적으로 올라간다.
            //@Controller 어노테이션을 붙이면 해당 클래스가 컨트롤러 역할을 한다.
public class MainController {
    //로그 객체 생성 , maincontroller.class에서 로그를 가져온다.
    private static final Logger logger =
            LoggerFactory.getLogger(MainController.class);
    
    //시작페이지로 이동
    @RequestMapping("/") //url pattern mapping
    public String main(Model model) 
    {
        //Model : 데이터를 담는 그릇 역할, map 구조로 저장됨
        // model.addattribute("변수명", 값)
        model.addAttribute("message","홈페이지 방문을 환영합니다.");
        // <beans:property name = "prefix" value="WEB-INF/views" />
        // <beans:property name = "suffix" value = ".jsp" />
        // /WEB-INF/ views/main.jsp
        return "main"; //원래 코드는   "/WEB-INF/views/main.jsp"이지만 servlet-context에 
                        //main을 제외한 나머지 코드가 정의되어 있기 때문에 따로 작성하지 않아도 된다.
        
    }
    
    @RequestMapping(value="gugu.do",method=RequestMethod.GET) //구구단 관련 메소드
    public String gugu(@RequestParam int dan, Model model) {
        
        //int dan = 7;
        String result = "";
        for(int i =1; i<=9; i++) {
            result += dan+"x"+i+"="+dan*i+"<br>";
        }
        model.addAttribute("result", result);
        // gugu.jsp 로 포워딩
        // <beans:property name = "prefix" value = "/WEB-INF/views/" />
        // <beans:property name = "suffix" value =".jsp" />
        
        return "test/gugu";
        //return "/WEB-INF/views/gugu.jsp";
    }
    
    
    //리턴 타입이 void 인 경우 RequestMapping와 동일한 페이지로 넘어감
    @RequestMapping("test")
    public void test() {
        
    }
    
    @RequestMapping("test/doA") //url pattern
    public String doA(Model model) {
        logger.info("doA called..."); //로그 출력
        //model.addAttribute(key,value)
        model.addAttribute("message", "홈페이지 방문을 환영합니다.");
        // 리턴타입이 void 이면 method가 종료된 후 doA.jsp로 포워드 됨
 
        return "test/doB";  //doB.jsp로 포워딩됨
    }
    
    //void인 경우 url name과 같은 페이지로 포워딩 (method name과)
    @RequestMapping("test/doB")
    public void doB() {
        logger.info("doB called...");
        //method가 종료된 후 doB.jsp로 포워드 된다.
    }
    
        //ModelAndView : Model - 데이터 저장소, View 화면
        // 데이터와 포워드할 페이지의 정보
        // forward : 주소 그대로, 화면 전환, 대량의 데이터 전달
        // redirect : 주소 바뀜, 화면 전환, 소량의 get 방식 데이터 전달
    
    @RequestMapping("test/doC")
    //HasgMap에 값을 담아 전달하는 메소드
    public ModelAndView doC() {
        Map<String, Object> map = new HashMap<>();
        //맴에 객체 저장
        map.put("product", new ProductDTO("샤프", 1000));
        //new ModelAndView("view의 이름", "맵변수명", 맵);
        //하지만 ModelAndView는 값을 하나밖에 못 받는다.
        return new ModelAndView("test/doC","map",map);
        
    }
    
    @RequestMapping("test/doD")
    public String doD() {
        //redirect의 경우 return type을 String으로 설정
        //doE.jsp로 리다이렉트 됨
        return "redirect:/test/doE"; //포워드 //리다이렉트는 완전히 페이지가 변경되고, 다른 표현들은 값만 보내는것
        // return "redirect:/hello.jsp";
    }
    
    @RequestMapping("test/doE")
    public void doE() {
        //doE.jsp로 포워드
    }
}
 
 
Colored by Color Scripter

cs

test.jsp (테스트 파일, doF()메소드 포함)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<%@ include file = "Include/header.jsp" %>
<script>
function doF(){
    $.ajax({ //비동기 방식 (페이지가 넘어가지 않고 그 페이지에서 바로 자료가 변경됨)
    type : "post",
    url : "${path}/test/doF",
    success : function(result){
        $("#result").html(
                "상품명:"+result.name+",가격:"+result.price);
        }
    });
}
</script>
</head>
<body>
<%@ include file = "Include/menu.jsp" %>
 
<h2>링크 테스트</h2>
<a href = "${path }/test/doA">doA</a><br>
<a href = "${path }/test/doB">doB</a><br>
<a href = "${path }/test/doC">doC</a><br>
<a href = "${path }/test/doD">doD</a><br>
<a href = "javascript:doF()">doF</a><br>
<div id = "result"></div>
</body>
</html>
Colored by Color Scripter

cs

gugu.jsp (구구단 출력)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file = "../Include/header.jsp"%>
</head>
<body>
<%@ include file = "../Include/menu.jsp"%>
<h2>구구단 계산 결과</h2>
${result }
</body>
</html>
Colored by Color Scripter

cs

doB.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file = "../Include/header.jsp" %> <!-- header.jsp 를 포함 -->
</head>
<body>
<%@ include file = "../Include/menu.jsp" %> <!-- menu.jsp 를 포함 -->
doB 페이지
<h2>${message }</h2>
</body>
</html>
Colored by Color Scripter

cs

doC.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="../Include/header.jsp"%>
</head>
<body>
<%@ include file = "../Include/menu.jsp" %>
상품명 : ${map.product.name }<br>
가격 : ${map.product.price }
</body>
</html>
Colored by Color Scripter

cs

페이지별 View와 Controller 연결 방법

메인에서 구구단 클릭 : 구구단 버튼을 클릭하면 dan="7" 값을 넘겨주고, 컨트롤러 파일로 이동해서 gugu()메소드를 사용해
구구단 출력값을 gugu.jsp 파일로 넘겨서 gugu.jsp파일에서 출력됨.
(http://localhost:8080/spring01/gugu.do?dan=7)

테스트 클릭 : http://localhost:8080/spring01/test.do

링크테스트 doA 클릭 : 메인 컨트롤러 파일로 이동해서 model을 매개변수로 받은 doA메소드에 있는 값들을 출력함
(http://localhost:8080/spring01/test/doA)

링크테스트 doB 클릭 : 메인 컨트롤러파일로 이동해서 doB()메소드를 실행하지만 리턴타입이 void라 method 종료된 후
doB.jsp로 포워딩 (실행 된다)
(http://localhost:8080/spring01/test/doB)

링크테스트 doC 클릭 : 메인 컨트롤러 파일로 이동해서 doC() 메소드를 실행하고, HaspMap에 출력할 값을 담아 doC.jsp 파일로 리턴시켜서
doC.jsp 파일에서 출력이 된다.
(http://localhost:8080/spring01/test/doC)

링크테스트 doD 클릭 : 미구현 (doE 파일을 아직 안만들었음)

링크테스트 doF 클릭 : 링크테스트 화면에서 바로 출력됨 페이지 변경 X (비동기 방식이기 때문)
(http://localhost:8080/spring01/test.do)

메인 컨트롤러 파일의 테스트 클래스 생성

MainController.java 우클릭 -> new -> other -> JUnit Test Case -> 이름 입력후 finish

MainControllerTest.java (메인 컨트롤러 테스트 파일)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

package com.example.spring01.controller;
 
import static org.junit.Assert.*;
 
import javax.inject.Inject;
 
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MockMvcBuilder;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;
 
//JUnit4로 테스트
//스프링에서 작동되는 junit4runner을 이용해서 테스트를 한다.
@RunWith(SpringJUnit4ClassRunner.class)
 
//웹 설정 파일의 경로 지정
@WebAppConfiguration
@ContextConfiguration(// src/main/webapp/WEB-INF/spring 디렉터리 내부에 있는 하위 모든 xml을 참조한다는 뜻
        locations = {"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
 
public class MainControllerTest {
    //로깅 처리를 위한 객체 선언
    private static final Logger logger = LoggerFactory.getLogger(MainControllerTest.class);
 
    @Inject //의존관계 주입
    WebApplicationContext wac;
    MockMvc mockMvc; //가상으로 컨트롤러를 테스트하기 위한 객체
    
    @Before //테스트 전에 호출되는 코드
    public void setup() throws Exception{
        //컨트롤러를 셋업
        mockMvc=MockMvcBuilders.webAppContextSetup(this.wac).build();
        //셋업이 되었다고 출력
        System.out.println("setup...");
    }
    
    // 컨트롤러의 테스트 클래스를 만드는 이유는 테스트 클래스를 만들지 않으면 다른 클래스나 목록을 전부다 만들어야만 확인이 
 // 가능하지만 테스트 클래스를 만들면 바로바로 확인이 가능하기 때문에 해보는 것이다.
    
    
    @Test //JUnit가 테스트 하는 코드
    public void testDoA() throws Exception {
        //뷰가 완성되지 않은 상태에서도 테스트가 가능하다.
 
        mockMvc.perform(MockMvcRequestBuilders.get("/doA")); 
 
        //현재 doA는 get방식이 아니기 때문에 찾을수 없다고 에러를 발생시킨다.
        //하지만 /doA 앞에 /test를 붙이면 컨트롤러 클래스에서 맵핑이 되기때문에 실행이 된다.
        logger.info("doA...");
        
    }
 
}
 
Colored by Color Scripter

cs

mockMvc.perform(MockMvcRequestBuilders.get("/tast/doA")); 로 코드를 변경시 컨트롤러 클래스에서 맵핑이 되기때문에 "doA called..."출력

mockMvc.perform(MockMvcRequestBuilders.get("/doA")); 로 실행할 시에는 get방식이 아니기 때문에 "No mapping for GET /doA" 문구가 출력된다.

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Back-End > Spring' 카테고리의 다른 글

스프링 프레임워크 입문 (0)	2019.06.02
Spring를 이용한 회원정보관리 (0)	2019.05.31
Spring 데이터베이스 연결 테스트 (0)	2019.05.29
spring 로킹툴 (0)	2019.05.28
표준 프레임워크 오픈 커뮤니티 (0)	2019.05.28

Spring 데이터베이스 연결 테스트

Back-End/Spring 2019. 5. 29. 11:14

Spring 와 데이터베이스 연결

cmd 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Microsoft Windows [Version 10.0.17134.765]
(c) 2018 Microsoft Corporation. All rights reserved.
 
C:\Users\user>sqlplus //관리자 계정으로 접속함
 
SQL*Plus: Release 11.2.0.2.0 Production on 화 5월 28 16:09:26 2019
Copyright (c) 1982, 2014, Oracle.  All rights reserved.
 
Enter user-name: system //아이디와 비밀번호 입력함
Enter password:        
 
Connected to:
Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64bit Production
 
 
SQL> create tablespace spring //테이블 스페이스 생성 : 데이터베이스 오브젝트 내 실제 데이터를 저장하는 공간
  2  datafile 'd:/spring.dbf' size 50m //d: 드라이브 루트로만 하기 c: 드라이브 루트는 보안이 걸려있어서 실행이 되지 않는다.
  3  autoextend on                     //50메가씩 용량이 꽉차면 10메가씩 자동증가되서 무제한 증가 
  4  next 10m
  5  maxsize unlimited; 
 
Tablespace created.
 
SQL> create user spring identified by 1234  //아이디는 spring로 하고 비밀번호는 1234로 하는 사용자 계정 생성
  2  default tablespace spring;             //이 사용자가 사용하는 기본 테이블 스페이스는 spring로 설정한다.
 
User created.
 
 
SQL> grant connect,resource,dba to spring;  //이 사용자한테 스프링 테이블스페이스에 대한 접속 권한, 리소스 사용권한, 관리권한을 준다
 
Grant succeeded.
 
Colored by Color Scripter
cs
 
Colored by Color Scripter
cs



Oracle SQL Developer 실행 후 + 버튼을 눌러 아까 만든 스프링이라는 계정을 등록함








































2. src/test/java/OracleConnectionTest.java
데이터베이스 연결을 테스트하기 위한 테스트 케이스 작성
@Test 코드에서 에러가 발생할 경우 Add JUnit 4 library to the build path를 클릭하여 라이브러리를 추가해야함
테스트하는 클래스의 이름은 보통 클래스 이름 옆에 Test를 덧붙인다.

테스트 케이스 클래스 생성



HomeControllerTest 내부

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 package com.example.spring01;
 
import static org.junit.Assert.*;
 
import org.junit.Test;
 
//HomeController를 테스트하기 위한 클래스
public class HomeControllerTest {
 
    @Test //test 어노테이션이 붙어야 테스트를 할 수 있다.
    //testHome() 메서드 안에 fail("Not yet implemented"); 가 들어가 있으면 바로 강제로 자동 오류를 발생시키는 코드이다.
    public void testHome() {
        //메인메소드가 없지만 JUnit프로그램이 테스트를 자동화하는 툴이라 자동으로 실행시킨다.
        System.out.println("home test"); //테스트 완료를 확인하기 위해 println을 작성함
    }
}
Colored by Color Scripter cs










































































JUnit 테스트가 되지 않을 때 프로젝트 우클릭 -> properties -> java bulid path -> JUnit 라이브러리 추가하고 버전은 4로 하기





spring01 프로젝트 안에 OracleConectionTest.java (오라클 연결 테스트) 파일 생성 및 연결 코드 작성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 package com.example.spring01;
import java.sql.Connection;
import java.sql.DriverManager;
 
import org.junit.Test;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
public class OracleConnectionTest {
    //로깅 처리를 위한 코드
    private static final Logger logger =
    LoggerFactory.getLogger(OracleConnectionTest.class);
    
    private static final String DRIVER ="oracle.jdbc.driver.OracleDriver";
    private static final String URL = "jdbc:oracle:thin:@localhost:1521/xe";
    private static final String USER = "spring";
    private static final String PW = "1234";
    
    @Test //JUnit가 테스트 하는 코드
    public void testConnection() throws Exception{
        Class.forName(DRIVER);
        //try ~ with 문 (java 버전이 1.7 이상이 되야 에러가 나지 않는다)(finally 절이 필요 없음)
        //try 옆에 ()안에 커넥션이 들어있기 때문에 con.clo
        try (Connection conn = DriverManager.getConnection(URL, USER, PW)) 
        {
            System.out.println("오라클에 연결되었습니다.");
            logger.info("오라클에 연결되었습니다.");
            
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
 
Colored by Color Scripter cs


root-context 파일에 들어가서 데이터베이스에 접속할 아이디와 비밀번호를 작성함


root-context.xml 중 일부
1
2
3
4
5
6
7
8
9
10 <bean id="dataSource"
        class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <!-- 드라이버 클래스 이름이 변경됨 -->
        <property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
        <!-- 연결문자열에 log4jdbc가 추가됨 -->
        <property name="url"
            value="jdbc:log4jdbc:oracle:thin:@localhost:1521:xe" />
        <property name="username" value="spring" /><!--접속 아이디-->
        <property name="password" value="1234" /><!--접속 비밀번호-->
</bean>
Colored by Color Scripter cs

src/test/java/MybatisTest.java
자바 코드에 데이터베이스 연결 문자열 등의 중요한 정보를 직접 입력하는 것은 보안상 안전하지 않음.


mybatis 관련 bean

SqlSessionTemplate : SqlSession 객체 생성
SqlSessionFactoryBean : SqlSessionTemplate 객체 생성
DriverManagerDataSource : DB연동 클래스


src/test/java -> com.example.spring01 -> MybatisTest.java 파일 생성하고 아래 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 package com.example.spring01;
 
import javax.inject.Inject;
 
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
 
// JUnit 4.0으로 현재 클래스를 실행시킴
@RunWith(SpringJUnit4ClassRunner.class)
// mybatis에서 참조하는 설정파일의 위치를 알려줌
@ContextConfiguration(locations = { 
        //sql 세션 Factory가 이미 root-context파일 안에 있다.
        "file:src/main/webapp/WEB-INF/spring/root-context.xml" })
public class MybatisTest {
    // 로깅 처리를 위한 코드
    private static final Logger logger = 
            LoggerFactory.getLogger(MybatisTest.class);
 
    //@Autowired
    @Inject // 의존관계 주입(스프링에서 객체를 생성하여 전달)
    //객체를 생성하였기 때문에 곧바로 객체를 사용할 수가 있다.
    private SqlSessionFactory sqlFactory;
 
    // JUnit이 테스트하는 코드
    @Test
    public void testFactory() {
        // System.out.println("sqlFactory:" + sqlFactory);
        logger.info("sqlFactory:" + sqlFactory);
    }
 
    @Test
    public void testSession() {
        // mybatis 실행을 위한 SqlSession 객체 생성
        try (SqlSession sqlSession = sqlFactory.openSession()) {
            // System.out.println("sqlSession:" + sqlSession);
            // System.out.println("mybatis 연결 성공");
            logger.info("sqlSession:" + sqlSession);
            logger.info("mybatis 연결 성공");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
 
Colored by Color Scripter cs

저작자표시

'Back-End > Spring' 카테고리의 다른 글

Spring를 이용한 회원정보관리 (0)	2019.05.31
Controller와 View의 연결 방법 (0)	2019.05.29
spring 로킹툴 (0)	2019.05.28
표준 프레임워크 오픈 커뮤니티 (0)	2019.05.28
스프링의 실행 과정, 스프링의 특징 (0)	2019.05.28

웹 호스팅 설정 정보

2019. 5. 28. 20:58

보호되어 있는 글입니다. 내용을 보실려면 비밀번호를 입력하세요.

비밀번호 ::

오라클 SQL Develope 다운로드 및 설치

Back-End/Data Base 2019. 5. 28. 17:54

오라클 SQL Develope 다운로드 및 설치

오라클 사이트 접속

https://www.oracle.com

아래 순서대로 진행

1. SQL DEVELOPER 검색

2. 오라클 SQL Developer Downloads 클릭

3. cmd로 자바 버전을 확인하고 그에 맞는 버전에 Develope를 다운로드.

4. 다운 받은후 압축을 풀고 sqldeveloper.exe 파일을 실행한다.

5. 경로 설정할때 Java jdk까지의 경로를 입력함

6. 환경설정 임포트는 "아니오" 클릭

7. 설치 완료후 "Oracle SQL Developer" 실행 후 +버튼 클릭

8. 아래 처럼 접속 계정과 설치시 지정한 전역 DB이름 입력 후 "접속" 버튼을 누르면 완료.

출처

https://all-record.tistory.com/76

저작자표시

'Back-End > Data Base' 카테고리의 다른 글

기본 용어 정리 (0)	2019.06.27
무결성이란? (0)	2019.06.27
19.05.05 데이터베이스 성능 (0)	2019.05.05
19.05.04 백업과 복구 (0)	2019.05.04
19.05.03 테이블의 개념과 정규형 (0)	2019.05.03

spring 로킹툴

Back-End/Spring 2019. 5. 28. 16:05

로깅툴

로깅이란?

로깅(Logging)이란 프로그램을 개발하거나 운영할 때 생기는 문제점을

관리하고 모니터링 할 수 있는 데이터를 말합니다.

1. 로킹툴을 사용하는 이유

System.out.println() 명령어는 IO 리소스를 많이 사용하여 시스템이 느려질 수 있음

로그를 파일로 저장하여 분석할 필요가 있음

2. 로깅툴의 종류

commons-logging : 스프링 3에서 사용하던 로깅툴

log4j : 효율적인 메모리 관리로 그동안 많이 사용되었음

logback : log4j 보다 성능이 더 우수하여 최근에 많이 사용되고 있음

SLF4J : logback을 사용하기 위한 인터페이스

3. SLF4J 설정방법

ㄱ) pom.xml 의 slf4j - version을 1.7.25 로 설정

1
2
3
4
5
6
7
<properties>
        <java-version>1.8</java-version>
        <!-- 2019년 1월 현재 최신 버전 5.1.4, 에러가 날 경우 호환성을 위해 버전을 내려야 함 -->
        <org.springframework-version>5.1.3.RELEASE</org.springframework-version>
        <org.aspectj-version>1.9.2</org.aspectj-version>
        <org.slf4j-version>1.7.25</org.slf4j-version>
</properties>
Colored by Color Scripter
cs

ㄴ) pom.xml 에 라이브러리 추가

<dependency>태그를 이용해 추가를 하면 메이븐이 자동으로 다운로드 받아준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.3</version>
        </dependency>
 
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>${org.slf4j-version}</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
            <version>${org.slf4j-version}</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>${org.slf4j-version}</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>  
            <exclusions>
                <exclusion>
                    <groupId>javax.mail</groupId>
                    <artifactId>mail</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>javax.jms</groupId>
                    <artifactId>jms</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>com.sun.jdmk</groupId>
                    <artifactId>jmxtools</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>com.sun.jmx</groupId>
                    <artifactId>jmxri</artifactId>
                </exclusion>
            </exclusions>
            <scope>runtime</scope>
</dependency>
cs

ㄷ) src/main/resources 에 logback.xml 파일을 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <!-- 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"/>
    
    <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
        <layout class="ch.qos.logback.classic.PatternLayout">
            <pattern>%d{HH:mm:ss.SSS} [%thread] %-4level [%logger.%method:%line]-
                %msg%n</pattern>
        </layout>
    </appender>
 
    <appender name="LOGFILE"
        class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>/WEB-INF/logback.log</file>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>logback.%d{yyyy-MM-dd}.log</fileNamePattern>
            <!-- 30일 지난 파일은 삭제한다. -->
            <maxHistory>30</maxHistory>
        </rollingPolicy>
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} %-4level [%logger.%method:%line]
                - %msg %n</pattern>
        </encoder>
    </appender>
 
    <!-- 로그의 레벨( 지정된 로그 레벨 이상만 수집 ) : DEBUG < INFO < WARN < ERROR < FATAL -->
    <logger name="myweb" additivity="false">
        <level value="INFO" />
        <appender-ref ref="LOGFILE" />
        <appender-ref ref="CONSOLE" />
    </logger>
 
    <root>
        <level value="INFO" />
        <appender-ref ref="CONSOLE" />
    </root>
 
</configuration>
 
Colored by Color Scripter
cs

ㄹ) 로그를 수집할 클래스에 변수 선언

private static final Logger logger = LoggerFactory.getLogger (클래스 이름.class);

HomeController.java (파일중 일부)

1
2
3
4
5
6
7
8
9
@Controller
public class HomeController {
    
    private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
    //로그를 수집할 클래스의 변수 선언
    
    /**
     * Simply selects the home view to render by returning its name.
     */
    @RequestMapping(value = "/", method = RequestMethod.GET)
cs

private : 외부에서 로그를 가로채지 못하도록 하기 위해서

static final : 로그 내용이 바뀌지 않으므로

ㅁ) 로그를 수집할 method에서 로그 수집 명령어 호출

logger.info ("로그 타이틀", 출력할 값);

HomeController.java (파일중 일부)

1
2
3
@RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Locale locale, Model model) {
        logger.info("Welcome home! The client locale is {}.", locale);
        //home 메소드에서 로그 수집 명령어를 호출한다.
cs

4. 로그의 level

ㄱ) Debug : Debug, Info, Warn, Error 포함

ㄴ) Info : Info, Warn, Error 포함

ㄷ) Warn : Warn, Error 포함

ㄹ) Error : Error 만 포함

저작자표시

'Back-End > Spring' 카테고리의 다른 글

Controller와 View의 연결 방법 (0)	2019.05.29
Spring 데이터베이스 연결 테스트 (0)	2019.05.29
표준 프레임워크 오픈 커뮤니티 (0)	2019.05.28
스프링의 실행 과정, 스프링의 특징 (0)	2019.05.28
Spring 설치 (0)	2019.05.27

표준 프레임워크 오픈 커뮤니티

Back-End/Spring 2019. 5. 28. 14:28

표준 프레임워크 오픈 커뮤니티

https://open.egovframe.org/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000013&nttId=5249&pageIndex=1053

저작자표시

'Back-End > Spring' 카테고리의 다른 글

Spring 데이터베이스 연결 테스트 (0)	2019.05.29
spring 로킹툴 (0)	2019.05.28
스프링의 실행 과정, 스프링의 특징 (0)	2019.05.28
Spring 설치 (0)	2019.05.27
스프링 (백기선) 학습일정, 인강 (0)	2019.05.22

백준 알고리즘 풀기 (그리드 알고리즘)

Algorithm/사이트 2019. 5. 28. 14:25

백준 알고리즘 풀기 (그리드 알고리즘)

https://www.acmicpc.net/problem/tag/%EA%B7%B8%EB%A6%AC%EB%94%94+%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98/1

저작자표시

◀ PREV : [1] : [···] : [33] : [34] : [35] : [36] : [37] : [38] : [39] : [···] : [59] : NEXT ▶

'Front-End > 반응형 웹' 카테고리의 다른 글

'Back-End > Spring' 카테고리의 다른 글

'Back-End > Spring' 카테고리의 다른 글

웹 호스팅 설정 정보

'Back-End > Data Base' 카테고리의 다른 글

'Back-End > Spring' 카테고리의 다른 글

'Back-End > Spring' 카테고리의 다른 글

티스토리툴바