
<img src="/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_0.png" />

## 목차 : -

## Render에 Node.js 서버(백엔드) 코드를 배포하는 단계 :-

- MONGO_URL, PORT, JWT_TOKEN 및 개인 키와 같은 필수 링크가 .env 파일에 포함되어 있는지 확인해주세요.
- 백엔드 코드를 만든 저장소에 푸시하세요 (저장소가 없는 경우 백엔드용으로 새로운 저장소를 만드세요).
- Render.com 웹 사이트로 이동하여 Github 계정을 사용하여 등록하십시오 (선호됨) - 이 방법을 사용하면 옵션에서 모든 저장소가 표시되므로 배포하려는 저장소를 선택할 수 있습니다.
- 로그인 후 New 버튼을 클릭하고 Web Service를 선택하세요.
- 배포할 저장소 이름을 선택하고 연결을 클릭하세요.

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

![Step 1](/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_1.png)

![Step 2](/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_2.png)

6. 빌드 및 배포에는 시간이 걸릴 수 있습니다. 성공적으로 배포된 후 로그에 "Your service is live" 메시지가 표시됩니다. 오류가 발생하면 로그를 확인하고 문제를 해결하세요.

![Step 3](/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_3.png)

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

![이미지](/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_4.png)

## Vercel에 React 앱을 배포하는 단계:-

7. 위 링크를 복사하고 해당 URL을 "localhost:8000" 대신 프론트엔드 파일에 붙여넣고, 아래 이미지 형식으로 파일을 생성하고 파일을 import합니다. 이렇게하면 링크 localhost:8000을 수동으로 추가하지 않아도 됩니다.

![이미지](/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_5.png)

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

<img src="/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_6.png" />

8. 이제, Atlas로 이동하여 `Security` Network Access `Add IP Address` Allow access ` Confirm을 클릭하세요.

9. 프론트엔드에서 cmd를 엽니다.

<img src="/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_7.png" />

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

<img src="/assets/img/2024-08-04-StepsforDeployingReactappandNodejsServerinVercelAndRender_8.png" />

감사합니다,
마헤시쿠마르 카스트리.


React 앱과 Nodejs 서버를 Vercel에 배포하는 방법 정리


React Context API는 상태를 관리하고 구성 요소 트리를 통해 데이터를 전달하는 강력한 도구입니다. prop drilling 없이 컴포넌트 간에 값을 공유하는 방법을 제공합니다.

## Context API란?

Context API를 사용하면 컨텍스트를 생성하여 컴포넌트 트리에서 데이터를 제공하고 사용할 수 있습니다. 현재 사용자, 테마 또는 언어 설정과 같은 전역 데이터를 공유하는 데 유용합니다.

## 컨텍스트 생성하기

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

컨텍스트를 생성할 때 React.createContext 함수를 사용합니다. 이 함수는 Provider 및 Consumer 컴포넌트가 포함된 Context 객체를 반환합니다.

![React Context API Image](/assets/img/2024-08-04-ReactContextAPI_0.png)

## 데이터 제공하기

Provider 컴포넌트는 컨텍스트 데이터를 모든 자식 컴포넌트에서 사용할 수 있도록 만듭니다. Provider로 컴포넌트 트리를 감싸고 공유하려는 값을 전달합니다.

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

<img src="/assets/img/2024-08-04-ReactContextAPI_1.png" />

## 데이터 소비

컨텍스트 데이터를 소비하기 위해 함수 컴포넌트에서 Consumer 컴포넌트 또는 useContext 훅을 사용할 수 있습니다.

- Consumer 컴포넌트 사용:

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

<img src="/assets/img/2024-08-04-ReactContextAPI_2.png" />

2. Using the useContext Hook:

<img src="/assets/img/2024-08-04-ReactContextAPI_3.png" />

Using the useContext hook makes the code cleaner and easier to read.

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

## 컨텍스트 업데이트

컨텍스트 데이터를 업데이트해야 할 경우, 컨텍스트 값에 함수를 제공하고 컴포넌트에서 해당 함수를 호출할 수 있습니다.

![이미지 1](/assets/img/2024-08-04-ReactContextAPI_4.png)

![이미지 2](/assets/img/2024-08-04-ReactContextAPI_5.png)

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

이 예시에서 setUser은 컨텍스트에 의해 제공되는 함수로 사용자 데이터를 업데이트하는 데 사용됩니다.

## Best Practices

- 컨텍스트를 세분화 유지: 큰 컨텍스트를 만드는 것을 피하십시오. 대신 응용 프로그램의 다른 부분에 대해 여러 개의 작은 컨텍스트를 만드세요.
- 컨텍스트를 절약하게 사용: 글로벌로 액세스해야 하는 데이터에 대해서만 컨텍스트를 사용하세요. 로컬 상태의 경우에는 훅이나 클래스 상태와 함께 계속 상태 관리를 사용하세요.
- 컨텍스트 값 메모화: useMemo를 사용하여 컨텍스트 값 메모화하고 불필요한 다시 렌더링을 피하세요.

![React Context API](/assets/img/2024-08-04-ReactContextAPI_6.png)

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

## 결론

React Context API는 전역 상태를 관리하고 프롭 전달을 피하는 데 강력한 도구입니다. 컨텍스트를 만들고 제공하고 소비하는 방법을 이해하면 유지보수가 용이하고 확장 가능한 React 애플리케이션을 만들 수 있습니다. 프로젝트에 Context API를 통합하여 상태 관리 능력을 향상시켜보세요!


초보 개발자라면 반드시 알아야 할 React Context API 사용법


![이미지](/assets/img/2024-08-04-WhynottouseindexforReactKeysDoyoureallygetwhatshappeningunderthehood_0.png)

eslint이 왜 index를 키로 사용하는 것에 이렇게 고집을 부리는 걸까요❌? React에서 객체를 매핑할 때 왜 필요한 걸까요? 키 없이도 앱은 잘 작동하는데, 귀찮게 뭘 할까요?

아마도 당신이 요소를 삭제하거나 추가하는 일이 없는 정적 리스트를 가지고 있기 때문에 index를 키로 사용하는 문제에 직면하지 못했을 수도 있습니다. 실제로 다른 경우에는 React가 변경사항을 비교하고 렌더링하기 위해 키가 필요합니다.

책장에 진열된 장난감 목록이 있다고 상상해보세요. 장난감의 순서를 변경하거나 일부를 제거하려면, 어떤 장난감을 어떻게 움직여야 하는지 몰라도 혼란스러울 것입니다. 라벨(또는 키)은 선반 전체를 망치지 않고 정확히 어떤 장난감을 이동하거나 제거해야 하는지 쉽게 알 수 있게 해줍니다.

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

## 인덱스가 문제가 될 수 있는 이유❗

## 🔄항목 재정렬:

인덱스를 키로 사용하고 목록의 항목을 재정렬하는 경우, React가 어떤 항목이 변경되었는지 혼란스러워할 수 있습니다. 키는 순서에 기반하므로 재정렬 후에는 동일한 인덱스가 다른 항목을 가리킬 수 있습니다. 이는 잘못된 항목이 업데이트되거나 DOM에서 이동되는 등 예기치 않은 동작을 초래할 수 있습니다.

예를 들어, 좋아하는 색상 목록이 있다고 가정해 봅시다:

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

```js
const items = ["Apple", "Banana", "Cherry"];
```

초기 렌더링:

- Index 0 - “Apple” (key=0)
- Index 1 - “Banana” (key=1)
- Index 2 - “Cherry” (key=2)

만약 “Banana”와 “Cherry”를 교체하면:

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

- 인덱스 0 - ` "사과" (키=0)
- 인덱스 1 - ` "체리" (키=1)
- 인덱스 2 - ` "바나나" (키=2)

React는 "바나나"와 "체리"가 자리를 바꾼 것으로 인식하여 키가 동일한 상태에서 컴포넌트를 잘못 재사용할 수 있습니다.

## ➕ 추가 또는 제거 ➖

리스트에 항목을 추가하거나 제거할 때 인덱스를 키로 사용하면 React가 어떤 항목이 변경되었는지 잘못 해석할 수 있습니다. 목록에서 항목이 제거되면 그 이후의 모든 항목이 인덱스를 변경하므로 React는 제거된 항목 이후의 모든 항목이 변경되었다고 생각합니다.

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

```js
import React, { useState } from "react";

function TodoList() {
  const [tasks, setTasks] = useState(["장보기", "개 산책시키기", "책 읽기"]);

  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>{task}</li>
      ))}
    </ul>
  );
}

function addTask() {
  setTasks([
    "장보기",
    "개 산책시키기",
    "이메일 쓰기", // 새로운 작업을 중간에 삽입
    "책 읽기",
  ]);
}
```

Initial Render:

- "장보기" (키=0)
- "개 산책시키기" (키=1)
- "책 읽기" (키=2)

새로운 작업 추가 후:

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

- "식료품 사기" (key=0)
- "개 산책 시키기" (key=1)
- "이메일 쓰기" (key=2) - 새로운 아이템입니다.
- "책 읽기" (key=3)

키는 인덱스를 기반으로 하기 때문에 React는 키가 2인 아이템이 "책 읽기"에서 "이메일 쓰기"로 변경되었고, 키가 3인 아이템은 새로 추가되었다는 것을 알 수 있습니다. 이로 인해 React는 다음과 같은 작업을 수행합니다:

- 키가 2인 이전 아이템("책 읽기")을 제거합니다.
- 키가 2인 새로운 아이템("이메일 쓰기")을 삽입합니다.
- 키가 3인 새로운 아이템("책 읽기")을 추가합니다.

사실상, React는 "이메일 쓰기"를 삽입하는 것만이 실제 변경 사항이지만, 변경된 인덱스(2)부터 리스트 끝까지의 아이템을 제거하고 다시 삽입해야 합니다.

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

리액트는 삽입 지점 다음의 모든 항목을 다시 렌더링하며 새 항목뿐만 아니라 모두 렌더링합니다. 특히 각 항목이 복잡한 렌더링 로직이나 부작용을 가지고 있는 경우에는 비효율적일 수 있습니다.

## ♻️ 컴포넌트 상태와 라이프사이클:

리액트에서 컴포넌트는 상태를 가질 수 있으며, 해당 상태는 컴포넌트가 DOM에서 제거되지 않는 한 유지됩니다. 인덱스 기반 키를 사용하고 목록이 변경된 경우, 리액트는 이전 상태를 새 항목과 잘못 연결할 수 있습니다. 왜냐하면 리액트는 동일한 키(인덱스)를 갖는 항목이 전과 동일하다고 가정하기 때문입니다. 이는 특히 항목에 상호작용 요소가 있는 경우 예기치 않은 동작과 버그로 이어질 수 있습니다.

# 인덱스 사용이 적절할 때 ✅

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

일부 시나리오에서는 색인을 키로 사용하는 것이 수용될 수 있습니다. 특히 다음 경우에 해당됩니다:

- 항목 목록이 정적일 때: 목록의 길이나 순서가 변경되지 않는 경우입니다.
- 항목 자체가 정적일 때: 각 항목의 내용이 변경되지 않는 경우입니다.
- 고유 식별자가 없는 경우: 다른 고유 식별자를 키로 사용할 수 없는 경우입니다.

고유 식별자를 키로 사용하는 것은 React의 조정 알고리즘이 효율적으로 작동하고 의도한 변경 내용이 DOM에 정확하게 반영되도록 보장합니다.


React에서 인덱스를 Key로 사용하면 안되는 이유


<img src="/assets/img/2024-08-04-MasteringReactInterviewsBeyondJustMakingItWork_0.png" />

소프트웨어 개발의 세계에서 특히 시니어 역할을 지향할 때 인터뷰는 기능적 코드 작성 이상의 도전을 제시할 수 있습니다. 최근에 내 친구 중 한 명이 시니어 리엑트 개발자 역할에 대한 면접 중 이러한 경험을 겪었습니다. 이 경험은 주어진 작업을 완료하는 것뿐만 아니라 확장성, 최적화 및 적절한 상태 관리와 같은 측면을 고려하는 중요성을 강조했습니다.

## 과제

면접 중 나의 친구는 React를 사용하여 시간 제한이 있는 작업을 수행해야 했습니다. 바 차트를 만들고 오름차순, 내림차순 및 기본(원래) 순서를 선택할 수 있는 드롭다운을 추가해야 했습니다. 바 차트의 데이터는 API에서 가져와야 했습니다. 초기 구현은 예상대로 작동했지만, 최종적으로 시니어 수준의 기대에 미치지 못해 거부당했습니다.

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

## 초기 구현

면접 중에 제출된 코드가 여기 있어요:

```js
import React, { useState, useEffect } from "react";

// 데이터를 가져오는 모의 함수
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { name: "A", value: 30 },
        { name: "B", value: 80 },
        { name: "C", value: 45 },
        { name: "D", value: 60 },
      ]);
    }, 1000);
  });
};

const BarChart = () => {
  const [data, setData] = useState([]);
  const [sortOrder, setSortOrder] = useState("default");

  useEffect(() => {
    fetchData().then((data) => setData(data));
  }, []);

  // 데이터를 정렬하는 함수
  const sortData = (order) => {
    let sortedData;
    if (order === "default") {
      fetchData().then((data) => setData(data));
    } else {
      sortedData = [...data].sort((a, b) => {
        if (order === "asc") {
          return a.value - b.value;
        } else {
          return b.value - a.value;
        }
      });
      setData(sortedData);
    }
  };

  return (
    <div>
      <select
        onChange={(e) => {
          setSortOrder(e.target.value);
          sortData(e.target.value);
        }}
        value={sortOrder}
      >
        <option value="default">Default</option>
        <option value="asc">Ascending</option>
        <option value="desc">Descending</option>
      </select>
      <div>
        {data.map((item, index) => (
          <div key={index} style={{ marginBottom: "10px" }}>
            <div>{item.name}</div>
            <div
              style={{
                height: "20px",
                width: `${item.value}px`,
                backgroundColor: "blue",
              }}
            ></div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default BarChart;
```

코드는 올바르게 작동하지만, 신중한 고려 없이 확장성, 최적화, 그리고 적절한 상태 관리가 미흡합니다. 이 부분은 시니어 개발자 역할에 매우 중요합니다.

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

## 향상된 구현

여기에는 고급 기술을 적용한 코드의 개선 버전이 있습니다:

```js
import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";

// Mock function to fetch data
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { name: "A", value: 30 },
        { name: "B", value: 80 },
        { name: "C", value: 45 },
        { name: "D", value: 60 },
      ]);
    }, 1000);
  });
};

const BarChart = () => {
  const [data, setData] = useState([]);
  const originalData = useRef([]);
  const [loading, setLoading] = useState(false);
  const [sortOrder, setSortOrder] = useState("default");

  useEffect(() => {
    setLoading(true);
    fetchData().then((fetchedData) => {
      setData(fetchedData);
      originalData.current = fetchedData;
      setLoading(false);
    });
  }, []);

  // 데이터를 정렬하는 함수
  const sortData = useCallback(() => {
    let sortedData;
    if (sortOrder === "default") {
      sortedData = originalData.current;
    } else {
      sortedData = [...data].sort((a, b) => {
        if (sortOrder === "asc") {
          return a.value - b.value;
        } else {
          return b.value - a.value;
        }
      });
    }
    setData(sortedData);
  }, [data, sortOrder]);

  useEffect(() => {
    sortData();
  }, [sortOrder, sortData]);

  return (
    <div>
      <select onChange={(e) => setSortOrder(e.target.value)} value={sortOrder}>
        <option value="default">기본</option>
        <option value="asc">오름차순</option>
        <option value="desc">내림차순</option>
      </select>
      {loading ? (
        <p>로딩 중...</p>
      ) : (
        <div>
          {data.map((item, index) => (
            <div key={index} style={{ marginBottom: "10px" }}>
              <div>{item.name}</div>
              <div
                style={{
                  height: "20px",
                  width: `${item.value}px`,
                  backgroundColor: "blue",
                }}
              ></div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default BarChart;
```

## 향상 사항 설명

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

- 확장성:

- 정렬 기능: 정렬 로직은 useCallback 훅에 캡슐화되어 있어, 의존성이 변경될 때만 새로 생성되도록 보장합니다.
- 데이터 처리: 정렬 함수는 데이터의 복사본 ([...data])에서 작동하여 의도하지 않은 부작용을 방지합니다.

2. 최적화 기술:

- useCallback 훅: 이를 이용하여 sortData 함수가 메모이제이션되어 데이터나 sortOrder가 변경될 때에만 재생성됩니다. 이렇게 해서 불필요한 다시 렌더링과 계산을 방지합니다.
- useMemo 훅: 직접적으로 사용되지는 않지만, 값비싼 계산을 메모이제이션하는 데 유용할 수 있습니다.

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

3. 적절한 로딩 상태:

- 로딩 인디케이터: useState로 간단한 로딩 상태를 관리하고 데이터 가져오기 및 처리 중에 토글합니다. 이는 데이터 로딩 및 정렬 중에 피드백을 제공하여 사용자 경험을 향상시킵니다.

4. 고급 Hooks 활용:

- useCallback: sortData 함수가 매 렌더링마다 재생성되지 않도록 보장하여 대규모 데이터셋을 다룰 때 성능에 중요합니다.
- useRef: 원본 데이터를 저장하는 데 사용되며 초기 상태로 쉽게 재설정 할 수 있도록 하고 다시 렌더링을 유발하지 않습니다.
- useEffect: 컴포넌트가 마운트될 때 데이터 가져오기를 트리거하고 sortOrder가 변경될 때마다 정렬을 처리합니다.

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

## 주요 포인트

내 친구는 이러한 고급 기술에 대해 알고 있었지만, 시간 제약으로 인해 구현하지 못했습니다. 이 경험을 통해 중요한 교훈을 깨닫게 되었습니다: 더 나은 해결책을 알고 있지만 시간 제약으로 완전히 구현할 수 없는 경우, 이를 면접관에게 명확히 전달하는 것이 중요합니다. 더 많은 시간이 주어진다면 어떤 개선 사항을 적용할 것인지 설명하세요. 이는 당신의 지식과 이해를 나타내어 면접관의 평가에 긍정적인 영향을 줄 수 있습니다.

고급급 인터뷰에서 중요한 것은 코드를 작동시키는 것뿐만 아니라 효율적이고 확장 가능하며 사용자 친화적인 코드를 작성하는 것입니다. 메모이제이션, 적절한 상태 관리 및 성능 고려와 같은 기술을 통합함으로써 기대치를 충족하고 초과할 수 있습니다.

기억하세요, 인터뷰는 문제를 해결하는 것뿐만 아니라 가능한 최상의 방식으로 해결하는 것입니다. 이러한 통찰력을 기억하면 다음 고급 개발자 인터뷰에 더 잘 준비될 것입니다.


프론트엔드 기술 면접에서 반드시 알아야하는 React관련 질문


<img src="/assets/img/2024-08-04-UseVSCodeLikeaPro_0.png" />

VS Code은 강력하지만 적절한 조정으로 더욱 효과적으로 사용할 수 있어요. 코딩 역량을 높이기 위한 빠른 팁을 확인해보세요:

## 1. 파일 트리 가시성 향상

파일 트리를 더 명확하고 조직적으로 만들어보세요! 구성 파일에 다음 설정을 추가하세요:

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

- VS Code을 열어주세요.
- 명령 팔레트를 열어주세요:

  - Cmd + Shift + P를 눌러주세요.

3. "Preferences: Open Settings (JSON)"을 입력하고 선택해주세요:

- 명령 팔레트에 settings.json을 입력하고 Preferences: Open Settings (JSON)을 선택해주세요.

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

4. settings.json에 다음 라인을 추가하세요:

```js
{
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#05ef3c"
  }
}
```

## 2. 폰트 업그레이드: Fira Code

Fira Code로 변경하세요! 이 폰트는 프로그래밍 리거처들을 갖추고 있어 코드를 더 읽기 쉽고 미적으로 감각적으로 만들어줍니다. 설치하는 방법은 다음과 같습니다:

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

- Fira Code 다운로드:

- Fira Code GitHub 페이지로 이동하여 최신 릴리스를 다운로드하세요.

2. 폰트 설치:

- 맥에서: 다운로드한 .ttf 파일을 열고 "폰트 설치"를 클릭합니다.
- 윈도우에서: 다운로드한 .ttf 파일에 마우스 오른쪽 버튼을 클릭하고 "설치"를 선택합니다.

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

3. VS Code 설정하기:

- 위에서 설명한 대로 설정.json 파일을 열어주세요.
- 다음 라인을 추가하거나 업데이트해주세요:

```json
{
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true
}
```

<img src="/assets/img/2024-08-04-UseVSCodeLikeaPro_1.png" />

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

## 3. 새로운 테마 탐색하기

이 멋진 테마들로 VS Code를 개인화하세요. 확장 보기에서 이 테마들을 검색하기만 하면 됩니다 (Ctrl + Shift + X 또는 Cmd + Shift + X):

- One Dark Pro: 어두운 모드로 눈에 부담 없이 사용할 수 있어요.

![One Dark Pro](/assets/img/2024-08-04-UseVSCodeLikeaPro_2.png)

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

- 드라큘라 공식: 선명한 색상과 어두운 배경.

![](/assets/img/2024-08-04-UseVSCodeLikeaPro_3.png)

- GitHub 테마: GitHub 팬들을 위한 완벽한 테마.

![](/assets/img/2024-08-04-UseVSCodeLikeaPro_4.png)

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

## 4. 아이콘 강화: Material Icon Theme

마테리얼 아이콘 테마로 아이콘을 더욱 돋보이게 만들어보세요. 확장 보기에서 "Material Icon Theme"을 검색하여 설치하면 모든 파일 및 폴더에 대해 명확하고 인식하기 쉬운 아이콘을 사용할 수 있습니다.

이 팁들을 시도하고 VS Code를 프로 수준의 코딩 환경으로 변신해보세요. 생산성 향상이 조금의 설정만으로 가능합니다!

# 간단하게 설명하기 🚀

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

"In Plain English" 커뮤니티에 참여해 주셔서 감사합니다! 떠나시기 전에:

- 작가를 박수 치고 팔로우해주세요 👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠 확인하기


VS Code를 더 잘 사용하는 방법


## 원시 및 참조 유형 소개

![UnderstandingVariablesandTypesinJavaScript_0.png](/assets/img/2024-08-04-UnderstandingVariablesandTypesinJavaScript_0.png)

자바스크립트는 많은 프로그래밍 언어와 마찬가지로 변수를 기본적인 구성 요소로 사용합니다. 변수의 유형과 작동 방식을 이해하는 것은 자바스크립트를 숙달하는 데 매우 중요합니다. 이 글에서는 원시 유형과 참조 유형 사이의 차이를 살펴보고, 변수의 작동 방식을 탐구하며 이러한 개념을 설명하는 실제 예제를 제공할 것입니다.

## 변수란 무엇인가요?

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

변수는 모든 프로그래밍 언어의 기초입니다. 이들은 코드 전체에서 변경하고 재사용할 수 있는 값을 저장하는 데 사용됩니다. JavaScript에서 변수는 다양한 유형의 값들을 보유할 수 있으며, 주된 목적은 참조하고 조작할 수 있는 데이터를 저장하는 것입니다.

```js
let age = 30;

// 나중에 'age'의 값을 변경할 수 있습니다:
age = 31;
```

이 과정은 변수 재할당이라고 알려져 있습니다.

## 기본 유형

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

JavaScript에서는 여섯 가지 기본 데이터 유형이 있습니다:

- String: 텍스트에 사용됩니다.
- Number: 숫자에 사용됩니다(정수 및 부동 소수점 숫자 모두).
- Boolean: 참 또는 거짓을 나타냅니다.
- Null: 어떤 값이도 존재하지 않음을 의도적으로 나타냅니다.
- Undefined: 선언되었지만 아직 값이 할당되지 않은 변수를 나타냅니다.
- Symbol: ECMAScript 2015에 소개된 고유하고 변경할 수 없는 값입니다.

각 기본 유형의 예시는 다음과 같습니다:

```js
let name = "Hello world!"; // String
let isStudent = true; // Boolean
let score = 95; // Number
let data = null; // Null
let unassigned; // Undefined
let id = Symbol("id"); // Symbol
```

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

## 참조 유형

자바스크립트에는 오직 하나의 참조 유형, 즉 객체가 있습니다. 이는 배열과 함수를 포함하며, 두 경우 모두 객체의 유형에 속합니다. 객체는 데이터의 집합 및 더 복잡한 엔티티를 저장하는 데 사용됩니다.

## 객체의 예시:

```js
let person = {
  name: "John",
  age: 30,
};
```

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

## 배열의 예시:

```js
let numbers = [1, 2, 3, 4, 5];
```

## 원시 타입이 어떻게 저장되는지

원시 값은 변수가 접근하는 위치에 직접 저장됩니다. 이는 원시 값을 변수에 할당할 때, 실제 값이 해당 변수와 관련된 메모리 공간에 저장된다는 의미입니다.

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

예를 들어:

```js
let greeting = "Hello world!";
let count = 42;
let isActive = false;
```

이러한 각 값은 메모리의 고유한 위치에 저장됩니다.

## 참조 유형이 어떻게 저장되는지

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

참조 유형은 다르게 저장됩니다. 객체를 변수에 할당할 때, 변수는 객체 자체가 아닌 객체가 저장된 메모리 위치를 가리키는 참조(또는 포인터)를 저장합니다.

## 예시:

```js
let car = {
  make: "Toyota",
  model: "Corolla",
};
```

여기서 car은 'make: "Toyota", model: "Corolla"' 객체를 직접 보관하지 않습니다. 대신, 이 객체가 저장된 메모리 위치를 가리키는 참조를 보관합니다.

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

## 실제 예시: 변수 복사

참조 타입이 어떻게 작동하는지 설명하기 위해 객체를 복사하는 예시를 살펴보겠습니다:

```js
let original = {
  a: 10,
  b: 25,
  c: 40,
};

let copy = original;
copy.a = 20;

console.log(original.a); // 출력: 20
```

이 예시에서 original과 copy 둘 다 메모리 내에서 동일한 객체를 가리킵니다. copy를 통해 값이 변경되면 original에도 영향을 미칩니다.

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

## 결론

자바스크립트에서 기본(primitive) 타입과 참조(reference) 타입의 차이를 이해하는 것이 매우 중요합니다. 기본 타입은 변수의 메모리 위치에 직접 저장되는 반면 참조 타입은 메모리에 있는 객체의 참조를 저장합니다. 이 차이는 변수의 할당 및 조작 방식에 중요한 영향을 미칩니다.

요약하면:

- 기본 타입: 메모리에 직접 저장됨 (문자열, 숫자, 부울, null, undefined, 심볼).
- 참조 타입: 메모리 위치에 대한 참조로 저장됨 (객체, 배열, 함수).

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

지금까지 자바스크립트 코드를 탐구하고 작성하는 과정에서 중요한 점을 기억해주세요. 이러한 개념을 숙달하면 응용프로그램에서 데이터를 효과적으로 관리할 수 있는 능력이 향상될 것입니다.

다음 글 "자바스크립트에서의 기본 값 유형 조사"에서는 자바스크립트의 각 기본 값 유형에 대해 더 깊이 파고들어 자세한 예제를 제공하고 특징을 탐구할 것입니다. 기대해주세요!


JavaScript에서 변수와 타입 제대로 이해하기


요즘 벡터 검색을 시도해보고 싶은데 OpenAI나 Huggingface를 사용하기 싫고, 벡터 데이터베이스 회사에 돈을 지불하고 싶지 않다니까! 그럼 내가 돕겠어. 무료로 여러분의 기계에서 벡터 검색을 시작해볼까요?

![이미지](/assets/img/2024-08-04-100FreeVectorSearchwithOpenLlamaPostgresNodejsandNextjs_0.png)

# 우리가 하는 일은 뭔가요?

간단하게 다시 한 번 돌아가서 우리가 무엇을 하고, 그것을 왜 하는지 이야기해봅시다. AI 임베딩을 사용한 벡터 검색은 개념을 기반으로 검색을 만드는 방법이에요. 예를 들어 '애완동물'을 검색하면 개와 고양이의 결과가 나올 수 있어요. 이는 상품을 검색할 때 고객이 더 나은 결과를 얻을 수 있다는 점에서 매우 가치 있어요.

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

이를 달성하기 위해서는 먼저 찾고 싶은 텍스트를 가져와서 AI에게 보내 Embedding을 생성하도록 합니다. Embedding은 일반적으로 ~300부터 ~1500개의 부동 소수점 값으로 이루어진 긴 배열입니다.

고양이, 개 및 애완동물의 Embedding 값은 유사할 것입니다. 따라서 고양이와 개를 비교하면 가깝게 나타날 것이며, 개와 피자를 비교하면 가깝지 않을 것입니다.

벡터 데이터베이스를 사용하면 이러한 벡터를 저장할 수 있으며, 연결된 데이터(아마 원래 데이터의 텍스트)와 함께 저장할 수 있습니다. 데이터가 저장되면 새로운 벡터로 데이터베이스를 쿼리하여 가까운 결과를 얻을 수 있습니다. 예를 들어, 우리가 고양이와 개를 Embedding과 함께 데이터베이스에 저장하면 "애완동물"이라는 입력 텍스트를 취해 해당 Embedding을 생성한 다음 데이터베이스를 쿼리하여 고양이와 개를 반환할 가능성이 있습니다.

# 왜 Postgres와 OpenLlama를 선택해야 하는가?

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

포스트그레SQL(Postgres)은 로컬에 쉽게 설치하고 실행할 수 있는 환상적인 데이터베이스입니다. 포스트그레SQL의 pgvector 확장 기능을 통해 벡터 필드를 만들어 SQL 쿼리에서 사용할 수도 있습니다.

맥(Mac)에서 포스트그레스(Postgres)를 설치하는 여러 가지 방법이 있습니다. 제가 사용한 방법은 Postgres.app을 사용하여 포스트그레스를 설치한 것입니다.

OpenLlama은 AI 모델을 로컬에서 쉽게 설치하고 실행할 수 있는 방법입니다. Homebrew를 사용하여 OpenLlama를 설치하는 brew install ollama 명령어를 사용했습니다.

간단한 테스트 애플리케이션에는 1986년 공포 영화 Alien의 모든 대사를 불러올 것입니다.

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

# 준비 과정

OpenLlama에는 선택할 수 있는 다양한 모델이 있습니다. 이 애플리케이션에서는 빠른 임베딩 생성을 위해 snowflake-arctic-embed를 선택했습니다. 이를 설치하기 위해 ollama pull snowflake-arctic-embed 명령을 사용했습니다.

설정의 마지막 단계는 로컬 포스트그레스 데이터베이스를 생성하는 것입니다. 원하는 대로 이름을 지정할 수 있지만, 저는 영화 대사에서 라인을 검색하기 때문에 lines라고 이름을 지었습니다.

데이터베이스를 생성한 후에는 몇 가지 명령을 실행하기 위해 psql 명령을 사용할 수 있습니다. 첫 번째로 데이터베이스에 벡터 확장 기능을 추가하는 것입니다. 이를 통해 vector 필드 유형이 활성화됩니다. 이를 수행하기 위해 create extension 명령을 사용합니다.

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

```js
CREATE EXTENSION vector;
```

이제는 라인 텍스트와 벡터를 보관할 테이블을 생성해야 합니다. 다음은 스크립트 내 라인의 위치인 position 값을 기반으로한 테이블과 인덱스를 생성하는 명령어입니다.

```js
CREATE TABLE lines (
  id bigserial PRIMARY KEY,
  position INT,
  text TEXT,
  embedding VECTOR(1024)
);
CREATE UNIQUE INDEX position_idx ON lines (position);
```

여기서 주목해야 할 점은 벡터의 크기입니다. 서로 다른 모델은 다양한 크기의 벡터를 생성합니다. 우리가 사용하는 snowflake 모델의 임베딩 크기는 1,024 숫자이므로 벡터 크기를 1,024로 설정했습니다.

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

동일한 AI를 저장 및 쿼리에 모두 사용하는 것이 좋습니다. 다른 모델을 사용하면 숫자가 정렬되지 않을 수 있습니다.

# 벡터 인덱스 생성

상상해보면, 두 개의 1,024 값이 포함된 부동 소수점 배열을 비교하는 것은 비용이 많이 들 수 있습니다. 그리고 그것들을 많이 비교하는 것은 매우 비용이 많이 들 수 있습니다. 그래서 이러한 새로운 벡터 데이터베이스는 그것을 더 효율적으로 만들기 위해 다른 인덱싱 모델을 개발했습니다. Postgres 벡터 지원은 다양한 종류의 인덱스를 갖고 있습니다. 우리는 세 가지 다른 인덱스를 만들기 위해 Hierarchical Navigable Small Worlds (HNSW) 유형을 사용할 것입니다:

```js
CREATE INDEX ON lines USING hnsw (embedding vector_ip_ops);
CREATE INDEX ON lines USING hnsw (embedding vector_cosine_ops);
CREATE INDEX ON lines USING hnsw (embedding vector_l1_ops);
```

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

왜 세 개일까요? 두 개의 벡터를 비교하는 여러 방법이 있기 때문이죠. 코사인이 있고, 일반적으로 기본값으로 설정되어 있으며 개념 비교에 좋습니다. 또한 유클리드 및 내적 비교도 있습니다. Postgres는 이러한 방법들(그리고 더 많은 방법들)을 모두 지원합니다.

사용하는 방법에 관계없이 해당 인덱스가 활성화되어 있는지 확인하여 빠른 쿼리를 얻을 수 있도록 하세요.

# 데이터베이스 로드

모델을 다운로드하고 Postgres를 설정한 후, 이제 영화 대사와 그들의 임베딩으로 데이터베이스를 로드할 수 있습니다. 저는 각각의 프로젝트를 github에 게시했습니다. 이 프로젝트에는 NextJS 앱 라우터 UI도 포함되어 있습니다. 스크립트는 load-embeddings 디렉토리에 있습니다. 원본 데이터는 이 스크립트 페이지에서 가져왔습니다.

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

데이터를로드하기 전에 .env.example 파일을 .env로 복사 한 다음 Postgres 연결 세부 정보와 일치하도록 값 변경해야합니다.

Postgres로 임베딩을로드하려면 Node 20 이상에서 node loader.mjs를 실행하십시오.

스크립트의 주요 부분은 임베딩 생성입니다:

```js
import ollama from "ollama";
...
  const response = await ollama.embeddings({
    model: "snowflake-arctic-embed",
    prompt: text,
  });
```

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

"ollama" 라이브러리를 사용하여 텍스트 한 줄씩 가져와 눈송이 임베딩 모델을 호출합니다.

그런 다음 다음과 같이 INSERT 문을 사용하여 데이터베이스에 행을 삽입합니다:

```js
await sql`INSERT INTO lines
    (position, text, embedding)
  VALUES
    (${position}, ${text}, ${`[${response.embedding.join(",")}]`})
  `;
```

여기서 유일하게 주의해야 할 점은 숫자를 문자열로 모두 결합하고 괄호로 묶어 중첩하는 방식으로 임베딩 값을 포맷하는 것입니다."

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

데이터를 모두 데이터베이스에 로드했으니 이제 쿼리를 만드는 시간입니다.

# 첫 번째 쿼리 만들기

작동하는지 확인하기 위해 load-embeddings 디렉토리에 test-query.mjs 파일이 있습니다. 벡터 쿼리를 만들려면 먼저 모델을 실행하여 쿼리를 벡터로 변환해야 합니다. 다음과 같이 실행하세요:

```js
const response = await ollama.embeddings({
  model: "snowflake-arctic-embed",
  prompt: "food",
});
```

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

이 경우에는 프롬프트가 음식이고, 우리는 이를 임베딩으로 변환하는 loader 스크립트와 똑같은 프로세스를 사용합니다.

그런 다음 해당 벡터로 데이터베이스를 쿼리하기 위해 SQL SELECT 문을 사용합니다:

```js
const query = await sql`SELECT
  position, text
FROM
  lines
ORDER BY
  embedding <#> ${`[${response.embedding.join(",")}]`} 
LIMIT 10`;
```

우리는 데이터베이스의 레코드를 주어진 임베딩에 대한 유사성에 따라 정렬하기 위해 ORDER BY를 사용하고 LIMIT을 사용하여 가장 유사한 상위 10개만 반환합니다.

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

`ORDER BY`에서 `#` 구문은 어떤 비교 알고리즘을 사용할지 정의하는 데 중요합니다. 문서를 통해 사용할 수 있는 옵션은 다음과 같습니다:

```js
<-> - L2 거리
<#> - (부정적) 내적
<=> - 코사인 거리
<+> - L1 거리 (0.7.0에서 추가됨)
```

어떤 비교가 애플리케이션에 가장 적합한 결과를 제공하는지 스스로 결정할 수 있지만, 그 비교 방법에 기반하여 테이블을 적절하게 색인화해야 합니다.

내 머신에서 이 테스트 쿼리를 수행하면 다음과 같은 결과가 나왔습니다:

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

```js
317 제이크는 옥수수 빵도 좋아 안 하는 것 같네.
```

해당 대화는 실제로 음식인 옥수수 빵을 언급하는 영화 속의 클래식한 대사입니다.

# 사용자 인터페이스 구현

조금 더 노력하여 이를 위해 NextJS 앱 라우터 인터페이스를 구현했습니다. 프로젝트의 루트 디렉터리에서 pnpm dev를 실행하고 데이터베이스가로드되고 .env 파일이 올바르게 설정된 후에 사용해볼 수 있습니다.

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

이 NextJS 앱은 데이터베이스에서 라인을 쿼리하는 데 정확히 같은 SELECT 작업을 사용합니다.

# 결론

명백히 외계인 대사를 검색하는 애플리케이션을 제작할 생각은 없을 것입니다. 그러나 여기에서 보여드린 내용을 통해 텍스트 내용, 제품 설명, 댓글 등 거의 모든 종류의 텍스트를 검색할 수 있습니다.

즐기세요!

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

# 평문으로 🚀

In Plain English 커뮤니티에 참여해 주셔서 감사합니다! 떠나시기 전에:

- 작가를 클랩하고 팔로우해 주세요 👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | Newsletter
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠 확인하기


OpenLlama, Postgres, Nodejs 및 Nextjs로 100 무료 벡터 검색 방법


두 개의 정수 배열인 target과 arr가 주어졌습니다. 두 배열의 길이는 같습니다. 한 번에 arr의 비어있지 않은 하위 배열을 선택하여 뒤집을 수 있습니다. 원하는 만큼 많은 단계를 수행할 수 있습니다.

arr을 target으로 변환할 수 있다면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

예시 1:

```js
Input: target = [1,2,3,4], arr = [2,4,1,3]
Output: true
Explanation: arr을 target으로 변환하기 위해 다음 단계를 수행할 수 있습니다:
1- 하위 배열 [2,4,1]을 뒤집어, arr은 [1,4,2,3]이 됩니다.
2- 하위 배열 [4,2]을 뒤집어, arr은 [1,2,4,3]이 됩니다.
3- 하위 배열 [4,3]을 뒤집어, arr은 [1,2,3,4]가 됩니다.
arr을 target으로 변환할 수 있는 여러 방법이 있습니다. 이것이 유일한 방법은 아닙니다.
```

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

예시 2:

```js
입력: target = [7], arr = [7]
출력: true
설명: arr을 뒤집지 않고 target과 동일하다.
```

예시 3:

```js
입력: target = [3,7,9], arr = [3,7,11]
출력: false
설명: arr에는 값 9가 없고, target으로 변환할 수 없다.
```

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

제약 조건:

- target.length == arr.length
- 1 ≤ target.length ≤ 1000
- 1 ≤ target[i] ≤ 1000
- 1 ≤ arr[i] ≤ 1000

이 문제는 arr과 target이 동일한 요소를 포함하고 있는지에 따라 결정됩니다. 이를 판단하기 위해 두 배열을 정렬할 수 있습니다. 배열이 동일한 요소를 포함하면 정렬된 버전도 동일해야 합니다. 그렇지 않으면 정렬된 버전에서 적어도 하나의 값이 일부 색인 i에서 다르게 나타날 것입니다.

```js
class Solution {
    public boolean canBeEqual(int[] target, int[] arr) {
        Arrays.sort(target);
        Arrays.sort(arr);
        for(int i=0; i < target.length; i++){
            if(arr[i] != target[i]) return false;
        }
        return true;
    }
}
```

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

```js
function canBeEqual(target: number[], arr: number[]): boolean {
  target.sort((a, b) => a - b);
  arr.sort((a, b) => a - b);
  for (let i = 0; i < target.length; i++) {
    if (target[i] != arr[i]) return false;
  }
  return true;
}
```

배열 target 및 arr의 크기를 N이라고 합시다.

시간 복잡도: O(N⋅logN)

공간 복잡도: O(logN)

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

![Image](/assets/img/2024-08-04-LeetCode1460MakeTwoArraysEqualbyReversingSubarraysEasyMetaInterviewQuestion_0.png)


LeetCode 1460 서브배열을 뒤집어 두 배열을 동일하게 만들기 쉬움 - Meta 인터뷰 질문

AWS Lambda, SQS, Nodejs, MongoDB로 자동화 워크플로우 만들기


2021년 6월 알고리즘 업데이트를 앞두고 구글은 검색 순위 결정에 전반적인 페이지 경험을 강조하기 위해 올리는 앰프(AMP)를 선호하지 않겠다는 중요한 발표를 했습니다.

AMP는 모바일 기기에서 성능을 높이기 위해 최적화된 가벼운 페이지를 제공하는 구글이 만든 오픈 소스 HTML 프레임워크입니다. 이는 효율적인 행동을 장려하면서 디자인을 제한하고 콘텐츠 수준의 페이지 경험을 통일시키는 특징을 가지고 있습니다. 2016년 최초로 등장한 AMP 페이지는 빠른 로딩 시간 뿐만 아니라 구글이 "상위 이야기" 캐러셀과 같은 주요 모바일 검색 위치에서 비-AMP 페이지를 차단함으로써 미국 대부분의 뉴스 발행인에 의해 빠르게 도입되었습니다.

2017년 트위터도 iOS 및 Android 앱에서 AMP 페이지로 연결했습니다. AMP는 페이스북 인스턴트 아티클과 마찬가지로 어디에나 있었으며, 이로 인해 많은 발행사들이 거절할 수 없는 제안이 되었죠.

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

그러나 2021년 5월 말에는 사용자 경험 제어를 잃었다는 계속된 불만과 구독 통합 악몽으로 구글은 2021년 6월 본격적인 알고리즘 업데이트에서 AMP 의무 사항을 종료할 것이라고 밝혔습니다.

대신, 구글은 이제 널리 사용되는 Core Web Vitals 지표와 관련 신호에만 의존할 것입니다. 그 다섯 달 후, 트위터는 AMP 지원을 축소했습니다. 이때 우리 Tribune Publishing에서는 2022년 봄에 콘텐츠 레벨 페이지를 재설계하면서 AMP를 철회하기로 결정했습니다.

시카고 트리뷴, 볼티모어 선, 뉴욕 데일리 뉴스를 포함한 모든 사이트로의 큰 소개 소스는 검색이었기 때문에, 이동은 신규 구독의 확실한 원천이었던 소개 소스와 별개로 진행되었습니다. 또한, 이를 재설계 및 코드베이스 변경과 조화롭게 진행함으로써 — 검색에 부정적 영향을 미칠 수 있는 상황에서 나쁜 검색 상태를 훨씬 나빠지게 만들 수 있습니다. 또한, 기록적인 코로나 바이러스 고점에서 검색 트래픽이 상당히 감소하는 상황이 배경에 있어 우리의 두려움을 가중시켰습니다. 이미 하락세를 보이고 있었던 것이었습니다.

그러나 성공한 경우에는 온페이지 경험을 완전히 제어할 수 있을 뿐만 아니라 AMP를 유지하고 업데이트하는 기술 부채에 시달리지 않아도 될 것입니다. 이는 Barry Schwartz가 Search Engine Land에서 언급한 바와 같이 매력적인 제안이었습니다. 그리고 가장 중요한 것은, 우리의 모바일 웹 페이지가 방문자를 구독자로 전환하는 데 AMP보다 더 우수하다는 사실입니다.

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

## 커트오버

첫 번째로 도약한 사이트는 Baltimore Sun이었습니다. 우리는 3월 초부터 4주 동안 각 섹션별로 AMP를 중지하고 페이지를 리디자인으로 전환했습니다. 커트오버 이전에는 Sun에 매일 접속하는 모바일 검색 사용자 중 약 68%가 AMP를 사용했습니다. 상당한 비율이었습니다.

우리의 데이터는 필요에 따라 장치별로 필터링된 Google Analytics 참조 출처 및 페이지 유형 보고서를 사용할 것입니다. Damon Kiesow가 게시 후 바로 제기한 질문을 명확히 하기 위해 각 줄은 포괄적입니다. 빨간색은 총 Google 검색 사용자이며, 모바일 검색 사용자(노란색)는 이에 속하는 하위 집합이며, 그 중 AMP 사용자(파란색)는 더 작은 하위 집합입니다.

![그림](/assets/img/2024-08-03-WhathappenedwhenwedisabledGoogleAMPatTribunePublishingShockinglylittleSoyoushouldtryittoo_1.png)

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

위의 차트에 나와 있듯이, 일반적인 검색에서 약간의 전체 손실이 있었지만, AMP를 이용한 사용자들은 미끄러짐 없이 모바일 웹 검색 페이지로 이동했습니다. 전체적으로 1월 1일부터 7월 31일까지 중간 일일 검색 사용자는 AMP 이후에만 12.41% 감소했으며, 이 손실의 대부분은 1월의 연간 최고치에 기인합니다.

우리는 사우스 플로리다 선 센티넬에서 4월 11일에 AMP를 비활성화하고 리디자인에 전환했습니다. 볼티모어와 달리, 여기서 AMP를 비활성화하고 향후 사이트에 적용하는 것은 하루의 일이었습니다. 사우스 플로리다는 모바일 검색 사용자 중 39.8%만이 이 프레임워크를 이용했기 때문에 AMP에 덜 의존했습니다.

![이미지](/assets/img/2024-08-03-WhathappenedwhenwedisabledGoogleAMPatTribunePublishingShockinglylittleSoyoushouldtryittoo_2.png)

볼티모어와 비슷하게, AMP가 중지되면 모바일 웹 검색이 그 부족을 메꾸었습니다. AMP 이후 중간 일일 모바일 검색 사용자는 16.23% 감소했는데, 전체적으로 지속적인 변동이 있었습니다.

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

4월 15일, 시카고 트리뷴에서 AMP가 비활성화되었습니다. 트리뷴은 AMP 사용률이 가장 낮았으며, 이동 키워드 검색 사용자 중 37.5%만이 AMP 페이지를 이용했습니다. 그러나 전체 검색 리퍼럴의 수준은 가장 높았습니다.

시카고는 또한 전반적인 검색 리퍼럴 수준이 가장 높았기 때문에 일반적인 검색 감소 때문에 AMP 이후 중앙 일일 이동 키워드 검색 사용자가 18.15% 감소했습니다.

마지막으로 4월 22일, 뉴욕 데일리 뉴스에서 AMP를 비활성화했습니다. 이는 위험부담이 가장 큰 제안이었으며, 이동 키워드 검색 사용자 중 73.4%가 AMP 페이지를 이용했습니다. 데일리 뉴스의 전체 검색 트래픽 중 모바일 사용량이 데스크탑 사용량보다 높습니다.

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

아래는 Markdown 형식으로 변경한 내용입니다.

![이미지](/assets/img/2024-08-03-WhathappenedwhenwedisabledGoogleAMPatTribunePublishingShockinglylittleSoyoushouldtryittoo_4.png)

트렌드를 살펴보면 모바일 검색 사용자와 AMP 사용자가 얼마나 일치하는지 볼 수 있습니다. 데일리 뉴스는 AMP를 해제하면서 모바일 검색 사용자 수가 중앙값으로 26.94% 감소했습니다. 또한, 발표 지표의 대부분 변화가 연간 초반에 집중되었으며, 3월부터 7월까지 거의 수평하게 유지됨을 볼 수 있습니다.

## 결과

모든 요소를 고려할 때 깔끔한 검색 영향 분석을 수행하는 것은 불가능합니다. AMP를 폐지하는 동안 리디자인과 코드베이스 변경도 이뤄졌습니다. 우리는 장기간의 유기적 검색 하락 경향에서 벗어나고 있습니다. 뉴스 센트릭 사이트에서의 뉴스 피로가 얼마나 큰 영향을 미쳤을까요? 그리고 대부분 안정적이었지만, 일부 사이트에서는 2022년에 매월 게시되는 기사 수가 AMP 이후 줄어든 요인이 전반적인 검색 이전을 의미 있게 영향을 줄 수 있을 것입니다.

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

![Image](/assets/img/2024-08-03-WhathappenedwhenwedisabledGoogleAMPatTribunePublishingShockinglylittleSoyoushouldtryittoo_5.png)

모든 이러한 차이점에도 불구하고, 트리뷴 퍼블리싱은 일반적으로 AMP 후 모바일 검색 추천의 감소를 매우 잘 관리했습니다. 검색이 감소한 정도는 일반적으로 표준 리디자인의 수용 가능한 단기 범위 내에 있었으며, 대체로 일년 동안의 감소는 주로 더 넓은 검색 트렌드에 부합했습니다.

비AMP 페이지의 높은 페이지 RPM 및 구독자 전환율을 고려하면, AMP의 사용을 중단하는 것은 프로그래매틱 및 소비자 수익 간에 쉬운 승리로 보입니다. 그리고 가장 중요한 것은 사용자 경험에 대한 완전한 통제력을 되찾는 것입니다. 아마도 그게 가장 큰 장점일 것입니다.


Posts