[Svelte] 스벨트 입문 A부터 Z까지
스벨트 입문 강의를 출시했습니다. 블로그의 내용과 공식 문서를 토대로 인프런에 스벨트 입문 A부터 Z까지 강의를 출시했습니다. 공식 문서의 내용을 모두 담아 다른 강의나 다른 블로그를 찾아볼 필요 없이 이 강의 하나면 한 번에 해결하실 수 있습니다. 왜 스벨트를 배워야 할까요? 스벨트는 2019년에 등장해 무럭무럭 자라나고 있는 새로운 프론트엔트 프레임워크입니다. 가상돔을 사용하지 않아서 React, Vue와 다른 페러다임을 제시한 프레임워크입니다. 스벨트를 배워두면 좋은 이유를 이야기해 볼께요. 2019년 관심도 1위! 스벨트는 리엑트, 뷰, 앵귤러 프론트엔트 3대장 자리를 위협하며 2019년 관심도 1위를 기록했습니다. 스벨트는 많은 개발자의 관심을 끌게 한 강력한 무기를 가지고 있겠죠? 장점 하나:..
[Browser] 렌더링 최적화
beomy.github.io에 브라우저에 관한 포스팅을 하였습니다. 주된 내용은 브라우저 구조, 초기 렌더링 최적화, 렌더링 업데이트 최적화에 관련된 내용입니다. 1. 자바스크립트 런타임이란? 자바스크립트 런타임이란, 간단하게 이야기 하자면 자바스크립트를 실행시키는 환경을 이야기 합니다. 브라우저 역시 자바스크립트를 실행시킬 수 있는 환경이기 때문에 브라우저도 자바스크립트 런타임이라고 이야기 할 수 있습니다. [JavaScript] 자바스크립트 런타임에서 자바스크립트 런타임이 무엇인지 이야기 합니다. 2. 브라우저가 화면을 렌더링 하는 방법 브라우저의 구조는 어떻게 되고, 브라우저가 HTML, CSS, JavaScript를 어떻게 화면에 렌더링 하는지 [Browser] 브라우저 렌더링에서 이야기 합니다...
[디자인패턴] Flux, MVC 비교
React.JS의 Redux 관련 글을 포스팅하면서 그리고 MVC, MVP, MVVM 패턴에 관한 포스팅을 하면서 다른 디자인패턴에 관심을 가지게 되었습니다. Vuex는 Flux 패턴에 영감을 받아 만들어졌다고도 하고, Flux는 React.JS의 Redux의 디자인패턴이기도 합니다. Flux와 MVC를 비교하기 전에 [디자인패턴] MVC, MVP, MVVM 비교를 참고하시면 좀 더 이해하는데 도움이 될 것 같습니다. Flux는 MVC 모델의 단점을 보안하기 위해 페이스북에서 발표한 아키텍쳐입니다. 1. MVC 문제점 페이스북에서 이야기 하는 MVC의 가장 큰 단점은 양방향 데이터 흐름이었습니다. MVC 패턴에서 Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 합니다. Model..
[디자인패턴] MVC, MVP, MVVM 비교
웹 개발자로 일을 하면서 가장 먼저 접한 디자인패턴이 바로 MVC 패턴이었습니다. 그만큼 유명하고 많이 쓰이는 디자인패턴인 MVC 패턴과 MVC 패턴에서 파생되어져 나온 MVP 패턴과 MVVM 패턴을 이야기해 보도록 하겠습니다. 이렇게 역할을 분리하는 이유는... 각각의 역할을 나눠 코드 관리를 하자! 역할을 나누어 관리가 된다면, 유지보수와 개발효율이 좋아지겠죠..? 1. MVC MVC 패턴은 Model + View + Controller를 합친 용어입니다. MVC 패턴의 구조, 동작, 특징, 장점, 단점을 이야기하겠습니다. 1) 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다. View : 사용자에서 보여지는 UI 부분입니다. Controller : 사용자의 입력..
[webpack] webpack 4 사용하기
webpack v4와 ES6 이상의 자바스크립트를 사용하기 위한 babel loader, css를 모듈화 하기 위한 css loader와 style loader를 사용하는 방법을 이야기 하려고 합니다. (webpack의 기본 개념을 이해하면 이번 포스트를 이해하는데 도움이 될 것 같습니다. 이곳에서 webpack의 기본 개념을 읽어주세요.) 1. Package 설치하기 webpack + babel + css 를 사용하기 위해서, webpack과 loader 등의 package들을 설치해야 합니다. npm init -ypackage.json의 뼈대를 생성합니다. npm init -y로 package.json을 생성합니다. 1) webpack 설치하기 webpack을 설치합니다. npm install web..
[webpack] webpack 개념
Vue.JS와 Electron.JS, React.JS 등.. 자바스크립트 프론트엔드 어플리케이션을 CLI를 사용하여 프로젝트를 생성하면 자연스럽게 따라 설치되는 모듈 번들러(module bundler)였습니다. (모듈 번들러를 선택 할 수 있다면 webpack를 선택해서 사용했습니다.) 이번 포스트에서는 자연스럽게 사용했던 webpack이라는 모듈 번들러에 대해 이야기하려고 합니다. 1. 모듈 번들러가 무엇인가요? 모듈 번들러를 간단히 이야기 하면, 여러개의 파일을 하나의 파일로 묶어주는 라이브러리를 이야기 합니다. 위의 그림은 webpack의 공식문서의 첫 페이지에 등장하는 그림입니다. 위의 그림을 보면 모듈 번들러가 무엇인지가 대략 파악이 가능합니다. 모듈 번들러는 파일의 종속성을 스스로 파악하여, ..