IT/자바스크립트14 [javascript] es6 export, import 사용하기 javascript 의 export와 import는 es6(es2015) 에서 모듈 시스템을 이용하여 사용하기 위해 정의된 API이다. 하지만 몇몇 브라우저에서는 아직 지원하지 않기 때문에 webpack같은 도구를 통한 번들 작업이 필요하다. 이번 포스팅에서는 그 각각의 사용법을 알아보자. 1. export export 는 내부 스크립트 객체를 외부 스크립트로 모듈화하는 것이다. 물론, export를 선언하지 않았으면 외부 스크립트에서 import를 통해 사용할 수 없다. export는 스크립트 내 모든 객체에 선언할 수 있다. export 방식에는 Named와 default 방식이 있다. named export 방식 //각각 선언 export const exString = 'string'; export.. 2018. 8. 11. [javascript] 배열 요소 더하기 문자 연결하기 reduce 개발을 하다 보면 배열 안의 요소를 하나의 문자열로 연결해주거나 모든 값을 더해야하는 상황이 있을 것이다. 심지어, 배열로 이루어진 객체들의 값만 더해야하는 상황도 온다. 배열의 각각의 요소를 이용하여 하나의 값을 구하고 싶을때는 reduce 함수를 사용하면 된다. reduce는 자바스크립트에서 배열 각 요소에 대해서 작성한 함수를 적용하며 하나의 값으로 줄여주는 함수이다. reduce의 사용법이다. [].reduce(function (preValue, currentValue, Index, array) { }, initialValue); preValue : 이전에 반환한 값이다. 처음 시작할 때 initialValue가 존재하지 않으면 index가 0인 요소부터 실행하고, 존재한다면 initialValu.. 2018. 8. 11. [javascript] 글자 수 제한 및 체크하기 javascript로 입력란에 글자 수를 바이트 단위로 세고, 제한하는 방법을 작성하겠다. 아 참고로 바이트가 아닌 글자 수로 제한하고자 한다면 입력 태그에 maxlength 속성을 추가해주면 된다. 영어와 한글은 차지하는 바이트 수가 다르다. 한글은 2바이트, 영어는 1바이트를 차지하고 있다.그러므로 총 바이트를 계산하고자 한다면 이 점을 고려해야 한다. 우선 결과부터 보도록 하자. 0/0 스크립트를 처음 실행하면 글의 최대 바이트 수를 설정한다. 그리고 입력을 할때마다 한글은 2, 영어는 1로 계산이 된다. 이제 30byte 넘게 써보면 alert 창이 뜨면서 다시 내용에 30byte 까지 재작성 된다. 이제 코드를 보자. 0/0 언제나 그렇듯 html코드는 간단 명료 하다. 단지 특별하다면 바이트 .. 2018. 8. 11. [javascript] 자바스크립트 기반의 pagination 만들기 2편 이전 포스팅에서 스크립트로 작동하는 pagination을 봤다. 이제 그 코드를 파헤쳐 보자.우선 html 부터 보자.보시는 바와 같이 특별한 코드는 없다. 테이블을 만들어주는 table코드안에 필요한 내용들을 넣은 것 뿐이다.하지만 테이블 머릿글은 고정하고 내용만 계속 갱신해주어야 하기 때문에thead와 tbody를 통해 구분해주었다. 번호 내용 이제 스크립트 코드를 순서대로 파헤쳐 보자. 우선 테이블 안에 들어갈 내용부터 객체들로 이루어진 배열로 만들자. 글 내용은 독자들이 편한대로 설정하면 된다 var list = [ {num: 1, content: '가'}, {num: 2, content: '나'}, {num: 3, content: '다'}, {num: 4, content: '라'}, {num: .. 2018. 8. 11. 이전 1 2 3 4 다음
