재밌는 Coding

1. 시험환경

    - Spring MVC Project

    - Spring Framework v5.2.13.RELEASE

    - Spring Security ver : Spring Framework 버전에 따름 ( ${org.springframework-version} )

2. 목적

    - Spring Security를 적용 후 Login 및 Logout 기능 테스트

3. 적용

    ① security-config.xml 주요 파라미터 설명

        - pattern : 요청 URL Root(/) 이하 모든 resource에 대하여 로그인 인증 적용

        - default-target-url : 로그인 성공시 전환 페이지

        - logout-success-url : 로그아웃 성공시 전환 페이지

        - {noop} : 암호화 인코딩을 적용하지 않음

4. 결론

    - 프로젝트명 이하 모든 경로 및 자원 요청시 로그인 화면으로 전환

    - {프로젝트}/logout 링크 연결된 버튼 클릭 시 로그아웃 화면으로 전환

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - Spring MVC Project

    - Spring Framework v5.2.13.RELEASE

    - Spring Security ver : Spring Framework 버전에 따름 ( ${org.springframework-version} )

2. 목적

    - Spring MVC 프로젝트에 Security를 설정한다.

    - 초기 설정 후 초기 Login 화면이 나타는 것을 확인한다.

3. 적용

    ① Spring Security 관련 라이브러리를 설치한다.

    ② Security 설정 파일을 생성한다.

        - appServlet 우클릭 → New → Spring Bean Configuration File 메뉴 클릭

        - Security 설정 파일명 입력

        - security 어노테이션 추가

        - security 설정

    ③ web.xml 설정

        - security 설정 파일을 등록한다.

        - Security 관련 필터를 등록한다. 클라이언트 요청을 가로채서 보안 절차를 수행한다.

4. 결론

    - 프로젝트에 접근 요청을 하면, 스프링 시큐리티에서 제공하는 로그인 화면이 나타난다.

    - 에러 처리 및 customize 작업을 추가적으로 하자.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - javascript, jQuery, ajax

2. 목적

    - 테이블 데이터를 javascript로 직접 코딩하여 json, jsonArray 형식으로 저장한다.

3. 적용

function createTable() {
    console.log("=== createTable() ===");

    var theadLength = $('#markerTable > thead > tr').length
    var tbodyLength = $('#markerTable > tbody > tr').length

    // remove body rows
    if(tbodyLength > 0)
    {
        $('#markerTable > tbody > tr').remove();            // 테이블 body 부분 기존 내용 삭제
    }

    // create header
    if(theadLength == 0)
    {
        var tblHead = '';
        for(var i = 0; i < header.length; i++)
        {
            tblHead += '<td>' + header[i] + '</td>'
        }
        $('#markerTable > thead').append('<tr>' + tblHead + '</tr>');        // 테이블 최초 생성시 header 부분 추가
    }

    // create body rows
    for(var i = 0; i < csvRespList.length; i++)
    {
        var tblRow = '';
        var item = csvRespList[i];
        for(var j = 0; j < header.length; j++)
        {
            tblRow += '<td>' + item[header[j]] + '</td>'
        }
        $('#markerTable > tbody:last').append('<tr>' + tblRow + '</tr>');        // 테이블 body 부분 추가
    }
}

4. 결론

    - jsGrid와 같이 잘 만들어진 table library를 사용하자.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - javascript, jQuery, ajax

2. 목적

    - ajax를 이용하여 URL 호출하는 코드

    - front-end에서 수집한 json object를 controller로 전달하는 코드

3. 적용

var result = jsonFromTbl($('#markerTable'));

if(result != null)
{
    console.log('result', result);

    $.ajax({
        url: "sendMdbData.do",                // 호출할 URL
        type: "POST",                             // 호출 type
        data: JSON.stringify(result),           // 전달 데이터 : result(JSON Object)를 문자열로 변환(JSON.stringify)
        dataType: "json",
        contentType: "application/json; charset=UTF-8",
        success: function(response) {
        }
    });
}

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - javascript

    - jQuery

2. 목적

    - 테이블 데이터를 javascript로 직접 코딩하여 json, jsonArray 형식으로 저장한다.

3. 적용

function jsonFromTbl(targetTbl) {
    
    var rowSize = targetTbl.find('tbody > tr').length;         // 대상 테이블의 행의 갯수
    var colSize = targetTbl.find('thead > tr > td').length;    // 대상 테이블의 열의 갯수

    if(rowSize < 1)
    {
         alert("테이블에 데이터가 없습니다!");
         return;
    }

    var objArr = new Array();      // 하나의 JSON Object (행)을 저장할 배열 변수
    var tr, td;
    for(var i = 0; i < rowSize; i++)
    {
        tr = targetTbl.find('tbody').find('tr:eq(' + i + ')');

        var obj = new Object();
        for(var j = 0; j < colSize; j++)
        {
            td = tr.find('td:eq(' + j + ')').text();
            obj[header[j]] = td;         // JSON Object에 테이블 컬럼명을 key로 저장, 각 셀을 값으로 저장
        }
        objArr.push(obj);
    }

    console.log(objArr);    // 테이블에서 획득한 데이터 확인

    return objArr;
}

4. 결론

    - jsGrid 등과 같은 잘 만들어진 테이블 library를 사용하자.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- state, props 기본 사용법을 학습한다.

3. 적용

① state 객체를 정의한다.

    - state 객체 안에 여러 값이 필요할 경우, {key:value} 형태의 json 양식으로 선언한다.

    - WorldList 컴포넌트를 호출하면서, "{this.state.이름}"으로 전달하였다.

    - 즉, 현재 컴포넌트의 state를 하위 컴포넌트의 props로 전달할 수 있다.

② WorldList 컴포넌트에서 props 값을 참조하여 데이터 처리한다.

    - App.js에서 {this.state.이름}으로 전달한 것을 "this.props.이름"으로 참조하였다.

4. 결과

    - this.state.items를 추가하면서 변경된 값이 출력되는지 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 컴포넌트 파일 단위로 분리하여 관리하는 방법을 학습한다.

3. 적용

① src/components 폴더를 생성하고 클래스 컴포넌트 단위별로 파일을 만든다.

    - import 컴포넌트이름(사용자 정의 태그) from '폴더/파일'; 형식으로 App.js 파일에 임포트한다.

② 컴포넌트 단위로 파일을 생성한다.

    - 클래스 컴포넌트는 Component를 상속하므로, {Component}를 임포팅해야 한다.

    - 작성한 컴포넌트를 외부 파일에서 사용하기 위해서 "export default 클래스명" 마지막 문구를 반드시 추가한다.

4. 결과

    - 실행 결과를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 작성한 컴포넌트에 매개변수(props)를 전달하고 참조하는 방법을 학습한다.

3. 적용

① 컴포넌트 호출과 함께 매개변수를 전달한다.

    - HelloWorld 컴포넌트 호출과 동시에 "Hello World"라는 문자열을 갖는 title(props)을 전달한다.

    - Inform 컴포넌트 호출과 동시에 "Information about your selection..."이라는 문자열을 갖는 article(props)을 전달한다.

② 매개변수(props)를 전달 받은 컴포넌트는 "this.props.변수"의 형태로 전달 받은 값을 참조할 수 있다.

4. 결과

    - 컴포넌트 호출과 함께 매개변수(props)를 전달 하고 참조하는 법을 확인하였다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.