본문 바로가기
PWA 프로그레시브 웹앱 핵심기술 6가지 서비스워커 (service worker) 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램이다. 브라우저와 서버 사이의 상탯값 변경을 감시 푸시알림으로 사용자에게 특정 메시지와 댓글 알림을 전송 오프라인 상태에서도 작동 웹앱 매니페스트 (manifest) 앱 소개 정보와 기본 설정을 담은 JSON 파일 manifest.json 웹앱의 고유한 제목과 소개글 스플래시 스크린 화면방향 홈화면 아이콘, 브라우저에서 사용할 아이콘 배경색 정보 manifest.json { "name": "HackerWeb", "short_name": "HackerWeb", "start_url": ".", "display": "standalone", "background_color": "#fff", .. 2020. 10. 18.
PWA 프로그레시브 웹앱의 장단점 프로그레시브 웹앱 PWA Progressive Web Apps 모바일 웹앱처럼 쉽게 개발하고 네이티브 앱과 같은 사용자 경험을 제공 본질은 웹이지만 앱처럼 사용 가능한 앱 PWA 장단점 개발 장점 익숙한 웹기술 그대로 이용 개발시간 단축 푸시알림, 오프라인캐시, HTTPS 사용 단점 하드웨어 사용은 웹 API를 통하므로 웹표준 지원하는 브라우저 필요 배포 장점 웹 브라우저만 있으면 어디든 배포가능 홈화면 추가 를 통해 응용프로그램으로 설치 가능 실시간 유지보수가능 단점 앱스토어, 플레이스토어 이용불가 사용 장점 빠른 실행속도 네이티브 앱과 유사한 사용자 경험 제공 단점 안드로이드, 윈도우 운영체제는 PWA의 모든 기능을 사용할 수 있으나 IOS는 일부만 사용 가능 PWA 프로그레시브 웹앱 핵심기술 6가지.. 2020. 10. 18.
자바스크립트 모듈관리 글로벌 네임스페이스 변수 충돌이 일어나기 쉬운 경우 여러 라이브러리를 한 프로그램에서 로드시 서로 충돌 하는 상황이 생길 수 있다. 네임 스페이스를 통해 최상위 스코프의 확인자가 아니라 속성 형태로 기능이 노출된다. 모듈관리 특정 스코프로부터 의존성 관리자를 이용한 다양한 명시적인 방법으로 확인자를 가져와 사용한다. 우발적인 스코프 충돌 예방을 위해 비공개 스코프에 확인자를 저장한다. var a = 3; (function foo(){ var a = 4; console.log(a); //4 })(); console.log(a); //3 이 함수는 함수 표현식으로 취급된다. 함수 자신의 내부 스코프에 묶여있다. 함수이름 foo를 자기 내부에 숨기면 함수를 둘러싼 스코프를 불필요하게 오염시키지 않는다. 선언문.. 2020. 10. 10.
스코프 Scope 스코프 특정 장소에 변수를 저장하고 나중에 변수를 찾는 데는 잘 정의된 규칙이 필요하다는 규칙 어디서 어떻게 변수를 찾는가를 결정하는 규칙의 집합 중첩 스코프 스코프도 다른 스코프 안에 중첩 될수 있다. 대상 변수를 현재 스코프에서 찾지 못하면 엔진은 다음 바깥의 스코프로 넘어가는 식으로 변수를 찾거나 글로벌 스코프라 부르는 가장 바깥 스코프에 도달할 때까지 반복한다. function foo(a) { console.log(a + b); } let b = 2; foo(2); //4 b에 대한 참조는 함수 foo 안에서 처리할수 없다. 함수를 포함하는 스코프에서 처리한다. (글로벌 스코프) 렉시컬 스코프 프로그래머가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초해서 코드를 처리할 때 확정된다... 2020. 10. 10.
리액트 네이티브 장점 단점 리액트 네이티브 React Native 페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크 리액트 네이티브 장점 모바일 크로스플랫폼, 자바스크립트로 IOS와 안드로이드 모바일 앱을 동시에 개발 소스코드 공유와 재사용 자바스크립트 기반으로 러닝커브와 낮은 진입장벽 컴포넌트 최대활용으로 생산성 향상, 크로스 플랫폼 일관성있는 개발방식 유지보수 비용 절감 오픈소스로 개발된 다양한 기능들 리액트 네이티브 단점 리액트에만 존재하는 개념 공부에 대한 러닝커브 하이브리드 앱방식으로 각 OS에 최적화된 네이티브 개발방식에 비해 낮은 성능 오픈소스 활용으로 인한 버그 발생에 대한 스트레스 오픈소스에 없는 기능개발 필요시 개별 개발리소스 비용발생 네이티브 앱 개발언어 IOS : swift, Objective-C And.. 2020. 10. 10.
GraphQL 공부1 GraphQL 그래프큐엘 API를 위한 쿼리 언어이다. 주요특징 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원 type Query { me: User } type User { id: ID name: String } function Query_me(request) { return request.auth.user; } function User_name(user) { return user.getName(); } 쿼리 예제 { me { name } } { "me": { "name".. 2020. 10. 2.

티스토리툴바