🔍 문제가 있는 코드

<ListView items="{{ items }}">
  <ListView.itemTemplate>
    <GridLayout columns="auto, *" rows="auto, auto, auto">
      <Image src="{{ image }}" row="0" rowSpan="3" col="0" />
      <Label text="{{ title }}" row="0" col="1" />
      <Label text="{{ description }}" row="1" col="1" />
      <Label text="{{ price }}" row="2" col="1" />
    </GridLayout>
  </ListView.itemTemplate>
</ListView>
        

✅ 최적화된 코드

<ListView items="{{ items }}" separatorColor="transparent" height="100%" loadMoreThreshold="0.5" loadMoreItems="onLoadMoreItems">
  <ListView.itemTemplate>
    <GridLayout columns="auto, *" rows="auto, auto" class="list-item">
      <Image src="{{ image }}" row="0" rowSpan="2" col="0" loadMode="async" />
      <Label text="{{ title }}" row="0" col="1" textWrap="true" />
      <Label text="{{ price }}" row="1" col="1" />
    </GridLayout>
  </ListView.itemTemplate>
</ListView>
        

<RadListView items="{{ items }}" pullToRefresh="true" loadOnDemandMode="Auto">
  <RadListView.itemTemplate>
    <!-- 템플릿 내용 -->
  </RadListView.itemTemplate>
</RadListView>
        

🔍 문제가 있는 코드

export function onNavigatingTo(args) {
  const page = args.object;
  application.on(application.resumeEvent, onResume);
  application.on(application.suspendEvent, onSuspend);
}

function onResume() {
  console.log("앱이 다시 시작됨");
}

function onSuspend() {
  console.log("앱이 일시 중지됨");
}
        

✅ 최적화된 코드

let resumeListener;
let suspendListener;

export function onNavigatingTo(args) {
  const page = args.object;
  resumeListener = application.on(application.resumeEvent, onResume);
  suspendListener = application.on(application.suspendEvent, onSuspend);
  
  page.on("navigatingFrom", onNavigatingFrom);
}

function onNavigatingFrom(args) {
  // 이벤트 리스너 제거
  application.off(application.resumeEvent, resumeListener);
  application.off(application.suspendEvent, suspendListener);
  
  const page = args.object;
  page.off("navigatingFrom", onNavigatingFrom);
}

function onResume() {
  console.log("앱이 다시 시작됨");
}

function onSuspend() {
  console.log("앱이 일시 중지됨");
}
        

🔍 문제가 있는 코드

// 모든 데이터를 한 번에 로드
fetch("https://api.example.com/huge-data")
  .then(response => response.json())
  .then(data => {
    this.allItems = data; // 수천 개의 아이템이 있는 큰 배열
  });
        

✅ 최적화된 코드

// 페이지네이션 사용
let currentPage = 1;
const pageSize = 20;

function loadMoreItems() {
  fetch(`https://api.example.com/data?page=${currentPage}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(newData => {
      // 기존 배열에 새 데이터 추가
      this.items = this.items.concat(newData);
      currentPage++;
    });
}
        

import { getString, setString } from "tns-core-modules/application-settings";

export class DataService {
  async getProducts() {
    // 캐시 확인
    const cachedData = getString("products");
    const cacheTime = getString("products_timestamp");
    
    // 캐시가 있고 1시간 이내라면 캐시 데이터 사용
    if (cachedData && cacheTime) {
      const now = new Date().getTime();
      const cacheAge = now - parseInt(cacheTime);
      
      if (cacheAge < 3600000) { // 1시간 = 3600000ms
        return JSON.parse(cachedData);
      }
    }
    
    // 캐시가 없거나 오래됐으면 새로 요청
    const response = await fetch("https://api.example.com/products");
    const data = await response.json();
    
    // 캐시 저장
    setString("products", JSON.stringify(data));
    setString("products_timestamp", new Date().getTime().toString());
    
    return data;
  }
}
        

✅ 최적화된 이미지 로딩

<Image src="{{ imageUrl }}" loadMode="async" stretch="aspectFill" />
        

// nativescript-image-cache 플러그인 사용
<IC:CachedImage src="{{ imageUrl }}" height="200" />
        

// 원본 URL
const originalUrl = "https://example.com/images/profile.jpg";

// 리사이징된 URL (서버에서 이런 API를 제공한다고 가정)
const resizedUrl = `https://example.com/images/profile.jpg?width=200&height=200`;

// 또는 이미지 CDN 서비스 사용 (Cloudinary, Imgix 등)
const cdnUrl = `https://res.cloudinary.com/demo/image/upload/w_200,h_200/profile.jpg`;
        

import { isIOS, device } from "tns-core-modules/platform";

function getOptimizedImageUrl(url) {
  if (isIOS) {
    const iosVersion = parseInt(device.osVersion.split('.')[0]);
    if (iosVersion >= 14) {
      // WebP 지원
      return url.replace('.jpg', '.webp');
    } else {
      // WebP 미지원
      return url;
    }
  } else {
    // 안드로이드는 WebP 지원
    return url.replace('.jpg', '.webp');
  }
}
        

🔍 문제가 있는 코드 (CSS 애니메이션)

.my-view {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
        

✅ 최적화된 코드 (Animation API)

import { Animation } from "tns-core-modules/ui/animation";

export function animateView(view) {
  view.opacity = 0;
  
  const animation = new Animation([
    {
      target: view,
      opacity: 1,
      duration: 1000
    }
  ]);
  
  animation.play()
    .then(() => console.log("애니메이션 완료"))
    .catch(e => console.log(e.message));
}
        

// 직접 구현한 토스트 메시지 (Android)
import { android as androidApp } from "tns-core-modules/application";

export function showToast(message: string, duration = 3500) {
  if (androidApp) {
    const Toast = android.widget.Toast;
    const toast = Toast.makeText(androidApp.context, message, duration === 3500 ? Toast.LENGTH_LONG : Toast.LENGTH_SHORT);
    toast.show();
  }
}

// iOS에서는 간단한 알림 구현
import { ios as iosApp } from "tns-core-modules/application";

export function showAlert(message: string) {
  if (iosApp) {
    const alert = UIAlertController.alertControllerWithTitleMessagePreferredStyle(
      null, message, UIAlertControllerStyle.Alert
    );
    alert.addActionWithTitleStyleHandler(
      "OK",
      UIAlertActionStyle.Default,
      () => {}
    );
    const viewController = iosApp.rootController;
    viewController.presentViewControllerAnimatedCompletion(alert, true, null);
  }
}
        

// 프로파일링 모드로 앱 실행
tns run android --start-log-trace
        

// 디버깅 모드로 앱 실행
tns debug android
        

// nativescript-plugin-firebase 설치
tns plugin add nativescript-plugin-firebase

// 성능 모니터링 초기화
firebase.init({
  // 다른 설정들...
  performanceMonitoring: true
}).then(() => console.log("Firebase 초기화 완료"));

// 사용자 정의 트레이스 측정
const trace = firebase.performance.startTrace("데이터_로딩");
loadData().then(() => {
  trace.stop();
});