javascript 썸네일형 리스트형 [javascript] 예외활용한 유효성 검사 들어가기 순수 javascript을 활용한 데이터 유효성을 검사하기 위한 단순한 라이브러리를 제작했다. 여기서 사용한 유효성 검사는 사용자로부터 입력된 데이터를 검증하기 위한 목적이다. 사용자 입력은 Form을 사용한 방식이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 핵심 함수 Javascript에 예외를 유효성 검사에 활용하면 코드가 단순해져서 작업하기 편할듯해서 작업을 시작했다. 추가로 여러 개의 유효성 검사를 매번 로직으로 구성하기 힘들기 때문에 설정하듯 쉽게 추가하게 만들었다. 단, 제약사항으로 한번에 여러 유효성 검사에 대한 결과를 받을 수 없다. 다음은 핵심 함수로 유효성 검사하고 에러 메시지 출력한다. 정말 단순하다 별게 없다. func.. 더보기 [javascript] 문자열 키로 객체에 속성 존재 여부 확인하기 들어가기 객체 내에 특정 속성을 같은 값는 있는지 확인이 필요할 때가 있다. 속성을 지칭하는 키 길이 긴 경우에 확인하기 쉽지 않다. 예를 들어 "obj.data[1].item"이란 형태로 되어 있는 경우이다. 여기서는 해당 키가 문자열로 입력되고 특정 객체에서 문자열로 준 키에 해당하는 속성이 있는지 확인하는 방법을 소개하려고 한다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 확인하는 방법 문자열로 된 키로 객체에 속성이 있는지 확인하는 방법이다. 예를 들어 다음과 같은 문자열 키들이다. 'info.name' 'info["name"]' 'data[0].item.value' 'data[0]["item"].. 더보기 [javascript] 객체 변경 감지 들어기기 객체가 변경되었을때 특정 작업을 하는 경우가 의외로 많다. 객체의 변경 감지는 두가지 방법이 있다. 하나는 defineProperty이고 다른 하나는 Proxy이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 샘플객체 먼저 아래 객체가 있다고 하자. let obj = { id: 1, name: 'foo', info: { type: 'object' } };방법1: DefineProperty 먼저 defineProperty()를 사용해보자. defineProperty()에서 정적으로 value을 할당해서 사용하는 방법과 get과 set을 정의해서 사용하는 방법으로 나눌 수 있다. 여기에서는 value을 사용한 방법이 아.. 더보기 [javascript] 자바스크립트 중급자는 이것만 알고가자 2 들어가기 중급자라면 이정도는 알고 있으면 좋다고 생각하는 두번째 부분을 모았습니다. [javascript] 자바스크립트 중급자는 이것만 알고가자 1 javascript] 자바스크립트 중급자는 이것만 알고가자 2 작성자: ospace114@empal.com, http://ospace.tistory.com/ 컨테이너 맵 const foo = { name:'FOO' }; const bar = { name: 'BAR' }; const m = new Map(); m.set(foo, 'foo'); m.set(bar, 'bar'); m.set(foo, 'foo') .set(bar, 'bar'); // 체인 형태 if (m.has(f.. 더보기 [javascript] 자바스크립트 중급자는 이것만 알고가자 1 들어가기 중급자라면 이정도는 알고 있으면 좋다고 생각하는 부분을 모았습니다. 저도 다시 공부하는 기분으로 정리했습니다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 함수 함수 스코프 let은 정의 전까지 존재하지 않지만, var은 스코프 안에 어디든지 사용 가능하다. var로 선언한 변수는 호이스팅(hosting, 끌어올림)이라는 메커니즘을 따른다. 이는 선언만 가져올뿐 할당은 가져오지 않는다. console.log(x); // referece 에러 발생 let x = 3;console.log(x); // undefined var x = 3;이로 인해 var보다 let이 더 안전한 코딩이 될 수 있다. 함수 호이스팅 호이스팅은 코드 실행 전에 함수, 변수.. 더보기 [Javascript] Worker와 Notification 들어가기 Worker은 javascript에서 백그라운드로 돌아가는 프로세스같은 역활을 한다. Worker 객체를 만들어서 사용하며 백그라운드로 실행될 자바스크립트를 별도로 작성해야 한다. 그리고 Worker 객체와는 메시지를 통해서 데이터를 주고 받을 수 있다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 화면 간단하게 입력받을 화면을 작성한다. Send Log: Worker Log 출력을 할 함수를 작성한다. function log(msg) { var span = document.createElement('div'); span.innerText = msg; logger.appendChild(span); } Worker 객체를 생성해보자... 더보기 Javascript XLSX 파일 읽기 sheetjs 라이브러리[1]를 사용한 예제이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기본 라이브러리 포함 모든 라이브러리를 포함할 필요는 없고 xlsx.full.min.js만 포함해도 된다. 사용하는 기능에 따라서 포함하면 된다. XML 처리 function parseXlsx(data) { var workbook = XLSX.read(data,{ type:'buffer' }); var ret = {}; workbook.SheetNames.forEach( function(sheetName) { let row = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]); ret[sheetN.. 더보기 [vue2] 레이아웃 구성 웹페이지는 여러 화면으로 구성되어 있다. 일반적으로 상단에 로고와 메뉴, 가운데에 컨텐츠, 하단에 사이트정보 등 형태로 되는 경우가 많다. 이런 화면을 모든 페이지에 반복적으로 나타나는데, 모든 페이지에 같은 작업을 반복적으로 하기에는 매우 비효율적이다. 이때 필요한게 레이아웃을 구성해여 화면 분할해서 작업하는 형식이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 vue.js에서 레이아웃은 기본 기능이기 보다는 라우터의 기능과 컴포넌트 기능을 적절하게 활용하는 형태이다. 다른 프레임워크에서는 페이지를 임포트하여 구성하거나 이를 위한 별도 라이브러리를 사용하는 경우가 많다. 물론 더 훌륭한 기능을 사용하고 싶다면 추가 라이브러리를 사용할 수도 있.. 더보기 이전 1 2 3 다음
