방춘덕(고양이 키우면 지을 이름)의 개발 블로그입니다.

보호되어 있는 글입니다.

목차 HTML5와 HTML4의 차이 Semantic Markup 1. HTML5와 HTML4의 차이 HTML5는 4의 확장판과 같은 느낌이 강하기 때문에 격변한 것이 아닌 주로 무엇인가 추가, 수정, 삭제된 것이 많다. 자세한 내용은 여기를 참고하기 바란다. 그중 가장 눈에 띄고 쉽게 보이는 것이 바로 Semantic Element다. 이에 관해서는 아래에서 더 자세히 서술할 것이다. Semantic elements = elements with a meaning. (Semantic elements란 의미가 있는 element들을 말한다.) 아래는 HTML4로 작성된 html 파일이다. 헤더의 내용이다. 뉴스 스포츠 날씨 뉴스 신종 코로나 바이러스.. 손 잘 씻고 다녀용 어쩌구 저쩌구.. 블라블라블라.. ..

목차 Virtual DOM 등장 배경 Virtual DOM? 구현 방법 1. Virtual DOM 등장 배경 jQuery 등이 등장하며 JS로 DOM을 동적으로 조작해 더 많은 것들이 가능하게 되어 웹은 새로운 시대를 맞이하게 되었다. 하지만 Twitter와 Facebook 등 조금만 스크롤을 진행해도 몇천 개의 element가 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 퍼포먼스 저하를 일으켰고 특히나 모바일 브라우저에서 이러한 취약점이 더 대두되었다. 또한 당시 jQuery를 이용한 개발 방법이 MVC 등 데이터 모델들을 이용해 개발을 진행하기 썩 좋은 모습이 아니었던 것도 한몫했다. DOM은 데이터를 tree구조로 보여주기에 알맞을 순 있지만, 객체지향으로 사용하기 어려웠..

목차 ECMAScript란? JavaScript와 ECMAScript의 차이 ECMAScript 버전별 역사 ES 1 ~ 3 ES4 ES5 ES6 1. ECMAScript란? Ecma (European Computer Manufacturers Association) International에서 ECMA-262와 ISO / IEC 16262에 정의된 내용을 바탕으로 만든 표준화된 스크립트 언어의 사양이다. JS를 표준화하기 위해 만들어졌으며 Action Script, JScript와 같이 ECMAScript의 다른 구현체도 물론 존재한다. 우리가 JS와 관련된 내용으로 구글링 할 때 흔히 보이는 ES5, ES6등이 ECMAScript의 버전별 표준 규격을 의미한다. 2. JavaScript와 ECMAScr..

목차 polyfill transpiler polyfill과 transpiler의 차이 1. polyfill JS는 각 버전별로 문법과 동작이 매우 급변하는데, 브라우저 개발사가 항상 이에 맞게 최신 버전으로 업데이트를 하지만 소수의 사용자만이 제때 업데이트를 한다. 또한 각 브라우저들 마다 약간씩 API의 지원 범위가 차이가 나는데 이 모든 걸 개발자들이 신경 쓰기 어려운 것이 현실이다. 이를 위해 polyfill이 생겼는데, polyfill은 모던 브라우저에서만 지원하던 API들을 이전 버전의 브라우저에서도 동작하게끔 도와준다. 아래의 예를 보고 이해해보자. 'use strict'; /* http://www.ecma-international.org/ecma-262/6.0/#sec-number.isnan..

다이내믹했던, 2019년이 지나갔다. 내가 한 해 동안 무엇을 했고, 또 잘못했던 점을 찾고 고치기 위해 회고를 시작한다. 목차 1분기 2분기 3분기 4분기 정리하며 1분기 다니던 대학을 1년 만에 호기롭게 휴학한 뒤, 현재 재직 중인 회사에 딱 1월에 iOS 개발자로 합류했다. 합류했을 당시 인원은 3명 일 정도로 극극극극극 초기스타트업이었다. (대표, SI 출신 [전] 개발팀장 그리고 쌩주니어인 나 ..뒤틀린 황천의 스타트업이다.) 아는 형의 소개로 들어간 이 스타트업은 이런 식으로 굴러가고 있었다. 사용자가 기능 추가를 요청한다. 대표님이 그에 맞는 디자인을 추가한다. (산디 출신이셔서 그런지 디자인이 나름 괜찮았다. 지금 보면 구리지만) 나랑 개발팀장님이 구현한다. 사실 처음에는 그냥 극 초기 스..

목차 시작하며 event bubbling event capturing event delegation 1. 시작하며 이 글에서 알아볼 것은 JS에서 element에 이벤트를 추가했을 때 관한 동작 방식인데, 이 내용을 이해하지 못하고 코드를 작성한다면 예상치 못한 일들이 벌어질 수 있기 때문이다. 이 텍스트는 span안에 있음. 이 코드를 실행해보면 조금 이상하다는 것을 알 수 있다. div을 클릭하지 않았지만, div의 onclick event가 호출되는 것을 볼 수 있다. 위에서도 언급했듯, 이에 관한 내용을 숙지해야 하만 프로그래머의 의도대로 코드를 작성할 수 있을 것이다. 2. event bubbling section article div 위 코드는 다음과 같은 순서로 실행된다. div -> art..

먼저 이 글을 읽기 전에 이 전에 작성했던 scope에 관해서 꼭 읽어야만 한다. 목차 closure란? first class object (일급 객체) closure를 활용해 모듈 만들어보기 자주 할만한 실수 들 JS의 모든 함수는 closure? 1. closure란? closure란 MDN에서는 "클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. (A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment))"라고 표현한다. 아래 코드를 보며 이해해보자. function greeting() { var greet..