[개발일지] 화면 기능 개발하기

 오늘 업무는 화면 개발을 해야 합니다. 요즘에는 쿼리로 데이터를 추출하여 협업과 커뮤니케이션하는 경우가 많았다 보니, 오랜만에 화면 개발을 진행하게 되었습니다. 무엇부터 해야 할지 벙 찝니다. 가끔씩 코딩을 해주어야 하는데, 다 잊어버리지는 않았는지 불안감이 듭니다.

 

 

구현 목표 정의

 

  정신차리고, 무엇을 어디서부터 어디까지 개발을 해야 하나 명확히 정리해야겠습니다. 

 

 화면에서 이미지를 클릭 시 그리드에 데이터를 노출하는 비교적 간단한 기능입니다. 

 

이렇게 생긴 아이콘을 클릭하면

이거와 비슷한 데이터를 화면 하단에 노출시켜 주어야 합니다. -출처:Toast Grid

 

'아이콘 클릭 -> 화면 하단 레이아웃에 데이터 노출' 기능입니다. 그다지 어려워 보이지는 않네요.

 

 

적용 중인 라이브러리&프레임워크

 

일단 기존 화면이 구현된 상황에서 기능을 추가하는 작업이기 때문에 어떤 라이브러리와 프레임워크가 적용되어 있는지 확인해 봤습니다.

 

개발언어 & DB

• Python
• Javascripts
• DB: PostgreSQL

Python으로 Backend가 구현되어 있습니다. 때문에 Python 웹 프레임워크인 DJango Frameworks가 적용되어 있습니다. 

 

이번 업무는 화면 개발이 위주이기 때문에 화면에 적용된 라이브러리 리스트 한번 더 정리했습니다.

 

화면에 적용된 라이브러리&프레임워크

• JQuery
• JQuery UI : 팝업을 위해 적용되어 있습니다.
• Bootstrap 4 : 반응형 UI 프레임워크
• JqCloud : 오픈소스 워드 클라우드 라이브러리
• Toast Grid: NHN에서 만든 오픈소스 그리드 라이브러리
• Toast Chart: NHN에서 만든 오픈소스 차트 라이브러리

JQuery는 개발하시는 분이라면 익숙한 라이브러리일 겁니다. Toast Grid와 chart는 NHN에서 만든 오픈소스 라이브러리인데 사용하기 쉽고 가볍습니다. 관심 있으신 분들은 아래 공식 사이트를 참고해주세요. 

 

 

https://ui.toast.com/tui-grid

TOAST UI :: Make Your Web Delicious!

 

 

그럼 이제, 개발을 시작하겠습니다. 

 

---

 

기능 개발

 

아이콘 클릭 기능

 

 

으아아~ 아이콘이 한 두개가 아닙니다.

이외에도 적용해야 할 아이콘 개수가 총 15개입니다. 아이콘을 클릭하면 해당 유저에 알맞은 데이터가 하단에 그리드로 노출되어야 합니다. 

 

이렇게 같은 Element가 여러 개가 있을 경우 동일한 Element에 이벤트를 걸어야 하는데,  id를 기준으로 이벤트 바인딩을 하기보다는, 클래스로 찾는 것이 수월합니다. 

 

위의 이미지 엘리먼트마다 값을 구분할 수 있는 id가 부여되어 있네요. 해당 id값을 뽑아내어 데이터를 호출하겠습니다.

$(".group-rank-style-area").on("click",function(e){
	const selectedId = $(this).children("img").attr("id").split("-")[0];
    
        if(selectedId === "view"){
        // 이하 생략
        }
});

id값을 확인해보니 제가 필요한 데이터는 구분자 "-"의 첫 번째 값이라서 split를 사용했습니다.

 

JQuery에 익숙하신 분들은 간단한 코드일 수 있을 듯합니다. 아직 JQuery에 익숙하지 않으신 분들과 처음 배우시는 분들은 가끔 UI에서 어떤 Selector를 가져와야 할지 헷갈릴 때가 있습니다. 이때에는 추론이 필요한데, 내가 이 UI를 사용하는 사용자 입장이라면, 어떤 영역을 클릭하고 어떤 액션을 취할지 생각해보면 감을 잡을 수 있을 것입니다.

 

UI에서 사용자가 무엇을 클릭하였는지 구분하고 필요한 Element를 추출할 수 있어야 합니다. 

 

호출한 데이터를 그리드에 적용하기

 

 데이터 호출 부분은 일반적인 ajax를 활용했으니 제외하도록 하겠습니다. 

아래 코드를 설명하기에 앞서, 앞단에서 데이터를 "setData" 변수에 할당한 상태입니다.  아래 코드는 Toast Grid의 옵션을 설정하기 위한 Object입니다. 

    const gridOptions = {
        el: document.getElementById(elemId),
        data: setData,
        scrollX: false,
        scrollY: true,
        bodyHeight: 340,
        selectionUnit: 'row',
        usageStatistics: false,
        columns: [
            {
                header: 'No',
                align: 'center',
                name: 'no',
                width:30
            },
            {
                header: "유저 아이디",
                name: 'user_name',
                formatter: function (dataSet) {
                    const profilePictureUrl = dataSet["row"]["profile_picture_url"],
                        userName = dataSet["row"]["user_name"],
                        webSite = dataSet["row"]["website"],
                        rtnImageElem = '<img class="img-responsive mx-auto d-block grid-profile-img" src="' + profilePictureUrl + '" data-holder-rendered="true">',
                        rtnTextElem = '<p id="follower-name-top-2" className="text-center font-weight-bold m-0 mt-1 p-0">' + userName + '</p>';
                    return rtnImageElem + rtnTextElem;
                }
            }, {
                header: 'foloowers',
                name: 'cur_followers_count',
                align: 'center',
                formatter: fn_convertNumber
            }
        ], //columns

    };

Toast Grid는 그리드 옵션 값을 Object 형태로 Parameter를 받아 처리합니다. API 문서를 참조하여 원하는 옵션을 설정 후 구현할 수 있습니다. 

 

여기서에서는 Coloum 옵션 중 '유저 아이디' 칼럼에 formatter를 적용하여 값을 요구사항에 맞게 커스터 마이징을 했습니다. 화면상에 유저의 이미지가 노출되어야 하기 때문에 url 주소를 받아서 구현을 했습니다. 

 

{
    header: "유저 아이디",
    name: 'user_name',
    formatter: function (dataSet) {
        const profilePictureUrl = dataSet["row"]["profile_picture_url"],
            userName = dataSet["row"]["user_name"],
            webSite = dataSet["row"]["website"],
            rtnImageElem = '<img class="img-responsive mx-auto d-block grid-profile-img" src="' + profilePictureUrl + '" data-holder-rendered="true">',
            rtnTextElem = '<p id="follower-name-top-2" className="text-center font-weight-bold m-0 mt-1 p-0">' + userName + '</p>';
        return rtnImageElem + rtnTextElem;
    }
}

위 코드는 처음에 'dataSet' 값을 확인할 수 없으니 키 값을 알 수 없습니다. API문서를 면밀히 찾아보았지만 세부 내용까지 알려주는 문서는 찾지 못했습니다. 이럴 때는?  console.log로 Object 구조를 파악하는 것이 더 효율적입니다. 

 

console.log로 dataSet을 확인해 보면 아래와 같은 구조로 되어 있습니다.

 

{
	row: {}, // 데이터
    column:{}, //  컬럼 옵션 정보
    value: 'string'
}

콘솔로그에 찍힌 값 왼쪽 화살표 버튼을 클릭하여 세부 키값을 알 수 있습니다.

 

"row"라는 키 값에 해당 row의 데이터가 들어있습니다. 여기에서 원하는 값을 추출해서 사용합니다. Object형태이기 때문에 dataSet["row"]["profile_picture_url"] 이라는 형식으로 접근합니다.

 

Toast Grid에 대한 API 설명은 아래 링크를 참고해 주시기 바랍니다. 예제 페이지도 잘 구성되어 있으니 잘 살펴보면 쉽게 적응할 수 있을 것입니다.

https://nhn.github.io/tui.grid/latest/Grid

https://nhn.github.io/tui.grid/latest/Grid/

 

 

결과

자, 이제 되었습니다. 결과를 확인해 보겠습니다.

으잉? 이미지가 안나옵니다.

 

콘솔을 살펴보니 404 에러가 뿜어져 나옵니다.

url 주소를 찾을 수 없어서 발생하는 에러입니다. 잘못된 url 주소를 저에게 줬으니 이제 담당자를 닦달하러 가야겠습니다. 

 

 

 

참고로 url로 이미지를 불러오지 못할 경우 대체 이미지를 삽입하려면 

 

<img onerror="this.src='대체 이미지나 함수'">

 이렇게 입력하면 간단합니다만, 일부 브라우저에서는 동작하지 않을 수 있습니다. '

 

더 나은 방법은 아래 'onError'을 쓰는 방법일 듯합니다.

https://kyounghwan01.github.io/blog/etc/html/img-onload/#onload

html - img - 이미지 로딩 후 렌더링

 

 

 

---

오늘은 화면 개발에 대해서 적어보았습니다. 자바스크립트만 다뤄보기 위해 데이터 호출과 DB Table 쿼리, HTML/CSS 부분은 생략을 했습니다. 어쩌다 보니 Toast grid만 설명하고 있네요. 오픈소스를 잘 활용하면 도움이 되지만 오픈 소스라고 하여 만능은 아닙니다. 일부 엉성한 오픈 소스도 있으니 잘 살펴봐야 합니다.  도움이 되셨길 바랍니다.