재밌는 Coding

1. 시험환경

    · 윈도우

    · node v20.15.0

    · npm 10.7.0

2. 목적

    · next.js 프로젝트를 신규 생성하는 방법을 알아보자.

3. 적용

    ① 프로젝트 폴더를 생성한다.

        - 예시) nextjs 폴더를 생성한다.

    ② nextjs 프로젝트를 생성한다.

        - npx  create-next-app@latest  ./nextjs

    ③ 설치한 의존성 라이브러리를 선택하면 설치가 진행된다.

    ④ 프로젝트를 실행한다.

        - npm  run  dev

4. 결과

1. 시험환경

    ˙ Javascript

2. 목적

    ˙ Javascript 이벤트 처리 코드를 참고하자.

3. 적용

    ① 변경 이벤트 처리 코드

        - <select>선태한 option value를 selected 변수에 저장

    ② 클릭 이벤트 처리 코드

    ③ 활성화 및 비활성화 처리 코드

    ④ <select>태그 selected option 값 가져오기

    ⑤ Text 값 변경 처리 코드

    ⑥ checkbox 변경(체크, 해제) 이벤트 발생시 처리 코드

        - 변경 이벤트가 "체크"인 경우 처리 코드

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

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

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를 사용하자.

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