2017년 10월 21일 토요일

ajax 예제(cot에서 쓰인 부분 정리)

커뮤니티 페이지(Cot)에서 ajax를 쓴 부분을 정리


게시물 조회시 댓글을 ajax방식으로 호출 했다.
1
2
3
4
5
6
7
8
9
10
11
//게시물 조회시 댓글 호출    
function listReply() {
        $.ajax({
            type : "get",
            url : "${path}/freereply/list.do?bnum=${dto.bnum}",
            success : function(result) {
                // responseText가 result에 저장됨.
                $("#listReply").html(result);
            }
        });
    }
cs

type은 통신 타입이다. POST 또는 GET을 선택할 수 있다.
url은 요청할 url로 글번호(bnum)에 맞는 댓글들을 불러오는 컨트롤러로 연결된다.
success는 성공적으로 요청/응답이 되면 listReply 부분에 결과를 html형식으로 표시한다.
해당 jsp에서는 

<!-- 댓글 목록 위치 -->
<div id="listReply"></div>

으로 댓글 목록을 위치시켰다.



댓글 수정화면 댓글의 댓글 창또한 ajax를 이용해 새로고침 없이 창을 보이게 하였다.
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
// 댓글 수정화면 생성 
function showReplyModify(rnum) {
    $.ajax({
        type : "get",
        url : "${path}/freereply/detail/" + rnum,
        success : function(result) {
            $("#modifyReply").html(result);
            // 태그.css("속성", "값")
            $("#modifyReply").css("visibility", "visible");
        }
    })
}
// 댓글의  코멘트 생성 
function showReplyComment(rnum) {
    $.ajax({
        type : "get",
        url : "${path}/freereply/commentwrite/" + rnum,
        success : function(result) {
            $("#ReplyComment").html(result);
            // 태그.css("속성", "값")
            $("#ReplyComment").css("visibility", "visible");
        }
    })
}
cs
형태는 위와 비슷하다. 


로그인을 사이드 메뉴에서 구현하였다. 
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
function signin() {
            if($("#user_id").val()==""){
                alert("아이디를 입력해주세요.");
                $("#user_id").focus();
                }else if($("#password").val() ==""){
                    alert("비밀번호를 입력해주세요");
                    $("#password").focus();
                    
                    }else{
            $.ajax({
                url : './j_spring_security_check',
                data : $('form input').serialize(),
                type : 'POST',
                dataType : 'json',
               
            }).done(function(body) {
                var message = body.response.message;
                var error = body.response.error;
                if (error)
                    get_msg(message);
                if (error == false) {
                    var url = '${referer}';
                    if (url == '')
                        url = '<c:url value="/users/mypage" />';
                    location.href = url;
                }
            });
         }
        }
cs
앞의 if문은 아이디 비밀번호 체크이므로, ajax부터 본다면, 

data는 서버에 요청시 보낼 파라미터이다.
dataType은 응답 받을 데이터 타입을 선택한다.(XML, TEXT, HTML, JSON 등) 

아까랑 다르게 success가 아닌 done인데 같은의미인데 순서가 다른 것 같다.
검색해보니 success error 보다는 done fail 패턴이 동일한 요청에 대해 여러 성공 콜백을 호출할 때 함수 배열을 통해 더 깔끔?하게 처리해서 최근 done이 많이 쓰이는 것 같다...


beforesend에 대해서도 찾아볼 것 
시간: 댓글 없음:
라벨: ,

2017년 10월 20일 금요일

Node.js 공부[1]

예전에 조금했던 Do it node.js 책을 다시 공부시작!

이번엔 제대로 정리해보면서 한 게시글에 1챕터씩 정리!

노드 정리 블로그가 많으니 찾아보면서 하자
http://asfirstalways.tistory.com/43

1챕터

노드(Node.js)는 자바스크립트를 이용해서 서버를 만들 수 있는 개발 도구


노드는 왜 만들게 되었는가??

웹 서버에 파일을 업로드할 때, 업로드가 완료되기 전까지 웹 서버에서 데이터를 조회한다거나 하는 등의 작업을 할 수 없었는데, 이 문제를 해결하기 위해 만든 것
>> 비동기 입출력(논블록킹 입출력, Non-Blocking IO)방식 적용


동기 입출력 방식 vs 비동기 입출력 방식 비교
참고 ,,다시 정리 할것 

모듈이란?

필요한 기능을 별도의 자바스크립트로 만든 후 필요할 때 불러와서 사용할 수 있음

>>이 여러 개의 모듈을 합쳐서 하나의 패키지로 만들어 두면, 다른 프로그래머들도 npm을 통해 쉽게 설치하여 사용할 수 있음
npm(Node Package Manager)


노드 특징

V8엔진
자바스크립트는 코드를 한 줄씩 해석하면서 실행하는 인터프리터 방식을 사용하여 속도가 느려 문제가 되었지만, 구글(크롬)의 V8엔진으로 해결
>>V8엔진은 자바스크립트 코드를 네이티브 코드로 바꾼 후 실행할 수 있는데, 노드는 V8엔진을 이용해 자바스크립트 코드를 빠르게 실행할 수 있음

이벤트 기반 방식
입력장치로 데이터를 전송했을때만 작동하는 방식
자원 최소화 가능?

Non-Blocking
비동기 참조

Single Thread

개발 도구

책에서는 브라켓과 크롬을 사용한다.  [2]부턴 직접 써볼듯?
시간: 댓글 없음:
라벨:

2017년 10월 16일 월요일

TDD이란? / Junit 연습. 예제

먼저 테스트 주도 개발(TDD, Test Driven Development)란??

-설계 이후 코드 개발 및 테스트 케이스를 작성하는 기존의 개발 프로세스와 다르게 테스트 케이스를 작성한 후 실제 코드를 개발하여 리펙토링 하는 절차

[기존]


[TDD]

TDD장점은?

-작업과 동시에 테스트를 진행함으로써 실시간으로 오류를 파악할 수 있음
-짧은 개발주기를 통해 고객의 요구사항을 빠르게 수용하거나 피드백을 줄 수 있고, 현재 상황을 쉽게 파악할 수 있음
-자동화 도구를 이용해 TDD의 테스트 케이스를 단위테스트로 사용가능
[JUnit, cppUnit, NUnit 등]


단점은? 

-기존의 개발 프로세스에 테스트 케이스 설계까지 추가되므로 코드 생산 비용이 높아짐

>>하지만 객체지향적인 코딩 능력을 향상시킬 수 있다고 한다. 



////////////////////////////////////////////////////////////////

<Junit을 이용한 기본테스트>

간단한 계산기 자바 코드가 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.net.mypage;
public class Calculator {
    int add(int i, int j){
        return i+j;
    }
    
    int subtract(int i, int j){
        return i- j;
    }
    
    int multiply(int i, int j){
        return i*j;
        
    }
    
}
cs
이것을 테스트하려면 상단 메뉴의 New Java Class 부분의 JUnit Test case를 생성하면 된다. 


그 후 이렇게 코드 작성 후 Run As 부분의 JUnit test를 통해 테스트 가능하다 .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.net.mypage;
import static org.junit.Assert.*;
import org.junit.Test;
public class CalculatorTest {
    
    @Test
    public void add() {
        Calculator cal = new Calculator();
        int res = cal.add(2, 4);
        //과거 였으면 sys.out으로 확인했겠지만 junit은 assert를 통해 (기대하는 값, 결과 값) 으로 확인할 수 있음 
        assertEquals(6, res);
        
    }
    
}
테스트 성공시 이런 화면이 보이고 실패시 failures 부분에 숫자가 올라간다.



<테스트 독립성>

Before와 after 어노테이션을 통해 test메소드 실행하기 전과 후 처리를 해줄 수 있다.
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
package com.net.mypage;
import static org.junit.Assert.*;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
public class CalculatorTest {
    private Calculator cal;
    
    
    //before를 통해 test 메소드가 실행될때마다 setup이라는 메소드가 호출됨  cal 초기화 작업을 매번함 (선 처리 작업)
    @Before 
    public void setup(){
        cal = new Calculator();
        System.out.println("setup");
    }
    
    
    @Test
    public void add() {
        
        assertEquals(8, cal.add(1, 7));
        System.out.println("add!");
    }
    
    @Test
    public void mul() {
        
        assertEquals(8, cal.multiply(1, 8));
        System.out.println("multiply");
    }
    //after는 test메소드 실행 후 실행됨 (후처리 작업) >>before와 after를 통해 테스트 독립성 제공 
    @After
    public void after(){
        System.out.println("after");
    }
    
    
}
cs


콘솔창으로 보는 메소드 실행 순서

Test메소드 실행하기 전 Before가 선언된 setup메소드 실행 > test 실행 > after 실행
두번째 test 실행하기 전 다시 before 실행 > test 실행 > after 실행



시간: 댓글 없음:
라벨:

서블릿과 JSP

서블릿이란?(Servlet) 

-자바 기반으로 만드는 웹 어플리케이션 프로그래밍 기술 
-웹 서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종 
-동적 웹어플리케이션 컴포넌트
- .java
-자바 스레드 이용하여 동작
-MVC패턴에서 Controller로 이용됨
-서블릿은 서블릿 컨테이너에서 관리됨 


서블릿 컨테이너란?

-서블릿의 생명주기를 관리하고 요청에 따른 스레드를 생성해
-클라이언트의 Request를 받아주고 Response를 보낼 수 있게 웹 서버와 소켓을 만들어 통신
-대표적으로 Tomcat 
-통신 지원, 생명주기 관리, 멀티 스레딩 관리, 선언적인 보안 관리, JSP지원 등의 역할을 함


JSP(Java Server Page)란?

-자바 소스 코드 속에 HTML 코드가 들어가는 서블릿과 반대
-HTML속에 자바 코드가 들어가는 구조를 갖는 웹 어플리케이션 프로그래밍 기술
-자바 코드는 <% 코드 %> 형태로 사용
-JSP또한 결국 컴파일 후에 Sevlet코드로 변환되어 작동하기 때문에 Servlet과 거의 같다.
(JSP는 페이지 요청이 있을 시에는 최초에 한 번 자바코드로 변환된 후서블릿 클래스로 컴파일 된다.)
-서블릿과 JSP는 상호 연계되어 JSP에서 정적인 부분을 담당, 서블릿은 보다 동적인 부분을 처리하여 보다 효율적인 웹사이트를 구성할 수 있다. (JSP 뷰, Servlet 컨트롤러)




참조:


시간: 댓글 없음:
라벨:

2017년 10월 7일 토요일

DB모델링

데이터 모델링(data modeling)이란 주어진 개념으로부터 논리적인 데이터 모델을 구성하는 작업을 말하며, 일반적으로 이를 물리적인 데이터베이스 모델로 환원하여 고객의 요구에 따라 특정 정보 시스템의 데이터베이스에 반영하는 작업을 포함한다. 후자의 의미로 흔히 데이터베이스 모델링으로 불리기도 한다.[1]





데이터모델링 관련 참조
http://vnthf.logdown.com/posts/2016/03/18/650365
데이터 관계 참조
http://tech.devgear.co.kr/db_kb/331
시간: 댓글 없음:
라벨:

mybatis란?

http://www.mybatis.org  설명
마이바티스는 개발자가 지정한 SQL, 저장프로시저 그리고 몇가지 고급 매핑을 지원하는 퍼시스턴스 프레임워크이다. 마이바티스는 JDBC로 처리하는 상당부분의 코드와 파라미터 설정및 결과 매핑을 대신해준다. 마이바티스는 데이터베이스 레코드에 원시타입과 Map 인터페이스 그리고 자바 POJO 를 설정해서 매핑하기 위해 XML과 애노테이션을 사용할 수 있다.


MyBatis의 특징
 - 간단하다 : 간단한 퍼시스턴스 프레임워크
 - 생산성 : 62%정도 줄어드는 코드 , 간단한 설정
 - 성능 : 구조적강점(데이터 접근 속도를 높여주는 Join 매핑)
             여러가지 방식의 데이터를 가져오기 전략 (가져오기 미루기 , SQL 줄이기 기법)
 - 관심사의 분리 : 설계를 향상 (유지보수성)
                          리소스를 관리하여 계층화를 지원(커넥션,PreparedStetement,결과셋)
 - 작업의 분배 : 팀을 세분화하는 것을 도움
 - SQL문이 애플리케이션 소스 코드로부터 완전 분리
 - 이식성 : 어떤 프로그래밍 언어로도 구현가능 (자바,C#,.NET,RUBY)
 - 오픈소스이며 무료이다.


예시) 내가 쓴 부분 UserMapper.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
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
<?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="UserMapper">
     
     <!-- 아이디로 회원정보  불러오기 -->
     <select id="findByID" resultType="net.cot_pr1.domain.User">
         select * from users where userid= #{userid}
     </select>
     
     <!-- 아이디로 프로필 이미지 찾기 -->
     <select id="findprofile" resultType="string">
         select profileimg from users where userid= #{userid}
     </select>
     
     <!-- 회원가입 -->
     <insert id="create">
         insert into users ( userid, password, name, email) values (#{userid}, #{password}, #{name}, #{email})
     </insert>
    
    <!-- ...나머지부분 생략 -->
     
 </mapper>
cs


ibatis > mybatis 변경됨..
차이점
http://uwostudy.tistory.com/19
http://aid.altibase.com/pages/viewpage.action?pageId=11207174


참고, 출처
http://www.mybatis.org/mybatis-3/ko/
http://ekfqkqhd.tistory.com/entry/mybatis%EB%9E%80
http://alicepure.blogspot.kr/2013/10/mybatis.html
시간: 댓글 없음:

제네릭이란?

제네릭Generics
ex) ArrayList<E>

다양한 타입의 객체들을 다루는 메서드나 컬렉션 클래스에 컴파일시의 타입 체크(compile-time type check)를 해주는 기능이다.

>>쉽게 말해 다룰 객체를 미리 명시해줌으로써 형변환을 사용하지 않고 사용하는 것.....
<String>제네릭스는 String 객체만 사용 가능, 다른 자료형 사용하면 오류!?

ArrayList<String> StringList = new ArrayList<String>();
StringList.add("a");
StringList.add("b");

ArrayList<Integer> IntegerList = new ArrayList<Integer>();
IntegerList.add(1);
IntegerList.add(2);

ArrayList<Tv> TvList = new ArrayList<Tv>();
TvList.add(newTv());

ArrayList List = new ArrayList();
List.add(1);
List.add("a");
>>제네릭스를 사용하지 않는 경우 Object타입으로 간주된다. 그래서 형변환을 해줘야함!!

<> 형태
<E> : Element(자바 컬렉션에서 주로사용)
<K>,<V> : Key, Value(map 자료구조에서 주로 사용)
<T> : 일반적인 제네릭 타입을 의미
<N> : Number를 의미

**컬렉션 정리
http://hackersstudy.tistory.com/26

제네릭의 장점
1. 타입 안정성을 제공한다.

2. 타입체크와 형변환을 생략할 수 있으므로 코드가 간결해 진다.




참고
http://arabiannight.tistory.com/entry/%EC%9E%90%EB%B0%94Java-ArrayListT-%EC%A0%9C%EB%84%A4%EB%A6%AD%EC%8A%A4Generics%EB%9E%80


http://kiwi99.tistory.com/3

시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)
  • 게시판 스크립트 방지 관련
    포폴로 제출한 홈페이지를 잠깐 들어가봤는데 내가 설정하지 않은 alert창이 떠서 당황하였다. 인사담당자님께서 테스트하신 것같았는데 글 제목들은 공백이었고 내가 입력한적이 없는 alert창이 자꾸 발생하였다.  어디서 자꾸 발생하나 개발자도구로...
  • 자바 로그(log) 남기기 - log4j, log4j2, logback, slf4j (간단한 logback 실습)
    로그란? (log) 애플리케이션의 상태를 관찰할 수 있도록 애플리케이션이 제공하는 정보  log4j, logback, log4j2  셋 다 java 로깅 유틸리티이다. 스프링프레임워크에서는  예전에는 commons.logging을 기...
  • 김영한님의 JPA프로그래밍 기본기 다지기 메모
    김영한님의 JPA 프로그래밍 기본기 강의 회사에 입사한 지 얼마 안됬을 때 사수가 ORM에 대해 한번 훑어보라며, 책을 추천해준 적이 있었다. 그 때는 정신도 없어서 나중에 봐야겠다... 라고만 생각했는데, 인프런 인강과 다른 블로그에 있는 스...