PWA API - Storage

Storage 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가, 수정, 삭제할 수 있는 API다. 도메인의 세션 저장소 접근하기: Window.sessionStorage 도메인의 로컬 저장소 접근하기: Window.localStorage 메소드 Storage.key() 주어진 숫자 n에 대하여 저장소의 n번째 항목 키 반환 Storage.getItem() 주어진 키에 연결된 값 반환 Storage.setItem() 키가 저장소에 존재하는 경우 값을 재설정하며, 존재하지 않으면 키와 값을 저장소에 추가 Storage.removeItem() 주어진 키를 저장소에서 제거 Storage.clear() 저장소의 모든 키를 저장소에서 제거 예시 if(!localStorage.getI..

PWA - Progressive Web Apps

프로그레시브 웹 앱(PWA; Progressive Web Apps) 프로그레시브 웹 앱(이하 PWA)는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용하여 개발된 웹 앱으로 2016년 Google I/O에서 소개되었다. 구글이 말하는 PWA는 아래와 같다. PWA는 최고의 웹과 최고의 앱을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해 질 것이다. 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다. 모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다. 네이티브 앱 vs. 웹 2014년을 기점으로 모바일 사용자 수가 데스크탑 사용자..

타입 검사 - TypeScript (타입스크립트)

TypeScript (타입스크립트) Microsoft에서 구현한 JavaScript의 슈퍼셋(superset) 프로그래밍 언어로, JavaScript에 타입을 부여하여 컴파일 결과물로 JavaScript 코드를 출력한다. 정적 타입을 명시하여 JavaScript에서 생길 수 있는 타입 에러들을 잡아내어 개발자가 의도한 변수나 함수 등의 목적을 명확하게 전달하기 위해 사용한다. 파일 확장자는 ".ts"다. JavaScript vs. TypeScript // math.js function sum(a, b) { return a + b; } // math.ts function sum(a: number, b: number) { return a + b; } 위와 같이, TypeScript는 데이터 타입을 사전에 지..

테스트 프레임워크 - Enzyme

Enzyme Enzyme은 Airbnb에서 개발한 리액트용 컴포넌트 테스트 플러그인이다. Enzyme에 대해 알아보던 중 재미 있는 기사를 찾았다. https://dev.to/piotrstaniow/time-to-say-goodbye-enzyme-js-348c Time to say goodbye - Enzyme.js This post was also published on my blog and you can read it here. Let me start with a bold... dev.to Enzyme은 곧 못쓰게 될 거라는 내용이다. 요약하자면, Enzyme이 빠르게 변화하는 리액트를 따라가지 못하여 리액트 개발진들이 Enzyme 사용을 추천하지 않는다는 것이다. 실제로 리액트는 빠르게 발전하고 있..

테스트 프레임워크 - Cypress

Cypress Cypress란 E2E (End To End) 테스트를 위한 오픈 소스 도구로, 사용자의 입장에서 사용자에게 직접 노출되는 부분을 점검한다. E2E 테스트뿐만 아니라, 단위 테스트와 통합 테스트까지 가능하다. Chrome과 Electron만 지원한다. Multi-tab을 지원하지 않기 때문에, 테스트 페이지가 새로운 탭으로 리다이렉트 되는 경우에는 테스트를 진행할 수 없다는 단점이 있다. 설치 // npm npm install cypress --save-dev // yarn yarn add cypress --dev cypress 파일 생성 및 실행 cypress open 테스트 파일 작성 //cypress/integration/test.js // cypress/integration 폴더 안..

테스트 프레임워크 - react-testing-library

React Testing Library React Testing Library (이하 RTL)은 구현 기반의 테스트 도구인 Enzyme의 대안으로 자리 잡은 테스트 도구다. RTL은 사용자 관점에서 테스트를 하는 반면에, Enzyme은 상태 값, 상태 변수에 대해 테스트를 한다는 차이가 있다. React 테스트 도구는 RTL과 Enzyme 외에도 여러 가지가 있다. react-testing-library: 가벼운 React DOM 테스트 유틸 Enzyme: Airbnb가 만든 React를 위한 JavaScript 테스트 유틸 Jest: JavaScript 테스트 프레임워크(React 포함) React-unit: React를 위한 가벼운 단위테스트 라이브러리 Skin-deep: 얕은 렌더링을 지원하는 Re..

테스트 프레임워크 - Jest

Jest Jest는 JavaScript 코드가 제대로 동작하는지 확인하는 테스트 케이스를 만드는 테스팅 프레임워크다. 여러가지 상황들을 설정하고, 그 상황에 따라 적절한 결과가 나오는지 자동으로 테스트할 수 있기에, 프로젝트 규모가 클 때 유용하다. 설치 # npm npm install --save-dev jest # yarn yarn add --dev jest 기본 사용법 1. 함수 export // sum.js function sum(a, b) { return a + b; } module.exports = sum; 2. 함수 불러오기 // sum.test.js const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(..

CSS 프레임워크 - Bulma

Bulma Bulma는 반응형 웹 구축을 위한 프론트엔드 컴포넌트를 제공하는 오픈 소스 프레임워크다. Bootstrap의 경쟁자이기도 하며, Bootstrap과 다르게 jQuery나 JavaScript 파일에 종속되어 있지 않다는 것이 장점이다. 기본 사용법 NPM 설치 npm install bulma 예시 1: 색상 6가지 주요 색상을 원하는 요소에 인라인으로 지정하여 일관된 스타일링을 할 수 있다. is-primary is-link is-info is-success is-warning is-danger Button Button Button Button Button Button 예시 2: 크기 is-small is-medium is-large 예시 3: 기타 is-outlined (테두리) is-loa..

CSS 프레임워크 - Materialize CSS

Materialize CSS Materialize CSS는 Material Design*에 기반한 반응형 프론트엔드 프레임워크다. *Material Design이란? 모바일, 데스크톱 등 다양한 디바이스들을 아우르며, 누구나 알아볼 수 있도록 직관적이고 일관된 구글의 디자인 가이드라인이다. 2014년 구글이 스마트폰에 적용하면서 보급되었다. Setup 하기 다운로드 다운로드 CDN NPM npm install materialize-css@next Bower bower install materialize 프로젝트 구조 MyWebsite/ |--css/ | |--materialize.css | |--fonts/ | |--roboto/ | |--js/ | |--materialize.js | |--index.h..

CSS 프레임워크 - Bootstrap (부트스트랩)

Bootstrap Bootstrap (이하 부트스트랩)은 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크로, 손쉽게 반응형 웹을 구현할 수 있어서 초창기부터 큰 인기를 얻어오고 있다. 크로스 브라우징을 위한 각종 핵도 들어있기 때문에, 브라우저 호환에 대한 걱정도 덜 수 있다. 사용하는 사람이 많다보니 디자인이 지겨운 느낌이 있으나, 스타일을 커스터마이징하거나 다른 유저들의 테마를 사용하면 된다. 화면을 가로로 12개의 그리드로 분할하여 화면 해상도 크기에 따라 자동으로 정렬되는 그리드 시스템을 갖고 있다. 무겁고 느려서 개인적으로 선호하지 않는데, 여전히 부트스트랩을 사용하는 사이트가 많고 다운로드 수도 높다. 부트스트랩의 특징 키워드 반응형 (Responsive): 손쉽게 반응형을 구현할 수 있다...