본문 바로가기

전체 글74

브라우저의 렌더링 원리 렌더링이란? 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다. 브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷이나, 게코 등과 같은 렌더링엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할때 CRP라는 프로세스를 사용하며 6단계로 이루어져 있다. HTML 파싱 후, DOM트리 구축 CSS 파싱 후, CSSOM트리 구축 JavaScript 실행 DOM과 CSSOM을 조합하여 렌더트리를 구축 display: none 속성과 같이 화면에서 보이지도 않고 공간 차지하지 않는 것은 렌더트리로 구축되지 않는다. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. ( Layout 단계 ) 계산한 위치/크기를 기반으로 화면에 그린다. .. 2022. 12. 28.
Directive의 설명과 타입, Built-in attribute directive 중 NgClass 활용법 Directive? Angular 어플리케이션 안에 있는 엘리먼트에 어떤 동작을 추가하는 클래스 Angular는 폼, 목록, 스타일 등에 적용할 수 있는 기본 디렉티브를 다양하게 제공한다. Angular Directive Type은 3가지로 구분할 수 있다. 컴포넌트(Component) - 템플릿이 존재하는 디렉티브이다. 가장 많이 사용되는 Type 어트리뷰트 디렉티브(Attribute directives) - 엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 Type 구조 디렉티브(Structural directives) - 조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 Type Built-in attribute directives ( 기본 어트리뷰트 디렉티브 ) HTML 엘리먼트, 어트리뷰.. 2022. 3. 9.
Angular Component Component - Angular 애플리케이션 구성 기본 단위 화면을 렌더링하는 HTML Template 동작 정의 TypeScript Class Component를 Template에 추가할 때 사용하는 CSS Selector Component가 표시되는 모습을 정의하는 CSS 스타일 4가지로 구성된다. Angular CLI로 컴포넌트 생성 방법 ng generate component 명령 실행시 컴포넌트 구성 컴포넌트 이름으로 폴더가 생성 .component.ts 컴포넌트 파일 생성 .component.html 템플릿 파일 생성 .component.css CSS 스타일 파일 생성 .component.spec.ts 테스트 파일 생성 이렇게 만든 컴포넌트의 셀렉터는 이다. Component LifeCyc.. 2022. 3. 9.
TypeScript Type에 대한 이해 TypeScript의 Type은 Java와 상당히 다르다. 몇 가지 차이점을 살펴보자. 이름으로 구체화된 타입 시스템 (Nominal Reified Type Systems) Java 주어진 값과 객체는 'null', 원시 타입, 정의된 클래스 타입 중 하나의 타입을 가진다. 런타임 시점에 정확한 타입을 묻는다. 해당 시점에 GetType(), getClass()를 호출할 수 있다. 명시적 상속관계나 공통적으로 구현된 인터페이스가 없는 이상 클래스가 유사한 형태를 가졌다해도 대체하여 사용 불가 타입은 구조가 아닌 선언을 통해 연관 지어진다. TypeScript 타입은 어떤 형태로도 런타임에서 존재하지 않는다 유사한 형태를 가질 경우 대체하여 사용 가능 타입은 구조를 통해 연관 지어진다. 집합으로서의 타입 .. 2022. 3. 6.
Angular란? Angular란? TypeScript를 기반으로 개발된 개발 플랫폼 확장가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크 라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 통합한 모음집 애플리케이션 개발, 빌드, 테스트, 수정에 필요한 개발자 도구를 제공한다 라고 Angular 공식 문서에 적혀있다. Angular 기초 컴포넌트(Component) - 애플리케이션을 구성하는 기본 단위 @Component 데코레이터(Decorator)가 붙는 TypeScript Class, HTML Template, Style로 구성된다. Decorator? Java에서의 Annotation과 유사하게 메타데이터를 지정할 수 있다. 다른 점은 메소드나 프로퍼티를 직접 변경할 수 있다는 점.. 2022. 3. 6.
[Kotlin] Room을 사용하여 로컬 데이터베이스 저장 Room 이란? SQLite를 완벽히 활용하면서 데이터베이스 액세스가 가능하도록 SQLite에 추상화 계층을 제공하는 라이브러리 앱을 실행하는 기기에서 앱 데이터의 캐시를 만들 수 있고, 앱의 캐시를 통해 사용자는 인터넷 연결 여부와 관계없이 앱의 주요 정보를 확인할 수 있다. Room을 사용하면 얻을수 있는 이점 SQL 쿼리의 컴파일 시간 확인 반복적이고 오류가 발생하기 쉬운 상용구 코드를 최소화하는 편의 주석 간소화된 데이터베이스 이전 경로 Room의 기본 요소 데이터베이스 클래스: 데이터베이스를 보유하고 앱의 영구 데이터와의 기본 연결을 위한 기본 액세스 포인트 역할을 합니다. 데이터 항목: 앱 데이터베이스의 테이블을 나타냅니다. 데이터 액세스 객체(DAO): 앱이 데이터베이스의 데이터를 쿼리, 업.. 2022. 3. 6.
Firebase란? Firebase 란? 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼 Firebase로 어떤 종류의 앱을 만들면 좋을까? 앱의 종류에는 사실항 제한이 없다. Firebase를 사용할 수 있는 플랫폼에만 제한이 있을 뿐이다. Firebase의 SDK(softward Development Kit, 소프트웨어 개발 키트)가 주로 염두에 두고 있는 대상은 iOS, Android, Web 기반이지만, Flutter, Unity, C++ 환경에 대한 지원도 점점 늘려가고 있다고 한다. 백엔드 구성요소들이 필요하다면, 다양한 언어들로 이용할 수 있는 관리자용 SDK(admin SDK)도 존재한다. 많은 SDK들 중 Firebase Ui라는 라이브러리(IOS, Android, Web 용)가 있는데, 이 SDK에서.. 2022. 3. 5.
운동일지 App 문제 해결 #01 문제1. 백그라운드로 처음 갔을 때 알림이 바로 생성되지 않고 두번 정도 가야 생성이 되는 문제 문제2. 타이머를 일시 정지 시켰을 때 알림은 계속 시간이 가는 문제 문제1. 해결 서비스를 수명주기가 ON_STOP 될 때 실행했었는데, 시작 버튼을 눌렀을 때 서비스가 실행되도록 하였다. 문제 해결 이전 코드 @OnLifecycleEvent(Lifecycle.Event.ON_STOP) fun onAppBackgrounded() { val startIntent = Intent(requireActivity(), ForegroundService::class.java) startIntent.putExtra(COMMAND_ID, COMMAND_START) startIntent.putExtra(STARTED_TIME.. 2022. 2. 17.
운동일지 App 개발일기 #04 운동 기록 화면 운동 기록 추가 화면 운동 기록을 추가하면, 달력에 기록 수에 따른 Dot을 찍는다. 달력의 날짜를 클릭하면 그날의 기록을 화면에 표시하도록 하였다. 루틴 목록 루틴 진행 타이머 작동 루틴 시작하기 버튼을 누르면, 루틴 진행 화면으로 넘어간다. 루틴에 포함된 운동을 확인할 수 있고, 타이머를 통해 루틴을 진행한 시간을 확인할 수 있다. 완료 버튼을 누르면 운동 기록을 저장할 수 있다. 추후에 운동 기록에 운동 시간도 저장할 수 있도록 해야겠다. 운동 목록 운동 목록을 확인할 수 있고, 추가할 수 있다. 타이머 기능을 추가하면서 한 생각이, 백그라운드로 실행했을 때도 서비스를 이용, 알림으로 운동 진행 시간을 알 수 있으면 좋겠다고 생각하여 추가한 기능이다. 백그라운드로 처음 갔을 때 알림.. 2022. 2. 16.