Dev/[Javascript] 썸네일형 리스트형 [javascript] ES6 - 템플릿 리터럴(template literals) INTRO Frontend 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. ES6(2015) 에서 추가된 템플릿 리터럴에 대해서 알아본다. 0. 서론 - 기존 자바스크립트에서 문자열을 사용할 때, " " 또는 ' ' (큰따옴표, 작은따옴표) 를 사용하여 선언하였다. - 템플릿 리터럴은 `` (백틱) 문자를 사용하여 문자열을 선언하며, 아래와 같은 기능들을 포함한다. 1. 여러 줄 문자열을 쉽게 표현(multi-line string) 2. 표현식을 끼워넣어 가독성 증가(expression interpolation) 3. 태그를 지정하여 태그된 함수를 사용할 수 있다.(tagged template literal) - 아래는 간단한 템플릿 리터럴의 예이다 con.. 더보기 [javascript] var, let, const 차이점 INTRO Frontend 개발을 진행하면서, 모호했던 javascript의 변수 선언 키워드에 대한 개념들을 다시 한번 정리하기 위한 포스팅이다. 0. 서론 - 기존 javascript는 var이라는 키워드로만 변수를 선언하였다. - ECMAScript2015(ES6) 가 2015년에 도입되면서 let, const 키워드를 사용할 수 있게 되었다. - 이 3가지 키워드는 지역/전역 범위(스코프), 호이스팅 등의 개념에서 차이가 있다. - 결론부터 얘기하면 var는 더 이상 사용하지 않는것이 좋다. - 아래와 같은 큰 기업들의 javascript 스타일가이드를 보면 사용을 지양하라는 얘기와 함께 그 이유를 잘 적어놓았다. - airbnb javascript 스타일가이드(https://github.com/.. 더보기 [javascript] bootstrap datatable 사용해보기 INTRO Bootstrap 의 플러그인인 DataTable에 대해서 소개해보고자 한다. 1. table 태그 생성 --> 우선 Datatable로 사용하고자 하는 테이블 태그를 생성한다. Model MAC SAID User (+) New {% for idx in range(allDevices|length) %} {{allDevices[idx]['model']}} {{allDevices[idx]['devMacId']}} {{allDevices[idx]['said']}} {{allDevices[idx]['userName']}} {% endfor %} 2. 초기화하기 -->id는 table_id, 이제 script 태그 안에 설정을 해준다. $(document).ready(function () { initD.. 더보기 [javascript] json 데이터 만들기 INTRO Javascript 에서 json 데이터를 만드는 2가지 방법에 대해 소개한다. 1. 객체 생성 후 값 넣어주기 (동적 json 생성에 적합) --> 1 Depth --> 단순한 구조이다. let Item1 = new Object(); Item1.name = '예약 취소'; Item1.id = '954'; console.log(Item1); --> 2Depth --> 위 1Depth에서 생성된 Object들을 배열로 담아준다. let arrItem1 = new Array(); let Item1 = new Object(); Item1.name = '예약 취소'; Item1.id = '954'; arrItem1.push(Item1); console.log(arrItem1); --> 이런 식으로 새.. 더보기 이전 1 2 다음
