728x90

-개발환경-

IDE : Eclipse 2018-12 (4.10.0)
Spring Tool Suite : 3.9.7.RELEASE
WAS : Pivotal tc Server Developer Edition v4.0 (피보탈 톰캣 서버)
DB : Oracle 11g

-설정-

-STS 브라우저 테스트환경 설정해주기-

WINDOW => Web Browser => Chrome 선택해서 테스트 환경을 크롬으로 잡아주기

-한글깨짐방`지 태그 추가해주기-
web.xml 파일에서 아래 태그들 추가.

 

web.xml

 

 

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

 

Mybatis 구성을 위해 pom.xml 에서 다음을 설정해준다.

 

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
32
33
<!-- 오라클 드라이버 외부 저장소 설정 -->
<repositories>
    <repository>
        <id>oracle</id>
        <name>ORACLE JDBC Repository</name>
        <url>http://maven.jahia.org/maven2</url>
    </repository>
</repositories>
 
<!-- oracle -->
<dependency>
    <groupId>com.oracle</groupId>
    <artifactId>ojdbc6</artifactId>
    <version>12.1.0.1</version>
</dependency>
<!-- spring jdbc -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>4.1.4.RELEASE</version>
</dependency>
<!-- mybatis -->
<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>
cs

 

 

Mybatis 구성을 위해 servlet-context.xml 에서 다음을 설정해준다.

 

servlet-context.xml

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<beans:bean name="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource" >
    <beans:property name="driverClassName" value="oracle.jdbc.driver.OracleDriver" />
    <beans:property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"/>
    <beans:property name="username" value="Shin"/>
    <beans:property name="password" value="0000"/>
</beans:bean>
    
<beans:bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <beans:property name="dataSource" ref="dataSource"></beans:property>
    <beans:property name="mapperLocations" value="classpath:com/koreait/dao/*.xml"></beans:property>
    <beans:property name="configLocation" value="classpath:mybatis-config.xml"></beans:property>
</beans:bean>
    
<beans:bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
    <beans:constructor-arg index="0" ref="sqlSessionFactory"></beans:constructor-arg>
</beans:bean>
cs

 

1~6 : 데이터 베이스 연결 정보를 설정하는 DriverManagerDataSource 클래스의 bean을 설정한다.

8~12 : db 연결 정보와 실행할 sql 명령이 저장된 xml 파일의 경로를 기억하는 bean을 설정한다.
          mapper 설정 정보를 기억하는 bean.

10 : 실행할 sql 명령이 저장된 xml파일의 경로

11 :  typeAliases 설정 정보가 저장된 xml 파일의 경로를 설정한다. (의무 x ) (요약어설정)

14~16 : 윗 정보들을 종합한 템플릿 bean.

 

 

 

typeAliases(요약어) 설정을 위해서  resources 폴더에 적당한 (mybatis-config.xml)파일을 생성후 다음을 추가한다.

 

mybatis-config.xml 

 

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <typeAliases>
        <typeAlias alias="vo" type="com.koreait.vo.MvcboardVO"/>
    </typeAliases>
</configuration>
cs

 

mvcboard.xml 

 

1
2
3
4
5
6
7
<?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.koreait.dao.MybatisDAO">
    <insert id="insert" parameterType="vo">
        ~sql 명렁~
    </insert>
</mapper>
cs

 

해당 파일은 , 실행할 sql 명령이 저장된 xml파일이다.

 

3 : namespace에는 반드시 mapper 역할을 하는 인터페이스의 이름을 풀 패키지 이름으로 적어야 한다.

 

mapper 역할을 하는 MybatisDAO.java

 

1
2
3
public interface MybatisDAO {
    void insert(MvcboardVO mvcboardVO);
}
cs

 

mapper로 사용되는 interface의 추상 메소드 형식은 resultType id(parameterType)와 같은 형식으로 만들어 사용한다.

추상 메소드 이름이 XML 파일의 sql명령을 식별하는 id로 사용되고,
추상 메소드의 인수로 지정된 데이터가 xml 파일의 sql 명령으로 전달된다.
xml 파일의 parameterType 속성에는 1개의 자료형만 쓸 수 있는데 ,
여러개의 데이터를 넘겨야 할 경우
인수로 넘어가는 데이터를 모두 멤버 변수로 가지고 있는 클래스를 사용하면된다.  2번째 줄처럼.

 

mvcboard.xml 

 

1
2
3
4
5
6
7
8
<?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.koreait.dao.MybatisDAO">
    <insert id="insert" parameterType="vo">
        insert into mvcboard (idx,name,subject,content,ref,lev,seq) values 
        (mvcboard_idx_seq.nextval,#{name},#{subject},#{content},mvcboard_idx_seq.currval,0,0)
    </insert>
</mapper>
cs

 

4 : mapper역할을 하는 인터페이스에서  추상메소드이름이   이곳 id 속성값이다.

    parameterType 속성값은 mybatis-config.xml 에서 설정한 요약어이다.

 

HomeController.java

 

1
2
3
4
@Controller
public class HomeController {
    @Autowired
    public SqlSession sqlSession;
cs

4 : servlet-context.xml 파일에서 생성한 mybatis bean을 사용하기 위해
    sqlSession 인터페이스 타입의 변수를 선언한다.
    JDBC Template과 다르게 Setter가 필요없다. 자동으로 넣어준다.

 

 

HomeController.java

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@RequestMapping("/insertOK")
     public String insertOK(HttpServletRequest request, Model model) {
        MybatisDAO mapper = sqlSession.getMapper(MybatisDAO.class);
        
        AbstractApplicationContext ctx = new GenericXmlApplicationContext("classpath:applicationCTX.xml");
        MvcboardVO mvcboardVO = ctx.getBean("mvcboardVO", MvcboardVO.class);
        
        mvcboardVO.setName(request.getParameter("name"));
        mvcboardVO.setSubject(request.getParameter("subject"));
        mvcboardVO.setContent(request.getParameter("content"));
        
        mapper.insert(mvcboardVO);
        
        return "redirect:list";
    }
cs

 

3 : mapper로 사용할 interface 변수에 mybatis mapper를 얻어온다.

8~10 : MvcboardVO클래스의 bean에 insert.jsp(view) 에서 request 객체로 넘어온 데이터를 저장한다.

12 : sql 명령을 실행하는 메소드를 호출한다.

728x90

-개발환경-

IDE : Eclipse 2018-12 (4.10.0)
Spring Tool Suite : 3.9.7.RELEASE
WAS : Pivotal tc Server Developer Edition v4.0 (피보탈 톰캣 서버)
DB : Oracle 11g

-설정-

-STS 브라우저 테스트환경 설정해주기-

WINDOW => Web Browser => Chrome 선택해서 테스트 환경을 크롬으로 잡아주기

-한글깨짐방지 태그 추가해주기-
web.xml 파일에서 아래 태그들 추가.

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

 

DBCP Template을 위해 pom.xml 에서 다음을 설정해준다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 오라클 드라이버 외부 저장소 설정 -->
<repositories>
    <repository>
        <id>oracle</id>
        <name>ORACLE JDBC Repository</name>
        <url>http://maven.jahia.org/maven2</url>
    </repository>
</repositories>
<!-- oracle -->
<dependency>
    <groupId>com.oracle</groupId>
    <artifactId>ojdbc6</artifactId>
    <version>12.1.0.1</version>
</dependency>
<!-- spring dbcp -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>4.1.4.RELEASE</version>
</dependency>
cs

 

DBCP Template을 위해 servlet-context.xml 에서 다음을 설정해준다.

1
2
3
4
5
6
7
8
9
10
11
<!--servlet-context.xml에 dbcp template을 사용하기 위한 bean을 추가한다.-->
<beans:bean name="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
    <beans:property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"/>
    <beans:property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"/>
    <beans:property name="username" value="koreait"/>
    <beans:property name="password" value="0000"/>
</beans:bean>
    
<beans:bean name="template" class="org.springframework.jdbc.core.JdbcTemplate">
    <beans:property name="dataSource" ref="dataSource"/>
</beans:bean>
cs

 

-HomeController.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Controller
public class HomeController {
    
    private JdbcTemplate template;
 
    public JdbcTemplate getTemplate() {
        return template;
    }
    @Autowired
    public void setTemplate(JdbcTemplate template) {
        this.template = template;
        Constant.template = template;
    }
 
    ~~~
cs

 

사전에 , servlet-context.xml 파일에서 JdbcTemplate 타입의 bean을 생성한다.
 프로젝트가 시작될 때  JdbcTemplate 클래스의 bean을  JdbcTemplate 타입 변수에 넣어주도록 만든다.

9 :  JdbcTemplate 클래스 객체의 setter 메소드가 프로젝트가 시작될때 자동으로 실행되게 하기 위해서 @Autowired 어노테이션을 붙여준다.
@Autowired 어노테이션이 붙어있는 메소드의 인수로 스프링이 servlet-context.xml 파일에서 생성한 JdbcTemplate 클래스의 bean을 자동으로 넣어준다.

12 :  컨트롤러 이외의 클래스에서 JdbcTemplate을 사용할수 있게 하기 위해서
       적당한 이름의 패키지에 적당한 이름으로 클래스를 만들고 선언한 정적 변수에 servlet-context.xml 파일에서 생성된 JdbcTemplate 클래스의 bean을 넣어준다.   

 

-Constant.java-

1
2
3
4
5
public class Constant {
    //다른 클래스에서 접근해서 사용해야 하기때문에 ,public static 으로 선언
    public static JdbcTemplate template;
}
 
cs

 

-MvcboardDAO.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class MvcboardDAO {
 
    private JdbcTemplate template;
 
    public MvcboardDAO() {
        template = Constant.template;
    }
 
    public void insert(final MvcboardVO mvcboardVO) {
        String sql = "insert into mvcboard (idx,name,subject,content, ref , lev , seq) "
                + "values (mvcboard_idx_seq.nextval,?,?,?,mvcboard_idx_seq.currval,0,0)";
 
        template.update(sql,new PreparedStatementSetter() { 
            @Override
            public void setValues(PreparedStatement ps) throws SQLException {
                ps.setString(1, mvcboardVO.getName());
                ps.setString(2, mvcboardVO.getSubject());
                ps.setString(3, mvcboardVO.getContent());
            }
        });
    }
 
cs

 

3 : DAO 클래스에서 jdbc template 을 사용하기 위해서 JdbcTemplate 클래스 타입의 객체변수를 생성한다.

5~7 : 생성자에서 template을 초기화한다.

9 : 테이블내용이 변경되는 SQL 명령을 수행하려할때, 
메소드의 인수로 넘어오는 데이터는 중간에 값이 변경되면 안되기 때문에 fianl로 지정하도록 되어있다.

13 : 메소드의 인자로 ? 를 채울 익명객체가 들어간다.

15 :  오버라이드된 setValues메소드 에서 ? 를 채운다.

template.update(sql); => executeUpdate(sql)와 같은기능 
template.query(~);//테이블의 내용이 갱신되지 않는 sql 명령을 실행한다. => 실행결과가 여러건 일 경우 사용한다.
template.queryForObject(~);//테이블의 내용이 갱신되지 않는 sql 명령을 실행한다. =>실행결과가 1건일 경우.
template.queryForList(~);//테이블의 내용이 갱신되지 않는 sql 명령을 실행한다. =>  여러개 꺼내옴
template.queryForInt(~);// ( 비추천)테이블의 내용이 갱신되지 않는 sql 명령을 실행한다. =>  실행 결과가 정수 1건일 경우 사용한다.

 

 

다른 sql 문을 이용하는 경우를 보자..

 

1
2
String sql = "select count(*) from mvcboard";
return template.queryForObject(sql, Integer.class);
cs
1
2
3
4
5
6
String sql = "select * from ("+
        "select rownum rnum, AA.* from ("+
        "select * from mvcboard order by ref desc,seq asc"+
        ") AA where rownum <="+ hmap.get("endNo")+
        ") where rnum >="+hmap.get("startNo");
return (ArrayList<MvcboardVO>) template.query(sql, new BeanPropertyRowMapper(MvcboardVO.class));
cs

 

1~5 : dbcp template 을 사용하는 경우 select sql 명령에만 "?" 를 사용할 수 없다. => "?" 자리에 데이터가 저장된 변수를 사용한다.

8 : select sql 명령 실행 결과를 BeanPropertyRowMapper 클래스 생성자의 인수로
 MvcboardVO 클래스를 넘겨서 sql 명령 실행 결과를
저장시켜 리턴한다 .
 => List 타입으로 결과가 리턴되기 때문에 메소드의 리턴타입으로  형변환이 필요하다.
테이블의 필드 이름과 MvcboardVO클래스의 멤버 변수 이름이 반드시 같아야 정상적으로 실행된다.

 

-구성도-

-요약-

-마침글-

 

인용

 

728x90

해결법 - 

복사한 프로젝트 오른쪽마우스 ->  Build Path - > Configure Build Path - >Web Project Settings 에서

Context root 값을 변경된 프로젝트명으로 변경.

그리고,

Server 에서 복사된 프로젝트와 , 복붙된 프로젝트 둘다 서버제거.

그리고 둘다 서버재구동.

 

728x90

-개발환경-

Vs code :  1.55.2

-front-end 글의 대부분은 developer.mozilla.org/ko/docs/Web/CSS/float 을 참고하여 요약 제작됩니다. -

 

- 개념  -

float : 한 요소가 보통 흐름(normal flow)으로부터 빠짐을 의미.

        텍스트 및 인라인 요소가 그 요소를 감싸는 형태이다.

 

부동(float) : 떠서 움직이다.

 

float: left;    :    요소가 자신의 포함블록의 좌측에 부동해야 함을 나타내는 키워드임.
float: right;    :    요소가 자신의 포함블록의 우측에 부동해야 함을 나타내는 키워드임.
float: none;    :    요소가 부동하지않아야함(고정)을 나타내는 키워드임.

 

- float 값에 따른 예제  -

 

-float.html( CSS 부분 )-

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
<style type="text/css">
        .left{
            float:left;
            border: 10px solid red;
        }
        .right{
            float:right;
            border: 5px solid orange;
        }
        .none{
            float:none;
            border: 5px solid blue;
        } 
        .inline-start{
            float:right;
            border: 5px solid pink;
        }
        .inline-end{
            float:right;
            border: 5px solid hotpink;
        }
        div{
            border: 5px solid black;
            width: 700px;
            height: 500px;
        }
    </style>
cs

 

-float.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <div>
        -원본-<br/>        
        뉴스 기사는 뉴스 가치에 의해 선택된 사실을 기술한 글로서<br/>
        육하원칙이 요구하는 내용을 서술한다. <br/>
        기자 자신의 주관을 배제하고 객관적으로 작성하는 것이 원칙이다. <br/>
        기자 자신의 주관은 오피니언에서 서술한다. <br/>
        또한 뉴스 기사의 내용은 정확하고 분명하여야 하며, <br/>
        전체의 일부만을 강조하거나 편파적이지 않아야 한다.<br/>
        <br/><br/><br/>
        -LEFT,RIGT,NONE적용-<br/>        
        뉴스 기사는 뉴스 가치에 의해 선택된 사실을 기술한 글로서<br/>
        육하원칙이 요구하는 내용을 서술한다. <br/>
        기자 자신의 주관을 배제하고 
        <span class="left">LEFT</span>
        <span class="right">RIGHT</span>
        <span class="none">NONE</span>
        객관적으로 작성하는 것이 원칙이다. <br/>
        기자 자신의 주관은 오피니언에서 서술한다. <br/>
        또한 뉴스 기사의 내용은 정확하고 분명하여야 하며, <br/>
        전체의 일부만을 강조하거나 편파적이지 않아야 한다.<br/>
    </div>
</body>
cs

 

출력결과를 보자.

 

 

14 : '기자 자신의 주관을 배제하고' 라는 내용이 들어간 줄과 18줄의 '객관적으로 작성하는 것이 원칙이다.' 은 본래한줄이다.

이 사이에 float의 left,right, none 속성을 가지는 내용을 넣었더니 , 

해당 줄의 왼쪽 부동 오른쪽 부분에 위치하게 된 것을 볼수 있다.

 

 

float: left 속성을 가진 요소가 텍스트의 세로길이 보다 클 경우 ,

텍스트들이 float: left 요소 오른쪽에 이어서 나온다는것을 볼수 있다.

반면 float: none 속성을 가진 요소는 밑 텍스트를 침범하여도 줄바꿈현상은 발생하지 않은것을 확인할수 있다.

- 개념  -

 

보통 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.

그렇게 쌓이면서.. 부모요소의 크기를 넘게 된다면 줄이 바뀝니다.

아래의 예제를 보세요.

 

- float 겹쳐 넣는 예제  -

-float_duplicate.html( CSS 부분 )-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <style type="text/css">
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .none{
            float:none;
        } 
        div{
            border: 5px solid black;
            width: 700px;
            height: 500px;
        }
        .sub_div {
            width: 200px;
            height: 30px;
            background-color: gray;
            border : 1px solid red;
        }
    </style>
cs

 

-float_duplicate.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div>
       <div class="left sub_div">
           1
       </div>
       <div class="left sub_div">
           2
        </div>
        <div class="left sub_div">
           3
        </div>
        <div class="left sub_div">
           4
        </div>
    </div>
</body>
cs

 

출력결과를 봅시다.

 

 

부모 div 의 width는 700px , 자식 div의 width는 200px 이고 ,

자식 div의 float:left 속성으로 인해 왼쪽으로 요소들이 쌓여가다가

12~14 : 범위를 넘는 4번째 요소때 밑줄로 넘어가는것을 볼수있습니다.

 

- 개념  -

clear 속성이 지정된 영역부터는 float가 작동하지 않는다.

 

clear 속성

none : 기본 값
left : float의 left 속성을 해제함
right : float의 right 속성을 해제함
both : left, right 속성을 둘 다 해제함 (1)

- clear 예제  -

-float_clear.html( CSS 부분 )-

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
<style type="text/css">
        .left{
            float:left;
            border: 10px solid red;
        }
        .right{
            float:right;
            border: 5px solid orange;
        }
        .none{
            float:none;
            border: 10px solid blue;
        } 
        .inline-start{
            float:right;
            border: 5px solid pink;
        }
        .inline-end{
            float:right;
            border: 5px solid hotpink;
        }
        div{
            border: 5px solid black;
            width: 700px;
            height: 500px;
        }
</style>
cs

 

-float_clear.html-

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
<body>
    <div>
        -LEFT,RIGT,NONE적용-<br/>        
        뉴스 기사는 뉴스 가치에 의해 선택된 사실을 기술한 글로서<br/>
        육하원칙이 요구하는 내용을 서술한다. <br/>
        기자 자신의 주관을 배제하고 
        <span class="left">LEFT</span>
        <span class="right">RIGHT</span>
        <span class="none">NONE</span>
        <p>
        객관적으로 작성하는 것이 원칙이다. <br/>
        기자 자신의 주관은 오피니언에서 서술한다. <br/>
        또한 뉴스 기사의 내용은 정확하고 분명하여야 하며, <br/>
        전체의 일부만을 강조하거나 편파적이지 않아야 한다.<br/>
        </p>
 
        -clear both 적용-<br/>        
        뉴스 기사는 뉴스 가치에 의해 선택된 사실을 기술한 글로서<br/>
        육하원칙이 요구하는 내용을 서술한다. <br/>
        기자 자신의 주관을 배제하고 
        <span class="left">LEFT</span>
        <span class="right">RIGHT</span>
        <span class="none">NONE</span>
        <p style="clear:both;">
        객관적으로 작성하는 것이 원칙이다. <br/>
        기자 자신의 주관은 오피니언에서 서술한다. <br/>
        또한 뉴스 기사의 내용은 정확하고 분명하여야 하며, <br/>
        전체의 일부만을 강조하거나 편파적이지 않아야 한다.<br/>
        </p>
    </div>
</body>
cs

 

10~15 : p 태그로 감싸 줬음에도 ~9 줄의 float 에 영향을 받아 원치 않은 결과가 나온 것을 볼수 있다.

24~29 : clear:both; 명령으로 인해 ~23 줄의 float 영향을 받지 않고 정상적으로 출력된 것을 볼수 있다.

 

- 개념  -

overflow :  CSS 단축 속성으로, 요소의 콘텐츠가 너무 커서 요소의
              블록 서식 맥락에 맞출 수 없을 때의 처리법.

 

overflow 속성들

visible : 넘친 콘텐츠 그대로 노출(기본값)

hidden : 넘친 콘텐츠 만큼 잘라내기.
scroll : 하단, 상단에 스크롤 보이기.

auto : 넘친 부분에 스크롤 보이기 결정.

 

이지만 ,

특이한 상황으로 ,  overflow:hidden 과 float 를 같이 사용하여 레이아웃을 구성하는 방법중 하나로

One True Layout 방법이 있는데 , 이 방법은 해당 주소를 참고하여 보도록 하자.

1duri1.tistory.com/249

 

-참고-

(1) includestdio.tistory.com/34

728x90

-개발환경-

Vs code :  1.55.2

-front-end 글의 대부분은 developer.mozilla.org/ko/docs/Web/ 을 참고하여 요약 제작됩니다. -

 

- 개념  -

블록레밸 요소 :  언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.

                      블록 레벨 요소는 <body> 요소 안에서만 나타난다.

 

아래 그림은 블록레밸이 포함 할 수있는 관계이다.

 

인라인 요소 : 새로운 줄을 만들지 않으며 필요한 너비만 차지한다.

                  아래 그림은 블록레밸이 포함 할 수있는 관계이다.

 

-inlineAndBlock.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <p class="blocklight">이 문단은 블록 레벨 요소입니다. 
        부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.
    </p>
 
    <div>다음 span은 <span class="inlinelight">인라인 요소</span>로,
        영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.
    </div>
 
    <div>다음 p는 <p class="blocklight">블록 레벨 요소</p>로,
        영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.
    </div>
</body>
cs

 

css 에는 배경색만 입혔습니다.

 

728x90

-개발환경-

Vs code :  1.55.2

- 1.  html 웹에서 실행시키기 -

 

1 . 좌측하단 마켓플레이스를 클릭한다.

 

2. open in browser 를 검색후 설치

 

3. html 파일에서 ALT+B 단축키를 이용하여 실행.

 

 

- 2.  github 에서 git clone 해오기 -

 

참고사이트 : technote.kr/352

 

 

- 3.  github 로 push 하기 -

참고사이트 : technote.kr/353

 

- 4.  vsCode에서 파일구성후, html,js 돌려보기 -

참고사이트 : curryyou.tistory.com/169

728x90

이클립스 계열 IDE 에서 한글 깨짐을 방지 하기위해서는 UTF-8을 적용시켜야 한다.

 

JSP 파일에서 ,

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

<meta charset="UTF-8">

 

파일 생성마다 윗 명령어가 기본으로 작동되게 하려면..

alnair.tistory.com/18 사이트에서  글의 2단계를 따라하면 된다..

 

728x90

-개발환경-

IDE : Eclipse 2018-12 (4.10.0)
Spring Tool Suite : 3.9.7.RELEASE
WAS : Pivotal tc Server Developer Edition v4.0 (피보탈 톰캣 서버)
DB : Oracle 11g

-설정-

-STS 브라우저 테스트환경 설정해주기-

WINDOW => Web Browser => Chrome 선택해서 테스트 환경을 크롬으로 잡아주기

-한글깨짐방지 태그 추가해주기-
web.xml 파일에서 아래 태그들 추가.

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

DBCP를 위해, sever폴더의 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
<!--
    name : DBCP 이름, 커넥션 풀 이름, "jdbc/"는 항상 똑같이 쓰고 "/" 뒤에 커넥션 풀 이름을 적는다.
    type : 데이테베이스 연결에 사용할 자바 클래스 이름, 반드시 이 클래스를 사용해야 한다.
    auth : DBCP를 톰캣이 관리한다는 의미로 Container라 적어준다.
    maxActive : 데이터베이스 연결 풀의 최대값, 최대 연결 허용 개수
    maxIdle : 접속을 유지하는 데이터베이스 연결 풀의 최대 개수, 항상 연결을 유지하는 풀의 개수
    maxWait : 데이터베이스 접속을 위해서 기다리는 최대 시간, -1을 쓰면 대기 시간 없이 바로 접속한다.
    username : 사용자 계정
    password : 사용자 비밀번호
    driverClassName : 데이터베이스 드라이버 클래스 이름
    url : 데이터베이스 접속을 위한 경로
-->
<Resource
    name = "jdbc/oracle"                            
    auth = "Container"
    type = "javax.sql.DataSource"
    maxActive = "50"
    maxIdle = "20"
    maxWait = "-1"
    url = "jdbc:oracle:thin:@localhost:1521:xe"
    driverClassName = "oracle.jdbc.driver.OracleDriver"
    username = "Shin"
    password = "0000"
/>
cs


DBCP를 위해, 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
<repositories>
    <repository>
        <!-- ORACLE -->
        <id>oracle</id>
        <name>ORACLE JDBC Repository</name>
        <url>http://maven.jahia.org/maven2</url>
    </repository>
</repositories>
<dependencies>
    <!-- MYSQL -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.39</version>
    </dependency>
 
    <!-- oracle -->
    <dependency>
        <groupId>com.oracle</groupId>
        <artifactId>ojdbc6</artifactId>
        <version>12.1.0.1</version>
    </dependency>
 
    <!-- spring dbcp -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>4.1.4.RELEASE</version>
    </dependency>
</dependencies>
cs


DBCP를 을 위해, web.xml 에 다음을 추가해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Mysql -->
<resource-ref>
    <description>DB Connection</description>
    <res-ref-name>jdbc/mysql</res-ref-name>
    <res-type>javax.sql.DataSource</res-type>
    <res-auth>Container</res-auth>
</resource-ref>
<!-- Oracle -->
<resource-ref>
    <description>DB Connection</description>
    <res-ref-name>jdbc/oracle</res-ref-name>
    <res-type>javax.sql.DataSource</res-type>
    <res-auth>Container</res-auth>
</resource-ref>
cs

 

 

실습에 앞서 , 개념을 알아보자.

 

DBCP : DB커넥션을 어플리케이션 소스 내에서 제어하면서 DB풀을 가진다.

JDBC는 데이터베이스 커넥션 인터페이스 이다. 

JNDI는 DB커넥션을 WAS단에서 제어하면서 서버에서 하나의 커넥션 풀을 가진다.

 

그럼, DB POOL 은 뭘까?  일단은  DB POOL = (DB) CONNECTION POOL 이라고 알아두고,

잘 설명되어 있는 아래 사이트를 보자.

brownbears.tistory.com/289

 

-구성도-

-MvcboardDAO-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class MvcboardDAO {
 
    DataSource dataSource;
    
    public MvcboardDAO() {
        try {
            Context context = new InitialContext();
            dataSource = (DataSource) context.lookup("java:/comp/env/jdbc/oracle");
            System.out.println("연결됨");
            
        }catch(Exception e) {
            e.printStackTrace();
            System.out.println("연결실패!!!");
        }
    }
cs

 

5 : DBCP 방식으로 DB와의 통신을 위해 ,  DAO서비스를 이용할때 마다 DAO bean을 생성해줘야한다(단점).

 

-MvcboardDAO-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public void insert(MvcboardVO mvcboardVO) {
        System.out.println("MvcboardDAO 클래스의 insert() 메소드 -VO사용");
        Connection conn = null;
        PreparedStatement pstmt= null;
        try {
            conn = dataSource.getConnection();
            String sql = "insert into mvcboard (idx,name,subject,content, ref , lev , seq) "
                    + "values (mvcboard_idx_seq.nextval,?,?,?,mvcboard_idx_seq.currval,0,0)";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, mvcboardVO.getName());
            pstmt.setString(2, mvcboardVO.getSubject());
            pstmt.setString(3, mvcboardVO.getContent());
            pstmt.executeUpdate();
        }catch(Exception e) {
            e.printStackTrace();
        }finally {
            if(conn!=null) {
                try {
                    conn.close();
                } catch (SQLException e) { }
            }
        }
    }
cs

 

1 : 여러 DAO 메소드중 하나인 insert 메소드이다.

 

6~ : DataSource 객체에 연결하는 것부터 SQL 수행까지 여러작업들을 수행한다. ( 가장 코드가 김.. ) 

 

-HomeController.java-

1
2
3
4
5
6
7
8
@RequestMapping("/list")
    public String list(HttpServletRequest request, Model model) {
        model.addAttribute("request", request);
        AbstractApplicationContext ctx=new GenericXmlApplicationContext("classpath:applicationCTX.xml");
        MvcboardService service=ctx.getBean("select", MvcboardService.class);
        service.execute(model);
        return "list";
    }
cs

 

3  : Model 객체에 request를 통채로 저장하여 , 6번째 줄 같이 함수에 담아 보낸다. 

그럼 받는 곳에선 request 를 풀기 위해서 

 

1
2
Map<String,Object> map=model.asMap();
HttpServletRequest request=(HttpServletRequest) map.get("request");
cs

 

해당 방식처럼 request를 받는다.

컨트롤클래스에서 , 메소드끼리 만약 model 에 request가 아닌 다른 값을 넣어주고 받으려면

 

1
model.addAttribute("currentPage", Integer.valueOf(request.getParameter("currentPage")));
cs

 

1
request.getParameter("currentPage")
cs

 

이런식으로 이용할수 있다.

 

 

 

-요약-

-마침글-

 

인용

 

728x90

-개발환경-

IDE : Eclipse 2018-12 (4.10.0)
Spring Tool Suite : 3.9.7.RELEASE
WAS : Pivotal tc Server Developer Edition v4.0 (피보탈 톰캣 서버)

-설정-

-STS 브라우저 테스트환경 설정해주기-

WINDOW => Web Browser => Chrome 선택해서 테스트 환경을 크롬으로 잡아주기

-한글깨짐방지 태그 추가해주기-
web.xml 파일에서 아래 태그들 추가.

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

-파일구성-

 

Forward =  url 변경 x,  객체(request,response) 재사용o

Redirect = url 변경 o,  객체재사용 x

 

실습에 앞서 Redirect와 Forward의 차이와 , 언제사용하는지의 구분이 정리되어 있는 사이트를 참고하자.

doublesprogramming.tistory.com/63#comment12412713

 

-HomeController.java-(redirect예제-)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping("/confirm")
    public String confirm(HttpServletRequest request,Model model) {
        System.out.println("컨트롤러의 confirm 메소드 실행");
        String id = request.getParameter("id");
        model.addAttribute("id", id);
        return "redirect:confirmNG";
    }
    @RequestMapping("/confirmNG")
    public String confirmNG(HttpServletRequest request,Model model) {
        System.out.println("컨트롤러의 confirmNG 메소드 실행");
        String id = request.getParameter("id");
        model.addAttribute("id", id);
        return "idNG";
    }
cs

 

6 : redirect 를 붙여서 리턴 시키면 /WEB-INF/views 폴더의 confirmNG.jsp파일을 호출하는것이 아니고
    컨트롤러를 경유하여  @RequestMapping("/confirmNG") 어노테이션이 붙어 있는 메소드를 호출한다.

 

13 : idNG.jsp 가 호출이 된다.

또한 , 브라우저에서 url도 변경이 된다.

 

 

-HomeController.java-(forward예제-)

1
2
3
4
5
6
7
8
9
10
11
12
13
@RequestMapping("/confirm")
    public String confirm() {
        System.out.println("컨트롤러의 confirm 메소드 실행");
        return "forward:confirmOK";
    }
    
    @RequestMapping("/confirmOK")
    public String confirmOK(HttpServletRequest request,Model model) {
        System.out.println("컨트롤러의 confirmOK 메소드 실행");
        String id = request.getParameter("id");
        model.addAttribute("id", id);
        return "idOK";
    }
cs

 

2 : confirm 메소드에서 confirmOK메소드로 forward 호출을 해줄것이므로 , 

confirm메소드내에서 특별한처리를 할것이 아닌 이상 인수가 필요가 없다.

 

4 : forward를 통해 컨트롤러의 @RequestMapping("/confirmOK")가 붙은 메소드를 수행.

 

12 : idOK.jsp 를 호출한다.

하지만, 브라우저 url의 변동은 없다.

 

-요약-

-마침글-

 

인용

 

728x90

-개발환경-

IDE : Eclipse 2018-12 (4.10.0)
Spring Tool Suite : 3.9.7.RELEASE
WAS : Pivotal tc Server Developer Edition v4.0 (피보탈 톰캣 서버)

-설정-

-STS 브라우저 테스트환경 설정해주기-

WINDOW => Web Browser => Chrome 선택해서 테스트 환경을 크롬으로 잡아주기

-한글깨짐방지 태그 추가해주기-
web.xml 파일에서 아래 태그들 추가.

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

-파일구성-

 

 

-HomeController.java-

1
2
3
4
5
6
7
8
9
10
11
12
    @RequestMapping("/memberView")
    public String memberView(HttpServletRequest request,Model model) {
        System.out.println("HomeController의 memberView() 메소드");
        String id = request.getParameter("id");
        String pw = request.getParameter("pw");
        System.out.println("id : "+id+", pw: "+pw);
        
        model.addAttribute("id",id);
        model.addAttribute("pw",pw);
        
        return "memberView";
    }
cs

 

2 : 뷰 페이지에서 넘어온 데이터는 
    HttpServletRequest 인터페이스 객체에 저장된다.
4,5 : 데이터를 받아온다.

8,9 : controller에서 뷰페이지로 넘겨줄 데이터를 Model인터페이스객체에 저장한다.

 

-HomeController.java-

1
2
3
4
5
6
7
8
9
10
@RequestMapping("/memberLogin")
    public String memberLogin(Model model,@RequestParam("id"String id,
            @RequestParam("pw"String pw) {
        System.out.println("HomeController의 memberLogin() 메소드");
        System.out.println("id : "+id+",pw : "+pw);
        model.addAttribute("id",id);
        model.addAttribute("pw",pw);
        
        return "memberLogin";
    }
cs

 

2,3 : @RequestParam("뷰 페이지에서 컨트롤러로 넘어오는 변수명") 자료형 변수명   꼴로 이용한다.
       id ,pw 같은 소량의 데이터를 받을때 유용.
       뷰 페이지에서 컨트롤러로 넘어오는 id,pw를 받아서  변수에 대입된다.

기존의 HttpServletRequest 객체를 이용하는 것과의 차이를 이해하자!

뷰페이지에서 컨트롤러로 데이터가 넘어오지 않을때,
HttpServletRequest인터페이스객체는  에러 발생하지 않음. 
하지만 @RequestParam 은 400에러 발생함.

 

-HomeController.java-

1
2
3
4
5
6
@RequestMapping("/memberInsert")
     public String memberInsert(HttpServletRequest request,
             Model model,@ModelAttribute("vo") MemberVO memberVO) {
        System.out.println("컨트롤러의 memberInsert메소드");
        return "memberInsert";
    }
cs

 

3 : 어노테이션으로 커맨드객체명을 vo로 지정해주었다.

    어노테이션 지정을 안할것이면 , '@ModelAttribute("vo") MemberVO memberVO' 대신에

    'MemberVO memberVO' 만 작성해주면 된다.

 

-커멘드(데이터) 객체 -

뷰페이지 -> 컨트롤러로 넘어오는 데이터를 클래스 객체에 저장하려는 경우
 커맨드객체를 사용하면 편리하다.
커맨드객체는 아래의 기능들을 합친것과 동일하다.
1.  HttpServletRequest 인터페이스 객체나 @RequestParam 어노테이션으로
    데이터를 받아서 클래스객체에 setter 메소드로 저장한 다음 
2.  Model 인터페이스객체에 넣어주는 동작.

커맨드객체의 이름은 반드시  커맨드객체를 생성할 클래스 이름과 동일하게 작성해야 하고
 첫 문자만 소문자로 바꿔 사용해야한다.
자동으로 객체도 생성이됨

-어노테이션으로 커맨드객체 명 변경하기-

뷰페이지로 넘겨주는 커멘드객체이름을 별도로 지정해서 사용하려면
어노테이션을 이용해 뷰페이지로 넘겨주는 커멘드객체의 이름을 변경할 수 있다.
이 경우 기존 커멘드객체 이름은 사용할 수 없고 @ModelAttribute 어노테이션으로 지정한 
커맨드객체 이름을 사용해야 한다.

 

 

-memberInsert.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    ${vo.name}</br>
    ${vo.id}</br>
    ${vo.password}</br>
    ${vo.email}
    <hr/>
    
    ${memberVO.name}</br>
    ${memberVO.id}</br>
    ${memberVO.password}</br>
    ${memberVO.email}
</body>
cs

 

아래 결과를 보면,

어노테이션 커맨드객체명으로 vo로 명시해주었기에  <hr/>기준 윗부분만 결과로 나온것을 확인할수 있다.

 

출력결과

-요약-

-마침글-

 

인용

 

+ Recent posts