create-react-app 도구는 npm 또는 yarn 으로 설치 할 수 있음 


패키지를 모든 디렉터리에서 사용 할 것이므로 전역으로 설치 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
node --version
v8.11.3
 
yarn --version
1.10.1
 
 
<npm 으로 설치> 
 
npm install -g create-react-app
 
<yarn 으로 설치>
 
yarn global add create-react-app
cs


터미널에서  다음과 같이 입력


$ create-react-app my_project


명령어를 실행하면 자동으로 my_project에 필요한 로컬 모듈을 설치해줌


$ cd my_project

$ yarn start


자동으로 웹 프라우저로 http://localhost:3000/ 로 리액트 초기 프로젝트 페이지가 열림 




저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
2. React 시작하기 ( Vscode package 설치)  (0) 2018.10.21
1. React 리액트 시작하기(웹앱 만들기)  (0) 2018.10.21



리액트를 시작하기 앞서 VScode 유용한 확장 프로그램을 설치하겠습니다.



1. ESLint ( 자바 스크립트 문법을 체크)




2. Relative Path ( 상대경로 작성 시 편리하게 )




3. Guides ( 들여쓰기 가이드라인)




4. React code Snippets ( 리액트 관련 스니펫 모음)




구글에 검색해보시면 더 유용한 확장 프로그램이 많이 있어요 .. 필요하신건 설치하셔서 진행하시면 되겠습니다.~



저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
3. React / 리액트 프로젝트 만들기  (0) 2018.10.21
1. React 리액트 시작하기(웹앱 만들기)  (0) 2018.10.21


1. 리액트 시작하기 





시작하기 설치 항목




1. node.js 


https://nodejs.org/ko/



2. npm 또는 yarn 


https://yarnpkg.com/lang/en/


3. 코드 에이터 ( vscode , atom  등등)


https://code.visualstudio.com/


참고로 Atom 같은경우는 생각보다 메모리를 많이 잡아먹어서 ㅠㅠ 버벅거림 ㅠㅠ 첨엔 안그랬는데 왜이렇게 무거워졌는지 VScode를 추천함 !!!




설치 방법은 어렵지 않음 .. 거진 next 만 누르면 설치 됨 ㅎㅎ


yarn은  npm install yarn -g  로 설치해도 됨 ㅎㅎ ~







추가로 Git 을 설치하셔 버전 관리도 추천 드립니다.







저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
3. React / 리액트 프로젝트 만들기  (0) 2018.10.21
2. React 시작하기 ( Vscode package 설치)  (0) 2018.10.21

깃(Git)이란?


간단하게 프로젝트를 관리하는 버전관리 툴이다.  대부분의 개발자라면 사용해봤을 거라 생각한다 ㅎㅎ


처음엔 이해하기 어려웠지만 조금씩 알아갈수록 신세계를 경험했다? ㅎㅎ


활용용도로는 


한개의 프로젝트를 여러명이서 작업할 때 

프론트 엔지니어/ 백엔드 엔지니어 1 / 백엔드 엔지니어 2  이렇게 인원이 구성되어있다면


프론트 엔지니어는

2018/08/25 메인 페이지 디자인 작업 완료 


백엔드 엔지니어1 

2018/08/26 로그인 관련 모델링 완료 


백엔드 엔지니어2

2018/08/26 로그인 관련 모델링 완료 


이렇게 작업을 했다고 한다.


차곡 차곡 한개의 프로젝트에 각자의 코드를 올려서 작업 순서에 따라 버전을 관리한다 ㅎㅎ


더쉽게  학교에서 조별 과제가 주워졌을 때 

A파트 B파트 C파트  이렇게 나눠져있고 PPT 파일에 각자의 과제 내용을 저장하는 것이다 ㅎㅎ


그럼 누가 어디 무슨 작업을 언제 했는지 한눈에 파익이 된다.

각각 자기 파트만 했다면 문제는 생기지 않는다 하지만 문제는 앞서 설명한것과 같이 같은 내용을 수정 했을 때 발생한다. 


과제 타이틀을 버전관리의 중요성 이라고 정하고 시작했는데 마음에 안들어서 두명이 수정했을 때 !!!

뒤에 수정하는 사람은 충돌 오류를 보게된다. 그럼 상의해서 최종 수정내용을 적용 할 수 있다는게 깃의 장점이다. 


내가 조별 과제했을 때 만약 깃을 알았더라면 ㅠㅠ 누가 과제를 했네 안했네 하고있니?? 스트레스를 받지 않았어도 되었을 것을 ㅠㅠ 


어쨋건 활용용도는 매우 다양하다. 이제 간단한 다용법을 알아보겠다 


우선 추천할 프로그램은 소스트리 라는 것이다 .  GUI 로 되어있어 매우 쉽고 편하게 사용할 수있고 한글도 지원해서 더더욱




소스트리 사용법과 설명은 생활코딩에서 동영상으로 매우 쉽고 설명을 잘해주신다 ㅎㅎ 꼭 보길 바람


우선 간단하게 Shell bash 환경에서 간단하게 명령어를 설명하겠다. 


우선 깃헙에 가입하고 새로운 Repository를 생성한다. 그럼 깃에 올리는 사용법 설명이 나온다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
git init
 
 
git remote add origin {YOUR_GIHTUB_URL}
 
# YOUR_GIHTUB_URL 는  "자신의 Repository Name" 
 
git add .
 
 
git commit -m "First commmit"
 
 
git push origin master
cs


여기서 git add . 은 모든 파일을 올린다는것이다..


커밋과 함께 코멘트를 남기고 Push를 하면 파일이 자신의 레파지토리에 올라간다.


내용을 당겨올 땐


1
2
git pull origin master
 
cs


pull로 땅겨오면 되겠다. 


개인적으로 사용 할 땐 Shell 이 더 편하다 . 하지만 협업할 땐 소스트리를 써야겠다 



저작자표시 비영리

'기타' 카테고리의 다른 글

세법-부가가치세  (0) 2023.01.30

PostgreSQL 이 오라클과 비슷하고 업데이트도 빠르고 많이들 사용한다하여 나도 사용해보기로함 ㅎㅎ


그래도 뭔가 어색하고 그렇네요 우선 데이터베스를 생성해보겠습니다~


우선 SQL Shell 을 실행하여 계정 정보를 입력합니다~




입력 후  help를 입력하면 도움을 주시겠다는 ..  큰 도움은 ...



우선 브라우져에 뜬 pgAdmin을 보면 기본적으로 Databases에 postgres라는 Db가 생성되어있다. 


타 디비에서는 root 계정 인것 같다. ㅎ  디비 커넥션 할 때 root 대신 postgres를 쓰니 잘 붙었던걸보니 ㅎ








이제 데이터베이스 생성을 위해 


명령어에 

CREATE DATABASE 데이터베이스명 ;


이상없이 만들어지면 

CREATE DATABASE라고 뜬다, 


그리고  \l 로 확인 하거나 브라우저에서 확인해보자




끝 



저작자표시 비영리

'데이터베이스 > PostgreSQL' 카테고리의 다른 글

Mac postgresql 설치 dbeaver 사용  (0) 2021.08.09


나는 크롤링을 연습하기 위해서 파이썬을 설치하였는데 .. 


역시 최신버전이 짱짱이야 ~ 하면서 3.7을 냉큼 받아 설치했다.. 


그런데 한참 진행하던중 Scrapy 는 3.7을 아직 지원 안한다는 것을 알게 되었고 ,,


3.6을 다시 설치하였는데 어째 계속 3.7로 설치가 되는 것이였다.. 


그래서 사용하는게 바로 가상 환경 !!


우선 설명은 매우 간단하다 


내 PC = local 에는 현재 3.7 , 3.6 버전이 두개 설치되어있다 . 


가상환경을 하나 만들어서 거기엔 3.6을 설치하고 

Scrapy 패키지를 설치해서 크롤링을 연습해야지~ 


또 가상환경 하나를 더 만들어서 역시 최신버전이 짱짱이지 거긴 3.7 환경을 만들어서 

Django를 패키지를 설치해서 웹을 연습해야뵈야지~



그럼 두개의 가상환경이 만들어지고 이는 마치 두개의 컴퓨터에서 따로 동작하듯 충돌이 날 수가 없음!!


그림설명!


 

자 그럼 이론은 여기까지하고  이제 가상 환경을 만들어보자

우선 cmd 창을 열어 pipenv 을 설치해보자



설치가 끝났으면 

pipenv 를 쳐보면 help 가 나온다 엄청 쉽게 설명이 잘 나와있다.



그럼 가상 환경으로 만들 root 로 이동하여 python 3.6 버전의 가상 환경을 만들어보자


pipenv --three    라고 치면  3.x 버전이 설치된다 


pipenv --two      라고 치면 2.x 버전이 설치된다.   




가상환경이 만들어 졌다. 

동시에 Pipfile 이라는 파일도 함께 만들어진다 . 후에  저 pipfile를 다른사람한테 주고 설치하면 내가 설치한

환경이랑 동일하게 설치가 되니 이 어찌 놀랍지 아니한가~!!

쨋던 가상환경 한개를 만들었고 이제 가상환경 안으로 들어가야겟다  지금은 현실세계= local ? 에 있는거고

가상환경으로 들어가기 위해선


pipenv shell   이라고 치면 가상 환경 속으로 들어간다



가상환경을 활성화 하면 저렇게 앞에 해쉬값?이들어가있는 정보가 나온다 


가상환경에서 나오기 위해서는 exit 를 하면 나와진다. 


가상환경에 들어가서 django를 설치해보자


pipenv shell  


pipenv install django


설치가 완료 되었으면 ,  잘 설치 되었는지 확인해보자



django-admin




하지만 가상환경에서 나와서 django-admin을  다시 확인해보자




당연히 없다고 나온다 


다시 pipenv shell 해서  django-admin 이라고 하면 잘 설치되어있다 . 




저작자표시 비영리

'Python' 카테고리의 다른 글

1. python String  (0) 2020.03.16

우선 테스트 도중에 에러가 좀 있어서 버전 변경을 좀 했습니다 ㅠㅠ 저도 아직 초보라 이해좀 부탁드려요 ㅎㅎ

우선 스프링 버전을 4.2.3 버전으로 바꿧어요 ㅠㅠ 컨트롤러를 못찾나 ? 여튼 아시는 분 있으면 조언 부탁드리며

저도 다시 테스트 해볼게요 ㅎㅎ


1
2
3
4
5
6
    <properties>
        <java-version>1.8</java-version>
        <org.springframework-version>4.2.3.RELEASE</org.springframework-version>
        <org.aspectj-version>1.6.10</org.aspectj-version>
        <org.slf4j-version>1.6.6</org.slf4j-version>
    </properties>
cs


Pom.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
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>
        
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.3</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.bgee.log4jdbc-log4j2</groupId>
            <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
            <version>1.16</version>
        </dependency>
cs



root-context.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
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:jdbc="http://www.springframework.org/schema/jdbc"
    xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
    xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.3.xsd
        http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">
    
    <!-- Root Context: defines shared resources visible to all other web components -->
            <!-- MariaDB JDBC DataSource -->
 
 
  <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy" />
        <property name="url" value="jdbc:log4jdbc:mysql://127.0.0.1:3306/test?useSSL=false" />
        <property name="username" value="root" />
        <property name="password" value="비밀번호" />
    </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/**/**/*.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"></context:component-scan>
 
 
</beans>
cs


다음과 같이 만들어 줍니다. 




LottoController.Class


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
package com.sjh.rotto;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class LottoController {
    
    @Inject
    private LottoService service;
    
    @RequestMapping("/lotto.do")
    public String lottoInfo(Model model,LottoVO vo) {
        
        List<LottoVO> list = service.lottoInfo(vo);
        model.addAttribute("list", list);
        
        return "lotto/lotto";
    }
}
 
cs



LottoService.Class


1
2
3
4
5
6
7
8
9
10
package com.sjh.rotto;
 
import java.util.List;
 
public interface LottoService {
    
    public List<LottoVO> lottoInfo(LottoVO vo);         //로또 정보 번호 조회
 
}
 
cs


LottoServiceImpl.Class


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.sjh.rotto;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.springframework.stereotype.Service;
 
@Service
public class LottoServiceImpl implements LottoService{
 
    @Inject
    private LottoDAO dao;
 
    @Override
    public List<LottoVO> lottoInfo(LottoVO vo) {
        
        return dao.lottoInfo(vo);
    }
    
    
 
}
 
cs



LottoDAO.Class


1
2
3
4
5
6
7
8
9
package com.sjh.rotto;
 
import java.util.List;
 
public interface LottoDAO {
 
    public List<LottoVO> lottoInfo(LottoVO vo);
}
 
cs


LottoDAOImpl.Class


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.sjh.rotto;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;
 
@Repository
public class LottoDAOImpl implements LottoDAO {
 
    @Inject
    private SqlSession session;
 
    @Override
    public List<LottoVO> lottoInfo(LottoVO vo) {
        
        return session.selectList("lottoList",vo);
    }
 
    
}
 
cs



LottoVO.Class


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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
package com.sjh.rotto;
 
public class LottoVO {
 
    private int YEAR;                //년도
    private int TIMES;                //회차
    private String LOTTERY_DAY;        //추첨일
    private String WINNER_1;            //1등 당첨자
    private String WIN_MONEY_1;            //1등 당첨금액
    private String WINNER_2;            //2등 당첨자
    private String WIN_MONEY_2;            //1등 당첨금액
    private String WINNER_3;            //3등 당첨자
    private String WIN_MONEY_3;            //1등 당첨금액
    private String WINNER_4;            //4등 당첨자
    private String WIN_MONEY_4;            //1등 당첨금액
    private String WINNER_5;            //5등 당첨자
    private String WIN_MONEY_5;            //1등 당첨금액
    private String ROTO_NUM1;            //당첨번호1
    private String ROTO_NUM2;            //당첨번호2
    private String ROTO_NUM3;            //당첨번호3
    private String ROTO_NUM4;            //당첨번호4
    private String ROTO_NUM5;            //당첨번호5
    private String ROTO_NUMB;            //보너스번호
    
    public int getYEAR() {
        return YEAR;
    }
    public void setYEAR(int yEAR) {
        YEAR = yEAR;
    }
    public int getTIMES() {
        return TIMES;
    }
    public void setTIMES(int tIMES) {
        TIMES = tIMES;
    }
    public String getLOTTERY_DAY() {
        return LOTTERY_DAY;
    }
    public void setLOTTERY_DAY(String lOTTERY_DAY) {
        LOTTERY_DAY = lOTTERY_DAY;
    }
    public String getWINNER_1() {
        return WINNER_1;
    }
    public void setWINNER_1(String wINNER_1) {
        WINNER_1 = wINNER_1;
    }
    public String getWIN_MONEY_1() {
        return WIN_MONEY_1;
    }
    public void setWIN_MONEY_1(String wIN_MONEY_1) {
        WIN_MONEY_1 = wIN_MONEY_1;
    }
    public String getWINNER_2() {
        return WINNER_2;
    }
    public void setWINNER_2(String wINNER_2) {
        WINNER_2 = wINNER_2;
    }
    public String getWIN_MONEY_2() {
        return WIN_MONEY_2;
    }
    public void setWIN_MONEY_2(String wIN_MONEY_2) {
        WIN_MONEY_2 = wIN_MONEY_2;
    }
    public String getWINNER_3() {
        return WINNER_3;
    }
    public void setWINNER_3(String wINNER_3) {
        WINNER_3 = wINNER_3;
    }
    public String getWIN_MONEY_3() {
        return WIN_MONEY_3;
    }
    public void setWIN_MONEY_3(String wIN_MONEY_3) {
        WIN_MONEY_3 = wIN_MONEY_3;
    }
    public String getWINNER_4() {
        return WINNER_4;
    }
    public void setWINNER_4(String wINNER_4) {
        WINNER_4 = wINNER_4;
    }
    public String getWIN_MONEY_4() {
        return WIN_MONEY_4;
    }
    public void setWIN_MONEY_4(String wIN_MONEY_4) {
        WIN_MONEY_4 = wIN_MONEY_4;
    }
    public String getWINNER_5() {
        return WINNER_5;
    }
    public void setWINNER_5(String wINNER_5) {
        WINNER_5 = wINNER_5;
    }
    public String getWIN_MONEY_5() {
        return WIN_MONEY_5;
    }
    public void setWIN_MONEY_5(String wIN_MONEY_5) {
        WIN_MONEY_5 = wIN_MONEY_5;
    }
    public String getROTO_NUM1() {
        return ROTO_NUM1;
    }
    public void setROTO_NUM1(String rOTO_NUM1) {
        ROTO_NUM1 = rOTO_NUM1;
    }
    public String getROTO_NUM2() {
        return ROTO_NUM2;
    }
    public void setROTO_NUM2(String rOTO_NUM2) {
        ROTO_NUM2 = rOTO_NUM2;
    }
    public String getROTO_NUM3() {
        return ROTO_NUM3;
    }
    public void setROTO_NUM3(String rOTO_NUM3) {
        ROTO_NUM3 = rOTO_NUM3;
    }
    public String getROTO_NUM4() {
        return ROTO_NUM4;
    }
    public void setROTO_NUM4(String rOTO_NUM4) {
        ROTO_NUM4 = rOTO_NUM4;
    }
    public String getROTO_NUM5() {
        return ROTO_NUM5;
    }
    public void setROTO_NUM5(String rOTO_NUM5) {
        ROTO_NUM5 = rOTO_NUM5;
    }
    public String getROTO_NUMB() {
        return ROTO_NUMB;
    }
    public void setROTO_NUMB(String rOTO_NUMB) {
        ROTO_NUMB = rOTO_NUMB;
    }
 
    
    
}
cs




mybatis 설정 부분입니다. 다음과 같이 만들어주세요





lotto.xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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">
  
<mapper namespace="com.sjh.rotto">
 
    <select id="lottoList"  resultType="com.sjh.rotto.LottoVO">
    
        select * from tbl_lotto
    
    </select>
    
    
</mapper>
cs


log4jdbc.log4j2.properties


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


logback.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?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="OFF"/>
    <logger name="jdbc.resultsettable" level="ERROR"/>
    <logger name="jdbc.connection" level="INFO"/>
</configuration>
cs


mybatis-config.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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>        
         <package name="com.sjh.rotto"/>
    </typeAliases>
</configuration>
cs


이제 화면에서 넘어온 값을 뿌려주기만 하면 됩니다,


상단에 JSTL 추가하시고 테이블에 forEach문을 이용해서 출력해주면 됩니다.


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
112
113
114
115
116
117
118
119
120
121
122
123
124
<%@ 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>
<%@include file="../include/meta.jsp" %>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <%@include file="../include/navbar.jsp" %>
  <!-- Main Sidebar Container -->
  <%@include file="../include/sidebar.jsp" %>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>First_Project</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">First_Project</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
 
    <!-- Main content -->
    <section class="content">
 
      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Title</h3>
 
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
             <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>년도</th>
                                            <th>회차</th>
                                            <th>추첨일</th>
                                            <th>1등당첨자</th>
                                            <th>1등당첨금액</th>
                                            <th>2등당첨자</th>
                                            <th>2등당첨금액</th>
                                            <th>3등당첨자</th>
                                            <th>3등당첨금액</th>
                                            <th>4등당첨자</th>
                                            <th>4등당첨금액</th>
                                            <th>5등당첨자</th>
                                            <th>5등당첨금액</th>
                                            <th>당첨번호1</th>
                                            <th>당첨번호2</th>
                                            <th>당첨번호3</th>
                                            <th>당첨번호4</th>
                                            <th>당첨번호5</th>
                                            <th>보너스번호</th>    
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${list}" var="list">
                                        <tr>
                                            <td>${list.YEAR}</td>
                                            <td>${list.TIMES}</td>
                                            <td>${list.LOTTERY_DAY}</td>
                                            <td>${list.WINNER_1}</td>
                                            <td>${list.WIN_MONEY_1}</td>
                                            <td>${list.WINNER_2}</td>
                                            <td>${list.WIN_MONEY_2}</td>
                                            <td>${list.WINNER_3}</td>
                                            <td>${list.WIN_MONEY_3}</td>
                                            <td>${list.WINNER_4}</td>
                                            <td>${list.WIN_MONEY_4}</td>
                                            <td>${list.WINNER_5}</td>
                                            <td>${list.WIN_MONEY_5}</td>
                                            <td>${list.ROTO_NUM1}</td>
                                            <td>${list.ROTO_NUM2}</td>
                                            <td>${list.ROTO_NUM3}</td>
                                            <td>${list.ROTO_NUM4}</td>
                                            <td>${list.ROTO_NUM5}</td>
                                            <td>${list.ROTO_NUMB}</td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          Footer
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
 
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  
</div>
<!-- ./wrapper -->
<%@include file="../include/footer.jsp" %>
<!-- jQuery -->
<%@include file="../include/script.jsp" %>
</body>
</html>
 
cs



다음과 같이 출력되면 성공!!!




저도 테스트를 하면서 진행다보니 설명을 제대로 정리하지 못했네요 ㅠㅠ 


스프링 카테고리에 정리해둔게 있으니 참고 바랍니다. 


저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

6. 데이터 베이스 준비하기  (0) 2018.06.23
5. 스프링 디자인 작업하기  (0) 2018.06.22
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20


로또 사이트에 들어가서 당첨내역 - 엑셀 다운로드를 합니다.


그리고 다음과 같이 CSV 파일로 다시 저장해주세요 파일을 올릴테니 다운받아서 쓰세요 ~

테이블 양식에 맞게 약간 수정하였습니다. 


tbl_lotto.csv


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
CREATE TABLE tbl_lotto
(
    `PK`           INT            NOT NULL    AUTO_INCREMENT COMMENT 'PK', 
    `YEAR`         INT            NULL        COMMENT '년도', 
    `TIMES`        INT            NULL        COMMENT '회차', 
    `LOTTERY_DAY`  VARCHAR(45)    NULL        COMMENT '추첨일', 
    `WINNER_1`     VARCHAR(45)    NULL        COMMENT '1등당첨자', 
    `WIN_MONEY_1`  VARCHAR(45)    NULL        COMMENT '1등당첨금액', 
    `WINNER_2`     VARCHAR(45)    NULL        COMMENT '2등당첨자', 
    `WIN_MONEY_2`  VARCHAR(45)    NULL        COMMENT '2등당첨금액', 
    `WINNER_3`     VARCHAR(45)    NULL        COMMENT '3등당첨자', 
    `WIN_MONEY_3`  VARCHAR(45)    NULL        COMMENT '1등당첨금액', 
    `WINNER_4`     VARCHAR(45)    NULL        COMMENT '4등당첨자', 
    `WIN_MONEY_4`  VARCHAR(45)    NULL        COMMENT '1등당첨금액', 
    `WINNER_5`     VARCHAR(45)    NULL        COMMENT '5등당첨자', 
    `WIN_MONEY_5`  VARCHAR(45)    NULL        COMMENT '5등당첨금액', 
    `ROTO_NUM1`    VARCHAR(45)    NULL        COMMENT '당첨번호1', 
    `ROTO_NUM2`    VARCHAR(45)    NULL        COMMENT '당첨번호2', 
    `ROTO_NUM3`    VARCHAR(45)    NULL        COMMENT '당첨번호3', 
    `ROTO_NUM4`    VARCHAR(45)    NULL        COMMENT '당첨번호4', 
    `ROTO_NUM5`    VARCHAR(45)    NULL        COMMENT '당첨번호5', 
    `ROTO_NUM6`    VARCHAR(45)    NULL        COMMENT '당첨번호6', 
    `ROTO_NUMB`    VARCHAR(45)    NULL        COMMENT '보너스번호', 
    PRIMARY KEY (PK)
);
cs


다음과 같이 테이블을 생성합니다.



heidiSQL 에서  도구 -> CSV 파일 가져오기




파일을 선택하고 


PK는 체크를해제해주세요  하고 가져오기를 누르면 




다음과 같이 잘 들어가집니다. 


이제 스프링에서 데이터베이스 연결테스트를 하고 mybatis 세팅을 해서 잘 출력 되는지 테스트 하겠습니다.~ 


수고하셨습니다. 




저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

7. 스프링 DB 연동하기  (3) 2018.06.24
5. 스프링 디자인 작업하기  (0) 2018.06.22
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20

디자인에는 Bootstrap을 사용하겠습니다.


구글에 bootstrap admin free template 무료 템플릿이 많이 있습니다. 


저는 AdminLTE 에서 제공하는 템플릿을 사용하겠습니다.


https://adminlte.io/   에서 템플릿을 다운로드 받습니다.




오늘 마우스를 두고와서 ㅠㅠㅠ 더 안이쁘네요 ㅠㅠ 죄송죄송


Source.code.zip 파일을 다운받으시면 됩니다.

다운로드 받으셔서 압축을 풀면 다음과 같은 여러개의 파일이 있는데 그중에서 


이렇게 3개의 파일만 사용 할것이니 우선 알고 계시면 되겠습니다.~


우선 공통으로 사용되는 부분부터 결정해야겠죠 저는 다음과 같이 나눴습니다.



1. 네비게이션 바 (navBar) 

2. 사이드 바 (sideBar)

3. 섹션 컨테이너 

4. 헤더

5. 라인

6. 푸터


이제부터 명칭은 다음과 같이 정의하겠습니다.


제가 계속적으로 수정할 부분은 4번 5번  헤더와 라인입니다. 나머지는 공통부분입니다. 



스프링으로 넘어와 보겠습니다.



servlet-context.xml 에서


1
<resources mapping="/resources/**" location="/resources/" />
cs


이 부분을 보시면 /resources/ 경로까지 설정 되어 있는걸 볼 수 있습니다. 이제 템플릿 다운 받은 것에서
dist , pages, plugins  resource에 복사해서 붙여 넣습니다. 

이제 JSP 파일을 하나 만들어 봅니다. 우선 만드시기 전에 

servlet-context.xml 에서



1
2
3
4
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>
cs


 <beans:property name="prefix" value="/WEB-INF/views/" />
 <beans:property name="suffix" value=".jsp" />


여기를 보시면 느낌이 오시나요 ? 

WEB-INF 아래 views 아래 jsp를 읽고 있네요  저는 views폴더 안에 lotto폴더를 하나 만들어서 lotto.JSP 파일을 만들겠습

니다.



다음과 같이 만들면 Encoding 타입이  EUC-KR 이네요 UTF-8로 바꾸겠습니다.  하나하나 바꾸셔도 되지만

 설정에서 바꾸겟습니다.



windows - preferences - web - JSP Files




다음과 같이 만들어주세요 



딱 보시면 알겠지만 공통으로 쓰이는 부분을 뺀 것입니다.

물론 장점은 한번만 수정하면 ~ 다 적용이 된다는 거겠죠 ?


우선 blank.html의 전체를 복사해서 lotto.jsp 파일을 수정해 넣습니다.




이제 각가 중복으로 사용하는 부분을 Ctrl + X 해서 잘라내서 include에 만들어 둔 곳에 복사해서 넣겠습니다.


꼭 직접 하시기 바랍니다~ 한번만 해보면 다음부터는 어떤 템플릿을 가져와도 나눌 수 있습니다. 꼭 직접하는게 중요해요


mata.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
    
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>프로젝트</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="resources/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
cs



위에서 설명했 듯  CSS 파일은 resources 폴더 안에 있습니다, 그래서 요롷게 수정해주셔야합니다.

<link rel="stylesheet" href="resources/dist/css/adminlte.min.css">




navbar.jsp


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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="../../index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
 
    <!-- SEARCH FORM -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fa fa-search"></i>
          </button>
        </div>
      </div>
    </form>
 
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="fa fa-comments-o"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="fa fa-bell-o"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">15 Notifications</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fa fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fa fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fa fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2 days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
          <i class="fa fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->
 
cs



sidebar.jsp


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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="../../index3.html" class="brand-link">
      <img src="/resources/dist/img/AdminLTELogo.png"
           alt="AdminLTE Logo"
           class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">SJH_PROJ</span>
    </a>
 
    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        
          <li class="nav-item">
            <a href="../widgets.html" class="nav-link">
              <i class="nav-icon fa fa-th"></i>
              <p>로또 프로젝트 </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
 
 
cs



footer.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 3.0.0-alpha
    </div>
    <strong>Copyright &copy; 2014-2018 <a href="localhost:7080/lotto.do">sjhProject.io</a>.</strong> All rights
    reserved.
  </footer>
 
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
 
cs


script.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<script src="resources/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="resources/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- SlimScroll -->
<script src="resources/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="resources/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="resources/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="resources/dist/js/demo.js"></script>
cs


여기또한 경로를 다 수정해주셔야 합니다.~~~~


이렇게 다 나누고 나면 

lotto.jsp 에는 요렇게 앞으로 수정 할 Section 부분만 남습니다.  이제 공통으로 쓰기위해 나둬는 부분을 include 시켜줘야겠죠 ㅎㅎ


Ctrl + X 해서 도려낸 부분에 include를 시켜줍니다.  경로는 상대경로로 지금 현재 lotto.jsp 보다 위에 include폴더 부터 써주시면 됩니다 . 

<%@include file="../include/meta.jsp" %>



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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@include file="../include/meta.jsp" %>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <%@include file="../include/navbar.jsp" %>
  <!-- Main Sidebar Container -->
  <%@include file="../include/sidebar.jsp" %>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Blank Page</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Blank Page</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
 
    <!-- Main content -->
    <section class="content">
 
      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Title</h3>
 
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
          Start creating your amazing application!
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          Footer
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
 
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  
</div>
<!-- ./wrapper -->
<%@include file="../include/footer.jsp" %>
<!-- jQuery -->
<%@include file="../include/script.jsp" %>
</body>
</html>
 
cs


이제 모든 디자인 작업을 끝냈으니 화면에 잘 나오나 확인 해야겠죠 ?ㅎㅎㅎ


향후에 ULR을 localhost:7080/~~~~.do 로 호출하기위해서 web.xml을 조금 수정하겠습니다.


 / 요 부분을


1
2
3
4
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
cs


*.do 로 주정해주세요


1
2
3
4
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
cs



이제 컨트롤러를 만들어서 화면을 확인해 보겠습니다,~


다음과 같이 com.sjh.rotto 아래에 lottoController 클래스를 하나 만들고 다음과 같이 작성합니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.sjh.rotto;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class LottoController {
 
    @RequestMapping("/lotto.do")
    public String dashBaord() {
        
        return "lotto/lotto";
    }
}
 
cs



이제보니 패키지를 rotto라고 햇네요 ;;;


작성하셨다면 이제 서버를 돌리고 

화면을 확인해보면


다음과 같이 화면이 나온다면 성공입니다.~

참고로 로고 이미지가 깨질 텐데 ~ 다 이해하셨다면 저와같이 나올 겁니다 ㅎㅎ 숙제!!



수고 많으셨습니다 ~~~ 이제 디자인 작업이 다 끝났으니 다음엔 로또정보를 DB에 넣어 보도록 하겠습니다~


수고하셧습니다~

저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

7. 스프링 DB 연동하기  (3) 2018.06.24
6. 데이터 베이스 준비하기  (0) 2018.06.23
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20

버전 변경까지 끝내셨다면 이제 톰캣 서버를 올려서 나의 첫 화면을 띄워서 스프링이 잘 설치되었는지 확인하겠습니다.


http://tomcat.apache.org/




다운받으셔서 압축을 푸시면 되겠습니다~


다시 이클립스로 돌아와서



Servers 클릭



Apache 폴더 밑에


조금전에 다운받으신 버전에 맞는걸 선택 하고 Next 

저는 8.0버전을 다운받았습니다. 





확인 누르시고




자신의 프로젝트를 왼쪽에서 오른쪽으로 Add ~ 시켜줍니다. 그리고 피니쉬!!



추가 된 서버 우클릭헤서 Start 를 눌러줍니다. 


혹시 저와 같이 요른 에러가 뜬다면 당황하지 마시고~ 8080 포트를 사용중이여서 다른 포트를 사용해야한다는 에러이기 때문에 



서버를 더블클릭해서 포트번호를 앞자리만 살짝 바꿔주고 저장



그리고 다시 실행해봅니다~


그럼 콘솔창에 주저리 주저리 나오고 


브라우저를 열어서 

다음과 같이 주소창에 localhost:7080/rotto

저는 아까 7080으로 포트를 수정했기때문에 7080/ 이후 경로는 처음에 프로젝트 생성시 com.sjh.rotto 라고 만들어서..


짜잔 ~~  대망의 Hello world !!!!!!

현재시간이 출력되네요  

하지만 한글이 깨지네요 그럼 저것부터 잡고 가볼까요 ?ㅎㅎㅎ






web.xml에서 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    <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>
cs



요것을 추가하고 서버를 다시 돌리고 브라우저 새로고침을 하면 !!!! 짜잔 ~~ 한글이 안깨지고 잘 나오네요





여기까지 오셧다면 프로젝트의 50%는 오셨습니다. !!! 수고하셧어요 





참고로

스프링을 처음 접해보셨다면 아마도 가장 많이 하는 실수 중 하나가 주소를 잘못 쳐서 나는 에러이지 싶습니다. 



404 에러  해당하는 주소를 찾을 수 없을 때 나는 에러입니다.  난 정말 경로가 이해가 안됨~!!!!! 그렇다면



요부분을 확인해보세요 


프로젝트 생성시 자동으로 저렇게 만들어지는데 우측에 Edit... 을 클릭하셔서 변경하셔도 됩니다. 

/rotto를  /a 로 변경 후 localhost:7080/a 이렇게 치면 화면이 뜰거에요 


   /  요것만 남기고  rotto는 지우겠습니다. 


그럼 앞으로 주소창에  localhost:7080  이렇게만 쳐도 화면이 출력될것입니다. !!!


자 ~ 스프링 설치 및 이제 개발 준비는 되었고 이제 내가 만들 디자인을 만들어 보겠습니다. 

 


저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

6. 데이터 베이스 준비하기  (0) 2018.06.23
5. 스프링 디자인 작업하기  (0) 2018.06.22
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20
1. 웹 프로젝트 기획  (0) 2018.06.20

+ Recent posts

티스토리툴바