분류 전체보기
-
Javascript Toast grid 예시DEV/javascript 2022. 2. 16. 17:28
기존에 작성하였던 그리드 예시가 가독성이 좋지 못하여 새로 작성하였다. 사실 이 글이 이렇게 많이 볼 줄 몰랐다... 기존에 작성한 내용은 하단에 그대로 남겨 두었으니 옛날 글을 보고싶다면 스크롤을 내리면 된다. 간단한 Toast grid 예제는 다음과 같다. sample.html sample.js const initGrid = () => { // 그리드 객체 const Grid = tui.Grid; /** * Grid 테마 커스텀 * Grid.applyTheme('striped', {...}) : * @param {String} default : 프리셋 (기본) * @param {String} striped : 프리셋 (줄무늬) * @param {String} clean : 프리셋 (클린) * - pr..
-
Javascript 물음표 연산자와 물음표 두개 연산자 (? 연산자와 ?? 연산자)DEV/javascript 2022. 2. 15. 17:31
성격 급한 사람들을 위해 결과부터 1. ? [ 조건 ] ? [ 조건이 참인 경우 ] : [ 조건이 거짓인 경우 ] 2. ?? A ?? B, A 가 Null 또는 Undefined인 경우 B를 사용 개발을 할 때 검색이 참 여렵다고 느낀다. 본인의 경우 Javascript 에서 ? 와 ?? 문법을 찾을떄 물음표 연산자 또는 물음표 두개 연산자라고 검색하여 찾게 되었다. 찾아 보니 ?는 Conditional (ternary) operator, ??는 Nullish coalescing Operator 라고 부르는 듯 하다. 참 여럽다... 아무튼 두 연산자에 대해 알아보자. 샘플 HTML false true 물음표( ? ) 연산자 (Ternary operator) test.js "use strict" cons..
-
Javascript Data 속성 활용 예시DEV/javascript 2022. 2. 12. 23:08
Data 속성을 활용하는 방법은 아주 다양하다. 허접하지만 쓰는 방법의 간단한 예시를 작성해보았다. HTML 샘플 조회 Javascript 예시 "use strict" const test = { getElData : new function(){}, }; test.getElData = (el) => { console.log("start"); // 어디선가 데이터를 가지고 왔다고 가정 (수신한 데이터). const apiObj = { "name" : "석봉", "age" : "29", "region" : "경기도", "state" : "바보" } $(el).find('div', 'a').each(function(i, el){ // data 속성 이름 const dataName = $(el).attr('dat..
-
Javascript DATA 속성DEV/javascript 2022. 2. 12. 19:43
html 에서는 데이터를 저장하고 들고 있기가 어렵다. 그래서 편법으로 사용되던 방식이 "display: none,", "visibility: hidden" 를 사용하여 태그를 숨기고 해당 태그에 데이터를 잠시 보관하는 방식이다. (실제로 첫 번째 프로젝트에서 해당 방법을 사용하였다. 보안적으로 문제가 되지 않는 작업이니 그렇게 사용하라고 사수가 말해주었...) 하지만 HTML5 부터는 DATA 속성을 지원한다. ( html 태그 내 data-***="testData" 와 같은 방식으로 사용되는 친구들) 개인적으로 공부하면서 듣던 강의에서는 "실제 현업에서 DATA 속성을 사용하는 걸 본인은 못 봐서 잘 사용하는지 모르겠다. 알고 있으면 나쁠 건 없어 보인다" 라는 말을 들었으나 이번 프로젝트에서 아주아..