공부 기록장

1. HTML 구조 및 기본 태그HTML 문서는 웹 페이지의 기본 구조를 정의하는 마크업 언어이다. 모든 HTML 문서는 다음과 같은 기본 구조를 가진다. DOCTYPEHTML 문서는 최상단에 항상 위 태그를 사용해야한다. 해당 문서를 브라우저가 다르게 렌더링 하지 않도록 하기 위해 HTML 문서임을 알려주는 태그이다.문서 범위 설정 태그로 html 문서는 해당 태그로 오픈한 후 작성되어야 하고 맨 마지막에 해당 태그로 닫아야한다.속성lang: 문서 언어 설정 (ko, en ...)html 문서 제목을 의미한다. 주로 해당 웹페이지를 보여주는 웹브라우저 상단에 표시한다.문서 제목문서 전반에 걸친 정보를 표시하기 위한 설정 // 호환성 관련 태그속성charset: 문자 인코딩 설정 (utf-8, eu..

윈도우 컴퓨터에서 개발환경을 Mac으로 바꾸면서 Flutter를 새로 설치해야했다. 이때 JDK 17버전을 사용하려고 했으나 계속 안드로이드 스튜디오의 기본 JDK 21버전을 사용하는 문제가 발생했다. Flutter를 Android Studio로 빌드할 경우에는 Gradle JDK를 변경해주면 된다고 한다. 그러나 Vs Code에서 사용하는 Flutter CLI와는 직접적인 연결이 없다. Flutter CLI는 Android Studio 설정에 의존하지 않고 자체적으로 JDK를 찾으려고 한다.Android Studio 설정은 Gradle에만 반영된다. 따라서 Flutter CLI는 Gradle 설정을 읽지 않고 Android Studio 내장 JDK를 계속 사용한다따라서 Flutter CLI에서 Andr..

Jetpack Compose가 하는 핵심적인 역할은 데이터를 UI로 변환하는 것이다. 이 과정에서 컴포지션, 레이아웃, 드로잉이라는 세 가지 주요 단계를 거치게 된다. 이러한 단계들은 일반적으로 단방향 데이터 흐름을 따르며, Compose는 성능 최적화를 위해 동일한 입력에 대한 반복 작업을 피하게 된다.컴포지션 단계 : 화면에 무엇을 보여줘야 할 지 결정레이아웃 단계 : 각 요소가 화면에 어디에 보여줘야 할 지 결정그리기 단계 : 각 요소를 화면에 어떻게 그리는지 결정 1. 컴포지션 단계컴포지션 단계에서는 화면에 무엇을 보여줄지 결정한다. Compose 런타임은 Composable 함수를 실행하고 UI를 나타내는 트리 구조를 출력한다. 이때 코드 상의 Composable 함수는 트리의 노드와 1:1로 ..

https://github.com/yundoun/Android-Dependency-Injection-with-Hilt.git GitHub - yundoun/Android-Dependency-Injection-with-HiltContribute to yundoun/Android-Dependency-Injection-with-Hilt development by creating an account on GitHub.github.com  Hilt를 사용한 의존성 관리이 프로젝트는 Hilt를 학습하기 위해 클린 아키텍처 + MVVM 으로 구현된 프로젝트입니다.위 예제를 통해서 Hilt에 대해 학습합니다.Domain 계층 (Model, Repository Interface, UseCases)Data 계층 (Room..

1. Jetpack Compose에서의 UI 구성 예시Column { Text("Hello") Row { Image(...) Button(onClick = { /* ... */ }) { Text("Click me") } }}안드로이드 개발을 하다 보면 Jetpack Compose에서 위와 같은 코드를 자주 작성하게 된다. 이러한 직관적인 UI 구성이 가능한 이유는 Kotlin의 Type-safe Builder 패턴 덕분이다. Type-safe Builder 패턴에 대해서 자세히 알아보고, 실제 Compose 예제를 통해 이해해보도록 하자.2. Type-safe Builder란?Type-safe Builder는 코틀린에서 DSL(Do..

일반적인 사용자 인증 방법 세션 기반 인증 (Session-Based Authentication)세션 기반 인증은 웹 어플리에이션에서 가장 일반적으로 사용되는 사용자 인증 방식이다.주요 동작과정은 다음과 같다.로그인 과정사용자가 ID/비밀번호를 서버에 전송서버는 credentials(자격증명)을 검증검증 성공 시 고유한 세션 ID 생성세션 ID를 서버의 세션 저장소에 저장세션 ID를 쿠키를 통해 클라이언트에 전송인증 확인 과정클라이언트는 매 요청마다 쿠키에 저장된 세션 ID를 전송서버는 세션 저장소에 해당 세션 ID 유효성 검증유효한 경우 요청 처리, 아닌 경우 에러 응답세션 기반 인증에서 사용자가 서버로 로그인 요청을 보내면 서버는 해당 사용자의 인증 정보를 검증한 후 세션 ID를 발급한다.이 세션 I..

Jetpack Compose에서 Side Effect(부작용)는 컴포저블 함수의 스코프 밖에서 애플리케이션 상태가 변경될 때 발생하는 변화를 의미한다. 컴포저블 함수는 주기적으로 재구성(Recomposition)되며, 이러한 재구성은 예측하기 어려운 순서로 실행되거나 폐기될 수 있기에, 컴포저블 함수 내에서 부작용이 발생하면 불안정한 동작을 유발할 수 있다. 따라서 컴포저블 함수는 기본적으로 부작용이 없는 것이 이상적이다.하지만 부작용이 필요한 경우가 있다. 특정 상태에 따라 SnackBar를 표시하거나 다른 화면으로 전환하는 등의 작업이 필요할 때는 부작용이 발생할 수밖에 없다. 이런 작업들은 컴포저블 함수의 생명 주기를 제어할 수 있는 환경에서 수행되어야 한다. 이를 위해서 Jetpack Compos..

컴포저블(Composable)의 수명주기는 Jetpack Compose에서 UI의 상태 변화와 관련된 중요한 개념이다. 컴포저블은 UI의 구성 요소로서 상태가 변경될 때 재구성(Recomposition) 과정을 통해 UI를 갱신하게 되며, 이를 통해 효율적으로 상태 변화를 처리한다.1. 컴포지션(Composition) 이란?컴포지션은 컴포저블을 실행하여 앱의 UI를 설명하는 과정이다. 앱의 상태에 따라 적절한 UI가 구성되며, 이를 컴포지션 트리(Composable Tree)라고 한다. 즉, UI를 구성하는 각 컴포저블이 트리 구조로 표현된다.초기 컴포지션 : 앱이 처음 시작될 때, 컴포저블이 호출되어 UI가 초기화 된다.리컴포지션 : 앱의 상태(State 객체 등)가 변경될 때 Jetpack Compo..

그라데이션 배경을 설정하기 위해 React Native에서 linear-gradient를 사용하려고 했다.Andorid와 Web 두 가지 OS를 동시에 개발하는 상황에서 linear-gradient 패키지를 설치하니 버전 충돌이 발생했다.그에 따라서 버전 충돌로 인한 현재 설치된 React 및 React DOM을 제거하고, 호환되는 버전을 설치하니 해결되었다.방법은 아래와 같다. 1. 버전 충돌로 인한 현재 설치된 React 및 React DOM 제거npm uninstall react react-dom// 종속성 충돌로 제거가 불가능 할 경우 충돌 무시하고 제거npm uninstall react react-dom --legacy-peer-deps 2. 호환되는 버전 설치npm install react@1..

명령형 프로그래밍과 비교하여 Compose 선언형 접근 방식에 있어서 UI요소는 기본적으로 상태가 없는 Stateless라고 일컫는다. 그러나 컴포저블 내부에서 상태 관리가 불가능하다는 것이 아니고, Stateful 컴포저블 또한 존재한다. 여기서 우리는 Stateless와 Stateful에 대한 개념을 한 번 정리하고 갈 필요가 있다.Compose의 선언형 접근 방식의 핵심은 UI 요소가 상태를 직접적으로 관리하지 않으며, getter와 setter를 노출하지 않는다는 점이다. Stateless와 Stateful Stateless는 말 그대로 상태가 없는 것을 뜻하며, 컴포넌트나 UI 요소가 자체적으로 상태를 저장하지 않는다는 뜻이다. 이와 대조되는 개념은 Stateful 상태로 상태를 자체적으로 관리..