본문 바로가기

분류 전체보기

 (35)
앱 아키텍처 - 2 [3가지 레이어] 앱 아키텍처 - 관심사 분리 앱 아키텍처 - 1 아키텍처 원칙 앱 아키텍처는 앱의 부분과 그 각 부분에 필요한 기능 간의 경계를 정의 앱의 견고성을 높이며 앱을 쉽게 테스트할 수 있도록 하려면 몇 가지 특정 원칙을 준수하도록 앱 아키텍 dev-jewon.tistory.com 이전 글에서는 관심사의 분리 원칙에 대해 다루었다. 안드로이드 앱 아키텍쳐에는 3가지 레이어가 존재하며 이들은 각각의 '책임'을 명확히 가지고 있다. 3가지 레이어 UI Layer (사용자 인터페이스 레이어) 사용자의 입력을 받고, 출력을 제공합니다. 사용자 경험(UX)과 직접적으로 관련이 있습니다. Domain Layer (도메인 레이어): 비즈니스 로직을 처리합니다. 앱의 핵심 기능을 정의하고 관리합니다. Data Layer (데..
앱 아키텍처 - 1 [관심사 분리] 아키텍처 원칙 앱 아키텍처는 앱의 부분과 그 각 부분에 필요한 기능 간의 경계를 정의 앱의 견고성을 높이며 앱을 쉽게 테스트할 수 있도록 하려면 몇 가지 특정 원칙을 준수하도록 앱 아키텍처를 설계 해야 함 관심사 분리 Activity 또는 Fragement에 모든 코드를 작성하는 실수는 흔히 발생한다. UI 기반 클래스는 UI 및 운영체제 상호작용을 처리하는 로직만 포함 해야 함 UI 클래스의 경우 최대한 가볍게 유지해야 하는데, 그 이유는 라이프 사이클과 관련된 많은 문제를 피해야하기 때문이다. Activity 및 Fragment 구현은 소유 대상이 아니다 Android OS와 앱 사이를 이어주는 클래스일 뿐 OS는 사용자 상호작용을 기반으로 또는 메모리 부족과 같은 시스템 조건으로 인해 언제든지 제거..
사전 렌더링(Pre-rendering) 기능으로 성능과 SEO를 향상시키는 방법 Next.js는 사전 렌더링(Pre-rendering)을 지원하는 합니다. 사전 렌더링(Pre-rendering)? 웹 페이지를 브라우저에 응답하기 전에 서버 측에서 페이지를 사전에 완전히 렌더링하는 기술을 말합니다. 이러한 기능을 통해 웹 애플리케이션의 초기 로딩 속도와 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다. 사전 렌더링의 종류 Next.js에서 사전 렌더링은 두 가지 방식으로 이루어집니다. 정적 사전 렌더링(Static Pre-rendering) getStaticProps 빌드 시간에 데이터를 가져와 페이지를 사전 렌더링하는 데 사용됩니다. 이 함수를 사용하면 데이터를 서버 측에서 미리 가져와 페이지를 생성할 수 있습니다. 이후에는 클라이언트 측에서 해당 페이지를 로드할 때 더 이상 데이..
React 리렌더링: 상태 변경, Virtual DOM, 그리고 Diffing 알고리즘 리액트의 핵심 개념 중 하나인 상태 변경, Virtual DOM, Diffing 알고리즘에 대해 알아보겠습니다. 상태(state) 변경과 리렌더링 React는 상태(state)가 변경될 때 해당 상태를 사용하는 컴포넌트를 리렌더링합니다. 즉, 어떤 상태가 변경되었을 때 그 상태를 사용하고 있는 컴포넌트만 다시 그려집니다. 이는 상태가 변경되어도 해당 상태에 의존하지 않는 다른 컴포넌트는 리렌더링 되지 않는다는 것을 의미합니다. Virtual DOM 리렌더링의 효율성을 위해 리액트는 Virtual DOM이라는 개념을 도입했습니다. Virtual DOM은 실제 DOM을 추상화한 개념으로, 상태가 변경될 때마다 전체 UI를 Virtual DOM 상에서 리렌더링합니다. 이는 메모리에 가상으로 존재하는 DOM으로..
JSX(JavaScript XML)란 무엇인가? JSX(JavaScript XML)는 React와 함께 사용되는 UI(User Interface) 컴포넌트를 만들기 위한 JavaScript 확장 문법 입니다. JSX는 XML과 비슷한 문법을 가지며, JavaScript 코드 안에서 HTML과 유사한 구조로 UI 요소를 정의할 수 있게 해줍니다. JSX 문법 JSX 문법은 일반적인 JavaScript와 유사하지만, 몇 가지 차이점이 있습니다. JSX에서는 HTML 태그와 유사한 구조로 컴포넌트를 정의할 수 있으며, 이를 React에서 사용하는 컴포넌트로 변환하여 사용합니다. 간단한 JSX 예시를 살펴보겠습니다: const App = () => { return ( Hello, JSX! This is a JSX component. ); }; 위 코드에서 r..
자바스크립트의 모듈 시스템: 종류와 특징 & Node 에서 사용 법 자바스크립트는 모듈 시스템을 통해 코드를 구성하고 관리할 수 있는 강력한 기능을 제공합니다. 모듈 시스템은 코드를 모듈 단위로 나누어 재사용성과 유지보수성을 향상시킵니다. ES6 Modules: ES6 Modules는 ECMAScript 2015(ES6)에서 공식적으로 도입된 자바스크립트의 모듈 시스템입니다. ES6 Modules는 브라우저와 서버 환경에서 모두 사용할 수 있으며, 정적으로 모듈을 로딩합니다. import와 export 키워드를 사용하여 모듈을 가져오고 내보내는 것이 특징입니다. ES6 Modules는 정적 분석에 의해 모듈의 의존성을 파악하여 필요한 모듈만 로딩하므로 성능상의 이점을 제공합니다. 또한, 브라우저에서도 네이티브로 지원되기 때문에 별도의 번들러 없이도 모듈을 사용할 수 있습..
DMZ (Demilitarized Zone): 서버 보안의 첫 번째 방패 DMZ란 무엇인가? DMZ (DeMilitarized Zone)는 컴퓨터 네트워킹에서 매우 중요한 개념 보안이 엄격한 내부 네트워크와 외부 네트워크(예를 들어, 인터넷) 사이에 위치한 물리적 또는 논리적인 서브네트워크를 가리킴 DMZ의 주된 목적은 공개 서비스를 제공하면서 동시에 내부 네트워크를 보호하는 것 왜 DMZ가 필요한가? 이메일 서버, 웹 서버, DNS 서버와 같은 공용 서비스를 제공하는 시스템은 대개 외부 네트워크에 노출됨 그러나 이러한 시스템이 직접적으로 내부 네트워크에 노출되는 것은 매우 위험을 야기함 공격자가 이러한 시스템을 통해 내부 네트워크에 침입할 가능성이 있기 때문 이런 위험을 피하기 위해, 이러한 서비스를 제공하는 시스템은 DMZ에 위치하게 됩니다. DMZ는 어떻게 작동하는가?..
카페 24 쇼핑몰 제작 순서 1. 아이디 생성 호스팅과 아이디를 공유하지 않는다. 쇼핑몰 단독 아이디 이다. 호스팅 아이디가 법인 인증 중이라면 법인 인증 완료 후 생성 할 수 있다. 2. 판매 예정 카테고리 선택 3. 디자인 선택 4. 쇼핑몰 기본 정보 입력
큐 Queue 큐 자료 구조 큐는 컴퓨터 과학에서 선입선출(FIFO) 자료 구조입니다. 즉, 큐에 가장 먼저 추가된 요소는 가장 먼저 제거됩니다. 큐는 배열이나 연결 목록을 사용하여 구현할 수 있습니다. 배열을 사용하여 큐를 구현할 때는 큐의 처음과 끝을 가리키는 포인터를 사용합니다. 요소를 추가하려면 큐의 끝에 추가하고 요소를 제거하려면 큐의 처음에서 제거합니다. Linked List을 사용하여 큐를 구현할 때는 각 요소에 포인터를 사용하는 Linked List을 사용합니다. 요소를 추가하려면 새 요소를 연결 목록의 끝에 추가하고 요소를 제거하려면 연결 목록의 처음에서 제거합니다. 큐는 간단한 자료 구조이지만 매우 유용합니다. 데이터가 입력된 시간 순서대로 처리해야 하는 상황에 자주 사용됩니다. 다음은 큐가 사용되..
Android Studio 에서 Hilt 의 소비 표시가 안나타는 경우 상의 예제 코드를 보면 provideApiService 함수의 경우 Retrofit을 매개 변수로 사용하는데 스튜디오에 코드 뷰어의 좌측 끝에 어디서 제공을 하는지 표시가 된다. 하지만 provideRetrofit 함수에서는 OkhttpClient을 매개 변수로 사용하는데 스튜디오에서는 어디서 제공하는지 표기가 되지 않는다. 이유는 간단하다. 함수의 리턴 값을 주지 않을 경우 스튜디오에서 어디서 제공 하는지 표시를 하지 않는다. 그래서 하기 이미지와 같이 리턴값을 지정해 준다면 표기가 된다.

티스토리툴바