Ideveloper's software blog

Javascript:객체와 객체지향 프로그래밍 이 내용은 러닝 자바스크립트 의 내용을 참고해서 정리된 포스팅 글입니다. 그리고, 본인의 의견을 담아 내용을 더 추가하여 작성했습니다. | 프로퍼티 나열 어떤 컨테이너의 콘텐츠를 리스트로 나열하면, 배열이 바로 떠오르지만 객체를 생각하는 사람은 많이 없습니다. 객체도 배열과 같은 컨테이너 이며, 요소들의 나열을 지원 합니다.단, 프로퍼티 나열에서 중요한점은 순서가 보장되지 않는다는 점입니다. 자바스크립트가 순서를 명시적으로 보장하는 것도 아니고, 브라우저나 노드등의 프로그램에서 속도나 효율 향상을 목적으로 언제든 바꿀 수 있다고도 합니다. > for ...in 아래에서의 hasOwnProperty 는, 상속 된 property가 for .. in에 나타날 위..

Javascript:자식 element가 여럿있을때 event 전파 막는 효과적인 방법 | Why? > 상황: 모바일 웹에서, Modal의 overlay 영역의 scroll을 방지하기 위해 overlay 영역을 touch 햇을때 touchEvent 리스너에 모달을 닫는 function을 넣어, 모달을 닫게 하는 기능을 구현해야 하는 상황이 생겼었습니다. > 어려움이 있었던점: 모달의 overlay 영역은 부모 영역에 생기고 그 하위에 모달 컴포넌트의 자식 요소들이 있는 상황이였는데요,이때자식 element에는 onClick 이벤트로 새로운 모달을 띄우는 이벤트가 걸려있는 상황이였습니다. 따라서, 기존의 모달안의 자식 요소들에 걸려있는 클릭시 새로운 모달창이 뜨는 onClick event부모 (모달 ove..

Javascript:싱글톤 패턴 (singletone pattern) "자바스크립트 핵심 가이드 라는 책을 읽던중, 모듈 부분에 대해서 학습중에 모듈 패턴을 사용하면, 전역변수 사용을 없앨 수 있고, 이 패턴을 사용하면, 정보은닉과 그 외 다른 좋은 설계 방식을 따를 수 있게 하고, 애플리케이션이나 다른 싱글톤 패턴들을 효과적으로 캡슐화 할 수 있게 한다" 는 부분이 나왔습니다. 싱글톤 패턴에 대해서는 어렴풋이 알고 있어, 이 기회에 제대로 알아보기 위해 학습을 해보았습니다. | 싱글톤이란? 싱글톤 패턴은 전체 시스템에서의 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴이라고 합니다.따라서, 객체 리터럴도 모두 싱글톤 패턴이라고 할 수 있다고 합니다.또한 싱글톤은 특정 클래스의 인스턴스를 오직 하나만..

Javscript:자바스크립트의 선언방식, hoisting, 반환값,arguments 부스트코스 강의를 참고하여, 정리한 글입니다. | 시작하기에 앞서, 자바스크립트를 잘 이해하고 있다는것과 함수를 잘이해하고있다는것은 거의 같다고 한다. 따라서 이러한 자바스크립트 함수의 필수개념인 선언방식, hoisting, 반환값, arguments들에 대해서 알아보자. | 함수의 선언 아래와 같은 방식을 함수선언문이라고 부른다. // 함수의 호출. function printName(firstname) { var myname = "seungkyu"; return myname + " " + firstname; } | 함수표현식 아래와 같은 방식은 함수 표현식인데, 함수선언문과 달리 호출순서에 따라 정상적으로 함수가 실행..

Javascript - 속 깊은 자바스크립트 [3.자바스크립트의 변수] | 시작하기에 앞서, 자바스크립트는 일단 객체를 기반으로 이루어진 언어이다. 기본형 변수들을 제외하면 모든 객체는 object를 확장하는 형태를 취한다. 따라서, 자바스크립트에서 변수는 함수를 포함한 모든 종류의 객체를 자유롭게 사용할 수 있다. 따라서, 변수를 잘 알고 사용해야 하는데, 자바스크립트에서는 글로벌 변수를 다루는 방식 등 다른 언어와 다른 부분이 있다. 이번 포스팅에서는 이러한 내용을 포함해, 변수를 효율적으로 선언하고 관리하는 방법에 대해 살펴보자. | 1. 자바스크립트의 기본형과 typeof 자바스크립트에서 객체가 아닌 기본적인 키워드와 문자로 활용되는 기본형은 다음과 같다. number(숫자)string(문자열)b..

Javascript - 속깊은 자바스크립트[2. 자바스크립트의 스코프와 클로저 -클로저 ] |시작하기에 앞서앞서 스코프 개념에 대해서 살펴보았고, 고급 자바스크립트 개발자가 되기 위해 필수적 개념인 클로저에 대해 자세히 예제들과 함께 살펴보자. | 2. 클로저란? 클로저란 아래와 같이 정의 할 수 있다. 특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프 (lexical scope)는 계속 유지되는데, 그함수와 스코프를 묶어서 클로저라고 한다. 말로 설명하면 어려울 수있어 아래의 예제를 살펴보면서 이해해보자. 먼저 기본적으로 클로저가 나타나는 기본적인 환경은 스코프안에 스코프가 있을때, 즉 function안에 function이 선언 되었을때 이다 function outer () { var count = ..

Javascript - 속깊은 자바스크립트[2. 자바스크립트의 스코프와 클로저] | 시작하기에 앞서 es6가 도입된 이후에, let 선언을 통해 block scope 단위의 변수 할당이 가능해졌다곤 알고 있었지만, 자바스크립트에서는 어떤 시점에 scope가 생성 되는지에 대한 이해가 충분히 안된 상태였다. 그리고 c 프로그래밍을 자주 접했던 터라, block scope에 익숙해져 있어 자바스크립트로 구현할때 scope와 관련해 많은 어려움이 있었어서, 이에 대해 학습하고 정리하려 한다. | 1.스코프란? 스코프란 현재 접근할 수 있는 변수들의 범위를 뜻한다. 다른 프로그래밍 언어를 사용해봤으면 쉬운 내용이지만, 자바스크립트의 특별한 스코프 개념때문에 여러 어려움이 있다. 아래 예제를 살펴보자. Click..

javascript- 속깊은 Javascript [1. 웹과 자바스크립트] 이 블로그 포스팅은 루비페이퍼의 속깊은 javascript를 읽고 학습내용을 정리한 글입니다. | 시작하기에 앞서 자바스크립트를 학습하고 있는 와중에, 왜 자바스크립트를 쓰게 됬는지, 어떠한 역할을 하고있는지에 대한 질문에 대해 답하라고 하면, 명확한 답변을 나는 내지 못하고 있다고 생각했다. 이러한 부분에 대한 답변에 해당하는 부분이 책의 1단원에 정리되어 있었던 것 같다. 그리고 웹과 자바스크립트가 어떻게 밀접하게 관계를 가져왔는지도 알아보자. | 1. 자바스크립트의 어제와 오늘 개발환경의 변화예전에는 자바스크립트를 디버깅 할때 alert 창을 띄워가며 했었다면, 지금은 브라우저에 기본으로 내장된 다양한 디버깅 툴들이 등장하게..