

<img src="/assets/img/2024-09-10-WhyFlutterWebMightNotBeasBadForSEOasYouThink_0.png" />

'Flutter Web'이 나왔을 때 자주 들었던 한 가지 말이 있었어요. "Flutter Web은 SEO에서 좋지 않다."

그 말이 이해가 돼요. Flutter Web의 작동 방식을 생각하면, 앱 전체가 하나의 거대한 HTML 캔버스에 렌더링됩니다. 또는 다양한 HTML 캔버스로 구성할 수도 있어요. 이것은 모든 빠른 웹 렌더링 기능을 우회하기 때문에 SEO에 좋지 않아요. 사실, Flutter 웹 앱을 방문하면 오랜로딩 시퀀스를 경험하게 될 거예요.

하지만 SEO에 대해 더 많이 배우고 있어요. 그리고 생각을 많이 해보니, Flutter Web이 SEO를 할 수 없다는 전통적인 믿음이 잘못되었다고 생각해요.

<div class="content-ad"></div>

먼저, 플러터 웹으로 블로그를 만들라는 것은 아닙니다. 아직 네이티브 경량 웹 기술에 비해 플러터 웹이 그리 훌륭하지는 않습니다. 다른 웹사이트와 비교했을 때 느리고 다르게 작동할 수 있습니다. 그러나 YouTube와 같은 무거운 웹 앱과 비교해 보면 플러터 웹이 그리 나쁘지 않을 수도 있어요.

YouTube가 영상에 비해 오래 걸리는 이유는 정확히 모르겠습니다. 그냥 YouTube가 엄청 크다는 것만 알 뿐이네요. 제 RSS 앱에 몇 가지 기능을 스크래핑하기 위해 YouTube를 확인해보았는데, 2MB의 HTML을 제공합니다. 그냥 HTML이고, 영상과는 무관한 내용만 있습니다.

마침내 로드된 후에는 레이아웃이 자주 변경되어 사용자 경험을 해치는데, 이는 Google 핵심 웹 핵심 지표에서 큰 문제입니다. 하지만 YouTube는 여전히 Google에서 높은 순위를 유지하고 있습니다. 그 이유는 바로 사용자들이 자주 방문하는 유익한 사이트이기 때문입니다.

<div class="content-ad"></div>

내가 고민할수록 Google의 '핵심 웹 핵심 지표' (페이지가 빨라야 하며 너무 많이 변하지 않고 최대한 빨리 대응해야 한다고 하는 것)가 중요하다고 생각하지만, 그렇게 중요한 것은 아닌 것 같아요. 페이지가 완벽한 웹 핵심 지표 점수를 받았다고 해서 마법처럼 Google 순위에 올라가는 건 아니에요. 완벽한 웹 핵심 지표 점수를 받는 것이 어떤 것인지 알아요? 비어 있는 HTML 문서죠. 그리고 그것으로는 절대 순위에 오를 수 없어요.

SEO에서 가장 중요한 것은 사람들이 여러분의 사이트를 방문하고 검색 순위에서 여러분의 사이트를 활발히 클릭하는가 하는 것이에요.

Chrome에 LLM이 내장되어 더 무겁다고 장난쳐보이기 위해 썼던 이 글을 쓴 건 생각 없이 했지만, 사실이에요: Chrome은 여러분의 브라우징 데이터를 훔치고 검색 엔진에 전달하기 위해 만들어졌어요. 그래서 그것을 더 나아지게 만들었던 거죠.

<div class="content-ad"></div>

요즘 구글 검색 유출 사건으로 드러난 사실이에요:

생각해보게 만드네요, 그치 않아요?

유튜브가 검색 결과에서 높은 순위를 차지할 수 있다면, 플러터도 왜 안될까요?
그 이유는 도메인 권한 때문이에요. 구글은 기본적으로 "사람들이 더 더브를 정말 좋아해, 그들의 모든 페이지를 상위로 보내세요." 라고 말해요. 그래서 그들이 프린터에 대한 어느 무의미한 글을 올리면 구글 상단으로 뛰어오르게 되요. 마찬가지 효과가 미디엄에도 발생해요. 전 Medium에 블로그를 운영하기 전에 텀블러에 블로그를 했었지만 구글 순위에선 이름 없었어요. 지금은 Medium으로 전환했을 때 놀랍도록 순위가 올라가는 걸 보이네요.

<div class="content-ad"></div>

구글이 이를 원하는 이유는 명백합니다. 통계적으로 The Verge의 블로그 게시물이 어떤 이름도 없는 블로그보다 우수할 것입니다. 그러나 구글은 도메인 권위를 너무 중요하게 생각하여 약간 논란이 되었습니다. 많은 작은 사이트들이 최고의 콘텐츠를 보유하고 있음에도 불구하고 더 이상 순위가 오르지 않는다고 항의하고 있습니다.

플러터 앱에서 도메인 권위를 어떻게 얻을 수 있을까요? 전 전혀 모릅니다. 만약 알고 계신다면 그 정보에 상당한 금액을 지불할 사람들이 있을 겁니다. 실제 SEO 전문가들에게 (아무것도 모르는 사람들이나 도덕적이지 않은 방법으로 활동하는 사람들이 아닌), 할 수 있는 최상의 방법은 사람들의 질문에 대답하는 콘텐츠를 작성하고 결과를 보기까지 1년을 기다리는 것뿐이라고 합니다. 그리고 특히 검색 엔진이 어차피 여러분의 콘텐츠를 훔쳐가려고 할 때, AI 시대에는 더욱 어려울 것입니다.

물론 플러터 웹의 다른 한 가지 문제로 사람들이 항의하는 부분이 있습니다. 바로 페이지 인덱싱 능력입니다. 이것이 바로 이 글을 올리려고 고려한 이유입니다. Vercel에 이런 게시물을 보았거든요:

결과는?

<div class="content-ad"></div>

사람들은 종종 구글이 어리석다고 가정합니다. "와, 와, 구글이 더 나빠지고 있다." 나는 구글이 더 나빠지고 있다는 증거를 본 적이 없어요. 오히려 오히려, 구글은 색인화에 대해 훨씬 똑똑해지고 있어요. 심지어 내 플러터 앱도 색인화할 수 있어요:

![이미지](/assets/img/2024-09-10-WhyFlutterWebMightNotBeasBadForSEOasYouThink_1.png)

지금 제목은 '제목 없음'이에요. 그 이슈는 이미 수정했지만 구글이 아직 페이지를 다시 색인화하지 않았다고 생각해요. 그렇지만 큰 문제는 아니에요, `title` 태그가 하나 뿐이니까요.

중요한 점은 로그인 페이지의 모든 콘텐츠를 가져올 수 있었다는 거예요. 이는 인상적인 성취입니다. 로그인 페이지는 로딩 페이지 뒤에 있어서요. 심지어 앱 설치 배너도 가져왔는데, 이는 사이트를 크롤하는 사용자 에이전트가 'Android'이라는 단어를 포함했다는 것을 나타냅니다.

<div class="content-ad"></div>

플러터 앱의 텍스트는 실제로 선택할 수 없다고 해요. 그렇다면 어떻게 해결했을까요? Vercel 기사에서 설명한 대로,

구글은 페이지의 내용을 얻기 위해 광학 문자 인식(OCR, Optical Character Recognition) 기술을 사용한 것으로 보여요. 처음에는 OCR이 비용이 많이 드는 기술인 줄 알았어요. 그런데 정말일까요? 나는 지금 iPhone이 모든 이미지에 자동으로 OCR을 수행하고 있어요. 검색을 실제로 수행하는 데 필요한 에너지 비용과 비교했을 때, 모든 웹사이트에 OCR을 적용하는 비용은 미미할 것으로 생각되요.

웹 개발 환경에서 SEO는 매우 과대평가되었어요. 이로 인해 많은 SEO 뱀 주제 판매자들이 생겼죠. 구글을 걱정하지말고, 좋은 사이트를 만드는 것에 집중하세요. 구글은 좋은 사이트가 자연스럽게 순위에 올라가도록 많은 시간과 노력을 들였어요. 완벽하지는 않지만 이는 구글이 도메인 권한에 과도하게 의존하여 비밀 트릭이 아닌 이유라고 생각돼요.

그러니, 제 생각에는 플러터 웹이 SEO에 대해 그렇게 나쁘지 않다고 봐요. 하지만 일반적으로 구글에 순위를 올리기는 매우 어렵다고 생각돼요. 정말 순위가 올라가는 것은 사람들이 읽고 싶어하는 많은 콘텐츠가 있는 블로그나 포럼 같은 것뿐이에요.

<div class="content-ad"></div>

플러터로 작성된 블로그가 순위에 올라갈 수 있는 실험이 흥미로울 것 같아요. 적어도 처음에는 순위를 올리는 데 어려움이 있을 거예요. 그렇지만 모든 사이트들이 처음에는 순위에 어려움을 겪죠. 그리고 내용이 좋다면 순위에 올라갈 거라고 생각해요.

SEO에 대해 생각하는 것만큼 Flutter Web이 나쁘지 않은 이유들

플러터 개발자라면 반드시 지켜야할 50가지 규칙



이미지 추가:

![이미지](/assets/img/2024-09-10-ICreatedtheFlutterPackageIAlwaysWantedbutItsaWasteofTime_0.png)

# 문제점

웹 개발 환경에서 왔는데, Flutter를 처음 배울 때 내게는 이해하기 어렵다고 느꼈습니다. 웹 개발에서는 HTML이 콘텐츠를 담당하고, CSS가 스타일링을 담당하며, JavaScript가 상호작용을 처리합니다. 이 구조는 styled-components나 Tailwind CSS와 같은 라이브러리를 사용할 때에도 어느 정도 유지됩니다. 그러나 Flutter에서는 모든 것이 위젯을 중심으로 돌아갑니다. 패딩을 추가하려면 Padding 위젯을 사용하고, 불투명도를 조절해야 한다면 Opacity 위젯을 사용합니다. 이 위젯 기반의 접근 방식은 깊게 중첩된 위젯 트리를 만들어냅니다:

```js
Scaffold(
  backgroundColor: Colors.lightBlue,
  body: Center(
    child: Transform.rotate(
      angle: math.pi / 2,
      child: Opacity(
        opacity: 0.8,
        child: Container(
          color: Colors.yellow,
          margin: const EdgeInsets.all(8.0),
          child: const Text("Welcome to Flutter"),
        ),
      ),
    ),
  ),
);
```

<div class="content-ad"></div>

여기서 확인할 수 있듯이, 여기에 있는 유일한 "콘텐츠 관련" 위젯은 Text 위젯이지만 이미 여섯 개의 레이어가 있습니다.

또 다른 문제는 ColorScheme, TextTheme에 접근하는 데 많은 보일러플레이트 코드가 필요하며 ThemeExtensions를 언급하지 않았습니다. 🤕

```js
Theme.of(context).colorScheme;
Theme.of(context).textTheme;
Theme.of(context).extension<MyTheme>()!;
```

# (가능한) 해결책

<div class="content-ad"></div>

위 문제들을 해결하기 위해, 저는 새로운 패키지인 flutter_style_extensions를 만들었습니다. 이 패키지는 확장 메서드의 힘을 활용합니다.

우선, 이 패키지는 모든 스타일 관련 위젯에 대한 확장 기능을 제공합니다: SizedBox, AspectRatio, Transform.rotate 등등. 이 패키지를 사용하면 위젯 트리를 아래와 같이 간소화할 수 있습니다:

```js
Scaffold(
  backgroundColor: Colors.lightBlue,
  body: const Text("플러터에 오신 것을 환영합니다")
      .margin(const EdgeInsets.all(8.0))
      .backgroundColor(Colors.yellow)
      .opacity(0.8)     
      .rotate(math.pi / 2)
      .center(),
);
```

훨씬 더 깔끔해 보이죠?

<div class="content-ad"></div>

또한, BuildContext를 통해 테마 관련 데이터에 쉽게 액세스할 수 있습니다:

```js
context.theme;
context.colorScheme;
context.textTheme;
// 만약 테마 확장 클래스가 MyCustomTheme으로 명명된 경우
context.themeExtension<MyCustomTheme>();
```

# 예상치 못한 경쟁

저는 같은 플러터 개발자인 친구와 이 패키지를 공유했고, 그가 비슷한 것을 사용했다는 사실을 언급했습니다: styled_widget. 더 놀라운 것은 styled_widget의 인기입니다. 800개 이상의 좋아요를 받았는데, 명백히 플러터 커뮤니티에서 호응을 얻었습니다. 이것은 제게 약간의 타격이었습니다. 왜냐하면 충분한 조사 없이 패키지를 만든 것이 아닌가 싶어졌기 때문입니다. 😭

<div class="content-ad"></div>

그러나 제 생각에는 우리의 개념이 약간 다르다고 믿습니다. styled_widget은 다양한 위젯에서 광범위한 기능을 제공하지만, flutter_style_extensions 같은 내 패키지는 특히 스타일 관련 위젯에 중점을 둡니다. 이 패키지는 개발자들이 응용 프로그램의 스타일링을 강화하고 싶지만 필요하지 않은 추가 기능의 오버헤드 없이 더 가볍고 간결하게 만들어 줍니다.

내 의견으로는, 강력한 애니메이션 기능이 필요하다면 애니메이션 처리에 더 탁월한 flutter_animate을 사용하는 것이 좋습니다. 경쟁을 무릅쓰더라도, flutter_style_extensions의 간결함과 목표 기능성을 발견해 주는 개발자들이 많아졌으면 좋겠습니다.Flutter 도구상자에 보완 도구로서의 가치를 찾게 해주기를 바랍니다.

Flutter 패키지 직접 만드는 것이 시간 낭비인 이유



안녕하세요. 멋진 다트 문제 몇 가지를 다뤄볼 건데요, 이건 인터뷰 보기 전에 모두 알아두면 좋은 내용들입니다.

![이미지](/assets/img/2024-09-10-FlutterDartQuestionsThatEveryDeveloperShouldKnow_0.png)

# 안녕하세요 여러분,

첫 번째 질문으로 시작하겠습니다.

<div class="content-ad"></div>

Q1) 다음 프로그램의 출력을 예측하세요.

```js
void main() {
  int x = 1;
  fun(x);
  print(x);
}

void fun(int x) {
  x++;
}
```

만약 출력이 1이라고 생각하신다면, 올바른 길 위에 계신건가요! 다른 문제가 더 기다리고 있어요! 하지만 틀렸다고 생각하신 분들을 위해 걱정하지 마세요 — 다음 문제를 시도해보고, 함께 두 문제의 해결책을 논의하겠습니다.

![image](https://miro.medium.com/v2/resize:fit:956/1*1vzUG4Ui9xmWSpRrGDZ9Jw.gif)

<div class="content-ad"></div>


Q2) 다음 프로그램의 출력을 예측해보세요.

```js
void main() {
  List<int> arr = [1,2,3,4,5];
  fun1(arr);
  print(arr);
}

void fun(List arrayCopy){
  arrayCopy.add(6);
}
```

그렇다면 출력이 다음과 같다고 생각했다면

```js
[1,2,3,4,5]
```

<div class="content-ad"></div>

그러면 중요한 Dart 개념을 놓치고 있는지도 모릅니다. 그렇다면 이 출력물에 무엇이 잘못됐을까요? 질문 1에서 적용된 규칙에 따르면, 두 질문의 유일한 차이점은 질문 1에서 int 데이터 유형을 사용하고, 질문 2에서 List 데이터 유형을 사용했다는 것 뿐입니다. 그러나 출력물은 다음과 같습니다 -

```js
[1,2,3,4,5,6]
```

<img src="https://miro.medium.com/v2/resize:fit:996/1*4y1nDJWgOgV475U0JcQAXg.gif" />

<div class="content-ad"></div>

출력 결과의 비밀은 데이터 구조 유형 간의 차이에 있습니다. 구체적으로 기본 및 비 기본 데이터 구조입니다.

당신이 '어머나, 왜 그렇게 바보 같았을까?' 라고 생각하면 보너스 질문이 당신을 기다리고 있어요. 다른 분들은 해답을 함께 논의한 후에 질문에 도전해 보세요.

# 기본 데이터 구조

기본 데이터 구조는 Dart에 내장된 기본 유형입니다. 직접적으로 메모리에 저장되는 단일 값을 나타내며 직관적이고 간편합니다. 몇 가지 예시를 보여드리겠습니다:

<div class="content-ad"></div>

- int: 정수 값에 사용되며 1이나 42와 같은 값들이 포함됩니다.
- double: 3.14나 2.718과 같은 실수 값에 사용됩니다.
- bool: true나 false와 같은 부울 값들을 나타내는 데 사용됩니다.
- String: "Hello, World!"와 같이 문자열을 부호화하는 데 사용됩니다.

## 원시 데이터 구조 이외의 데이터 구조

원시 데이터 구조 이외의 데이터 구조들은 보다 복잡하며 Dart에서 기본 유형으로 직접 제공되지 않습니다. 이러한 데이터 구조들은 종종 원시 유형의 컬렉션이나 보다 복잡한 데이터 구조를 포함합니다. 예시로는 다음이 있습니다:

- List: [1, 2, 3]과 같이 순서가 있는 항목들의 컬렉션입니다.
- Set: '1, 2, 3'과 같이 순서가 없는 고유한 항목들의 컬렉션입니다.
- Map: '`key1`: `value1`, `key2`: `value2`'와 같이 키-값 쌍의 컬렉션입니다.

<div class="content-ad"></div>

답은 다음과 같은 주요 차이에 있습니다:

그래서 기본 데이터 구조는 즉 값에 의해 전달되고, 비 기본 데이터 구조는 참조에 의해 전달됩니다.

질문 1의 출력은 1입니다. 왜냐하면 이것은 함수 내에서 값에 의해 전달되는 기본 데이터 구조를 포함하기 때문입니다. 따라서 새 변수가 만들어져 함수로 전달되고, 이 새 변수의 값만 수정됩니다. 원래 값은 변경되지 않습니다.

그리고 질문 2의 출력은 [1, 2, 3, 4, 5, 6]입니다. 왜냐하면 이것은 함수 내에서 참조에 의해 전달되는 비 기본 데이터 구조를 포함하기 때문입니다. 결과적으로 동일한 변수의 참조가 함수로 전달되므로, 기존 변수의 값이 변경됩니다.

<div class="content-ad"></div>

# 보너스 문제

```js
void main() {
  List<int> arr = [1,2,3,4,5];
  fun1(arr);
  print(arr);
}

void fun(List<int> arrayCopy){
  List<int> arr =  [...arrayCopy];
  arr.add(6);
}
```

일단 생각해보세요.
출력은 [1, 2, 3, 4, 5] 입니다. 힌트 - 전개 연산자의 효과를 생각해 보세요. 전개 연산자에 대해 더 알고 싶다면 알려주세요.

즐거운 코딩하세요!!!

<div class="content-ad"></div>

Mohit Gupta
Flutter 개발자

# Stackademic 🎓

끝까지 읽어 주셔서 감사합니다. 떠나실 때:

- 작가를 칭찬하고 팔로우하기를 고려해 주세요! 👏
- 저희를 팔로우하기: X | LinkedIn | YouTube | Discord
- 다른 플랫폼 방문: In Plain English | CoFeed | Differ
- Stackademic.com에서 더 많은 콘텐츠 확인하기

모든 개발자가 알아야 할 Flutter와 Dart 질문들



<img src="/assets/img/2024-09-10-FluttersBigPerformanceProblem_0.png" />

얼마 전에 'PocketBase의 놀라운 5가지 혜택'이라는 글을 게시했었는데 거기서 Go가 정말 빠르다고 토론했어. 그 기사에서, Go가 메모리를 어떻게 관리하는지, 특히 슬라이스와 메모리를 어떻게 관리하는지에 대해서 이야기했지.

나는 이것이 XML 파싱이 왜 느린지라고 생각했어. 벤치마킹을 한 후에는, 실제로 그게 이유인지는 잘 모르겠어. 데이터베이스와 클라이언트 앱 사이를 왔다갔다하면서 발생하는 성능 문제라고 의심해. 하지만 이것은 Dart가 메모리를 어떻게 관리하는지가 완벽하지 않다는 걸 의미하는 것이 아니야.

사실, 내가 오랫동안 Dart에 대해 불평했던 것은 바로 메모리 관리 방식이었어. 내 의견으로는, 이것은 매우 심각한 성능 문제야.

<div class="content-ad"></div>

저는 널 안전 기능이 도입되기 전에 Dart를 처음 사용했어요. 그 전에 C#을 사용하다가 Dart를 쓰기 시작했는데요, 정말 편한 언어라고 느꼈어요. C#과 비슷한데 더 간결한 느낌이었어요. 조금 더 깔끔하고요.

하지만 조금 특이한 점을 발견했어요. Dart에서 어떤 유형이든 null로 설정할 수 있다는 거죠. 다시 말하면 int num = null 이 완전히 작동한다는 거예요. 이제 널 안전 기능이 추가되어서 다소 복잡해졌지만, 크게 달라진 건 없어요. int? num = null 이렇게 해야 하지만 기본 아이디어는 같아요.

이전에 C#이나 Java, 그리고 C++과 같은 많은 언어를 사용해봤고, 대부분의 언어에서 이것을 할 수 없다는 걸 알고 있었어요. 그 이유는 int가 값 형식으로 다뤄지기 때문이에요. 그 말은 말 그대로 메모리 상에 어딘가에 있는 블록이고, 그 블록을 null로 표시할 특별한 방법이 없다는 거죠. null을 사용하려면 포인터가 필요하며, 그 포인터가 널 포인터가 되어야 해요. 즉, 그것이 메모리 주소 0을 가리키게 되는 거예요.

그렇다면 Dart는 어떻게 이걸 구현하는 걸까요? Dart에서는 모든 것이 참조 유형이라는 것이 밝혀졌죠. 모든 변수에는 포인터가 있다는 거예요. 숫자에 대해 메모리를 두 배 더 사용해야 하기 때문에 조금 비효율적이지만, 더 나쁜 점도 있어요. 모든 변수가 참조 유형이기 때문에 그 대부분은 힙에 저장됩니다. 이에 관한 신뢰할만한 자료를 찾을 수 없어서 100% 확실하지는 않지만, 최적화가 많지 않다면 그렇게 동작할 것으로 예상됩니다.

<div class="content-ad"></div>

힙에 것을 저장하는 문제는 힙이 정렬되어 있지 않다는 것입니다. 제 방처럼 쓰이는 것과 쓰이지 않는 것이 혼재되어 있어요. 방에 계속 물건을 넣다 보면 기억이 떠나는 메모리 누수가 발생할 수 있습니다.

그러므로 이를 피하기 위해 가비지 수집이 필요합니다. 주기적으로 사용 중인 것과 사용하지 않는 것을 확인하고, 사용하지 않는 것들을 비워내는 것이죠. 이 방법은 잘 동작하지만 문제가 있습니다: 이를 위해 메모리 전체에 독점적 잠금이 필요하다는 것은 다른 사람이 사용할 수 없음을 의미합니다. 그리고 프로그램이 메모리에 접근할 수 없으면 가비지 수집이 완료될 때까지 중지해야 합니다.

이를 'stop-the-world 가비지 수집기'라고 합니다. 이는 사용자가 마주하게 되는 어떤 응용 프로그램에 대해 멍청한 아이디어라고 항상 분명히 생각해왔습니다. 왜냐하면 GC가 동작하는 동안 매우 눈에 띄는 프레임이 누락될 수 있기 때문이죠.

물론 이 방법의 장점은 바보같이 간단하다는 점입니다. 'stop-the-world 가비지 수집기'가 있는 언어에서도 메모리 누수가 발생할 수 있습니다: 항상 추가하지만 삭제하지 않는 목록을 가지고 있으면 알 수 있지만 상당히 오래 걸릴 것입니다.

<div class="content-ad"></div>

지금 궁금해하고 계실지도 모르겠지만, 쓰레기 수거의 더 나은 방법이 있을까요? 사실은 '쓰레기 수집'이 아니라 '메모리 관리'에 더 가까운데요, 네. 제가 선호하는 방법은 ARC(자동 참조 계수)입니다. 이 시스템은 객체가 참조하는 횟수를 세어 그 수가 제로가 될 때 자동으로 삭제하는 방식입니다.

"그럼 왜 모두가 이렇게 하지 않을까요?"라고 물을 수 있습니다. 하지만, 이 방법에도 한 가지 문제가 있습니다: 순환 참조입니다. A가 B를 가리키고 B가 A를 가리키면 A와 B는 사용되지 않더라도 참조 수가 제로로 가지 않습니다. 이 문제에 대한 간단한 해결책이 '약한 참조'라는데요, 이는 'stop-the-world-GC'만큼 바로바로 효과적이지는 않습니다. 그래도 저는 이 방식을 좋아합니다. 왜냐하면 실제로 두 곳에서 무언가를 가리키는 경우가 그리 흔치 않기 때문입니다.

또한 메모리 관리 기술로는 그 밖에도 여러 가지가 있습니다. Unity는 최근 증분 쓰레기 수거기로 전환했습니다. 참조 계수와 일반 GC를 결합할 수도 있습니다. 그리고 동시성 GC도 있죠.

그렇기에 다양한 방법이 존재합니다. 사실 Dart는 '세대별 쓰레기 수집기'를 사용하여 'GC 스파이크'를 완화하려고 시도하지만 완전히 해결하지는 못합니다. 그리고 Dart의 작동 방식 때문에, 세대별 GC만으로는 충분하지 않아요.

<div class="content-ad"></div>

그 이유는 플러터가 어떻게 작동하는지 때문입니다. UI를 구축하기 위해 위젯을 사용합니다. 매 프레임이 빌드될 때마다 전체 위젯 트리가 폐기되고 다시 구축됩니다. 좀 너무 과도한 간단화인데, 일부 부분은 재사용되지만 충분하지 않습니다. 이로 인해 많은 가비지가 생성됩니다.

제가 처음으로 이 현상을 발견한 건 제 언어 학습 앱 Litany에서였습니다.

![이미지](/assets/img/2024-09-10-FluttersBigPerformanceProblem_1.png)

하지만 이 앱은 최소한의 애니메이션만 존재해서 매우 드물합니다. 정말 문제가 심각해지는 곳은 제 RSS 리더 Stratum입니다.

<div class="content-ad"></div>


![FluttersBigPerformanceProblem_2](/assets/img/2024-09-10-FluttersBigPerformanceProblem_2.png)

이 UI는 엄청 복잡해요. 모든 것이 커스텀된 상태 입니다. 그리고 천천히 스크롤하면 GC에 많은 지연이 발생합니다.

아직 완전히 모든 것이 GC 지연인지 확실하지는 않아요. 화면에 이미지가 있는 경우에 더 자주 일어나는 것처럼 보이는데, 어떤 비동기 작업이 UI 스레드를 차단하는 것이 가능합니다.

최근에 async await에 대한 개인적인 입장을 적은 것이 대유행을 일으켰어요. 제가 생각했던 것보다 굉장히 명백하다고 생각했고 전혀 잘 될 것이라고 생각하지 않았는데 Medium은 정말 예상할 수 없는 것으로 가득 차 있어요. 어쨌든, 'async await is a lie'라는 제목의 후속 기사를 쓰려고 생각 중이에요. 왜냐하면 실제로 '비동기'가 아니라 '비동기간격이 있는 동기 코드의 시퀀스'이기 때문이에요. 진정한 멀티스레딩이 있었으면 좋겠어요. 이 모든 독립된 것들에 대한 말이죠.


<div class="content-ad"></div>

어쨌든, 저는 문제의 근본적인 원인이 Dart의 GC 시스템인 것으로 강력하게 의심합니다. 이는 주로 무작위성 때문입니다. 그리고 스크롤을 하는 동안 뿐만 아니라 이야기를 탭할 때에도 발생할 수 있습니다.

Dart은 쓰레기를 청소하는 데에 그다지 효과적이지 않습니다. 그래서 저는 무엇을 보고 싶어할까요? 저는 자동 참조 계산을 보고 싶습니다. 비록 이것이 조금 이기적인 요구일 수는 있지만요. 제가 항상 대형 프로젝트에 대해 자동 참조 계산을 사용한 언어를 사용해보고 싶어했지만, 안타깝게도 대부분의 언어가 GC를 사용하고 있습니다.

하지만 이 문제를 해결할 다른 방법들도 있습니다. 만약 스크롤이나 애니메이션이 재생 중일 때에 GC를 우선 순위를 낮추는 것도 한 가지 방법입니다. 그러나 이렇게 하면 많은 쓰레기가 쌓일 수 있습니다. 다른 옵션으로 Unity가 사용하는 점증적 가비지 콜렉터를 사용하거나, Go가 사용하는 동시 가비지 콜렉터를 사용할 수도 있습니다. 어쨌든, 중요한 것은 UI 프레임워크에서는 절대 중단-세계-GC를 사용해서는 안 된다는 것입니다. 특히, 메모리 할당이 매우 빈번한 Dart에서는요.

'X에 대한 제가 좋아하지 않는 점'이라는 글을 많이 썼습니다. Go에 대한 글과 PocketBase에 대한 글을 썼어요.

<div class="content-ad"></div>

다트에 대해 글을 쓰려고 생각했는데, 제가 할 수 없을 것 같아요. 대부분의 불만이 표준 언어 기능에서의 일탈. 다트는 그다지 일탈하지 않아요. 사실 다트는 지루하다고까지 말할 수 있어요. 그저 수많은 프로그래밍 기능을 갖추고 있고, 더 추가하려고 노력하고 있어요. 이것이 불만이 될 수도 있겠죠. C#에 대한 제 불만 중 하나는 무겁다는 건데, 그렇게 심하진 않아요.

그 게시물을 구글링하면 레딧과 해커 뉴스에까지 올라갔다는 걸 깨달았어요. 사람들이 저는 그 기능을 싫어한다고 말했어요. 그건 사실이 아니에요. 저는 그 기능이 중복되었다고 말하고 싶어요. 다트의 기능들도 마음에 들지 않지만, 그것들이 중복된다고 할 수는 없어요. 이전에 할 수 없던 일을 하게 해주기 때문에, 제가 좋아하지 않아도 다른 사람에겐 매력적일 수 있어요.

하지만 그것 역시 대가가 따라와요: 성능. 일부 기능은 본질적으로 느릴 수 있어요. 그래서 Go에서는 패키지의 순환 종속성을 허용하지 않아요. 이것은 제한이 될 수 있지만 컴파일 속도가 빠른 Go의 장점이 되어요.

다트는 모두를 위한 모든 것이 되려고 노력하고 있어요. 그것은 저에게 언어에서 좋아하는 점이에요. 하지만 조금 너무 나가고 있는 것 같아요. 다트는 기능에 너무 많은 초점을 맞추고 있어요. 성능에 대해 집중하지 않고 있어요. 그리고 그것이 다트 (그리고 플러터)의 큰 성능 문제입니다.

플러터의 성능 개선을 위한 5가지 방법



기술이 발전함에 따라 안드로이드 개발자들은 스마트폰을 넘어 안드로이드 TV와 같은 플랫폼으로 앱 개발 기술을 확장했습니다. 안드로이드 TV와 안드로이드 모바일은 같은 기본 운영 체제를 공유하지만, 각 플랫폼에 맞는 앱을 만들 때 고려해야 할 몇 가지 주요 차이점이 있습니다. 📺 🆚 📱

![](/assets/img/2024-09-10-AndroidTVvsAndroidMobileDevelopment_0.png)

## UI/UX 디자인 🎨

모바일 앱: 터치 기반 상호 작용을 제공하는 모바일 장치는 핀치-줌, 드래그 앤 드롭, 스와이프와 같은 복잡한 제스처를 가능케합니다. 따라서 모바일 UI는 여러 터치 포인트, 작은 버튼, 스크롤 가능한 목록 및 스크롤 가능한 탭과 같은 기능으로 설계됩니다.

<div class="content-ad"></div>

안드로이드 TV 앱: 반면에, 안드로이드 TV 앱은 D-pad 네비게이션을 사용하며, 사용자들이 방향 버튼(왼쪽, 오른쪽, 위, 아래)과 선택 버튼을 사용하여 앱과 상호 작용합니다. 인터페이스는 단순화되어야 하며, 큰 크기의 쉽게 이동할 수 있는 요소, 적은 메뉴, 직관적인 레이아웃에 중점을 둬야 합니다. 사용자가 리모컨으로 앱을 편리하게 탐색할 수 있도록 해야 하며, TV 화면에서 혼란스러울 수 있는 지저분한 디자인을 피해야 합니다.

```js
class MainActivity : Activity() {
   ...
    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        return when (keyCode) {
            KeyEvent.KEYCODE_DPAD_CENTER ->              
                  // D-pad 중심 이벤트 처리
                true
            KeyEvent.KEYCODE_DPAD_LEFT ->                
                 // D-pad 왼쪽 이벤트 처리
                true
            KeyEvent.KEYCODE_DPAD_RIGHT ->                
                  // D-pad 오른쪽 이벤트 처리
                true
            KeyEvent.KEYCODE_DPAD_UP ->                
                 // D-pad 위쪽 이벤트 처리
                true
            KeyEvent.KEYCODE_DPAD_DOWN ->                
                 // D-pad 아래쪽 이벤트 처리
                true
            else -> super.onKeyDown(keyCode, event) // D-pad 기타 이벤트 처리
        }
    }
  ...
}
```

## 화면 크기와 해상도 📐

모바일 앱: 스마트폰은 4인치에서 7인치까지 다양한 해상도와 종횡비를 갖는 작은 화면을 가지고 있습니다. 안드로이드 개발자들은 화면 요소의 크기에 대해 과도하게 걱정할 필요 없이 고해상도 이미지와 상호 작용 컴포넌트를 활용할 수 있습니다.

<div class="content-ad"></div>

안녕하세요! 안드로이드 TV 앱에 관한 내용입니다. 텔레비전(TVs)은 32인치부터 75인치 이상까지 매우 큽니다. 일반적으로 보는 거리가 먼 TV에서는 안드로이드 개발자들이 텍스트가 충분히 가독성이 있고, 아이콘과 UI 요소가 잘 간격으로 배치되어야 합니다. 안드로이드 개발자들은 1080p 및 4K 디스플레이에 최적화해야 하며, 앱이 대형 고화질 화면에 어떻게 렌더링되는지 주의 깊게 확인해야 합니다.

## 컨텐츠 프레젠테이션 📸

모바일 앱: 모바일 앱은 사용자가 활발히 앱을 사용하며 주로 이동 중에 사용됩니다. 이는 앱이 알림을 제공하거나 실시간 입력을 요구하며 사용자의 전체 주의를 가정할 수 있음을 의미합니다.

안드로이드 TV 앱: 그러나 안드로이드 TV 앱은 "뒤로 기대"하는 경험으로 사용됩니다. 사용자는 일반적으로 소파에 앉아 영화, TV 프로그램 또는 음악 등을 수동으로 감상합니다. 따라서 TV 앱은 내용 중심으로 만들어져 간단하고 명확한 프레젠테이션을 강조하고 중단을 최소화해야 합니다. 안드로이드 개발자들은 지속적인 상호작용을 필요로 하지 않도록하고, 내용을 원활하고 몰입적으로 제공하는 데 초점을 맞춰야 합니다.

<div class="content-ad"></div>

앱 또는 모듈에 필요한 아티팩트의 종속성을 build.gradle 파일에 추가해주세요:

```js
dependencies {
    def leanback_version = "1.2.0-alpha04"

    implementation "androidx.leanback:leanback:$leanback_version"

    // leanback-preference은 TV 앱을 위한 설정 UI를 제공하는 애드온입니다.
    implementation "androidx.leanback:leanback-preference:$leanback_version"

    // leanback-paging은 RecyclerView 어댑터에 페이징 지원을 추가하는 데 도움이 되는 애드온입니다.
    implementation "androidx.leanback:leanback-paging:1.1.0-alpha11"

    // leanback-tab은 상단 네비게이션 바로 사용하기 위해 사용자 정의된 TabLayout을 제공하는 애드온입니다.
    implementation "androidx.leanback:leanback-tab:1.1.0-beta01"
}
```

Leanback은 BrowseSupportFragment, VerticalGridSupportFragment과 같은 구체적인 레이아웃을 제공합니다.

```kotlin
class MyBrowseFragment : BrowseSupportFragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }
}
```

<div class="content-ad"></div>

## 입력 방법 🎙️

모바일 앱: 앞에서 언급했듯이 모바일 앱은 터치 기반입니다. 사용자는 여러 터치 포인트를 사용하여 화면과 상호 작용할 수 있어서 스와이핑, 드래깅, 탭과 같은 다양한 상호 작용이 가능합니다. 모바일 키보드는 텍스트 입력을 쉽게 할 수 있게 제공됩니다.

Android TV 앱: Android TV에서 사용자는 주로 제한된 방향 입력이 있는 리모컨을 사용하여 앱과 상호 작용합니다. 이는 Android 개발자들이 내비게이션을 간단히 하고 복잡한 제스처를 필요로 하는 기능을 피해야 한다는 것을 의미합니다. 텍스트 입력은 사용자가 리모컨을 사용하여 화면에 키보드를 이동해야 하므로 어려울 수 있습니다. 따라서 Android 개발자들은 사용자 경험을 향상시키기 위해 Google 어시스턴트를 통한 음성 검색을 통합하는 경우가 많습니다.

포커스 작업을 관리하기 위해 일련의 정의를 추가해야 합니다:

<div class="content-ad"></div>

```js
<Button
    android:id="@+id/btnClick"
    android:focusable="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Click This Button" />
```

```js
btnClick.setOnFocusChangeListener(View.OnFocusChangeListener { v, hasFocus ->
    if (hasFocus) // Button has gained focus
    else // Button has lost focus
})
```

## 하드웨어 고려 사항 🖥️

모바일 장치: 스마트폰은 고성능 프로세서, 충분한 RAM 및 고품질 카메라를 갖춘 고급 하드웨어를 갖추고 있습니다. 모든 이를 한정된 공간에 담아낸 콤팩트한 장치 내에서 복잡한 작업인 증강 현실, 고해상도 이미지 처리 및 게임과 같은 작업을 쉽게 수행할 수 있도록 합니다.

<div class="content-ad"></div>

안녕하세요! 안드로이드 TV 디바이스에 관하여 이야기하려고 해요. 안드로이드 TV 디바이스는 성능 면에서 다양합니다. 고성능 스마트 TV가 강력한 처리 능력을 제공하는 반면, 많은 세트톱 박스와 이전 모델은 제한된 자원을 가지고 있어요. 안드로이드 개발자는 안드로이드 TV 앱을 낮은 성능 디바이스에 최적화해야 해요. 이를 통해 비디오 콘텐츠의 부드러운 재생과 반응성 있는 내비게이션을 보장하며, 성능이 낮은 하드웨어에서도 작동할 수 있어요.

애플리케이션이 올바른 설정으로 되어 있는지 확인하세요. 안드로이드 TV 앱의 경우, android.hardware.touchscreen(터치스크린 지원이 없음을 나타내기 위해 "false"로 설정) 및 android.hardware.type.television(앱이 텔레비전 사용을 위해 설계되었음을 나타내기 위해)와 같은 TV 관련 기능을 선언해야 할 수도 있어요.

```js
<uses-feature
    android:name="android.hardware.type.television"
    android:required="true" />

<uses-feature
    android:name="android.software.leanback"
    android:required="true" />

<uses-feature
    android:name="android.hardware.touchscreen"
    android:required="false" />

<uses-feature
    android:name="android.hardware.microphone"
    android:required="false" />
```

## 미디어 및 비디오 재생에 중점을 두세요 🎮

<div class="content-ad"></div>

모바일 앱: 모바일 앱은 풍부한 미디어, 비디오 및 오디오 콘텐츠를 포함할 수 있지만, 미디어 소비를 중심으로 한 것은 아닙니다. 많은 모바일 앱은 생산성, 게임, 통신 및 기타 작업에 초점을 맞춥니다.

Android TV 앱: 안드로이드 TV 앱은 주로 스트리밍 플랫폼(Netflix, Disney+, Amazon Prime, YouTube 등) 또는 게임 앱과 같은 비디오 및 오디오 콘텐츠에 초점을 맞춥니다. 안드로이드 TV용으로 개발하는 안드로이드 개발자는 무결한 미디어 재생, 다양한 오디오/비디오 코덱 지원, 적응형 스트리밍 및 다양한 화면 가로 세로 비율 및 해상도 처리를 우선시해야 합니다.

## 앱 배포 👩‍💻

모바일 앱: 안드로이드 모바일 앱은 Google Play Store를 통해 배포되며, 방대한 수준의 관객과 앱 제출을 위한 잘 정립된 지침이 있습니다. 모바일 앱은 소셜, 생산성, 게임 등 다양한 범주를 갖추고 있으며, 인앱 구매, 구독 및 광고와 같은 다양한 수익 모델을 제공합니다.

<div class="content-ad"></div>

안드로이드 TV 앱: 안드로이드 TV 앱은 구글 플레이 스토어를 통해 배포되지만, 관객은 주로 엔터테인먼트 및 미디어 소비에 중점을 둡니다. 앱 카테고리 수는 더 제한적이며, 대부분의 성공적인 앱은 콘텐츠 중심적입니다(예: 스트리밍 서비스, 게임 앱). 안드로이드 개발자는 TV 사용자의 요구 사항을 고려하고 해당 콘텐츠에 맞게 맞추어야합니다. 또한, 안드로이드 개발자는 앱이 구글의 TV 호환성 요구 사항을 통과하는지 확인해야합니다.

기억해야 할 중요한 점 👀: 당신의 앱이 안드로이드 TV 앱임을 명시하고 TV 인터페이스에서 시작되어야하는 경우, 매니페스트 파일의 런처 액티비티에 대한 사용자 정의 인텐트 필터를 정의해야합니다.

```js
<activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/Theme.AndroidTV.NoActionBar">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
    </intent-filter>
</activity>
```

## 결론 🔥

<div class="content-ad"></div>

안녕하세요! 안드로이드 TV 앱을 개발하려면 이동 플랫폼에서의 개발과는 다른 사고 방식이 필요합니다. 개발자들은 네비게이션을 간소화하고 대형 화면에 최적화하며 쉬운 리모컨 입력으로 편안한 시청 경험을 제공하는 데 중점을 두어야 합니다. 게다가 TV 기기의 다양한 하드웨어를 고려하고 원활한 성능을 보장해야 합니다. 이러한 차이를 이해함으로써 개발자들은 안드로이드 TV 및 모바일 플랫폼에서 사용자에게 원활하고 즐거운 경험을 제공하는 앱을 만들 수 있습니다. 앞으로도 훌륭한 작업을 기대합니다! 🔜 🕯️🎗️

안드로이드 모바일, TV 개발 방법

새 프로젝트를 시작할 때 프레임워크 및 기술 스택 정하는 방법



![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_0.png)

네트워크 트래픽을 분석하기 위해서 요청을 가로채는 것은 모바일 펜테스팅과 악성 코드 분석의 중요한 부분입니다. 보통, 나는 이 트래픽을 캡처하고 분석 및 펜테스팅을 위해 버프 스위트를 통해 라우팅하는 데 ProxyDroid를 사용합니다. ProxyDroid는 대부분의 트래픽을 가로채고 분석하는 데 도움을 주며, 보안 취약점을 식별하고 모바일 애플리케이션을 효과적으로 테스트하는 데 도움이 됩니다.

그러나 ProxyDroid는 많은 모바일 앱에서 데이터 저장 및 동기화를 위해 사용되는 인기 있는 Firebase로 전송된 트래픽을 캡처하지 못합니다. 이는 Firebase와 관련된 보안 취약점을 식별하고 해결하기 어렵게 만들어 분석 및 테스트 과정에 공백을 만듭니다.

이 문제를 해결하기 위해 대안 솔루션인 Reqable을 찾았습니다.

<div class="content-ad"></div>

Reqable은 Firebase로 전송된 트래픽을 포함해 모든 종류의 트래픽을 캡처하고 분석할 수 있는 강력하고 유연한 도구입니다. Reqable을 펜테스팅 프로세스에 통합함으로써 분석 범위를 확대하고 네트워크 트래픽을 누락하지 않도록 보장할 수 있습니다.

# 설정

Reqable을 설치하는 것은 매우 간단합니다. 여기서는 Reqable을 설치하는 환경으로 WSA (Windows Subsystem for Android™️)를 사용합니다. Reqable은 공식 웹사이트(https://reqable.com/en-US/download)에서 다운로드할 수 있습니다.

먼저, 애플리케이션을 다운로드하고 실행하세요.

<div class="content-ad"></div>


![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_1.png)

이후에 이용 약관을 수락하세요. Reqable은 두 가지 운영 모드를 제공하며, 여기서는 스탠드얼론 모드를 사용 중입니다.

![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_2.png)

다음으로, 트래픽을 캡쳐하려면 Reqable Magic Service (RMS)를 설치해야 합니다. 간단히 RMS 서비스를 다운로드하여 설치하면 설정이 완료됩니다.


<div class="content-ad"></div>

아래는 작업이 완료되면 표시되는 화면입니다:

<div class="content-ad"></div>


![Step 5](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_5.png)

Continue by installing the certificate to decrypt HTTPS traffic. Click the yellow button at the bottom right; the application will prompt you to install the certificate.

![Step 6](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_6.png)

![Step 7](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_7.png)


<div class="content-ad"></div>


![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_8.png)

애플리케이션은 다양한 기기 유형에 대한 설치 안내서를 제공합니다. WSA의 경우 빠른 설치를 위해 Magisk를 사용합니다. 패키지를 다운로드한 후 Magisk를 통해 모듈을 간단히 설치하세요.

![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_9.png)

또는 WSA에 이미 Burp의 인증서가 설치되어 있는 경우 Burp의 인증서를 가져올 수도 있습니다.


<div class="content-ad"></div>

만약 모든 것이 설정되었다면, 단순히 트래픽을 캡처하기 위해 오른쪽 하단에 있는 노란색 버튼을 클릭하세요.

이러한 단계를 거쳐 Reqable을 설치하고 네트워크 트래픽을 캡처하고 분석할 수 있게 되었습니다. 이는 펜테스팅과 보안 분석의 효과를 향상시킵니다.

<div class="content-ad"></div>

# 트래픽 캡처

여기서 안드로이드 애플리케이션을 사용하여 Firebase를 통해 트래픽을 캡처하는 테스트를 진행했습니다. Reqable은 Firebase 요청을 성공적으로 캡처했는데, 이는 ProxyDroid가 할 수 없었던 작업입니다 😦.

![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_12.png)

Reqable은 안드로이드에서 요청을 캡처하기 위해 프록시 대신 VPN 기반 방법을 사용하여 기존의 프록시 방법으로 처리할 수 없는 Firebase와 같은 요청을 가로챌 수 있습니다.

<div class="content-ad"></div>

Reqable은 연결용 협력 모드가 있는 PC 애플리케이션도 제공합니다. 이 모드에서 Android에서 모든 트래픽이 PC로 라우팅되어 펜테스팅이나 분석이 더 쉽고 편리해집니다. 이를 통해 네트워크 트래픽 분석이 최적화되어 세부 네트워크 요청을 검토하고 보안 취약점을 더 효과적으로 식별할 수 있습니다.

![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_13.png)

Windows, macOS 또는 Linux용 애플리케이션을 다운로드한 후 원격 디바이스 기능을 사용하여 연결하면 됩니다. PC에서 직접 요청을 캡처하고 수정할 수 있습니다.

![이미지](/assets/img/2024-09-10-ReqableAnAlternativeSolutionForInterceptingRequestsOnMobileApps_14.png)

<div class="content-ad"></div>

# 더 많은 내용 보기 🚀 :

- Function calling: The solution for a flexible and efficient RAG system
- Building an RAG system integrated with Function Calling (ChatGPT-4)
- Handbook for Improving Retrieval Augmented Generation (RAG) Applications
- Maximizing the Power of LLM by Using ReAct Agent
- How I Improve My JavaScript Coding Skills Every Day

Reqable - 모바일 앱에서 요청을 가로채는 대안적인 솔루션



리액트 네이티브는 개발자들이 모바일 앱을 만드는 방식을 혁신했습니다. 이 강력한 프레임워크는 JavaScript 개발자들이 기존의 기술을 활용하여 iOS 및 Android용으로 진정한 네이티브 앱을 만들 수 있게 합니다. 이 포괄적인 안내서에서는 리액트 네이티브의 세계, 이점, 그리고 모바일 앱 개발의 풍경을 살펴볼 것입니다.

## 리액트 네이티브 혁명

리액트 네이티브는 모바일 개발 세계에서 게임 체인저로 등장했습니다. 이는 JavaScript를 사용하여 전통적으로 웹 개발과 연관된 언어로 네이티브 모바일 앱을 만들 수 있는 독특한 제안을 제공합니다.

이 프레임워크는 또 다른 하이브리드 솔루션이 아닙니다. 그것은 실제로 웹 앱을 모바일 애플리케이션으로 위장시키지 않고 정말로 네이티브 앱을 제공합니다. 결과는 무엇인가요? iOS 및 Android 기기 모두에서 자연스럽게 작동하는 고성능, 부드럽게 실행되는 앱입니다.

<div class="content-ad"></div>

## React Native의 매력은 무엇일까요?

React Native의 매력은 효율성과 다양성에 있습니다. 여기에는 다양한 개발자와 기업들 사이에서 인기를 얻게 된 이유가 있습니다:

- 크로스 플랫폼 개발: 한 번 작성하고 어디서나 실행합니다. React Native를 사용하면 개발자들이 iOS와 Android 간의 코드베이스의 상당 부분을 공유할 수 있습니다.
- 네이티브 성능: 하이브리드 앱과 달리 React Native는 네이티브 코드로 컴파일되어 전통적으로 개발된 네이티브 앱과 견줄 만한 성능을 제공합니다.
- 개발 속도 향상: 핫 리로딩과 다양한 미리 만들어진 컴포넌트로 React Native는 개발 프로세스를 가속화합니다.
- 비용 효율성: 기업은 두 플랫폼 모두에 대해 단일 코드베이스를 유지함으로써 개발 및 유지 관리 비용을 줄일 수 있습니다.
- 다양한 커뮤니티: 다양한 개발자 생태계가 풍부한 서드파티 플러그인 및 컴포넌트 라이브러리에 기여합니다.

## 잘못된 풍선 규명

<div class="content-ad"></div>

개발 커뮤니티에서는 React Native이 "진지한" 앱에 적합하지 않다는 미신이 계속되고 있습니다. 이것은 사실과 거리가 멀죠.

John Smith의 견해는 일반적인 오해를 대변하지만, 현실은 다른 모습을 보여줍니다. React Native로 구축된 몇 가지 대규모 앱을 살펴보겠습니다:

- Facebook
- Instagram
- Pinterest
- Skype
- Uber Eats

이들은 단순한 앱이 아닙니다. 매일 수백만 명이 사용하는 복잡하고 기능이 풍부한 응용 프로그램입니다. 이들은 React Native이 진지하고 대규모 프로젝트를 처리할 수 있는 능력을 확증하는 증거입니다.

<div class="content-ad"></div>

## React Native 시작하기

자바스크립트 개발자인 여러분! React Native를 통해 모바일 앱 개발에 뛰어들어보세요. 익숙한 진입점을 제공합니다. 아래 사항을 숙지해주세요:

## 요구 사항

React Native를 시작하려면 다음이 있어야 합니다:

<div class="content-ad"></div>

- JavaScript에 대한 확고한 이해
- React에 익숙 (엄격히 필수는 아니지만 매우 유익함)
- 모바일 UI 패턴의 기본 지식

## 개발 환경

React Native는 개발 환경을 설정하는 두 가지 주요 방법을 제공합니다:

- 일반 React Native: 이 방법은 프로젝트 구성에 대한 완전한 제어를 제공하지만 더 많은 설정이 필요합니다.
- Expo: React Native를 중심으로 구축된 일련의 도구로, 특히 초보자에게 개발 프로세스를 단순화해 줍니다.

<div class="content-ad"></div>

## 평범한 React Native과 Expo 중에서 선택하기

## 평범한 React Native

장점:

- 네이티브 모듈에 완벽한 액세스
- 프로젝트 구성에 대한 완전한 제어
- 특정 네이티브 기능이 필요한 앱에 적합

<div class="content-ad"></div>

단점:

- 더 복잡한 설정
- 가파른 학습 곡선

## 엑스포

장점:

<div class="content-ad"></div>

- 설정이 쉽고 빠른 시작
- 공기를 통한 업데이트
- 많은 미리 만들어진 구성 요소에 액세스

단점:

- 네이티브 모듈에 대한 제한된 액세스
- 프로젝트 구성에 대한 제어가 적음

초보자나 간단한 앱을 개발하는 사람들에게는 Expo가 종종 권장되는 시작점입니다. React Native에 더 익숙해지면 언제든지 Expo에서 완전한 React Native 프로젝트로 '이젝트'할 수 있습니다.

<div class="content-ad"></div>

## 첫 번째 React Native 앱 만들기

간단한 React Native 앱을 만드는 기본 단계를 함께 알아봅시다:

- 개발 환경 설정: Node.js를 설치한 후 다음 명령을 실행하세요:

```bash
npm install -g expo-cli
```

<div class="content-ad"></div>

새로운 프로젝트를 만듭니다:

- expo init MyFirstApp cd MyFirstApp

- 앱을 시작합니다:

- npm start

<div class="content-ad"></div>

Expo DevTools를 브라우저에서 실행합니다. 여기서 iOS 또는 Android 시뮬레이터에서 앱을 실행하거나 Expo 앱을 사용하여 실제 장치에서 실행할 수 있습니다.

## React Native의 핵심 구성 요소

React Native는 네이티브 UI 요소와 직접 매핑되는 일련의 핵심 내장 구성 요소를 제공합니다. 여기에는 가장 일반적으로 사용되는 몇 가지가 포함됩니다:

- View: 사용자 인터페이스를 구축하는 데 필수적인 구성 요소입니다.
- Text: 텍스트를 표시하는 데 사용됩니다.
- Image: 다양한 유형의 이미지를 표시합니다.
- ScrollView: 구성 요소 및 뷰를 위한 스크롤 가능한 컨테이너입니다.
- TextInput: 사용자가 텍스트를 입력할 수 있도록 합니다.
- TouchableOpacity: 투명도 피드백이 있는 터치 가능한 요소를 생성합니다.

<div class="content-ad"></div>

이런 구성 요소 중 일부를 사용한 간단한 예제가 있습니다:

```js
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
      />
      <Text style={styles.text}>React Native에 오신 것을 환영합니다!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
  text: {
    fontSize: 20,
    marginTop: 20,
  },
});

export default MyComponent;
```

## React Native에서 스타일링하기

React Native에서의 스타일링은 CSS와 유사하지만 몇 가지 주요한 차이점이 있습니다. React Native는 스타일에 JavaScript 객체를 사용하며, 속성은 카멜 케이스로 작성됩니다.

<div class="content-ad"></div>

아래는 컴포넌트를 스타일링하는 방법의 예시입니다:

```js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const StyledComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Styled Text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default StyledComponent;
```

## React Native에서의 네비게이션

네비게이션이란 모바일 앱의 중요한 측면입니다. React Native는 내장된 네비게이션 솔루션을 제공하지 않지만, 여러 인기 있는 라이브러리가 있습니다. 가장 널리 사용되는 라이브러리는 React Navigation입니다.

<div class="content-ad"></div>

여기 React Navigation을 사용하여 내비게이션을 설정하는 기본 예제입니다:

```js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
```

## React Native에서의 상태 관리

단순한 앱의 경우, React의 기본 상태 관리 기능만으로 충분할 수 있습니다. 그러나 앱이 복잡해지면 Redux나 MobX와 같은 상태 관리 라이브러리를 사용하는 것을 고려해볼 수 있습니다.

<div class="content-ad"></div>

Redux를 사용한 기본적인 예제입니다:

```js
import { createStore } from 'redux';
import { Provider } from 'react-redux';

// Reducer
const initialState = { count: 0 };
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Store
const store = createStore(reducer);

// App
function App() {
  return (
    <Provider store={store}>
      {/* 여러분의 앱 컴포넌트들 */}
    </Provider>
  );
}
```

## 네이티브 기능에 접근하기

React Native는 장치 기능에 액세스하기 위한 다양한 API를 제공하지만, 가끔은 네이티브 코드로 직접 진입해야 할 때가 있습니다. 여기서 네이티브 모듈이 필요합니다.

<div class="content-ad"></div>

네이티브 모듈을 사용하면 Swift, Objective-C, Java 또는 Kotlin에서 네이티브 코드를 작성하고 JavaScript에서 노출할 수 있습니다. 이를 통해 플랫폼별 API를 활용하거나 성능 중요한 작업을 최적화할 수 있습니다.

다음은 Android에서 네이티브 모듈을 만드는 간단한 예제입니다:

```js
// MyModule.java
package com.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyModule extends ReactContextBaseJavaModule {
    public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "MyModule";
    }

    @ReactMethod
    public void sayHello(String name) {
        System.out.println("Hello, " + name);
    }
}
```

그런 다음 이 모듈을 JavaScript 코드에서 사용할 수 있습니다:

<div class="content-ad"></div>

```js
import { NativeModules } from 'react-native';

NativeModules.MyModule.sayHello('React Native');
```

## 성능 최적화

React Native는 기본적으로 훌륭한 성능을 제공하지만, 앱을 더 최적화하기 위해 다음과 같은 기술을 사용할 수 있습니다:

- 긴 목록에는 FlatList를 사용하세요: FlatList는 항목을 게으르게 렌더링하여, 긴 목록에 더 효율적입니다.
- shouldComponentUpdate 구현하기: 이 라이프사이클 메서드를 사용하여 불필요한 다시 렌더링을 방지할 수 있습니다.
- PureComponent 사용하기: PureComponent는 얕은 프롭과 상태 비교로 shouldComponentUpdate를 구현합니다.
- 이미지 최적화하기: 적절한 이미지 크기와 포맷을 사용하여 로드 시간을 줄입니다.
- Hermes 사용하기: React Native에 최적화된 Facebook의 자바스크립트 엔진을 사용하세요.

<div class="content-ad"></div>

## React Native 앱 테스트

테스트는 모든 개발 프로세스에서 중요한 부분입니다. React Native는 다양한 테스트 방법론을 지원합니다:

- 단위 테스트: 각 컴포넌트와 함수를 테스트하기 위해 Jest를 사용하세요.
- 통합 테스트: React Native Testing Library와 같은 도구를 사용하여 통합 테스트를 수행할 수 있습니다.
- 종단 간 테스트: React Native에서 E2E 테스트를 위해 Detox가 인기 있는 선택지입니다.

다음은 간단한 Jest 테스트 예제입니다:

<div class="content-ad"></div>

```js
import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('MyComponent renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});
```

## React Native 앱 배포하기

앱 준비가 완료되면 앱 스토어에 배포할 때입니다. 이 과정은 다음을 포함합니다:

- 앱 번들 생성: 이 파일에는 앱의 코드와 자산이 포함됩니다.
- 앱 스토어 목록 만들기: Apple App Store 및 Google Play Store에 목록을 만들어야 합니다.
- 심사 제출: Apple과 Google은 앱이 통과해야 하는 심사 과정이 있습니다.
- 앱 릴리스: 승인되면 사용자에게 앱을 배포할 수 있습니다.

<div class="content-ad"></div>

## React Native의 미래

React Native는 Facebook과 커뮤니티가 지속적으로 개선에 노력하며 발전하고 있습니다. 몇 가지 흥미 진진한 발전 사항은 다음과 같습니다:

- 새로운 아키텍처: 성능을 향상시키고 네이티브 모듈 개발을 더 쉽게 할 수 있는 주요 개편.
- 향상된 접근성: React Native 앱을 보다 접근하기 쉽게 만들기 위한 지속적인 노력.
- 향상된 크로스 플랫폼 기능: 웹과 모바일 플랫폼 간에 코드 공유를 더 쉽게 하기 위한 작업 중.

## 결론

<div class="content-ad"></div>

리액트 네이티브는 고품질의 크로스 플랫폼 모바일 애플리케이션을 만드는 데 강력한 도구로 입증되었습니다. 자바스크립트 기술을 활용하여 네이티브 앱을 개발할 수 있는 능력으로, 모바일 개발을 더 많은 개발자들에게 열어 주었습니다.

리액트 네이티브는 수백만 명이 사용하는 본격적인 프로덕션 앱을 만들 수 있는 능력을 갖췄다는 것을 확인했습니다. 경험 많은 모바일 개발자이든 웹 개발자이든, 리액트 네이티브는 앞으로 나아갈 확실한 길을 제시합니다.

리액트 네이티브의 미래는 밝아보이며, 지속적인 개선과 강력한 커뮤니티의 지원을 받고 있습니다. 디지털 랜드스케이프에서 모바일이 계속 주도적인 역할을 하는 가운데, 크로스 플랫폼 앱을 효율적으로 만드는 능력은 더욱 가치 있어질 것입니다.

그래서, 모바일 앱 아이디어가 있다면, 리액트 네이티브를 한 번 시도해 보는 것은 어떨까요? 부드러운 학습 곡선과 강력한 기능을 갖춘 리액트 네이티브로, 상상 이상으로 빠르게 다음 대형 모바일 앱을 개발 중일 수도 있습니다.

자바스크립트 스킬로 네이티브 앱 구축하는 방법 React Native



<img src="/assets/img/2024-09-10-Theimpactofmobilephoneonchildren_0.png" />

양면적인 효과 살펴보기

점점 더 디지털 세계에서 모바일 폰은 성인뿐만 아니라 아이들에게도 보편적인 도구로 사용되고 있습니다. 이러한 기기들은 연결성과 정보 접근성과 같은 수많은 혜택을 제공하지만 잠재적인 위험도 가지고 있습니다. 아이들에게 모바일 폰 사용의 긍정적이고 부정적인 효과를 이해하는 것은 부모님과 교육자들에게 중요합니다.

긍정적인 효과

<div class="content-ad"></div>

교육 도구: 모바일 폰은 강력한 교육 자원으로 활용될 수 있습니다. 교육 앱, 전자책, 그리고 온라인 학습 플랫폼에 접속하여, 아이들은 전통적인 교실 환경을 넘어 지식과 기술을 향상시킬 수 있습니다. 이러한 도구들은 수학, 과학, 언어 등 다양한 과목의 학습을 지원할 수 있습니다.

소통 기능 강화: 모바일 폰을 통해 아이들은 가족이나 친구들과 소통할 수 있어 관계를 유지하고 안전을 보장할 수 있습니다. 긴급 상황에서는 모바일 폰을 소지하는 것이 신속한 소통과 안전을 보장할 수 있는 중요한 도구가 될 수 있습니다.

기술 발전: 모바일 폰 사용은 아이들이 현재의 취업 시장에서 점점 더 중요해지는 기술적 역량을 개발하는 데 도움이 될 수 있습니다. 모바일 기술에 익숙해지면 다양한 디지털 도구와 앱의 능숙함을 갖추게 되어 교육 및 전문적인 맥락에서 유용할 수 있습니다.

자원 이용: 모바일 폰을 통해 정보와 자원에 접근할 수 있습니다. 아이들은 연구, 최신 소식을 확인하거나 더 상호작용적인 방식으로 관심사를 탐구하는 데 활용할 수 있습니다.

<div class="content-ad"></div>

부정적인 영향

- **신체 활동 감소**: 휴대전화 과도한 사용은 주로 앉아서 생활하는 삶으로 이어질 수 있습니다. 핸드폰을 오랜 시간 사용하는 아이들은 신체 건강과 발달에 중요한 신체 활동을 소홀히 할 수 있습니다.

- **사회적 기술에 미치는 영향**: 통신 수단으로써의 휴대전화에 지나치게 의존하는 것은 대면 소통 기술의 발달을 방해할 수 있습니다. 아이들은 실제 상황에서의 상호작용에 어려움을 겪을 수 있으며, 디지털 소통에 지나치게 의존한다면 더욱 고립될 수 있습니다.

- **부적절한 콘텐츠 노출**: 휴대전화는 아이들에게 인터넷에 접속할 수 있는 기회를 제공하는데, 이는 부적절하거나 유해한 콘텐츠에 노출될 수 있음을 의미합니다. 적절한 감독 없이 아이들은 연령에 적합하지 않거나 온라인 위협에 노출될 수 있습니다.

<div class="content-ad"></div>

정신 건강에 대한 고려 사항: 과도한 스크린 시간은 불안과 우울증을 포함한 다양한 정신 건강 문제와 관련이 있습니다. 소셜 미디어에 지속적으로 노출되면 부정적인 자기 비교, 사이버 괴롭힘 및 온라인 인증에 대한 건강하지 않은 집착으로 이어질 수 있습니다.

영향 균형 맞추기

위험을 최소화하면서 혜택을 극대화하기 위해 부모님과 보호자가 모바일폰 사용에 대한 명확한 지침을 수립하는 것이 중요합니다. 이에는 다음이 포함됩니다:

제한 설정: 화면 시간에 대한 규칙을 설정하면 어린이가 신체적 운동과 대면 소통을 포함한 균형 잡힌 활동을 즐길 수 있도록 도와줄 수 있습니다.

<div class="content-ad"></div>

모니터링 콘텐츠: 부모 관리 기능을 사용하고 자주 온라인 행동에 대해 아이들과 이야기하는 것은 부적절한 콘텐츠 노출에 대비하는 데 도움이 될 수 있습니다.

오프라인 활동 장려: 화면을 사용하지 않는 취미와 활동을 촉진하는 것은 아이들이 균형 잡힌 삶을 유지하고 좋은 정신 건강을 유지하는 데 도움이 될 수 있습니다.

![이미지](/assets/img/2024-09-10-Theimpactofmobilephoneonchildren_1.png)

결론적으로, 적절하게 사용할 때 모바일 폰은 교육적 기회와 향상된 커뮤니케이션을 제공하여 아이들에게 가치 있는 도구가 될 수 있습니다. 그러나 잠재적인 부정적 영향에 주의하고 모바일 폰 사용에 균형 잡힌 건강한 방식을 유지하도록 적극적인 조치를 취하는 것이 중요합니다.

Posts