3.구현/HTML5&Javascript 썸네일형 리스트형 [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] 자바스크립트 중급자는 이것만 알고가자 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이 더 안전한 코딩이 될 수 있다. 함수 호이스팅 호이스팅은 코드 실행 전에 함수, 변수.. 더보기 [node.js] gulp을 사용한 node.js 환경구성 들어가기 node.js로 프로젝트 관리할 수 있는 도구가 무엇이 있을까하다가 glup가 눈에 들어왔다. 한번 glup로 환경 구성을 해보자. eslint와 babel도 같이 설정했다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 초기화 node.js으로 개발하기 위한 기본 소스 환경을 구성해보자. 먼저 가장 기본적인 초기화부터 시작하자. 아래 명령을 이용해 package.json 기본 파일을 생성한다. npm init설치 glup 설치 다음으로 사용할 빌드 도구를 설치하자. 이는 전체 패키지로 한번만 설치하면 다른 곳에서도 사용 가능하다. npm i --save-dev glupbabel 설치 다음으로 트랜스 컴파일러를 설치한다. npm i --save-d.. 더보기 [vue2] vue.draggable 사용하기와 v-treeview 적용 검토 들어가기 v-treeview에서 드래그앤드롭을 구현하기 위해 vue.draggable을 사용을 간단하게 검토해보았다. 일단 vue.draggable 사용법을 살펴보고 v-treeview을 적용을 해보았다. 결론을 먼저 말하면 v-treeview 적용 검토결과 제대로 적용되지 않았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ vue.draggable 사용하기 vue.draggable은 vue에서 손쉽게 드래그 앤 드롭 작업을 구현하기 위한 모듈이다. 먼저 헤더 내용을 작성하자. 다음으로 vue.draggable로 화면에 표시할 간단한 구조를 만들어보자. 목록을 표시하고 목록간에 드래드 앤 드롭을 하는 예제이다. {{item}} 사용할 라이브러리을 포함시.. 더보기 이전 1 2 3 4 5 6 다음
