분류 전체보기 (484) 썸네일형 리스트형 캐시 (cache) 캐시는 데이터 저장소를 의미합니다. 사용목적은 데이터 요청이 있을 때 해당 정보를 저장해 두었다가 추후 해당 데이터가 다시 요청될 때 사전에 저장된 데이터를 제공함으로써 응답시간을 단축시키기 위해 사용합니다. 캐시는 요청을 저장하는 Service worker와 달리 응답을 저장합니다. 네트워크 프락시 (Network Proxy) 프락시 서버는 브라우저와 서버 중간에서 요청을 전달하는 역할을 수행합니다. 프락시 서버는 단순한 중재자의 역할을 넘어 아래와 같은 다양한 기능을 제공합니다. 특정 IP를 제외시키거나 해당 IP에 대한 접근량이 얼마나 되는지 파악할 수 있게 해 줍니다. 캐시에 이전 검색기록을 저장하여 같은 요청이 있을 경우 중간에서 요청 처리가 가능하기 때문에 속도향상. 마찬가지로 같은 사이트에 대해 다수의 요청이 있을 때 서버에 대한 요청 1회로 모든 요청을 처리할 수 있어 네트워크 성능향상. 요청하는 IP 주소를 수정하거나 부가정보 노출 없이 서버에 요청이 가능하여 개인정보 노출을 줄일 수 있음. 추가로 IP주소를 수정하는 기능을 통해 접근하는 위치를 노출하지 않거나 다른 곳에서 요청하는 것처럼 위장할 수 있어 특정 .. 서비스 워커 (Service Worker) 서비스 워커는 브라우저에서 작동하는 스크립트로 사용자의 요청을 저장합니다. 사용자가 탭을 닫더라도 서비스워커는 지속되기 때문에 다음에 사용자가 웹에 접근 시 서비스 워커가 먼저 작동합니다. 이러한 특성 때문에, 서버와 브라우저 사이에 위치하며 브라우저에서 서버로 가는 요청을 받아 이전 캐시 (cashe) 기록을 참고하여 처리할 수 있는 요청은 서버로 보내지 않고 처리하는 것이 가능합니다 (network proxy와 같은 역할 수행). 이처럼, 캐시기록이 남아있는 경우, 서비스워커는 독립적으로 전체 애플리케이션을 로딩할 수 있으며 이는 서버에 대한 의존성을 줄여 로딩 속도를 향상함으로써 User Experience (UX)를 크게 향상해 줍니다. 참고 Angular angular.io HTML 삽입 미리보.. 프로그레시브 웹 앱 프로그레시브 웹앱은 웹과 앱의 장점을 합친 애플리케이션입니다. 두 플랫폼의 장점을 호환하고 네트워크가 없는 환경에서도 애플리케이션을 구동할 수 있게 하기 위해 service worker, cache, web storate, indexedDB 등 다양한 기술을 활용합니다. 프로그레시브 웹앱인지 아닌지를 구분하는 기준은 아래와 같습니다. 모바일 화면과 웹 화면 모두에서 구동 가능한 반응형 애플리케이션 일 것 네트워크에 연결되지 않아도 애플리케이션의 모든 기능을 사용 가능할 것 Web push API, Notifications API 등일 사용하여 업데이트 알림 등으로 사용자가 해당 애플리케이션을 사용할 수 있도록 소통이 가능할 것 전용 아이콘을 통해 애플리케이션을 사용 가능할 것 애플리케이션 설치 없이 UR.. 앵귤러 디렉티브 앵귤러 템플릿 앵귤러 템플릿은 화면에 표시되는 부분을 구성합니다. 앵귤러 템플릿은 일반 HTML파일에서 사용하는 모든 요소의 사용이 가능하며 전체적인 틀은 동일하나 전체화면의 부분을 구성하기 때문에 (컴포넌트 방식) 루트인 이나 태그는 포함하지 않는다는 특징과 TypeScript와의 binding을 통해 동적구성이 가능하다는 점에서 차이가 있습니다. 앵귤러 템플릿은 아래와 같이 다양한 문법을 제공합니다. 일반문법 template expression (statement) 앵귤러 템플릿 - template expression (statement) template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표.. 앵귤러 콤포넌트 앵귤러 애플리케이션은 컴포넌트라는 조각으로 만들어집니다. 컴포넌트는 기본적으로 HTML 템플릿, CSS, TypeScript class 파일로 구성되는데요. TypeScript는 JavaScript의 진화된 버전으로 애플리케이션의 기능 (행동)을 담당합니다. 사용방법 컴포넌트는 수동으로 만들거나 앵귤러 CLI를 사용해서 만들 수 있는데요. 수동으로 만드는 경우 파일생성부터 각 파일 구성 및 모듈에 등록하는 작업을 수동으로 해 주어야 하기 때문에 앵귤러 CLI 사용을 권장합니다. 그럼, 앵귤러 CLI를 사용하여 컴포넌트를 생성하는 방법을 보겠습니다. 앵귤러 프로젝트 생성 후 커멘드 라인에서 아래 커멘드를 입력합니다. ng generate component ng g c // 단축키 위와 같이 컴포넌트 생성시.. 앵귤러 라이브러리 - 앵귤러 시메틱스 Schematic은 템플릿기반의 코드 생성 (편집) 기인데요. 앵귤러 CLI는 기본적으로 Schematic를 활용합니다. Schematic은 설명서와 같은 존재로 dependency 등을 설치할 때 필요한 정보나 옵션등을 제공합니다. @schematics/angular에 속한 Schematic들은 'ng generate' 또는 'ng add' 커멘드 사용 시 자동으로 작동합니다. 시메틱들 add schematic 주로 라이브러리를 추가할 때 사용되는데요. ng add와 함께 사용 시 패키지 매니저를 사용하여 필요한 dependency를 다운로드하고 설치에 필요한 스크립트를 작동시켜 자동으로 설정을 완료해 줍니다. 예를 들어, @angular/material 설치 시 npm i로 설치할 경우 사용을 위해 .. 이전 1 ··· 52 53 54 55 56 57 58 ··· 61 다음
