javascript 썸네일형 리스트형 [javascript] Javascript에서 MD5 사용 들어가기 Javascript에서 MD5 라이브러리들을 간단하게 살펴보고 테스트를 해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존 문제점 기존에 MD5을 이용해 해시값을 생성하는데 있어서 이슈가 있다. SparkMD5 성능 이슈 기존에 SparkMD5 라이브러리를 사용해 MD5 해시값을 생성하고 있었다. 잘 사용하고 있었는데 문제점이 파일 크기가 커지만 시간이 오래걸린다. 파일 크기가 4MB와 16MB인 경우 각각 0.58초와 2초가 걸린다. 파일 개수가 많아지면 치명적이게 된다. IE11 문제점 더 큰 문제는 IE11에서는 Chrome에서 파일 읽어 오는 부분이 다르다. IE11에서는 readAsBinaryString()이 지원하지 않는다. .. 더보기 [Javascript] Javascript의 prototype에 대한 고찰 들어가기 Javascript는 웹환경에서 핵심 기술로 이미 잘 알려진 프로그래밍 언어이다. javascript는 일급 함수을 가진 가벼운 인터프리터이다. javascript는 prototype 기반이고, 다중 패러다임, 싱글 쓰레드, 동적 언어이며 객체지향, 명령형, 선언형 스타일을 지원한다. 대부분은 javascirpt을 스크립트 언어로 이벤트 기반으로 객체지향 언어처럼 사용하고 있다. 여기서 prototype 기반이라는 의미를 다시 생각볼려고 한다. 물론 다양한 패러다임이 있기 때문에 다른 형태로 비슷하게 작성할 수 있다. 이글의 목적은 javascript에서 prototype에 대해 생각해보는 기회를 가져볼려고 한다. 작성자: ospace114@empal.com, http://ospace.tisto.. 더보기 [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] 자바스크립트 중급자는 이것만 알고가자 1javascript] 자바스크립트 중급자는 이것만 알고가자 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(foo)) console.log("foo existed.");순회for(let u of m.keys()) con.. 더보기 [javascript] 자바스크립트 중급자는 이것만 알고가자 1 들어가기중급자라면 이정도는 알고 있으면 좋다고 생각하는 부분을 모았습니다. 저도 다시 공부하는 기분으로 정리했습니다.작성자: ospace114@empal.com, http://ospace.tistory.com/함수함수 호이스팅호이스팅(hoisting, 끌어올림)은 코드 실행 전에 함수, 변수, 클래스, 선언문 들이 맨위로 이동하는 과정이다. 예를 들어 함수 선언 전에 함수를 호출할 수 있는 것이다.f(); // 선언 전에 호출 가능function f() { ... }함수 스코프let은 정의 전까지 존재하지 않지만, var은 스코프(Scope) 안에 어디든지 사용 가능하다.var로 선언한 변수는 호이스팅(hoisting, 끌어올림)이라는 메커니즘을 따른다. 이는 선언만 가져올뿐 할당은 가져오지 않는다.co.. 더보기 [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 객체를 생성해보자... 더보기 이전 1 2 3 다음
