Snowpack, 더 빠른 웹 개발을 위한 새로운 방식의 프론트엔드 빌드 도구
October / 2020
Snowpack은 번들러가 아닙니다! 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구로, JavaScript의 ESM(ES Modules)을 활용해 기존의 Webpack, Rollup 그리고 Parcel 같은 무겁고 복잡한 번들러의 번들 소요 시간을 절약할 수 있습니다.
PixiJS와 Depth map으로 3D 이미지 만들기
September / 2020
PixiJS는 WebGL을 사용하는 고속 HTML5 2D 렌더링 라이브러리입니다. Canvas Fallback을 지원합니다. PixiJS와 Depth map을 사용해 이미지에 생명력을 불어 넣을 수 있습니다.
Postman에서 API 테스트 자동화
August / 2020
Postman에서 API 요청과 응답에 대한 테스트를 자동화할 수 있습니다.Reqres.in에서 제공하는 로그인 API를 사용합니다.RequestCollection참고 자료 ...
Jest와 Vue Test Utils(VTU)로 Vue 컴포넌트 단위(Unit) 테스트
May / 2020
Vue Test Utils(VTU)는 Vue.js 환경에서 단위 테스트를 하기 위한 공식(Official) 라이브러리입니다. Jest는 페이스북에서 만든 테스트 프레임워크로 Vue Test Utils에서 권장하는 테스트 러너입니다. 두 가지 오픈 소스를 이용해 Vue 애플리케이션의 테스트를 진행합니다.
이미 사용 중인 MongoDB 인스턴스 종료하기
February / 2020
간혹 시동 중이던 MongoDB가 비정상적으로 종료된 후 다시 MongoDB를 시동하기 위해 명령어를 삽입하면 다음과 같은 에러를 반환할 수 있습니다.Another mong ...
한눈에 보는 타입스크립트(updated)
January / 2020
타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다.
Firebase 인증으로 Sapper(Svelte)에 구글 로그인 구현
December / 2019
Firebase 인증을 통해 구글 및 페이스북, 트위터, GitHub 등의 계정으로 쉽게 로그인할 수 있는 서비스를 만들 수 있습니다. 최근 관심이 있는 Sapper(Svelte)를 사용해 간단하게 구글 로그인을 구현해 보려고 합니다.
Resize Observer - 요소의 크기 변화 관찰
November / 2019
Resize Observer는 요소(Element)의 크기를 관찰하며, 요소의 크기가 변화할 때 실행할 최적화 콜백(callback)을 제공할 수 있습니다. 활용도를 높이기 위한 폴리필(polyfill) 사용법도 같이 알아봅니다.Intersection Observer - 요소의 가시성 관찰
October / 2019
Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다.
Svelte.js 완벽 가이드(Renew)
September / 2019
Svelte는 Rich Harris가 제작한 새로운 접근 방식을 가지는 프론트엔드 프레임워크입니다. Svelte는 자신을 '프레임워크가 없는 프레임워크' 혹은 '컴파일러'라고 소개합니다. 이는 Virtual(가상) DOM이 없고, Runtime(런타임)에 로드할 프레임워크가 없음을 의미합니다.
CSS Grid 완벽 가이드
August / 2019
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...
AWS Lambda@edge로 실시간 이미지 리사이징(updated)
July / 2019
AWS Lambda@edge(CloudFront)로 실시간 이미지 리사이징 기능을 구현합니다. Cloud 9으로 람다 함수를 작성하고 CloudWatch로 로그를 확인합니다.
HTML IMG의 srcset과 sizes 속성(updated)
June / 2019
HTML IMG의 srcset과 sizes를 통해 반응형 이미지를 제공하는 방법에 대해서 알아봅시다!한눈에 보는 HTML 요소(Elements & Attributes) 총정리
May / 2019
인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online.fastcampus.co.kr)에서 확인할 수 있습니다.입문자에게 추천하는 HTML, CSS 첫걸음
April / 2019
개요HTML, CSS 그리고 JavaScript웹 표준크로스 브라우징웹 접근성정보 통신 보조기기웹 접근성 품질인증 마크웹 개발을 위한 에디터Sublime TextAtomBr ...Blob(블랍) 이해하기
February / 2019
JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용합니다. 이 글에서는 Blob의 생성과 읽고 쓰는 방법들에 대해서 알아보겠습니다.
내 NPM 패키지(모듈) 배포하기
January / 2019
개발을 위해 npm install xxx로 설치하는 모듈이 많아지면서 자주 사용하는 나의 코드들도 같은 방법으로 제공하고 싶었죠.하지만 ‘코드 복붙’이 더 쉬우니 차일피일 ...HTML Email Template 만들기
December / 2018
서비스 이메일 푸쉬에 사용할 HTML Email Template를 제작하기 위해 필요한 내용들을 살펴봅니다. 표준 코딩이 아니기 때문에 주의해야 하는 중요한 개념들을 정리합니다.CSS Flex(Flexible Box) 완벽 가이드
November / 2018
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS Flex에 대해서 알아봅시다.정규표현식, 이렇게 시작하자!
October / 2018
매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다)
Node.js 테스트 프레임워크 Mocha
March / 2018
Mocha는 Node.js에서 사용하는 테스트 러너를 지원하는 테스트 프레임워크 입니다. Node.js에서 제공하는 Assert 모듈부터 Should.js나 Chai 같은 다양한 Assertion 라이브러리를 사용할 수 있습니다.
처음 시작하는 Node.js 개발 - 3 - Globals
March / 2018
모든 모듈에서 사용할 수 있는 Node.js의 전역 객체들에 대해서 알아봅니다. (REPL / global / Console / Timers / Modules / Process / Buffers)처음 시작하는 Node.js 개발 - 2 - npm
February / 2018
npm(Node Package Manager)은 JavaScript 및 세계 최대의 소프트웨어 레지스트리 패키지 관리자로 Node.js를 설치하면 같이 설치되어 사용할 수 ...처음 시작하는 Node.js 개발 - 1 - 설치 및 버전 관리(NVM, n)
February / 2018
Node.js는 V8이라는 구글에서 개발한 고성능 자바스크립트 엔진으로 빌드된 서버 사이드 개발용 소프트웨어 플랫폼입니다.기본적으로 자바스크립트는 웹 브라우저(클라이언트 측 ...
Sass(SCSS) 완전 정복!
January / 2018
Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다.
Parcel - 쉽고 빠르고 강력한 웹앱 번들러 - SASS / PostCSS / Babel / Production
January / 2018
Parcel는 2017년 여름에 등장한 새로운 웹 애플리케이션 번들러로, 별도의 설정 파일이 없고 대부분의 애셋을 지원하는 등 강력한 기능들을 가지고 있습니다.
GitHub와 Netlify를 이용한 쉽고 빠른 HTTPS 무료 호스팅
January / 2018
GitHub, GitLab 등과 계정 연동 및 쉬운 호스팅을 제공하는 PaaS 서비스로, Continuous Deployment, One-Click HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스들을 제공합니다.
Vuex - 6 - Helpers(Mapping)
January / 2018
기존에 작성한 코드를 조금 수정해서 Vuex Helpers를 사용해 보겠습니다.Helpers는 컴포넌트의 computed나 methods 속성에 Vuex 저장소(Store) ...Vuex - 5 - Actions / Context / Vue.js Devtools
January / 2018
Vuex ActionsVuex의 액션(Actions)은 변이(Mutations)와 많이 비슷합니다.변이(Mutations)는 동기적, 액션(Actions)은 비동기적 으로 ...Vuex - 4 - Mutations / Payload
December / 2017
Vuex MutationsVuex 변이(Mutations)는 저장소의 상태(State)를 변경하는 방법입니다.과일의 가격을 할인하는 버튼을 추가하여 변이(Mutations) ...Vuex - 3 - Getters
December / 2017
Vuex Getters저장소 상태(State)를 계산된 상태로 사용할 경우 Getters를 사용할 수 있습니다.getters 속성은 Vue의 computed 속성과 비슷합니 ...Vuex - 2 - Store / State
December / 2017
Vuex Central Store이전 페이지에서 Vuex를 설치했습니다.Vuex를 이용하여 데이터 저장소(Store)를 만들겠습니다.src/store라는 디렉토리를 추가하여 ...Vuex - 1 - 시작하기 / Vuex 설치
December / 2017
Vuex 란?Vuex는 Vue와 함께 사용하기 위한 ‘상태 관리 패턴’ 라이브러리입니다.앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있습 ...
macOS 업데이트 후 git 에러
December / 2017
macOS 업데이트 후 git 에러macOS 업데이트를 하면 항상 이런저런 프로그램에서 에러가 발생하네요.이번에 ‘High Sierra’로 업데이트 후 git 명령이 동작하 ...
Yarn 설치 및 사용법
November / 2017
Facebook에서 만든 자바스크립트 패키지 매니저인 Yarn을 사용해 봅시다.Yarn 설치Yarn은 다양한 OS의 설치를 지원합니다.macOSHomebrew를 사용하는 설 ...Closure(함수 클로저)
November / 2017
클로저란?클로저(Closure)는 일급 객체 함수(first-class functions)의 개념을 이용하여 유효범위(scope)에 묶인 변수를 바인딩 하기 위한 일종의 기 ...
Webpack - 3 - 용어 정리
October / 2017
Webpack Config‘Webpack 기초 따라하기’를 진행하면서 webpack.config.js 파일을 구성하면 다음과 속성들이 등장합니다.각 속성들이 어떤 의미를 가 ...Webpack - 2 - Dev Server / Babel
October / 2017
이번에는 Webpack Dev Server에 대해서 알아보고,ES6 이상의 문법을 사용하기 위해 Babel을 구성하겠습니다.프로젝트 구성하기$ npm init -y 아래와 ...Webpack - 1 - 시작하기 / EJS / SASS(SCSS)
October / 2017
시작하기빈 프로젝트 디렉토리를 생성한 후 터미널을 이용하여, package.json을 생성하세요.$ npm init -y 그리고 webpack을 설치하세요.$ npm i - ...
MarkDown 사용법 총정리
September / 2017
마크다운(MarkDown)에 대해서 알고 계신가요?파일 확장자가 .md로 된 파일을 보셨나요?웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, ...