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..

Web:시맨틱 웹 낱낱이 파헤치기 + React.Fragment 에 쓰인 시맨틱 개념 | 시작하기에 앞서 팀 버너스리, 차세대 웹 - TED 강연 (웹에서의 데이터) https://www.ted.com/talks/tim_berners_lee_on_the_next_web?language=ko#t-397419 (7분 40초 ~9분 40초) | Semantic web? Semantic Tag? > Definition 시맨틱 웹은 직역하면 의미론적인 웹 입니다. 즉, 문서의 이미에 맞게 어플리케이션의 의미에 맞게 구성 된 웹입니다.컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹. 또한 다른 의미로는 정보를 분석하여 그 정보..

Web:Heading Tag(제목 태그)와 검색엔진 최적화의 연관성 | 들어가기에 앞서, 웹을 개발하다 보면, 웹페이지를 구성할때 heading tag를 자주 사용하게 됩니다. 그러나 heading tag의 역할이나 중요성에 대해서 간과하게 되는 경우가 있는데요. 하지만 heading 태그는 페이지의 내용을 보여주는 것 뿐 아니라 검색엔진 최적화에도 큰 영향을 미친다고 합니다. 이를 위해 heading 태그에 대해서 알아봅시다. | Heading tag란? 책을 생각해보면, 책의 내용중 중요한 내용에는 색이나 굵기의 차이를 두기도 하는데요, 이러한 역할을 하는것이 HTML에서의 제목 태그(Heading tag) 입니다. HTML에서 heading tag 는 H1~H6 까지 총 6개 입니다. 크기에도 차이..

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

Web:iframe 사용시 하단에 발생하는 공백 제거방법 | 시작하기에 앞서 iframe 을 사용하다 보면 하단에 하얀 공백이 생길때가 있다. 그때 해결할 방법은 아래와 같다. | 해결 방법https://stackoverflow.com/questions/7290214/html-strange-space-between-iframe-elementsAn iframe in standards mode is display: inline by default. That means they will be placed on the text baseline, ie. where the bottom of an 'a' ends, not where the bottom of a 'y' does. The gap you're seeing..

Web :haml이란? | 시작하기에 앞서 haml을 봐야 할 일이 생겨 간략히 haml에 대해 정리해본다. | haml이란 html preprocessor중하나이다! (조사하는 도중 html preprocessor라는 개념에 대해서도 알게됬고, haml 말고도, markdown jade, slim 등이 있다는 것도 알게 됬다.. 싱기방기 ) 1) HAML ( HTML Abstraction Markup Language ) - Ruby 프레임워크의 일부로 사용 2) Markdown - 경량 마크업 언어. 지원하는 에디터를 통해 쉽고 빠르게 시각적인 효과를 줄 수 있다. 3) Slim - Ruby의 HTML 템플릿 엔진. 4) Jade - JavaScript의 Node.js로 구현 된 템플릿 엔진. 5) E..

WEB:DOM APIs | 시작하기에 앞서,Dom api는 라이브러리를 쓰는것보다 대체로더 빠르다.라이브러리보다 불편하고 어렵지만, low-level의 dom api를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그동작을 이해하고 유추하기 쉽고, 문제해결에도 유리하다. 개인적인 생각으로 이러한 dom과 관련한 개념들을 탄탄히 학습해 놓는다면, 프레임워크에 의존하는 개발자가 아닌, 유연하게 새로운기술도 쉽게쉽게 습득하는 유연한 개발자가 될것이라 판단된다.| DOM api 관련 링크document. 으로 사용할 수 있는 API들 -> 링크 element. 으로 사용할 수 있는 AP들 -> 링크 | DOM 탐색 APIsDOM 탐색에 몇 가지 유용한 속성들이다.tagNametextContentnodeTyp..