임다 블로그

iframe과 통신하는 방법

임다 — Mon, 3 Feb 2025 15:31:05 +0900

iframe이란?

iframe(inline frame)은 HTML 문서 내에 다른 HTML 페이지를 삽입할 수 있는 태그입니다. 주로 외부 콘텐츠를 현재 페이지에 표시하거나, 서로 다른 도메인의 콘텐츠를 불러오는 데 사용됩니다.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

위와 같은 코드로 외부 사이트를 현재 페이지에 삽입할 수 있습니다. 그러나 iframe에 삽입된 콘텐츠와 부모 페이지 간에는 보안상의 이유로 직접적으로 JavaScript 객체를 공유할 수 없습니다. 이러한 제약은 특히 서로 다른 출처(origin)를 가진 경우 더 엄격해집니다.

`iframe`과의 통신 방식

iframe과 부모 페이지 간의 통신을 위해 가장 일반적으로 사용되는 방법은 postMessage API입니다. 이 방법은 서로 다른 출처 간에도 안전하게 메시지를 주고받을 수 있도록 설계되었습니다.

`postMessage`란?

postMessage는 서로 다른 윈도우 간에 안전하게 메시지를 보낼 수 있는 API입니다. 부모 페이지는 iframe에 메시지를 보내고, iframe은 부모 페이지로부터 메시지를 수신할 수 있습니다.

문법은 다음과 같습니다.

targetWindow.postMessage(message, targetOrigin);

targetWindow: 메시지를 보낼 대상 창(iframe의 contentWindow 등).
message: 전송할 데이터(문자열 또는 객체).
targetOrigin: 메시지를 수신할 창의 출처(origin). 보안 강화를 위해 정확한 출처를 지정하는 것이 중요합니다.

부모 페이지에서 `iframe`으로 메시지 보내기

부모 페이지 코드

<!-- 부모 페이지 -->
<iframe id="childFrame" src="child.html" width="600" height="400"></iframe>

<button id="sendMessageButton">메시지 보내기</button>

<script>
  const iframe = document.getElementById('childFrame');
  const sendMessageButton = document.getElementById('sendMessageButton');

  sendMessageButton.addEventListener('click', () => {
    const message = { type: 'GREETING', text: '안녕하세요, iframe!' };
    iframe.contentWindow.postMessage(message, 'https://example.com'); // 정확한 출처 지정
  });
</script>

iframe 요소를 가져와 contentWindow를 통해 postMessage를 호출합니다.
message는 객체 형태로 전송할 수 있으며, type을 활용해 메시지의 유형을 구분할 수 있습니다.
targetOrigin은 반드시 iframe의 정확한 출처로 지정해야 보안 사고를 예방할 수 있습니다.

`iframe` 페이지 코드(`child.html`)

<!-- child.html -->
<script>
  window.addEventListener('message', (event) => {
    // 보안: 신뢰할 수 있는 출처인지 확인
    if (event.origin !== 'https://parent.com') {
      return;
    }

    const { type, text } = event.data;

    if (type === 'GREETING') {
      console.log('부모로부터 받은 메시지:', text);
    }
  });
</script>

message 이벤트를 수신하기 위해 addEventListener로 이벤트 리스너를 등록합니다.
event.origin을 확인하여 신뢰할 수 없는 출처의 메시지를 차단합니다.
event.data에 전송된 데이터가 담겨 있습니다.

`iframe`에서 부모 페이지로 메시지 보내기

반대로 iframe에서 부모 페이지로 메시지를 보낼 수도 있습니다. 이때는 parent.postMessage를 사용합니다.

`iframe` 페이지 코드(`child.html`)

<button id="sendToParentButton">부모로 메시지 보내기</button>

<script>
  const sendToParentButton = document.getElementById('sendToParentButton');

  sendToParentButton.addEventListener('click', () => {
    const message = { type: 'RESPONSE', text: '안녕하세요, 부모님!' };
    parent.postMessage(message, 'https://parent.com'); // 부모 출처 지정
  });
</script>

parent.postMessage를 통해 부모 창으로 메시지를 전송합니다.
보안 강화를 위해 부모 페이지의 정확한 출처를 지정합니다.

부모 페이지 코드

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://example.com') {
    return; // 출처 확인
  }

  const { type, text } = event.data;

  if (type === 'RESPONSE') {
    console.log('iframe으로부터 받은 메시지:', text);
  }
});

`postMessage` 사용 시 보안 고려 사항

출처 검증(origin 확인)
- 반드시 event.origin을 확인하여 신뢰할 수 있는 출처에서 온 메시지만 처리해야 합니다.
- 예: if (event.origin !== 'https://trusted-site.com') return;
데이터 검증
- 수신한 데이터의 구조와 값이 예상한 것인지 검증해야 합니다.
- 예: if (typeof event.data === 'object' && event.data.type) { ... }
targetOrigin 제한
- postMessage 호출 시 '*'을 사용하지 말고, 가능한 한 정확한 출처를 지정해야 합니다.
민감한 데이터 전송 금지
- 민감한 정보를 메시지로 직접 전송하지 말고, 별도의 보안 메커니즘을 사용해야 합니다.

실전 예제: 부모와 `iframe` 간의 양방향 채팅

부모 페이지 (`index.html`)

<iframe id="chatFrame" src="chat.html" width="400" height="300"></iframe>

<div>
  <input type="text" id="parentMessage" placeholder="부모 메시지 입력" />
  <button id="sendToIframe">보내기</button>
</div>

<script>
  const iframe = document.getElementById('chatFrame');
  const messageInput = document.getElementById('parentMessage');
  const sendButton = document.getElementById('sendToIframe');

  sendButton.addEventListener('click', () => {
    const message = messageInput.value;
    iframe.contentWindow.postMessage({ type: 'PARENT_MESSAGE', text: message }, 'https://example.com');
    messageInput.value = '';
  });

  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://example.com') return;

    const { type, text } = event.data;
    if (type === 'IFRAME_MESSAGE') {
      console.log('iframe 메시지:', text);
    }
  });
</script>

`iframe` 페이지 (`chat.html`)

<div>
  <input type="text" id="iframeMessage" placeholder="iframe 메시지 입력" />
  <button id="sendToParent">부모로 보내기</button>
</div>

<script>
  const messageInput = document.getElementById('iframeMessage');
  const sendButton = document.getElementById('sendToParent');

  sendButton.addEventListener('click', () => {
    const message = messageInput.value;
    parent.postMessage({ type: 'IFRAME_MESSAGE', text: message }, 'https://parent.com');
    messageInput.value = '';
  });

  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://parent.com') return;

    const { type, text } = event.data;
    if (type === 'PARENT_MESSAGE') {
      console.log('부모 메시지:', text);
    }
  });
</script>

정리

iframe과 부모 페이지 간의 통신은 postMessage API를 통해 안전하고 효율적으로 처리할 수 있습니다.
반드시 origin 검증과 데이터 유효성 검사를 통해 보안 위협을 방지해야 합니다.
실시간 데이터 교환, 채팅 기능, 외부 서비스 통합 등 다양한 활용이 가능합니다.

postMessage의 활용 방법과 보안 지침을 잘 숙지하면 복잡한 웹 애플리케이션에서도 안전한 iframe 통신을 구현할 수 있습니다.

Web Worker란 무엇인가?

임다 — Sun, 2 Feb 2025 15:16:10 +0900

Web Worker 개념

Web Worker는 웹 애플리케이션에서 메인 스레드와 별도로 백그라운드에서 자바스크립트 코드를 실행할 수 있는 방법을 제공합니다. 이를 통해 CPU 집약적인 작업을 메인 스레드의 렌더링이나 사용자 인터페이스(UI) 처리에 영향을 주지 않고 수행할 수 있습니다.

웹 브라우저의 자바스크립트는 기본적으로 단일 스레드로 동작합니다. 이로 인해 무거운 계산 작업이나 데이터 처리 로직이 실행될 경우 페이지가 멈추거나 느려지는 현상이 발생할 수 있습니다. 이러한 문제를 해결하기 위해 Web Worker를 사용합니다.

Web Worker의 주요 특징

백그라운드 작업 처리: 무거운 연산이나 대용량 데이터 처리 작업을 백그라운드에서 실행하여 UI의 부드러운 동작 유지
멀티스레드 지원: 메인 스레드와 별도의 스레드에서 코드가 실행됨
비동기 메시지 통신: postMessage()와 onmessage 이벤트 리스너를 통해 메인 스레드와 데이터를 주고받을 수 있음
DOM 접근 불가: Web Worker는 브라우저의 DOM에 직접 접근할 수 없음 (렌더링 관련 작업은 메인 스레드에서 처리해야 함)

Web Worker 기본 사용법

1. Worker 파일 생성

먼저 worker.js라는 파일을 만듭니다.

// worker.js
self.onmessage = function(event) {
    const receivedData = event.data;
    const result = receivedData * 2; // 받은 값을 2배로 처리
    self.postMessage(result); // 결과를 메인 스레드로 반환
};

self는 워커 자체를 가리키며, onmessage 이벤트 리스너를 통해 메인 스레드로부터 메시지를 수신합니다.
postMessage()를 통해 메인 스레드로 처리된 데이터를 다시 전달합니다.

2. 메인 스레드에서 Worker 사용

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
    console.log('Worker로부터 받은 결과:', event.data);
};

worker.postMessage(10); // Worker로 값 전달

new Worker('worker.js')로 워커 인스턴스를 생성합니다.
postMessage(10)을 사용해 worker.js로 데이터를 보냅니다.
worker.onmessage를 통해 백그라운드에서 처리된 결과를 수신합니다.

Web Worker의 실제 활용 예제

대규모 데이터 처리

예를 들어, 대규모 배열에서 소수를 찾는 작업은 CPU 부하가 큰 작업입니다. 이 작업을 Web Worker로 처리해 보겠습니다.

1. Worker 파일 (primeWorker.js)

self.onmessage = function(event) {
    const maxNumber = event.data;
    const primeNumbers = [];

    function isPrime(number) {
        if (number < 2) return false;
        for (let i = 2; i <= Math.sqrt(number); i++) {
            if (number % i === 0) return false;
        }
        return true;
    }

    for (let i = 2; i <= maxNumber; i++) {
        if (isPrime(i)) {
            primeNumbers.push(i);
        }
    }

    self.postMessage(primeNumbers);
};

2. 메인 스레드

const primeWorker = new Worker('primeWorker.js');

primeWorker.onmessage = function(event) {
    console.log('찾은 소수 목록:', event.data);
};

primeWorker.postMessage(100000); // 10만까지의 소수 찾기 요청

이렇게 하면 메인 스레드가 멈추지 않고 사용자 인터페이스가 부드럽게 유지됩니다.

Web Worker의 한계와 주의사항

DOM 접근 불가: Web Worker는 DOM 요소를 직접 조작할 수 없습니다. DOM 업데이트는 반드시 메인 스레드에서 처리해야 합니다.
파일 경로 제한: Worker는 동일 출처 정책(same-origin policy)을 따르므로 다른 도메인의 스크립트는 로드할 수 없습니다.
비용이 큰 초기화: Worker 생성에는 비용이 들기 때문에 너무 많은 워커를 생성하는 것은 오히려 성능을 저하시킬 수 있습니다.
복잡한 데이터 전송: 데이터는 직렬화되어 전송되므로 대용량 데이터를 빈번히 주고받으면 성능 저하가 발생할 수 있습니다.

Shared Worker와 Service Worker

Shared Worker: 여러 탭이나 윈도우에서 공유할 수 있는 워커입니다. 예를 들어 여러 탭에서 동일한 데이터 소스를 공유해야 할 때 유용합니다.
Service Worker: 오프라인 캐시 관리, 푸시 알림 등 브라우저와 네트워크 간의 프록시 역할을 수행하는 워커입니다.

Web Worker와 멀티스레딩의 차이점

Web Worker는 자바스크립트에서 제한적으로 제공되는 멀티스레딩 기능과 유사하지만, 진정한 멀티스레딩과는 다소 차이가 있습니다. Web Worker는 메인 스레드와 별도의 스레드에서 동작하지만, 스레드 간의 직접적인 메모리 공유는 불가능하며 오직 메시지 기반 통신으로만 데이터를 주고받을 수 있습니다.

결론

Web Worker는 자바스크립트의 싱글 스레드 한계를 극복하고, 무거운 작업을 효율적으로 처리할 수 있는 강력한 도구입니다. 특히 대규모 데이터 처리, 이미지 처리, 암호화 작업 등 CPU 집약적인 작업을 수행할 때 매우 유용합니다. 다만 DOM 접근 불가, 초기화 비용 등 한계점을 잘 이해하고 사용해야 합니다.

URL과 URLSearchParams 활용법

임다 — Sat, 1 Feb 2025 20:14:05 +0900

URL과 URLSearchParams 개요

웹 개발을 하다 보면 브라우저의 주소창에 보이는 URL을 다루거나, URL의 쿼리 문자열을 분석해야 하는 경우가 많습니다. 이때 유용하게 사용할 수 있는 것이 URL과 URLSearchParams입니다. 이 두 가지는 자바스크립트에서 제공하는 내장 객체로, URL을 쉽고 직관적으로 다룰 수 있도록 도와줍니다.

URL 객체의 기본 사용법

URL 객체는 전체 URL을 분해하거나 조작할 때 사용됩니다. URL 생성자는 전체 URL 문자열을 받아 객체를 생성합니다.

URL 객체 생성하기

const siteUrl = new URL('https://www.example.com:8080/path/to/page?category=books&sort=asc#section2');

console.log(siteUrl);

이렇게 생성된 URL 객체는 여러 속성을 제공합니다.

주요 속성

href: 전체 URL 문자열
protocol: URL의 프로토콜 (예: https:)
hostname: 도메인 이름 (예: www.example.com)
port: 포트 번호 (예: 8080)
pathname: 경로 (예: /path/to/page)
search: 쿼리 문자열 (예: ?category=books&sort=asc)
hash: 해시 (예: #section2)

예제: URL 속성 확인

console.log(siteUrl.href);       // "https://www.example.com:8080/path/to/page?category=books&sort=asc#section2"
console.log(siteUrl.protocol);   // "https:"
console.log(siteUrl.hostname);   // "www.example.com"
console.log(siteUrl.port);       // "8080"
console.log(siteUrl.pathname);   // "/path/to/page"
console.log(siteUrl.search);     // "?category=books&sort=asc"
console.log(siteUrl.hash);       // "#section2"

이처럼 URL의 각 부분을 손쉽게 추출할 수 있습니다.

URLSearchParams의 활용

URLSearchParams는 URL의 쿼리 문자열을 조작하는 데 특화된 객체입니다. URL 객체의 searchParams 속성을 통해 쉽게 사용할 수 있습니다.

URLSearchParams 객체 생성하기

const queryParams = new URLSearchParams('category=books&sort=asc');

또는 URL 객체와 함께 사용하면 더 편리합니다.

const siteUrl = new URL('https://www.example.com/path?category=books&sort=asc');
const queryParams = siteUrl.searchParams;

주요 메서드

get(key): 특정 쿼리 매개변수의 값을 가져옵니다.
set(key, value): 특정 쿼리 매개변수의 값을 설정합니다.
append(key, value): 동일한 키에 새로운 값을 추가합니다.
has(key): 특정 쿼리 매개변수가 존재하는지 확인합니다.
delete(key): 특정 쿼리 매개변수를 삭제합니다.
toString(): 쿼리 문자열로 변환합니다.

예제: 쿼리 매개변수 조작하기

console.log(queryParams.get('category')); // "books"
queryParams.set('sort', 'desc');          // sort=desc로 변경
queryParams.append('page', '2');          // page=2 추가
queryParams.delete('category');           // category 삭제

console.log(queryParams.toString());      // "sort=desc&page=2"

URL과 URLSearchParams를 활용한 실전 예제

예제 1: 사용자가 선택한 필터를 URL에 반영하기

function updateURL(category, sort, page) {
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('category', category);
    currentUrl.searchParams.set('sort', sort);
    currentUrl.searchParams.set('page', page);

    window.history.pushState({}, '', currentUrl);
}

updateURL('movies', 'popular', 3);

이렇게 하면 브라우저의 주소창이 ?category=movies&sort=popular&page=3로 변경됩니다.

예제 2: URL에서 쿼리 매개변수 읽어오기

function getQueryParam(key) {
    const currentUrl = new URL(window.location.href);
    return currentUrl.searchParams.get(key);
}

const selectedCategory = getQueryParam('category');
console.log(selectedCategory); // 현재 URL에 따라 출력값이 달라짐

URL과 URLSearchParams의 장점

가독성 향상: 문자열 파싱 없이 직관적으로 URL과 쿼리 매개변수를 다룰 수 있습니다.
에러 감소: 수동으로 문자열을 처리할 때 발생할 수 있는 오류를 줄여줍니다.
브라우저 호환성: 최신 브라우저에서 널리 지원되며, 특히 URLSearchParams는 HTTP 요청을 보낼 때 유용합니다.

주의할 점

브라우저 호환성: 구형 브라우저(특히 Internet Explorer)에서는 URLSearchParams가 지원되지 않습니다. 필요한 경우 폴리필을 사용해야 합니다.
URL 인코딩: URLSearchParams는 자동으로 URL 인코딩을 처리합니다. 그러나 서버와의 호환성을 위해 추가적인 처리가 필요할 수 있습니다.

결론

URL과 URLSearchParams는 URL을 다루는 과정을 매우 간단하고 직관적으로 만들어줍니다. 웹 개발에서 URL 파싱, 쿼리 문자열 조작, 상태 관리 등 다양한 상황에서 활용할 수 있으며, 코드의 가독성과 유지 보수성을 높이는 데 큰 도움이 됩니다.

MutationObserver란?

임다 — Sat, 1 Feb 2025 14:11:08 +0900

MutationObserver란?

MutationObserver는 DOM(Document Object Model) 요소의 변화(변경 사항)를 비동기적으로 감지할 수 있는 기능을 제공합니다. 예를 들어, 웹 페이지에서 특정 요소의 속성, 자식 노드, 텍스트 콘텐츠가 변경될 때 이를 실시간으로 감지하고 대응할 수 있게 해주는 도구입니다.

MutationObserver는 이전에 사용되던 Mutation Events의 한계를 보완하기 위해 도입된 API입니다. Mutation Events는 성능이 저하되는 문제가 있었지만, MutationObserver는 더 나은 성능과 효율성을 제공합니다.

MutationObserver의 주요 기능

DOM 요소의 추가, 삭제 감지
요소의 속성(attribute) 변경 감지
텍스트 콘텐츠의 변경 감지
하위 트리(subtree)의 변화 감지

MutationObserver의 기본 구조

MutationObserver를 사용하기 위해서는 다음과 같은 단계를 거쳐야 합니다.

옵저버 인스턴스 생성
관찰할 대상과 설정 정의
옵저버 시작
옵저버 중지 (필요 시)

기본 코드 예제

// 1. MutationObserver 인스턴스 생성
const observer = new MutationObserver((mutationRecords, observer) => {
  mutationRecords.forEach((mutation) => {
    console.log('변경 사항 감지:', mutation);
  });
});

// 2. 감시할 대상 요소 선택
const targetElement = document.getElementById('target');

// 3. 감시 옵션 설정
const config = {
  childList: true,       // 자식 노드의 추가 또는 제거 감지
  attributes: true,      // 속성 변경 감지
  characterData: true,   // 텍스트 콘텐츠 변경 감지
  subtree: true          // 하위 트리까지 감지
};

// 4. 옵저버 시작
observer.observe(targetElement, config);

// 5. 변경 테스트를 위한 코드
targetElement.setAttribute('data-status', 'active'); // 속성 변경
targetElement.textContent = '새로운 텍스트';         // 텍스트 콘텐츠 변경
const newElement = document.createElement('div');    // 자식 노드 추가
targetElement.appendChild(newElement);

결과

위의 코드를 실행하면 콘솔에는 다음과 같은 메시지가 출력됩니다.

변경 사항 감지: [MutationRecord 객체]

각 MutationRecord 객체에는 변경된 내용에 대한 상세 정보가 포함됩니다.

MutationObserver의 설정 옵션

옵저버의 감시 동작을 설정하기 위해 observe 메서드에서 사용하는 설정 객체(config)는 다음과 같은 속성을 가집니다.

옵션	설명	데이터 타입	기본값
`childList`	자식 노드의 추가/제거 감지	`boolean`	`false`
`attributes`	속성의 변경 감지	`boolean`	`false`
`characterData`	텍스트 콘텐츠의 변경 감지	`boolean`	`false`
`subtree`	하위 트리까지 감지	`boolean`	`false`
`attributeFilter`	감시할 속성 목록 지정	`Array`	`null`
`attributeOldValue`	변경 전 속성 값 저장	`boolean`	`false`
`characterDataOldValue`	변경 전 텍스트 콘텐츠 저장	`boolean`	`false`

예제: 특정 속성만 감지하기

observer.observe(targetElement, {
  attributes: true,
  attributeFilter: ['data-status'] // 특정 속성만 감지
});

targetElement.setAttribute('data-status', 'inactive'); // 감지됨
targetElement.setAttribute('class', 'new-class');      // 감지되지 않음

이 설정은 data-status 속성의 변경만 감지하고, 다른 속성 변경은 무시합니다.

MutationRecord 객체 이해하기

옵저버 콜백 함수로 전달되는 mutationRecords 배열은 각 변경 사항을 나타내는 MutationRecord 객체로 구성되어 있습니다. 이 객체는 다음과 같은 속성을 가집니다.

속성	설명
`type`	변경 유형 (`attributes`, `childList`, `characterData`)
`target`	변경이 발생한 요소
`addedNodes`	새로 추가된 노드 목록
`removedNodes`	제거된 노드 목록
`attributeName`	변경된 속성 이름 (속성 변경 시)
`oldValue`	변경 전 값 (옵션 설정 시)

예제: MutationRecord 속성 확인

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log('변경 유형:', mutation.type);
    console.log('변경된 요소:', mutation.target);
    if (mutation.type === 'attributes') {
      console.log('변경된 속성:', mutation.attributeName);
      console.log('이전 값:', mutation.oldValue);
    }
  });
});

observer.observe(targetElement, {
  attributes: true,
  attributeOldValue: true
});

targetElement.setAttribute('data-status', 'completed');

MutationObserver의 성능 고려 사항

MutationObserver는 성능이 최적화되어 있지만, 과도한 감시 설정은 여전히 성능 저하를 초래할 수 있습니다. 특히 대규모 DOM 구조나 빈번한 변경이 발생하는 요소를 감시할 때 주의해야 합니다.

성능 최적화 팁

필요한 변경 사항만 감시하기: childList, attributes, characterData 중 필요한 옵션만 설정합니다.
subtree 사용 최소화: 하위 트리 감시는 범위가 넓어져 성능에 영향을 줄 수 있습니다.
옵저버 중지: 필요 없는 경우 disconnect() 메서드로 감시를 중지합니다.

// 옵저버 중지
observer.disconnect();

실전 예제: 실시간 댓글 감지하기

<div id="comments">
  <p>첫 번째 댓글</p>
</div>
<button id="addComment">댓글 추가</button>

const commentSection = document.getElementById('comments');
const addCommentButton = document.getElementById('addComment');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      console.log('새로운 댓글이 추가되었습니다.');
    }
  });
});

observer.observe(commentSection, { childList: true });

addCommentButton.addEventListener('click', () => {
  const newComment = document.createElement('p');
  newComment.textContent = '새로운 댓글입니다!';
  commentSection.appendChild(newComment);
});

이 예제에서는 버튼 클릭 시 새로운 댓글이 추가되고, MutationObserver가 이를 감지하여 콘솔에 메시지를 출력합니다.

MutationObserver의 활용 사례

실시간 콘텐츠 업데이트 감지 (예: 채팅, 알림)
동적 폼 검증 (입력 필드 변경 감지)
로딩 상태 관리 (비동기 요소 렌더링 감지)
광고 차단기 탐지 (DOM 변조 감지)

마무리

MutationObserver는 DOM의 변화에 민감하게 반응해야 하는 웹 애플리케이션에서 매우 유용한 도구입니다. 성능과 효율성을 고려하여 필요한 부분만 감시하고, 콜백 함수를 적절히 활용하면 더 나은 사용자 경험을 제공할 수 있습니다.

Flutter AdMob 가족 정책 위반 해결 방법

임다 — Mon, 27 Jan 2025 17:51:34 +0900

Google Play에서 Flutter 애플리케이션에 AdMob을 연동한 경우, "가족 정책" 위반으로 앱이 삭제되거나 경고를 받는 경우가 종종 발생합니다. 이는 AdMob 광고를 통해 어린이 및 가족을 대상으로 부적절한 데이터가 수집되거나 전송되는 상황 때문입니다. 이 글에서는 이러한 문제를 진단하고 해결하는 방법을 단계별로 안내하겠습니다.

Google 가족 정책과 `AdMob`의 관계

Google의 "가족 정책"은 어린이를 대상으로 하는 앱에 대해 엄격한 데이터 보호 요구 사항을 적용합니다. 특히 아래와 같은 항목이 위반 사례로 꼽힙니다.

사용자 연령을 판별할 수 없는 데이터 전송
어린이를 대상으로 하면서 부적절한 광고 노출
Advertising ID와 같은 식별자 전송

위반 사례는 대부분 AdMob 광고에서 발생하며, 아래 두 가지 이유로 분류됩니다.

AdMob이 연령에 적합하지 않은 광고를 노출.
연령을 알 수 없는 데이터(예: Advertising ID)를 광고 네트워크로 전송.

해결 방법: Flutter 애플리케이션 수정

아래 단계들을 따라 앱을 수정하고 정책 위반 문제를 해결하세요.

`AdMob`에 가족 정책 설정 추가

AdMob에서 Google의 가족 정책을 준수하려면 TagForChildDirectedTreatment 또는 TagForUnderAgeOfConsent 설정을 반드시 적용해야 합니다. GoogleMobileAds 플러그인을 사용하는 경우 아래와 같이 구현할 수 있습니다.

초기화 시 가족 친화 설정 적용

아래는 GoogleMobileAds 초기화 시 가족 친화 설정을 추가하는 방법입니다.

import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Google Mobile Ads 초기화
  await MobileAds.instance.initialize();

  // AdRequest에 가족 친화 광고 설정 추가
  final adRequest = AdRequest(
    childDirected: true, // 어린이 대상 여부
    underAgeOfConsent: true, // 연령 제한 동의 여부
  );

  runApp(MyApp(adRequest: adRequest));
}

class MyApp extends StatelessWidget {
  final AdRequest adRequest;

  MyApp({required this.adRequest});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AdMob Family Policy Example')),
        body: AdBanner(adRequest: adRequest),
      ),
    );
  }
}

class AdBanner extends StatelessWidget {
  final AdRequest adRequest;

  AdBanner({required this.adRequest});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      child: AdWidget(
        ad: BannerAd(
          adUnitId: '<YOUR_AD_UNIT_ID>',
          size: AdSize.banner,
          request: adRequest,
          listener: BannerAdListener(),
        )..load(),
      ),
    );
  }
}

주요 설정 값

childDirected: true로 설정 시 앱이 어린이를 대상으로 한다고 Google에 명시합니다.
underAgeOfConsent: true로 설정하면 앱이 GDPR의 연령 제한 사용자도 고려한다고 알려줍니다.

광고 단위 업데이트

앱에 사용된 광고 단위(Ad Unit ID)가 가족 정책에 적합한지 확인하세요.

광고 네트워크: Google AdMob 대시보드에서 "광고 형식 및 네트워크" 옵션을 검토합니다.
광고 단위 설정: "가족 정책 프로그램"에 적합한 단위인지 확인합니다.

광고 단위 설정 변경 방법

AdMob 콘솔에 로그인합니다.
문제된 광고 단위를 클릭합니다.
"가족 정책 설정"에서 적합한 옵션으로 설정합니다.

데이터 전송 검사

Advertising ID가 앱 외부로 전송되는지 확인해야 합니다. 이는 대부분의 제3자 SDK에서 자동으로 발생하므로 아래 단계를 따르세요.

flutter pubspec.yaml에 사용된 모든 제3자 플러그인을 검토합니다.
해당 플러그인의 데이터 전송 규정을 확인합니다.
불필요하거나 데이터 전송이 명확하지 않은 플러그인을 제거하거나 대체합니다.

불필요한 데이터 전송 방지

필요하다면 광고 요청 시 데이터 전송을 제한하는 설정을 추가할 수 있습니다.

final adRequest = AdRequest(
  nonPersonalizedAds: true, // 비개인화 광고 설정
);

테스트 환경에서 정책 준수 확인

Google의 가족 정책 준수 여부를 테스트하려면 Google Play Console의 내부 테스트를 활용하세요.

테스트 절차

앱을 새롭게 빌드하고 내부 테스트 트랙에 업로드합니다.
앱에서 광고가 올바르게 작동하는지 확인합니다.
정책 위반 경고가 없는지 검토합니다.

디버깅 힌트

아래 명령어로 AdMob 광고 요청을 디버깅할 수 있습니다.

flutter run --debug

logcat에서 광고 요청 및 데이터 전송 로그를 확인하고 필요한 부분을 수정합니다.

마무리

위와 같은 설정을 완료한 뒤 Google에 앱을 다시 제출하면 대부분의 "가족 정책 위반" 문제가 해결됩니다.

정책에 대한 의문점이 있으면 Google 개발자 지원 팀에 문의하세요.
앱이 가족 정책에 적합한지 여부를 사전 테스트하세요.

Dart 함수 및 클래스 문법

임다 — Sat, 25 Jan 2025 03:08:41 +0900

Dart는 Google이 개발한 프로그래밍 언어로, 특히 Flutter 프레임워크의 기본 언어로 사용됩니다. Dart의 핵심 요소 중 하나는 함수와 클래스입니다. 이 글에서는 Dart에서 함수와 클래스를 작성하고 사용하는 방법을 기본부터 고급 개념까지 상세히 설명합니다. 함수와 클래스는 각각 프로그램의 동작과 구조를 담당하는 중요한 역할을 하므로, 이를 잘 이해하면 Dart를 효과적으로 활용할 수 있습니다.

함수(Function)

함수는 특정 작업을 수행하는 코드 블록입니다. Dart에서 함수는 main() 함수로 시작하며, 이는 프로그램의 진입점입니다. 함수는 매개변수, 반환 값, 그리고 다양한 함수 타입을 지원합니다.

함수 선언과 호출

Dart에서 함수를 선언하려면 return 타입, 함수 이름, 그리고 매개변수를 정의합니다. 다음은 간단한 함수 선언과 호출 예제입니다.

// 두 숫자를 더한 값을 반환하는 함수
int addNumbers(int number1, int number2) {
  return number1 + number2;
}

void main() {
  int result = addNumbers(10, 20);
  print('두 숫자의 합: $result'); // 출력: 두 숫자의 합: 30
}

위 코드에서 addNumbers 함수는 두 개의 int 값을 매개변수로 받아서 합계를 반환합니다.

선택적 매개변수(Optional Parameters)

Dart에서는 매개변수를 선택적으로 만들 수 있습니다. 이를 구현하려면 [] 또는 {}를 사용합니다.

위치 기반 선택적 매개변수

위치 기반 선택적 매개변수는 []로 정의하며, 기본값을 지정할 수도 있습니다.

String greet(String name, [String? title]) {
  return title != null ? '$title $name 님, 안녕하세요!' : '$name 님, 안녕하세요!';
}

void main() {
  print(greet('홍길동')); // 출력: 홍길동 님, 안녕하세요!
  print(greet('홍길동', '박사')); // 출력: 박사 홍길동 님, 안녕하세요!
}

이름 기반 선택적 매개변수

이름 기반 선택적 매개변수는 {}로 정의하며, 매개변수를 명시적으로 전달할 수 있습니다.

String greet(String name, {String? title}) {
  return title != null ? '$title $name 님, 반갑습니다!' : '$name 님, 반갑습니다!';
}

void main() {
  print(greet('이순신')); // 출력: 이순신 님, 반갑습니다!
  print(greet('이순신', title: '장군')); // 출력: 장군 이순신 님, 반갑습니다!
}

클래스(Class)

클래스는 객체 지향 프로그래밍(OOP)에서 중요한 개념으로, 객체의 설계도를 정의합니다. Dart는 객체 지향 언어로서 클래스와 객체를 사용하여 프로그램을 구조화할 수 있습니다.

클래스 선언과 객체 생성

Dart에서 클래스를 선언하려면 class 키워드를 사용합니다. 생성된 클래스는 인스턴스를 통해 사용됩니다.

class User {
  String name;
  int age;

  // 생성자(Constructor)
  User(this.name, this.age);

  // 메서드(Method)
  void introduce() {
    print('안녕하세요! 저는 $name이고, 나이는 $age살입니다.');
  }
}

void main() {
  User user = User('김유신', 30); // User 객체 생성
  user.introduce(); // 출력: 안녕하세요! 저는 김유신이고, 나이는 30살입니다.
}

위 코드에서 User 클래스는 name과 age라는 두 개의 속성을 가집니다. introduce 메서드를 사용하여 자기소개 메시지를 출력할 수 있습니다.

네임드 생성자(Named Constructor)

Dart에서는 여러 생성자를 정의하기 위해 네임드 생성자를 사용할 수 있습니다.

class User {
  String name;
  int age;

  // 기본 생성자
  User(this.name, this.age);

  // 네임드 생성자
  User.withDefaultName(this.age) : name = '기본 이름';

  void introduce() {
    print('안녕하세요! 저는 $name이고, 나이는 $age살입니다.');
  }
}

void main() {
  User user1 = User('강감찬', 40);
  User user2 = User.withDefaultName(25);

  user1.introduce(); // 출력: 안녕하세요! 저는 강감찬이고, 나이는 40살입니다.
  user2.introduce(); // 출력: 안녕하세요! 저는 기본 이름이고, 나이는 25살입니다.
}

Getter와 Setter

클래스 속성을 안전하게 접근하고 수정하려면 getter와 setter를 사용합니다.

class User {
  String _name; // 프라이빗 속성
  int _age;

  User(this._name, this._age);

  // Getter
  String get name => _name;

  // Setter
  set name(String newName) {
    _name = newName;
  }

  void introduce() {
    print('안녕하세요! 저는 $_name이고, 나이는 $_age살입니다.');
  }
}

void main() {
  User user = User('을지문덕', 50);
  print(user.name); // 출력: 을지문덕

  user.name = '안중근';
  user.introduce(); // 출력: 안녕하세요! 저는 안중근이고, 나이는 50살입니다.
}

요약

함수는 작업을 분리하고 재사용성을 높이는 데 사용됩니다.
- Dart에서는 위치 기반 매개변수와 이름 기반 매개변수를 지원합니다.
클래스는 데이터를 캡슐화하고, 메서드와 속성을 활용하여 객체를 조작할 수 있게 합니다.
- 네임드 생성자와 getter, setter를 통해 클래스의 유연성을 높일 수 있습니다.

Dart에서 비동기 처리 (Future와 async/await)

임다 — Sat, 25 Jan 2025 03:02:12 +0900

비동기 프로그래밍은 프로그램의 실행 흐름을 중단시키지 않고 작업을 처리하는 방식입니다. Dart에서 비동기 프로그래밍은 Future와 async/await를 통해 이루어집니다. 이번 글에서는 Future와 async/await를 이해하고 실무에서 효과적으로 활용할 수 있는 방법을 다룹니다.

Future란 무엇인가?

Future는 미래에 완료될 비동기 작업을 나타내는 객체입니다. 예를 들어, 서버에서 데이터를 받아오는 작업이나 파일을 읽는 작업과 같이 시간이 오래 걸릴 수 있는 작업을 처리할 때 사용됩니다. Future는 작업이 완료되기 전까지는 미래의 값을 약속(promise)하고, 작업이 완료되면 그 결과값을 반환하거나, 실패한 경우 에러를 반환합니다.

Future의 주요 상태

Future는 아래와 같은 두 가지 상태를 가집니다:

Uncompleted (미완료 상태)
작업이 아직 진행 중이거나 결과가 준비되지 않은 상태입니다. 이 상태에서는 결과값이 없습니다.
Completed (완료 상태)
작업이 성공적으로 완료되거나 에러가 발생해 작업이 끝난 상태입니다. 완료 상태에서는 결과값 또는 에러가 반환됩니다.

Future 사용 방법

Future를 생성하고 사용하는 방법을 살펴보겠습니다.

Future의 기본 생성

Future는 다음과 같이 생성할 수 있습니다:

Future<String> fetchCelebrityName() {
  return Future.delayed(Duration(seconds: 2), () {
    return "아이유";
  });
}

위 코드는 2초 후에 "아이유"라는 문자열을 반환하는 Future를 생성합니다. Future.delayed를 사용해 지연된 작업을 모의로 만든 것입니다.

then()으로 결과 처리하기

Future는 작업이 완료되면 then()을 통해 결과를 처리할 수 있습니다.

void main() {
  fetchCelebrityName().then((name) {
    print("받아온 연예인 이름: $name");
  });
}

실행 결과:

받아온 연예인 이름: 아이유

catchError()로 에러 처리하기

catchError()를 사용해 비동기 작업 중 발생한 에러를 처리할 수 있습니다.

Future<String> fetchWithError() {
  return Future.delayed(Duration(seconds: 1), () {
    throw Exception("연예인 정보를 가져오는 중 오류 발생!");
  });
}

void main() {
  fetchWithError()
      .then((name) {
        print("연예인 이름: $name");
      })
      .catchError((error) {
        print("에러 발생: $error");
      });
}

실행 결과:

에러 발생: Exception: 연예인 정보를 가져오는 중 오류 발생!

async/await를 활용한 Future 처리

async/await는 비동기 프로그래밍을 더 간결하고 읽기 쉽게 만들어주는 문법입니다. await를 사용하면 Future가 완료될 때까지 기다린 후 결과값을 반환받을 수 있습니다.

async 키워드

async는 함수가 비동기 작업을 수행한다는 것을 나타냅니다. async 함수는 항상 Future를 반환합니다.

Future<void> printCelebrityName() async {
  String name = await fetchCelebrityName();
  print("연예인 이름: $name");
}

await 키워드

await는 Future가 완료될 때까지 기다린 후 결과값을 반환합니다. 이를 통해 비동기 코드를 마치 동기 코드처럼 작성할 수 있습니다.

void main() async {
  await printCelebrityName();
}

실행 결과:

연예인 이름: 아이유

async/await와 예외 처리

try-catch 문을 사용해 async/await 비동기 작업 중 발생한 에러를 처리할 수 있습니다.

Future<void> fetchAndPrintCelebrityName() async {
  try {
    String name = await fetchWithError();
    print("연예인 이름: $name");
  } catch (error) {
    print("에러 발생: $error");
  }
}

void main() async {
  await fetchAndPrintCelebrityName();
}

실행 결과:

에러 발생: Exception: 연예인 정보를 가져오는 중 오류 발생!

Future와 async/await을 함께 사용할 때 주의사항

await는 항상 async 함수 안에서 사용해야 합니다.

await를 사용할 때, 해당 함수가 async로 선언되지 않았다면 컴파일 에러가 발생합니다.

// 컴파일 에러 예시
void main() {
    String name = await fetchCelebrityName(); // 에러 발생
}

Future 병렬 처리

여러 Future를 동시에 실행하고 기다릴 때는 Future.wait를 사용할 수 있습니다.

Future<void> fetchMultipleData() async {
    Future<String> nameFuture = fetchCelebrityName();
    Future<String> anotherNameFuture = fetchCelebrityName();

    List<String> names = await Future.wait([nameFuture, anotherNameFuture]);
    print("받아온 이름들: ${names.join(", ")}");
}

void main() async {
    await fetchMultipleData();
}

실행 결과:

받아온 이름들: 아이유, 아이유

UI 차단 방지

비동기 작업이 오래 걸리는 경우 await를 잘못 사용하면 UI가 멈춘 것처럼 보일 수 있습니다. 이런 경우에는 await를 최소화하고, 적절히 Future를 병렬 처리하세요.

결론

Dart의 Future와 async/await는 비동기 프로그래밍을 강력하면서도 간단하게 처리할 수 있는 도구입니다. then()과 같은 메서드를 통해 Future를 다룰 수도 있지만, async/await를 활용하면 더 직관적인 코드를 작성할 수 있습니다. 실무에서는 이 두 가지를 적절히 조합하여 상황에 맞는 효율적인 비동기 코드를 작성하는 것이 중요합니다.

Dart 연산자와 조건문, 반복문

임다 — Mon, 20 Jan 2025 06:32:50 +0900

프로그래밍 언어를 사용하다 보면 가장 기본적으로 활용되는 개념은 연산자, 조건문, 그리고 반복문입니다. 이 글에서는 Dart 언어에서 제공하는 다양한 연산자와 조건문, 반복문에 대해 논리적으로 설명하고, 각 개념을 쉽게 이해할 수 있도록 예제를 통해 설명하겠습니다.

산술, 비교, 논리 연산자

Dart는 여러 연산자를 제공하여 수학적 계산, 조건 비교, 논리 연산 등을 할 수 있도록 지원합니다. 각각의 연산자는 특정한 목적에 맞게 사용됩니다. 이 섹션에서는 산술 연산자, 비교 연산자, 그리고 논리 연산자에 대해 설명합니다.

산술 연산자

산술 연산자는 숫자 계산에 사용됩니다. Dart는 다음과 같은 기본 산술 연산자를 제공합니다:

연산자	설명	예제
`+`	더하기	`3 + 2` 결과는 `5`
`-`	빼기	`5 - 2` 결과는 `3`
`*`	곱하기	`4 * 3` 결과는 `12`
`/`	나누기(결과는 실수)	`10 / 3` 결과는 `3.3333`
`~/`	나누기(결과는 정수)	`10 ~/ 3` 결과는 `3`
`%`	나머지 계산	`10 % 3` 결과는 `1`

코드 예시

다음은 Dart에서 산술 연산자를 사용하는 예제입니다:

void main() {
  int appleCount = 10;
  int peopleCount = 3;

  print('사과 개수: $appleCount');
  print('사람 수: $peopleCount');

  int applesPerPerson = appleCount ~/ peopleCount; // 정수 나누기
  int remainingApples = appleCount % peopleCount; // 나머지

  print('사람당 사과 개수: $applesPerPerson');
  print('남은 사과 개수: $remainingApples');
}

위 예제는 사과를 사람들에게 나누어 줄 때 몇 개씩 받을 수 있고, 몇 개가 남는지 계산하는 방식입니다.

비교 연산자

비교 연산자는 두 값을 비교하여 결과로 true 또는 false를 반환합니다. Dart에서 제공하는 비교 연산자는 다음과 같습니다:

연산자	설명	예제
`==`	두 값이 같은지 비교	`5 == 5` 결과는 `true`
`!=`	두 값이 다른지 비교	`5 != 3` 결과는 `true`
`>`	왼쪽 값이 큰지 비교	`5 > 3` 결과는 `true`
`<`	왼쪽 값이 작은지 비교	`3 < 5` 결과는 `true`
`>=`	왼쪽 값이 크거나 같은지 비교	`5 >= 5` 결과는 `true`
`<=`	왼쪽 값이 작거나 같은지 비교	`3 <= 5` 결과는 `true`

코드 예시

다음은 Dart에서 비교 연산자를 사용하는 예제입니다:

void main() {
  int temperature = 30;
  int freezingPoint = 0;

  if (temperature > freezingPoint) {
    print('현재 온도는 $temperature도입니다. 물은 액체 상태입니다.');
  } else {
    print('현재 온도는 $temperature도입니다. 물은 얼음 상태입니다.');
  }
}

위 코드는 현재 온도를 기준으로 물이 액체인지 얼음인지 판별하는 예제입니다.

논리 연산자

논리 연산자는 여러 조건을 결합하거나 조건을 반전시킬 때 사용됩니다. Dart에서 제공하는 주요 논리 연산자는 다음과 같습니다:

연산자	설명	예제
`&&`	두 조건이 모두 참이면 참을 반환	`(5 > 3) && (2 < 4)` 결과는 `true`
`		`
`!`	조건의 참/거짓 값을 반전시킴	`!(5 > 3)` 결과는 `false`

코드 예시

다음은 논리 연산자를 활용한 예제입니다:

void main() {
  bool isWeekend = true;
  bool isSunny = false;

  if (isWeekend && isSunny) {
    print('주말이고 날씨가 좋으니 밖에 나갑시다!');
  } else if (isWeekend || isSunny) {
    print('조건 중 하나는 만족하니 상황에 따라 결정합시다.');
  } else {
    print('주말도 아니고 날씨도 안 좋으니 집에 있읍시다.');
  }
}

조건문 (if, else if, else)

조건문은 특정 조건에 따라 실행할 코드 블록을 선택할 수 있게 합니다. Dart의 조건문은 if, else if, 그리고 else를 통해 다양한 조건을 처리할 수 있습니다.

if 문

if 문은 조건이 true일 때 코드 블록을 실행합니다.

코드 예시

void main() {
  int age = 18;

  if (age >= 18) {
    print('성인입니다.');
  }
}

if-else 문

if-else 문은 조건이 true일 때와 false일 때 각각 다른 코드 블록을 실행합니다.

코드 예시

void main() {
  int age = 15;

  if (age >= 18) {
    print('성인입니다.');
  } else {
    print('미성년자입니다.');
  }
}

else if 문

else if 문은 여러 조건을 연달아 처리할 때 사용됩니다.

코드 예시

void main() {
  int score = 85;

  if (score >= 90) {
    print('등급: A');
  } else if (score >= 80) {
    print('등급: B');
  } else if (score >= 70) {
    print('등급: C');
  } else {
    print('등급: F');
  }
}

반복문 (for, while, do-while)

Dart에서는 반복적인 작업을 수행할 때 반복문을 사용합니다. 주요 반복문으로는 for, while, 그리고 do-while이 있습니다.

for 문

for 문은 반복 횟수가 명확할 때 주로 사용됩니다.

코드 예시

void main() {
  for (int i = 1; i <= 5; i++) {
    print('반복 횟수: $i');
  }
}

while 문

while 문은 조건이 true인 동안 반복을 수행합니다.

코드 예시

void main() {
  int count = 1;

  while (count <= 5) {
    print('현재 카운트: $count');
    count++;
  }
}

do-while 문

do-while 문은 조건 검사 전에 코드를 최소 한 번 실행합니다.

코드 예시

void main() {
  int count = 1;

  do {
    print('현재 카운트: $count');
    count++;
  } while (count <= 5);
}

Dart 변수와 데이터 타입

임다 — Mon, 20 Jan 2025 06:31:56 +0900

Dart는 구글이 개발한 프로그래밍 언어로, 특히 플러터(Flutter) 프레임워크를 통해 모바일, 웹, 데스크톱 애플리케이션 개발에 널리 사용되고 있습니다. Dart 언어를 사용하면서 가장 기본이 되는 개념 중 하나는 변수와 데이터 타입입니다. 이 글에서는 Dart의 변수 선언 방식과 주요 데이터 타입인 숫자, 문자열, 불리언에 대해 자세히 설명하고, 이를 활용하는 방법을 코드 예제와 함께 알아보겠습니다.

변수 선언: `var`, `final`, `const`

Dart에서 변수를 선언하는 방법은 다양하지만, 크게 var, final, const 키워드를 사용합니다. 각각의 키워드는 변수의 특성과 변경 가능 여부에 따라 적절히 사용됩니다.

`var` 키워드

var는 Dart에서 가장 일반적인 변수 선언 방식입니다. var로 선언한 변수는 초기화 시점에 데이터 타입이 자동으로 추론되며, 추후에 값을 변경할 수 있습니다.

void main() {
  var userName = '홍길동'; // 문자열로 타입이 추론됨
  var userAge = 30; // 정수로 타입이 추론됨

  print(userName); // 출력: 홍길동
  print(userAge); // 출력: 30

  // 값 변경 가능
  userName = '이몽룡';
  userAge = 35;

  print(userName); // 출력: 이몽룡
  print(userAge); // 출력: 35
}

요약

var는 초기화 시점에 타입이 자동으로 결정됩니다.
한 번 타입이 결정되면 다른 타입으로 변경할 수 없습니다.

void main() {
  var isActive = true; // 타입: bool
  isActive = false; // 같은 타입으로 변경 가능

  // isActive = '활성화'; // 오류: `String` 타입은 할당할 수 없음
}

`final` 키워드

final은 변수 선언 시 값을 한 번만 설정할 수 있습니다. 즉, final 변수는 변경할 수 없는 값을 저장하는 데 사용됩니다. 다만, final 변수의 값은 런타임(runtime) 시에 결정됩니다.

void main() {
  final pi = 3.14; // final로 선언
  final currentTime = DateTime.now(); // 런타임에 값 결정

  print(pi); // 출력: 3.14
  print(currentTime); // 출력: 현재 시간

  // pi = 3.14159; // 오류: final 변수는 값을 변경할 수 없음
}

요약

final은 값을 한 번만 설정할 수 있습니다.
런타임 시점에 값을 결정할 수 있습니다.

`const` 키워드

const는 컴파일 타임(compile-time) 상수를 정의하는 데 사용됩니다. 즉, const로 선언된 변수는 컴파일 시점에 값이 고정되어야 합니다. 따라서 런타임에 값을 설정하는 것은 불가능합니다.

void main() {
  const maxUsers = 100; // 컴파일 타임 상수
  // const currentTime = DateTime.now(); // 오류: const는 런타임 값을 가질 수 없음

  print(maxUsers); // 출력: 100
}

요약

const는 컴파일 타임 상수를 정의합니다.
모든 const 변수는 불변이며, 반드시 컴파일 시점에 값이 결정되어야 합니다.

데이터 타입: 숫자, 문자열, 불리언

Dart는 정적 타입 언어로, 변수에 저장되는 값의 타입을 정확히 지정하거나 자동으로 추론합니다. Dart에서 지원하는 주요 데이터 타입은 다음과 같습니다.

숫자(`Number`)

Dart에서 숫자는 int(정수)와 double(실수) 두 가지 타입으로 나뉩니다.

`int` (정수)

int는 정수를 저장할 때 사용됩니다. 예를 들어, 사람의 나이나 인구 수와 같은 정수를 표현할 때 적합합니다.

void main() {
  int age = 25; // 정수 타입
  int population = 1000000;

  print(age); // 출력: 25
  print(population); // 출력: 1000000
}

`double` (실수)

double은 소수점을 포함한 실수를 저장할 때 사용됩니다.

void main() {
  double temperature = 36.5; // 실수 타입
  double pi = 3.14159;

  print(temperature); // 출력: 36.5
  print(pi); // 출력: 3.14159
}

숫자 타입 활용 예제

void main() {
  int appleCount = 5;
  double pricePerApple = 1.5;

  double totalPrice = appleCount * pricePerApple;

  print('총 가격은 $totalPrice원입니다.'); // 출력: 총 가격은 7.5원입니다.
}

문자열(`String`)

Dart에서 문자열은 String 타입으로 표현됩니다. 문자열은 작은따옴표(')나 큰따옴표(")로 감싸서 정의할 수 있습니다.

void main() {
  String greeting = '안녕하세요';
  String name = "홍길동";

  print('$greeting, $name!'); // 출력: 안녕하세요, 홍길동!
}

여러 줄 문자열

Dart는 여러 줄 문자열을 표현하기 위해 삼중 따옴표(''' 또는 """)를 사용합니다.

void main() {
  String description = '''
  이것은 여러 줄로 이루어진
  문자열입니다.
  ''';

  print(description);
}

불리언(`Boolean`)

불리언(bool)은 참(true)과 거짓(false) 값을 저장하는 데 사용됩니다. 조건문과 논리 연산에서 자주 사용됩니다.

void main() {
  bool isAvailable = true;
  bool isClosed = false;

  print(isAvailable); // 출력: true
  print(isClosed); // 출력: false
}

불리언 활용 예제

void main() {
  int stock = 0;
  bool isInStock = stock > 0;

  if (isInStock) {
    print('재고가 있습니다.');
  } else {
    print('재고가 없습니다.');
  }
}

`var`, `final`, `const` 비교 표

키워드	값 변경 가능 여부	값 결정 시점
`var`	변경 가능	초기화 시점
`final`	변경 불가능	런타임
`const`	변경 불가능	컴파일 타임

마무리

Dart의 변수 선언 방식(var, final, const)과 주요 데이터 타입(int, double, String, bool)에 대해 살펴보았습니다. 변수는 프로그램에서 데이터를 저장하고 조작하는 핵심적인 요소이므로, 올바른 키워드와 데이터 타입을 선택하는 것이 중요합니다. 예제를 통해 개념을 직접 구현해 보고, 다양한 상황에서 변수와 데이터 타입을 활용하는 방법을 익혀 보세요.

Dart란?

임다 — Mon, 20 Jan 2025 06:31:20 +0900

소프트웨어 개발자라면 다양한 프로그래밍 언어를 접하게 됩니다. 그중에서도 Dart는 상대적으로 최근에 주목받기 시작한 언어로, 특히 Google의 크로스 플랫폼 프레임워크인 Flutter와 함께 사용되면서 인기를 얻고 있습니다. 이번 글에서는 Dart 언어가 무엇인지, 왜 사용하는지, 그리고 어떤 특징과 장점을 가지고 있는지에 대해 심도 있게 살펴보겠습니다.

Dart란 무엇인가?

Dart는 Google에서 개발한 오픈소스 프로그래밍 언어입니다. 주로 모바일 앱 개발(Android 및 iOS), 웹 개발, 데스크탑 애플리케이션, 서버 개발 등 다양한 플랫폼에서 사용됩니다. 이 언어는 간결한 문법과 높은 생산성을 제공하며, 컴파일러를 통해 네이티브 코드로 변환되어 뛰어난 실행 속도를 자랑합니다.

Google은 Dart를 개발하면서 빠른 속도, 안전한 코드 작성, 그리고 개발자 친화성을 염두에 두었습니다. 특히, Dart는 Flutter와 함께 사용하기 위해 설계되었기 때문에 UI 개발에 특화된 기능을 많이 제공합니다.

왜 Dart를 사용하는가?

많은 프로그래밍 언어가 존재하는데, 왜 굳이 Dart를 선택해야 할까요? 다음은 Dart를 사용하는 몇 가지 주요 이유입니다:

크로스 플랫폼 개발:
Dart는 하나의 코드베이스로 Android, iOS, 웹, 데스크탑 애플리케이션을 개발할 수 있는 크로스 플랫폼 개발을 지원합니다. 이는 Flutter와의 통합을 통해 더욱 강력하게 발현됩니다.
빠른 성능:
Dart는 두 가지 방식으로 코드를 실행합니다:
- AOT 컴파일(앞서 컴파일): 코드를 네이티브 바이너리로 변환해 높은 실행 속도를 제공합니다.
- JIT 컴파일(실시간 컴파일): 개발 중에는 빠른 수정과 테스트가 가능하도록 지원합니다.
  이 두 가지 방식의 조합은 생산성과 성능을 모두 만족시킵니다.
간결하고 읽기 쉬운 문법:
Dart의 문법은 Java, C++, JavaScript와 유사하여 배우기 쉽습니다. 또한 불필요한 코드 작성을 줄이고, 직관적으로 작성할 수 있도록 설계되었습니다.
Flutter와의 완벽한 통합:
Dart는 Flutter의 기본 언어로, Flutter의 위젯 시스템과 완벽하게 통합됩니다. 이를 통해 UI를 유연하고 쉽게 설계할 수 있습니다.
강력한 타입 시스템:
Dart는 정적 타입과 동적 타입을 모두 지원합니다. 강력한 타입 추론(type inference)을 통해 개발자의 실수를 방지하면서도 코드의 가독성을 유지합니다.

Dart의 주요 특징

Dart는 개발자 친화적인 다양한 기능을 제공하며, 이러한 특징들은 Dart를 매력적인 언어로 만듭니다. 아래는 그 주요 특징들입니다:

1. 타입 시스템

Dart는 정적 타입 언어로서, 변수와 객체의 타입을 명시적으로 선언하거나 타입 추론을 활용할 수 있습니다. 예를 들어:

void main() {
  // 명시적 타입 선언
  int age = 25; 
  String name = "홍길동";

  // 타입 추론 사용
  var height = 175.5; // double로 추론됨
  var isStudent = true; // bool로 추론됨

  print("나이: $age, 이름: $name, 키: $height, 학생 여부: $isStudent");
}

타입을 명시적으로 선언하면 코드의 안정성을 높이고, 타입 추론을 사용하면 간결한 코드 작성을 가능하게 합니다.

2. Null Safety

Dart는 Null Safety(널 안정성)를 지원하여, 런타임 오류를 방지합니다. Null Safety를 통해 null 값이 들어갈 가능성이 있는 변수는 컴파일 단계에서 에러를 발생시킵니다.

void main() {
  String? nullableString = null; // null을 허용하는 변수
  String nonNullableString = "안녕하세요"; // null을 허용하지 않는 변수

  print(nullableString); // 출력: null
  print(nonNullableString);
}

Null Safety는 프로그램이 실행 중에 null 관련 에러를 발생시키는 것을 방지하는 데 큰 도움이 됩니다.

3. 비동기 프로그래밍

Dart는 비동기 프로그래밍을 쉽게 처리할 수 있도록 async와 await 키워드를 제공합니다. 이를 통해 복잡한 비동기 작업을 간단하게 구현할 수 있습니다.

Future<String> fetchUserData() async {
  await Future.delayed(Duration(seconds: 2)); // 2초 대기
  return "유저 데이터 로드 완료";
}

void main() async {
  print("데이터 로드 시작");
  String data = await fetchUserData();
  print(data);
}

위 코드에서는 데이터를 불러오는 동안 프로그램이 멈추지 않고 다른 작업을 계속 수행할 수 있습니다.

4. 컬렉션(Collection) 활용

Dart는 리스트(List), 맵(Map), 집합(Set) 등 다양한 컬렉션 자료형을 제공합니다. 특히, 컬렉션에 대해 유용한 메서드와 기능들이 많아 데이터를 손쉽게 다룰 수 있습니다.

void main() {
  // 리스트 생성
  List<String> fruits = ["사과", "바나나", "딸기"];
  fruits.add("포도"); // 요소 추가
  print(fruits);

  // 맵 생성
  Map<String, int> scores = {"철수": 90, "영희": 85};
  scores["민수"] = 95; // 새로운 키-값 추가
  print(scores);

  // Set 생성
  Set<int> uniqueNumbers = {1, 2, 3};
  uniqueNumbers.add(2); // 중복 값 추가 시 무시됨
  print(uniqueNumbers);
}

5. 함수형 프로그래밍 지원

Dart는 함수형 프로그래밍 스타일을 지원하며, 이를 통해 코드를 간결하게 작성할 수 있습니다. 예를 들어, 리스트의 각 요소를 변환하거나 필터링하는 작업을 손쉽게 수행할 수 있습니다.

void main() {
  List<int> numbers = [1, 2, 3, 4, 5];

  // 맵핑: 각 숫자에 2를 곱하기
  var doubledNumbers = numbers.map((num) => num * 2);
  print(doubledNumbers.toList());

  // 필터링: 짝수만 남기기
  var evenNumbers = numbers.where((num) => num % 2 == 0);
  print(evenNumbers.toList());
}

Dart와 다른 언어의 비교

Dart는 여러 면에서 기존 언어들과 비슷하지만, 몇 가지 독특한 점도 있습니다. 아래는 Dart와 다른 언어를 비교한 간단한 표입니다:

특징	Dart	JavaScript	Java
크로스 플랫폼	지원	제한적	제한적
AOT 컴파일	지원	미지원	지원
JIT 컴파일	지원	지원	제한적
Null Safety	완전 지원	제한적	제한적
Flutter와의 통합	최적화	미지원	미지원

마무리

Dart는 현대 애플리케이션 개발에 적합한 강력한 언어입니다. 특히, Flutter와 함께 사용하면 UI 중심의 크로스 플랫폼 개발에서 탁월한 생산성을 제공합니다. 또한, 간결하고 안전한 문법과 강력한 타입 시스템, 그리고 비동기 프로그래밍 지원 등은 개발자에게 큰 매력을 줍니다.

임다 블로그

iframe과 통신하는 방법

iframe이란?

iframe과의 통신 방식

postMessage란?

부모 페이지에서 iframe으로 메시지 보내기

부모 페이지 코드

iframe 페이지 코드(child.html)

iframe에서 부모 페이지로 메시지 보내기

iframe 페이지 코드(child.html)

부모 페이지 코드

postMessage 사용 시 보안 고려 사항

실전 예제: 부모와 iframe 간의 양방향 채팅

부모 페이지 (index.html)

iframe 페이지 (chat.html)

정리

Web Worker란 무엇인가?

Web Worker 개념

Web Worker의 주요 특징

Web Worker 기본 사용법

1. Worker 파일 생성

2. 메인 스레드에서 Worker 사용

Web Worker의 실제 활용 예제

대규모 데이터 처리

1. Worker 파일 (primeWorker.js)

2. 메인 스레드

Web Worker의 한계와 주의사항

Shared Worker와 Service Worker

Web Worker와 멀티스레딩의 차이점

결론

URL과 URLSearchParams 활용법

URL과 URLSearchParams 개요

URL 객체의 기본 사용법

URL 객체 생성하기

주요 속성

예제: URL 속성 확인

URLSearchParams의 활용

URLSearchParams 객체 생성하기

주요 메서드

예제: 쿼리 매개변수 조작하기

URL과 URLSearchParams를 활용한 실전 예제

예제 1: 사용자가 선택한 필터를 URL에 반영하기

예제 2: URL에서 쿼리 매개변수 읽어오기

URL과 URLSearchParams의 장점

주의할 점

결론

MutationObserver란?

MutationObserver란?

MutationObserver의 주요 기능

MutationObserver의 기본 구조

기본 코드 예제

결과

MutationObserver의 설정 옵션

예제: 특정 속성만 감지하기

MutationRecord 객체 이해하기

예제: MutationRecord 속성 확인

MutationObserver의 성능 고려 사항

성능 최적화 팁

실전 예제: 실시간 댓글 감지하기

MutationObserver의 활용 사례

마무리

Flutter AdMob 가족 정책 위반 해결 방법

Google 가족 정책과 AdMob의 관계

해결 방법: Flutter 애플리케이션 수정

AdMob에 가족 정책 설정 추가

초기화 시 가족 친화 설정 적용

주요 설정 값

광고 단위 업데이트

광고 단위 설정 변경 방법

데이터 전송 검사

불필요한 데이터 전송 방지

테스트 환경에서 정책 준수 확인

테스트 절차

디버깅 힌트

마무리

Dart 함수 및 클래스 문법

함수(Function)

함수 선언과 호출

선택적 매개변수(Optional Parameters)

위치 기반 선택적 매개변수

`iframe`과의 통신 방식

`postMessage`란?

부모 페이지에서 `iframe`으로 메시지 보내기

`iframe` 페이지 코드(`child.html`)

`iframe`에서 부모 페이지로 메시지 보내기

`iframe` 페이지 코드(`child.html`)

`postMessage` 사용 시 보안 고려 사항

실전 예제: 부모와 `iframe` 간의 양방향 채팅

부모 페이지 (`index.html`)

`iframe` 페이지 (`chat.html`)

Google 가족 정책과 `AdMob`의 관계

`AdMob`에 가족 정책 설정 추가

변수 선언: `var`, `final`, `const`

`var` 키워드

`final` 키워드

`const` 키워드

숫자(`Number`)

`int` (정수)

`double` (실수)

문자열(`String`)

불리언(`Boolean`)

`var`, `final`, `const` 비교 표