티스토리

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

블로그 홈

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

wangchunsik.tistory.com/m

방춘덕 님의 블로그입니다.

구독자
1
방명록 방문하기
공지 방송인 왕춘식님과는 일절 관계가 없는⋯ 모두보기

주요 글 목록

  • 2020년 상반기 회고 보호되어 있는 글입니다. 공감수 0 댓글수 0 2020. 7. 13.
  • HTML5와 HTML4의 차이 목차 HTML5와 HTML4의 차이 Semantic Markup 1. HTML5와 HTML4의 차이 HTML5는 4의 확장판과 같은 느낌이 강하기 때문에 격변한 것이 아닌 주로 무엇인가 추가, 수정, 삭제된 것이 많다. 자세한 내용은 여기를 참고하기 바란다. 그중 가장 눈에 띄고 쉽게 보이는 것이 바로 Semantic Element다. 이에 관해서는 아래에서 더 자세히 서술할 것이다. Semantic elements = elements with a meaning. (Semantic elements란 의미가 있는 element들을 말한다.) 아래는 HTML4로 작성된 html 파일이다. 헤더의 내용이다. 뉴스 스포츠 날씨 뉴스 신종 코로나 바이러스.. 손 잘 씻고 다녀용 어쩌구 저쩌구.. 블라블라블라.. .. 공감수 0 댓글수 0 2020. 1. 25.
  • Virtual DOM 목차 Virtual DOM 등장 배경 Virtual DOM? 구현 방법 1. Virtual DOM 등장 배경 jQuery 등이 등장하며 JS로 DOM을 동적으로 조작해 더 많은 것들이 가능하게 되어 웹은 새로운 시대를 맞이하게 되었다. 하지만 Twitter와 Facebook 등 조금만 스크롤을 진행해도 몇천 개의 element가 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 퍼포먼스 저하를 일으켰고 특히나 모바일 브라우저에서 이러한 취약점이 더 대두되었다. 또한 당시 jQuery를 이용한 개발 방법이 MVC 등 데이터 모델들을 이용해 개발을 진행하기 썩 좋은 모습이 아니었던 것도 한몫했다. DOM은 데이터를 tree구조로 보여주기에 알맞을 순 있지만, 객체지향으로 사용하기 어려웠.. 공감수 0 댓글수 0 2020. 1. 18.
  • ECMAScript와 그 역사 목차 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.. 공감수 0 댓글수 0 2020. 1. 10.
  • polyfill과 transpiler 목차 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.. 공감수 0 댓글수 0 2020. 1. 4.
  • 2019년 회고 및 극극극극극 초기 스타트업에 합류한 1년 이야기 다이내믹했던, 2019년이 지나갔다. 내가 한 해 동안 무엇을 했고, 또 잘못했던 점을 찾고 고치기 위해 회고를 시작한다. 목차 1분기 2분기 3분기 4분기 정리하며 1분기 다니던 대학을 1년 만에 호기롭게 휴학한 뒤, 현재 재직 중인 회사에 딱 1월에 iOS 개발자로 합류했다. 합류했을 당시 인원은 3명 일 정도로 극극극극극 초기스타트업이었다. (대표, SI 출신 [전] 개발팀장 그리고 쌩주니어인 나 ..뒤틀린 황천의 스타트업이다.) 아는 형의 소개로 들어간 이 스타트업은 이런 식으로 굴러가고 있었다. 사용자가 기능 추가를 요청한다. 대표님이 그에 맞는 디자인을 추가한다. (산디 출신이셔서 그런지 디자인이 나름 괜찮았다. 지금 보면 구리지만) 나랑 개발팀장님이 구현한다. 사실 처음에는 그냥 극 초기 스.. 공감수 1 댓글수 1 2019. 12. 30.
  • event bubbling, capturing, delegation 목차 시작하며 event bubbling event capturing event delegation 1. 시작하며 이 글에서 알아볼 것은 JS에서 element에 이벤트를 추가했을 때 관한 동작 방식인데, 이 내용을 이해하지 못하고 코드를 작성한다면 예상치 못한 일들이 벌어질 수 있기 때문이다. 이 텍스트는 span안에 있음. 이 코드를 실행해보면 조금 이상하다는 것을 알 수 있다. div을 클릭하지 않았지만, div의 onclick event가 호출되는 것을 볼 수 있다. 위에서도 언급했듯, 이에 관한 내용을 숙지해야 하만 프로그래머의 의도대로 코드를 작성할 수 있을 것이다. 2. event bubbling section article div 위 코드는 다음과 같은 순서로 실행된다. div -> art.. 공감수 0 댓글수 0 2019. 12. 27.
  • closure 먼저 이 글을 읽기 전에 이 전에 작성했던 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.. 공감수 0 댓글수 0 2019. 12. 20.
  • iOS WKWebView 버그(?) 발견 및 땜빵 JS에서 blob을 이용한 기능 구현 도중, 해당 버그(?)를 발견했다. 버그(?)인 이유는 내 생각에는 딱히 잘못이 없어 보이지만.. iOS를 잘하지 못하기 때문에 그렇게 적어뒀다. (정확한 원인을 아신다면, 아래 저장소에 풀 리퀘스트를 부탁드립니다!!) 버그의 내용은 viewWillAppear에서 웹뷰의 load 함수를 사용해 페이지를 부르면 위와 같은 코드가 올바르게 동작하지 않는다는 것이다! 해결방법은 viewWillAppear 말고 다른 곳에서 함수를 호출하면 된다. 아래는 따로 프로젝트를 만들어 실험해본 결과다. viewWillAppear에서는 이미지가 첨부되지 않고, 페이지가 새로고침되는 모습을 볼 수 있다. 아래 저장소에서 위 코드를 직접 확인해볼 수 있다. https://github.co.. 공감수 0 댓글수 1 2019. 12. 16.
  • prototype과 prototype chain 목차 prototype 이란? prototype, [[Prototype]], __proto__ [[prototype]] prototype __proto__ constructor property prototype chain 1). prototype 이란? JS는 prototype 기반의 객체지향 언어로써, prototype을 사용하여 다른 객체지향 언어들(C++, Java 등)의 class처럼 객체지향적이고 확장 가능한 코드를 작성하게 만들어준다. (물론 ES6부터 JS도 class 문법을 지원하긴 하지만, 런타임에서 prototype으로 변환되어 실행된다.) 대표적인 예시로는 우리가 이미 코드에서 흔하게 사용 중인 Array, Object 등에서 사용하는 메서드들은 모두 prototype으로 구현되어 있.. 공감수 0 댓글수 0 2019. 12. 16.
  • scope 이 글을 원활하게 읽으려면 이전 글인 execution context 와 execution context stack과 execution context의 생성과정을 읽는 것을 권장한다. 목차 scope란? global scope local scope 몇 가지 상황들 non block level scope lexical scope 1). scope란? scope는 런타임에서 함수, 변수, 객체등에 대한 접근성을 결정한다. 즉, scope는 참조하려는 식별자를 찾기 위한 규칙이다. var a = 10 function A() { var b = 20 console.log(a, b) } A() JS는 이런 코드에서 식별자에 대한 접근을 어떻게 할까? scope가 바로 어디서 어떻게 식별자에 대해 접근하는지를 결정해.. 공감수 0 댓글수 1 2019. 12. 13.
  • event loop JS는 단일 스레드 기반의 언어이며 이는 한 번에 한 작업밖에 처리하지 못한다는 것을 뜻한다. (이는 정확히 JS엔진에서만 국한된 것이다. 브라우저 등의 상황에서는 다르다) 하지만 우리가 흔히 접할 수 있는 웹 애플리케이션들은 HTTP 요청을 처리하며 화면에 애니메이션을 보여주고, 이에 대한 프리징이나 다른 현상들을 찾아볼 수가 없다. 이것에 대한 해답이 위의 사진에 있듯, event loop와 그 친구들이다. 1). call stack 브라우저 안의 자바스크립트 인터프리터와 같이, 인터프리터를 위한 메커니즘이다. 현재 실행되고 있는 함수는 무엇인지, 그 함수 내에서 어떤 함수가 호출되고 있는지, 다음에 어떤 함수가 호출되는지 등을 관리한다. 보통 다음과 같은 순서로 실행된다. 함수를 호출하면 인터프리터.. 공감수 0 댓글수 0 2019. 12. 11.
  • hoisting 이 내용은 이전에 작성했던 execution context와 execution context stack과 execution context의 생성과정 글과 관련이 있습니다. Hoisting is JavaScript's default behavior of moving declarations to the top. (hoisting은 선언을 맨 위로 이동시키는 JS의 기본 동작이다.) - https://www.w3schools.com/js/js_hoisting.asp 1). JS의 선언과 hoisted 먼저 예제를 보고 시작해보자. console.log(hello) // undefined var hello = 'HI!' 왜 다른 언어들과 같이 error를 출력하지 않고 undefined로 출력될까? execut.. 공감수 0 댓글수 0 2019. 12. 7.
  • execution context의 생성과정 지난 글에서는 EC(execution context)와 ECS(execution context stack)이 무엇인지 알아봤고 오늘은 실제로 EC가 어떻게 생성되는지 알아볼 것이다. (이 글을 이해하기 위해서는 꼭 지난 글을 읽어야만 한다.) JS엔진은 2가지 단계로 EC를 생성한다. 1). creation phase 생성 단계는 JS 엔진이 함수를 호출했지만, 아직 실행이 되지 않은 상태다. 이 단계에서 JS 엔진은 컴파일 단계에 있으며 작성된 코드를 컴파일하기 위해 함수를 스캔한다. global EC일 때와 function EC일 때 동작이 아주 약간 다르다. 그리고 이전 글의 각 EC별 특징과 매우 흡사하다. global EC 전역 객체를 생성한다. (window... 등) this 객체를 생성한다.. 공감수 0 댓글수 0 2019. 12. 5.
  • execution context 와 execution context stack 오늘 다뤄볼 내용은 실행 콘텍스트(execution context)와 실행 콘텍스트 스택(execution context stack)에 관해서다. 1). 실행 콘텍스트 An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation. (실행 콘텍스트는 ECMAScript 구현으로 코드의 런타임 평가를 추적하는 데 사용되는 사양 장치입니다. by 구글 번역) - ECMAScript® 2019 Language Specification 흠.. 잘 이해가 되지 않는다. 몇몇 다른 블로그를 찾아본 결과 실행 가능한 코드를 형상화하고 구분하는 추.. 공감수 0 댓글수 0 2019. 12. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.