HEROPY
Tech
{{ scrollPercentage }}%

Snowpack, 더 빠른 웹 개발을 위한 새로운 방식의 프론트엔드 빌드 도구

Snowpack은 번들러가 아닙니다! 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구로, JavaScript의 ESM(ES Modules)을 활용해 기존의 Webpack, Rollup 그리고 Parcel 같은 무겁고 복잡한 번들러의 번들 소요 시간을 절약할 수 있습니다.

PixiJS와 Depth map으로 3D 이미지 만들기

PixiJS는 WebGL을 사용하는 고속 HTML5 2D 렌더링 라이브러리입니다. Canvas Fallback을 지원합니다. PixiJS와 Depth map을 사용해 이미지에 생명력을 불어 넣을 수 있습니다.

Postman에서 API 테스트 자동화

Postman에서 API 요청과 응답에 대한 테스트를 자동화할 수 있습니다.Reqres.in에서 제공하는 로그인 API를 사용합니다. Request Collectio ...

Jest와 Vue Test Utils(VTU)로 Vue 컴포넌트 단위(Unit) 테스트

Vue Test Utils(VTU)는 Vue.js 환경에서 단위 테스트를 하기 위한 공식(Official) 라이브러리입니다. Jest는 페이스북에서 만든 테스트 프레임워크로 Vue Test Utils에서 권장하는 테스트 러너입니다. 두 가지 오픈 소스를 이용해 Vue 애플리케이션의 테스트를 진행합니다.

이미 사용 중인 MongoDB 인스턴스 종료하기

간혹 시동 중이던 MongoDB가 비정상적으로 종료된 후 다시 MongoDB를 시동하기 위해 명령어를 삽입하면 다음과 같은 에러를 반환할 수 있습니다. Another mo ...

한눈에 보는 타입스크립트(updated)

타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다.

Firebase 인증으로 Sapper(Svelte)에 구글 로그인 구현

Firebase 인증을 통해 구글 및 페이스북, 트위터, GitHub 등의 계정으로 쉽게 로그인할 수 있는 서비스를 만들 수 있습니다. 최근 관심이 있는 Sapper(Svelte)를 사용해 간단하게 구글 로그인을 구현해 보려고 합니다.

Resize Observer - 요소의 크기 변화 관찰

Resize Observer는 요소(Element)의 크기를 관찰하며, 요소의 크기가 변화할 때 실행할 최적화 콜백(callback)을 제공할 수 있습니다. 활용도를 높이기 위한 폴리필(polyfill) 사용법도 같이 알아봅니다.

Intersection Observer - 요소의 가시성 관찰

Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다.

Svelte.js 완벽 가이드(Renew)

Svelte는 Rich Harris가 제작한 새로운 접근 방식을 가지는 프론트엔드 프레임워크입니다. Svelte는 자신을 '프레임워크가 없는 프레임워크' 혹은 '컴파일러'라고 소개합니다. 이는 Virtual(가상) DOM이 없고, Runtime(런타임)에 로드할 프레임워크가 없음을 의미합니다.

CSS Grid 완벽 가이드

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...

AWS Lambda@edge로 실시간 이미지 리사이징(updated)

AWS Lambda@edge(CloudFront)로 실시간 이미지 리사이징 기능을 구현합니다. Cloud 9으로 람다 함수를 작성하고 CloudWatch로 로그를 확인합니다.

HTML IMG의 srcset과 sizes 속성(updated)

HTML IMG의 srcset과 sizes를 통해 반응형 이미지를 제공하는 방법에 대해서 알아봅시다!

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online.fastcampus.co.kr)에서 확인할 수 있습니다.

입문자에게 추천하는 HTML, CSS 첫걸음

개요 HTML, CSS 그리고 JavaScript 웹 표준 크로스 브라우징 웹 접근성 정보 통신 보조기기 웹 접근성 품질인증 마크 웹 개발을 위한 에디터 Su ...

Blob(블랍) 이해하기

JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용합니다. 이 글에서는 Blob의 생성과 읽고 쓰는 방법들에 대해서 알아보겠습니다.

내 NPM 패키지(모듈) 배포하기

개발을 위해 npm install xxx로 설치하는 모듈이 많아지면서 자주 사용하는 나의 코드들도 같은 방법으로 제공하고 싶었죠.하지만 ‘코드 복붙’이 더 쉬우니 차일피일 ...

HTML Email Template 만들기

서비스 이메일 푸쉬에 사용할 HTML Email Template를 제작하기 위해 필요한 내용들을 살펴봅니다. 표준 코딩이 아니기 때문에 주의해야 하는 중요한 개념들을 정리합니다.

CSS Flex(Flexible Box) 완벽 가이드

많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS Flex에 대해서 알아봅시다.

정규표현식, 이렇게 시작하자!

매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다)

Node.js 테스트 프레임워크 Mocha

Mocha는 Node.js에서 사용하는 테스트 러너를 지원하는 테스트 프레임워크 입니다. Node.js에서 제공하는 Assert 모듈부터 Should.js나 Chai 같은 다양한 Assertion 라이브러리를 사용할 수 있습니다.

처음 시작하는 Node.js 개발 - 3 - Globals

모든 모듈에서 사용할 수 있는 Node.js의 전역 객체들에 대해서 알아봅니다. (REPL / global / Console / Timers / Modules / Process / Buffers)

처음 시작하는 Node.js 개발 - 2 - npm

npm(Node Package Manager)은 JavaScript 및 세계 최대의 소프트웨어 레지스트리 패키지 관리자로 Node.js를 설치하면 같이 설치되어 사용할 수 ...

처음 시작하는 Node.js 개발 - 1 - 설치 및 버전 관리(NVM, n)

Node.js는 V8이라는 구글에서 개발한 고성능 자바스크립트 엔진으로 빌드된 서버 사이드 개발용 소프트웨어 플랫폼입니다. 기본적으로 자바스크립트는 웹 브라우저(클라이언트 ...

Sass(SCSS) 완전 정복!

Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다.

Parcel - 쉽고 빠르고 강력한 웹앱 번들러 - SASS / PostCSS / Babel / Production

Parcel는 2017년 여름에 등장한 새로운 웹 애플리케이션 번들러로, 별도의 설정 파일이 없고 대부분의 애셋을 지원하는 등 강력한 기능들을 가지고 있습니다.

GitHub와 Netlify를 이용한 쉽고 빠른 HTTPS 무료 호스팅

GitHub, GitLab 등과 계정 연동 및 쉬운 호스팅을 제공하는 PaaS 서비스로, Continuous Deployment, One-Click HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스들을 제공합니다.

Vuex - 6 - Helpers(Mapping)

기존에 작성한 코드를 조금 수정해서 Vuex Helpers를 사용해 보겠습니다.Helpers는 컴포넌트의 computed나 methods 속성에 Vuex 저장소(Store) ...

Vuex - 5 - Actions / Context / Vue.js Devtools

Vuex ActionsVuex의 액션(Actions)은 변이(Mutations)와 많이 비슷합니다.변이(Mutations)는 동기적, 액션(Actions)은 비동기적 으로 ...

Vuex - 4 - Mutations / Payload

Vuex MutationsVuex 변이(Mutations)는 저장소의 상태(State)를 변경하는 방법입니다. 과일의 가격을 할인하는 버튼을 추가하여 변이(Mutations ...

Vuex - 3 - Getters

Vuex Getters저장소 상태(State)를 계산된 상태로 사용할 경우 Getters를 사용할 수 있습니다. getters 속성은 Vue의 computed 속성과 비슷 ...

Vuex - 2 - Store / State

Vuex Central Store이전 페이지에서 Vuex를 설치했습니다. Vuex를 이용하여 데이터 저장소(Store)를 만들겠습니다.src/store라는 디렉토리를 추가하 ...

Vuex - 1 - 시작하기 / Vuex 설치

Vuex 란?Vuex는 Vue와 함께 사용하기 위한 ‘상태 관리 패턴’ 라이브러리입니다.앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있습 ...

macOS 업데이트 후 git 에러

macOS 업데이트 후 git 에러macOS 업데이트를 하면 항상 이런저런 프로그램에서 에러가 발생하네요.이번에 ‘High Sierra’로 업데이트 후 git 명령이 동작하 ...

Yarn 설치 및 사용법

Facebook에서 만든 자바스크립트 패키지 매니저인 Yarn을 사용해 봅시다. Yarn 설치Yarn은 다양한 OS의 설치를 지원합니다. macOSHomebrew를 사용하는 ...

Closure(함수 클로저)

클로저란? 클로저(Closure)는 일급 객체 함수(first-class functions)의 개념을 이용하여 유효범위(scope)에 묶인 변수를 바인딩 하기 위한 일종의 ...

Webpack - 3 - 용어 정리

Webpack Config‘Webpack 기초 따라하기’를 진행하면서 webpack.config.js 파일을 구성하면 다음과 속성들이 등장합니다.각 속성들이 어떤 의미를 가 ...

Webpack - 2 - Dev Server / Babel

이번에는 Webpack Dev Server에 대해서 알아보고,ES6 이상의 문법을 사용하기 위해 Babel을 구성하겠습니다. 프로젝트 구성하기$ npm init -y 아래 ...

Webpack - 1 - 시작하기 / EJS / SASS(SCSS)

시작하기빈 프로젝트 디렉토리를 생성한 후 터미널을 이용하여, package.json을 생성하세요. $ npm init -y 그리고 webpack을 설치하세요. $ npm ...

MarkDown 사용법 총정리

마크다운(MarkDown)에 대해서 알고 계신가요?파일 확장자가 .md로 된 파일을 보셨나요?웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, ...
공지 이미지
이 내용을 72시간 동안 안 보고 싶어요!?