# github repository에 remote origin 연결하는 방법



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

로컬 저장소에서 github remote origin repository에 연결하는 명령어

```bash
git remote add origin {레포지토리주소}
```

현재 로컬 저장소에 연결된 remote 저장소 정보 확인 하는 명령어

```bash
git remote -v
```

git remote add origin 명령어를 통해 로컬 저장소를 원격 저장소에 연결하는 방법에 대해 알아봅니다

github repository에 remote origin 연결하는 방법

# Netlify에 Nextjs 프로젝트 배포하는 두 가지 방법 (.next , out)

Nextjs 프로젝트는 두가지 형식의 사이트로 사용되는데요.
첫번째는 `.next` 디렉토리의 일반적인 Nextjs 프로젝트
두번째는 `out` 디렉토리로 생성되는 정적 HTML 웹사이트입니다.

**이 포스팅에서는 각 방식에 따라 Netlify build configuration 설정 방법과 에러 해결 방법에 대해서 정리합니다.**

## 1. 정적 웹 사이트 (out) 경로 배포

Netlify를 통해서 Nextjs를 배포할 때는 위 두가지 중 어떤 것으로 배포하냐에 따라 빌드 설정이 달라지게 됩니다.
빌드 설정을 잘못하게 되면 아래와 같은 에러가 발생합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-1.png)

```bash
12:48:25 PM:   Error message
12:48:25 PM:   Error: Detected that "next export" was run, but site is incorrectly publishing the ".next" directory.
12:48:25 PM:   The publish directory should be set to "out", and you should set the environment variable NETLIFY_NEXT_PLUGIN_SKIP to "true".
```

위 에러는 `next export` 명령어를 통해 static 웹사이트를 만들었는데 netlify의 publish directory가 `.next` 로 되어있어서 발생한 오류인데요.

publish directory를 정적 웹사이트가 있는 `out`으로 수정해주고 `NETLIFY_NEXT_PLUGIN_SKIP` 를 true로 바꾸어주어야합니다.

정적웹사이트를 배포하는 과정에서는 Netlify에서 Nextjs 플러그인을 빌드할 필요가 없기 때문에 skip에 true를 넣어주는 것이죠.[참고](https://docs.netlify.com/integrations/frameworks/#next-js)

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-2.png)

netlify의 환경변수에서 `NETLIFY_NEXT_PLUGIN_SKIP`를 살펴보면 아래와 같이 설명되어있습니다. **이 값을 true로 변경하면 next.js 런타임을 사용하지 않는 것이고 next export를 이용해서 static html를 생성한다고 나와있습니다.**

NETLIFY_NEXT_PLUGIN_SKIP: when set to true for a Next.js site, the build doesn’t use the Next.js Runtime. Use this variable with projects that generate static HTML using next export.

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-3.png)

### Netlify 환경변수 추가방법



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-4.png)

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-7.png)

위와 같이 환경변수를 추가해줍니다. **소문자 true로 작성해야합니다**

### publish directory 변경

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-6.png)

위와 같이 publish directory를 `out`으로 변경해줍니다.

### build 명령어 수정

static HTML 사이트를 배포할 것이기 때문에 저장소 build 명령어를 아래와 같이 수정해야합니다.

```json
"build": "next build && next export",
```

### git push

위와 같이 설정을 다 마쳤다면 git push 를 통해 원격 저장소에 푸시해줍니다.

![](/assets/img/2022-11-28-Netlify에-Nextjs-프로젝트-out-디렉토리로-배포하는-방법-8.png)

이제 정상적으로 published된 것을 확인하실 수 있습니다.

위와 같이 진행했는데도 계속 실패가 발생한다면 환경변수 설정을 파일 기반 설정으로 변경해보시기 바랍니다.

## 2. .next 경로 배포

`.next` 경로는 out에서 추가했던 환경변수를 제거하고 빌드 명령어도 `next build`로 수정한 후에 원격 저장소에 푸시하면 정상적으로 배포되는 것을 확인하실 수 있습니다.

Detected that next export was run, but site is incorrectly publishing the next directory 에러 해결 방법

Netlify에 Nextjs 프로젝트 배포하는 두 가지 방법

# Netlify에 github 저장소 연결하는 방법

이전에는 Netlify에 static HTML 웹사이트 파일을 업로드해서 호스팅하는 방법에 대해서 알아보았었는데요.

오늘은 github 저장소와 연결하여 **원격 저장소에 push하면 자동으로 빌드가 되어 배포되는 방법을 알아보겠습니다.**

## Github 저장소 연결



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

![](/assets/img/2022-11-28-Netlify에-github-저장소-연결하는-방법1.png)

build & deploy 메뉴에 들어가서 link repository 버튼을 클릭해줍니다.

![](/assets/img/2022-11-28-Netlify에-github-저장소-연결하는-방법2.png)

Github을 선택해줍니다.

![](/assets/img/2022-11-28-Netlify에-github-저장소-연결하는-방법3.png)

권한 승인을 해줍니다.

![](/assets/img/2022-11-28-Netlify에-github-저장소-연결하는-방법4.png)

원하는 저장소를 선택해줍니다.

![](/assets/img/2022-11-28-Netlify에-github-저장소-연결하는-방법5.png)

배포할 브랜치와 베이스 디렉토리 **publish directory 등 배포에 필요한 설정을 할 수 있습니다.**

Nextjs 저장소의 경우 .next와 out 두 개의 배포 방법이 있기 때문에 이 내용은 아래 포스팅에서 확인하실 수 있습니다.

이렇게 Github 저장소에 있는 프로젝트를 Netlify에 연결하여 push하는 것만으로도 자동으로 호스팅이 되도록 작업했습니다.

Netlify외에도 다양한 호스팅 서비스들이 많기 때문에 각자 상황에 맞는 것을 사용하시면 좋을 것 같습니다.

Netlify에 github 저장소를 연결하여 푸시만 하면 배포되는 방법을 알아봅니다

Netlify에 github 레포지토리 연결하는 방법

# 웹사이트 구글 검색 되게 하는 방법

아무리 사이트를 잘 만들어두어도 아무도 들어오지 않는다면 소용이 없겠죠?
잘 만든 사이트를 **구글 검색에 노출이 되어 아래와 같이 유입을 만들 수 있는 방법을 정리했습니다.**

![](/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-2.png)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## Search Console

구글 검색 결과에 노출이 되려면 [서치콘솔(Search Condsole)](https://search.google.com/search-console/about)에 사이트를 등록해야하는데요.

![](/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-1.jpg)

사이트에 방문해서 시작하기 버튼을 눌러줍니다.

<img src="/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-3.png" width="500">

좌측 속성 검색 버튼을 누르면 위와 같이 창이 나오는데 여기서 '속성추가'를 눌러줍니다.

<img src="/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-4.png" width="500">

여기서 도메인이 아닌 'URL 접두어'의 입력창에 보유하신 사이트 주소를 입력하고 계속 버튼을 눌러줍니다.

<img src="/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-5.png" width="500">

검토 후에 소유권 확인 창이 나오는데요. 본인이 소유한 사이트가 맞는지 소유권 확인 절차가 필요합니다.
소유권 확인 방법에는 HTML파일을 사이트에 추가하는 것이 있고, 그 외에도
HTML 태그를 추가하거나 구글 애널리틱스(GA)계정을 연동하거나 여러 방법이 존재합니다.

저는 가장 간단한 HTML태그을 웹사이트에 추가하는 방식으로 하겠습니다.

저는 Nextjs로 제작한 사이트라 아래와 같이 `<Head>` 태그 사이에 넣어주었습니다.

![](/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-6.png)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```tsx
<Head>
  <title>thumbnail maker</title>
  <meta name="google-site-verification" content="iBrZvJIvnHVubE85EUieSyBXctuRY79ZcktaVjMG_rQ" />
  <meta name="description" content="Generated by create next app" />
  <link rel="icon" href="/favicon.ico" />
</Head>
```

정적인 meta태그 추가는 이렇게 그냥 한줄 추가하면 되지만
가끔씩 동적인 meta태그를 추가해야하는 상황이 있는데요.
해당 내용은 아래 포스팅에서 확인하실 수 있습니다.

위 메타 태그를 추가한 뒤 확인 버튼을 클릭하면

<img src="/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-7.png" width="500">

<img src="/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-8.png" width="500">

확인 후에 아래와 같이 나오는 것을 보실 수 있습니다.

<img src="/assets/img/2022-11-28-웹사이트-구글-검색-되게-하는-방법-9.png" width="500">

Nextjs 에서 sitemap 추가 및 구글 검색에 잘 걸리도록하는 SEO 셋팅 방법에 대해서 추후 다뤄보도록 하겠습니다.

내가 만든 웹사이트가 구글 검색엔진에 걸려서 검색시 노출되게 하는 방법

내 웹사이트를 구글에 검색 되게 하는 방법(Search Console)

# 셀레니움(selenium)으로 자동화 프로그램 제작하기(1)

셀레니움으로 자동화 프로그램을 제작할 수 있습니다.
이번 글에서는 셀레니움을 실행하는 방법에 대해서 정리하겠습니다.

크롤링을 하는 방법에는 다양한 방법이 있지만 실제 유저가 동작하는 것처럼 하기 위해서는 셀레니움(selenium)을 사용해야합니다.
**셀레니움은 파이썬 자바 자바스크립트 등 다양한 언어로 사용할 수 있지만 자바스크립트로 사용하는 방법에 대해서 공유합니다.**

## 1. selenium-webdriver 설치



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```bash
npm i selenium-webdriver
```

## 2. 크롬 실행

크롬 셀레니움을 사용하기 위해선 chromeOption들을 설정해 주어야 합니다.

```js
const webdriver = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { Builder, By, Key, until, Capabilities } = require("selenium-webdriver");

const userAgent =
  "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36";

const driver = async () => {
  return new Builder()
    .forBrowser("chrome")
    .setChromeOptions(
      new chrome.Options()
        .addArguments("--headless") // 백그라운드로 실행
        .addArguments("--disable-gpu") // gpu 비활성화
        .addArguments("--no-sandbox")
        .addArguments("--disable-dev-shm-usage") // 공유 메모리를 사용하지 않겠다는 의미
        .addArguments("window-size=1280,800") // 윈도우 사이즈 지정
        .addArguments("--disable-blink-features=AutomationControlled")
        .addArguments([`user-agent==${userAgent}`]) // 유저 에이전트를 지정할 수 있음
        .setUserPreferences({
          "download.default_directory": "", // 다운로드할 경우 디폴트 경로를 지정할 수 있음
          "profile.default_content_setting_values.automatic_downloads": 1,
        })
    )
    .build();
};

await driver.get("https://www.naver.com/"); // 네이버 홈페이지 열기
await driver.sleep(1000000000); // 타임 슬립
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위에 주석처리해둔 속성들을 보고 필요한 속성을 적용하여 사용할 수 있습니다.
위와 같이 index.js를 작성해서 실행하면 아무런 결과도 나오지 않는데요.

**그 이유는 백그라운드로 실행했기 때문입니다.**
아래 부분을 주석처리하거나 제거하고 실행시켜야합니다.

```js
.addArguments("--headless") // 백그라운드로 실행
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="/assets/img/2022-12-09--자바스크립트-셀레니움(selenium)-시작하기-1.png" width="700" />

## 3. 셀레니움 파이어폭스 실행

크롬이 아닌 파이어폭스도 실행할 수 있는데요.
셀레니움을 사용하다보면 특정 브라우저에서는 동작하지 않는 경우가 있어서 다른 브라우저도 사용해야할 경우가 발생합니다.

firefox도 크롬과 동일하게 headless를 통해 백그라운드로 실행 여부를 결정하는데요.

아래처럼 함수를 만들어두면 필요에 따라 headless를 설정할 수 있습니다.

```js
const firefoxBuild = async (headless = true) => {
  if (headless) {
    return new Builder()
      .forBrowser("firefox")
      .setFirefoxOptions(new firefox.Options().addArguments("--headless"))
      .build();
  } else {
    return new Builder().forBrowser("firefox").setFirefoxOptions(new firefox.Options()).build();
  }
};
```

이제 셀레니움을 실행해서 브라우저를 키는데 까지 성공했습니다.
셀레니움을 이용하면 클릭, 스크롤, 다운로드 등등 사람이 동작하는 것과 동일하게 동작을 수행할 수 있습니다.

셀레니움을 활용하면 정말 다양한 동작을 자동화할 수 있는데요.

다음 글에서는 셀레니움의 기본 명령어들에 대해서 알아보겠습니다.

셀레니움으로 봇을 만들어 자동화 프로그램을 만드는 방법에 대해서 소개합니다

셀레니움selenium으로 자동화 프로그램 제작하기1

# html2canvas로 html 요소 캡쳐해서 이미지로 다운로드 받기

html2canvas를 이용해 특정 html 태그를 캡쳐해서 이미지로 다운로드 받을 수 있는 방법에 대해서 알 수 있습니다.

## 1. html2canvas 설치

아래 명령어를 입력해서 설치해줍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```bash
npm i html2canvas
```

### canvas로 변환하는 함수

html2canvas 함수의 **첫번째 인자에 캡쳐를 원하는 DOM요소를 넣어줍니다.**

```tsx
import html2canvas from "html2canvas";

// canvas로 변환하는 함수
const download = () => {
  window.scrollTo(0, 0);
  const thumbnail: any = document.querySelector("#thumbnail");
  /*
    allowTaint : cors 이미지
    useCORS : cors 이미지
    */
  html2canvas(thumbnail, { allowTaint: true, useCORS: true }).then(function (canvas) {
    console.log;
    saveAs(canvas.toDataURL(), "thumbnail_img.jpg");
    // document.body.appendChild(canvas);
  });
};
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 다운로드 받는 함수

```tsx
// 변환된 canvas를 이미지로 다운로드 받는 함수
const saveAs = (uri: any, filename: string) => {
  var link = document.createElement("a");
  if (typeof link.download === "string") {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
};
```

## 결과 화면

위와 같이 작성해서 **버튼 클릭 이벤트에 연결하면 아래처럼 다운로드 버튼 클릭시 특정 html요소를 이미지로 만들어 다운로드 받을 수 있습니다.**



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="/assets/img/2022-12-09-html2canvas로-html-요소-캡쳐해서-이미지로-다운로드-받기-1.gif" width="500" />

파일의 이름도 지정할 수 있고, 특정 요소르 이미지로 다운로드 받을 수 있으니 다양하게 활용할 수 있을 것 같다.

html2canvas를 사용해 html 요소를 이미지로 캡쳐해서 다운로드 받는 방법에 대해 정리합니다

html2canvas 사용법 - html 요소 이미지로 캡쳐해서 다운로드 받기

# egjs react-grid로 Masonry레이아웃 만드는 방법

Masonry 레이아웃을 쉽게 구현할 수 있습니다.

<img src="/assets/img/2022-12-15-egjs-react-grid로-Masonry레이아웃-만드는-방법-1.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="/assets/img/2022-12-15-egjs-react-grid로-Masonry레이아웃-만드는-방법-2.png" width="500" />
<img src="/assets/img/2022-12-15-egjs-react-grid로-Masonry레이아웃-만드는-방법-3.png" width="500" />

이런 형태의 레이아웃을 구성해야하면 grid를 통해서 만들거나
여러개의 flex 구조로 만들 수 있는데요. 이러한 방식으로 만드는 것은 어려울 뿐만 아니라
아이템의 순서를 나열하는 과정에서 문제가 발생하는데요.

[@egjs/react-grid](https://www.npmjs.com/package/@egjs/react-grid) **라이브러리로 쉽게 Masonry 레이아웃을 구현하는 방법에 대해서 공유합니다.**

## @egjs/react-grid 설치

```bash
npm i @egjs/react-grid
```

## 적용

### 1. Masonry 레이아웃

리액트 라이브러리이기 때문에 리액트에 적용해보겠습니다.

아래 컴포넌트를 그대로 사용하시면 됩니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```tsx
import React from "react";
import { MasonryGrid } from "@egjs/react-grid";
import style from "./Masonry.module.scss";

const Masonry = () => {
  return (
    <MasonryGrid className="container" gap={5} defaultDirection={"end"} align={"justify"}>
      <div className={style.item}>1</div>
      <div className={style.item}>2</div>
      <div className={style.item}>3</div>
      <div className={style.item}>4</div>
      <div className={style.item}>5</div>
      <div className={style.item}>6</div>
      <div className={style.item}>7</div>
      <div className={style.item}>8</div>
      <div className={style.item}>9</div>
      <div className={style.item}>10</div>
    </MasonryGrid>
  );
};

export default Masonry;
```

```scss
.item {
  width: 100px;
  height: 100px;
  color: #fff;
  font-weight: 900;
  font-size: 30px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;

  &:nth-child(2n + 1) {
    height: 300px;
  }

  $colorList: #e74c3c, #e67e22, #f1c40f, #2ecc71, #c0392b, #3498db, #2c3e50, #9b59b6, #bdc3c7, #7f8c8d, #2980b9;

  @for $i from 1 to 11 {
    &:nth-child(#{$i}) {
      background: nth($colorList, $i);
    }
  }
}
```

**위 컴포넌트를 렌더링하면 아래와 같이 Masonry 레이아웃을 매우 쉽게 만들 수 있습니다.**



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="/assets/img/2022-12-15-egjs-react-grid로-Masonry레이아웃-만드는-방법-2.png" width="500" />

### 2. justifiedGrid 레이아웃

@egjs/react-grid에는 다른 그리드 레이아웃들도 있는데요.

JustifiedGrid를 import 해서 사용해줍니다.

```tsx
import React from "react";
import { JustifiedGrid } from "@egjs/react-grid";
import style from "./Masonry.module.scss";

const Masonry = () => {
  return (
    <JustifiedGrid className="container" gap={5} defaultDirection={"end"} align={"justify"}>
      <div className={style.item}>1</div>
      <div className={style.item}>2</div>
      <div className={style.item}>3</div>
      <div className={style.item}>4</div>
      <div className={style.item}>5</div>
      <div className={style.item}>6</div>
      <div className={style.item}>7</div>
      <div className={style.item}>8</div>
      <div className={style.item}>9</div>
      <div className={style.item}>10</div>
    </JustifiedGrid>
  );
};

export default Masonry;
```

아래와 같은 결과를 보실 수 있습니다.

<img src="/assets/img/2022-12-15-egjs-react-grid로-Masonry레이아웃-만드는-방법-1.png" width="500" />

### 3. PackingGrid 레이아웃

JustifiedGrid 레이아웃을 적용한 방법과 동일하게
PackingGrid를 import 해서 컴포넌트로 사용해줍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```tsx
import React from "react";
import { PackingGrid } from "@egjs/react-grid";
import style from "./Masonry.module.scss";

const Masonry = () => {
  return (
    <PackingGrid className="container" gap={5} defaultDirection={"end"} align={"justify"}>
      <div className={style.item}>1</div>
      <div className={style.item}>2</div>
      <div className={style.item}>3</div>
      <div className={style.item}>4</div>
      <div className={style.item}>5</div>
      <div className={style.item}>6</div>
      <div className={style.item}>7</div>
      <div className={style.item}>8</div>
      <div className={style.item}>9</div>
      <div className={style.item}>10</div>
    </PackingGrid>
  );
};

export default Masonry;
```

아래와 같은 특정 영역에 요소들을 배열한 레이아웃을 구현할 수 있습니다.

<img src="/assets/img/2022-12-15-egjs-react-grid로-Masonry레이아웃-만드는-방법-3.png" width="500" />

---

## 마무리

css로 직접 구현하는 것도 좋지만 있는 라이브러리들을 직접 사용하는게 효율적인 경우에는 굳이 만들 필요가 없어 보입니다.

react-grid로 MasonryGrid justifiedGrid PackingGrid 레이아웃을 만드는 방법에 대해서 공유합니다

egjs react-grid로 Masonry레이아웃 만드는 방법

# Mac hosts 파일 설정 방법

Mac 환경에서 hosts 파일을 설정할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## hosts 설정이 필요한 경우

회사에서 작업을 하다보면 특정 IP와 Url을 연결해야하는 경우가 있는데요.
예를 들면 123.456.789.10 으로 접근한다면 abc.io 로 리다이렉션 해주는 거죠.
보통 **개발환경이나 스테이지 단계 환경을 구축했을 때 로컬에서 접근하기 위한 방법**으로 사용됩니다.

## hosts 설정 방법

Mac 환경에서는 터미널에서 명령어로 hosts 파일에 접근해서 파일을 수정하는 방식으로 설정합니다.

### 1. hosts 파일 열기

터미널 창을 열어서 아래 명령어를 입력해줍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```bash
sudo vi /private/etc/hosts
```

mac 비밀번호를 입력해줍니다.

```bash
Password:
```

비밀번호를 입력하면 아래와 같이 나오는데요.

```bash
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##

~
~
~
"/private/etc/hosts" 21L, 473B
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

i를 키를 누르면 입력 가능한 상태가 됩니다.
그 상태로 아래 코드처럼 원하는 **IP와 URL을 스페이스 혹은 탭을 기준으로 작성**해주면됩니다.

```bash
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##

## 여기에 추가
123.456.789.10 abc.io

~
~
~
"/private/etc/hosts" 21L, 473B
```

이렇게 하면 abc.io로 브라우저에서 접근하면 123.456.789.10 으로 접근할 수 있습니다.

Mac 환경에서 hosts 파일 설정하는 방법에 대해서 정리합니다

Mac hosts 파일 설정 방법

# vuepress 블로그 구글애널리틱스 적용하기

vuepress 블로그에 구글애널리틱스를 적용할 수 있습니다.

구글애널리틱스를 사용하면 블로그, 쇼핑몰과 같은 사이트의 사용자에 대한 방문, 액션 데이터를 분석해주는데요.
사이트를 더 키워나가고싶은 분들이라면 구글애널리틱스를 사이트에 붙혀서 통계를 통해 마케팅에 이용하고 있습니다.

구글 애널리틱스가 **GA4 에서 GA5로 업데이트되면서 등록하는 방법이 달라졌는데요.**
달라진 내용에 대해서 정리해보도록 하겠습니다.

## 1. 설정 추가



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

먼저 구글 애널리틱스 사이트로 가서 설정을 추가해주어야합니다.

아래 사진의 왼쪽아래에 있는 관리 버튼을 눌러줍니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-2.png"  />

그 다음에 "+ 속성 만들기" 버튼을 눌러줍니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-3.png"  />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

원하시는 속석이름과 시간대 통화를 지정해줍니다.
저는 대한민국에 통화는 달러를 선택했습니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-4.png"  />

카테고리와 비즈니스 규모 사용 계획을 선택해줍니다.
이 부분은 큰 의미는 없으니 저처럼 지정해주셔도 상관 없습니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-5.png"  />

## 2. 사이트 적용

속성을 만들었다면 사이트를 적용해야하는데요. 아래 화면에서 웹을 눌러줍니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-6.png"  />

원하시는 vuepress 블로그 주소를 넣어주시면 됩니다.
사실 vuepress 주소가 아닌 어떤 주소를 넣어주셔도 상관 없습니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-7.png"  />

사이트를 적용하고 나면 아래에서 "태그 안내 보기" 버튼을 클릭해줍니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-8.png"  />

거기서 직접 설치 탭을 선택해주시면아래와 같은 코드가 나오는데요. 이 코드를 vuepress 블로그 저장소 설정에 넣어주어야합니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-9.png"  />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 3. vuepress 설정

vuepress 블로그의 head에 script는 아래와 같이 적용하고 있기 때문에 **위 사진에서 src값과 script 사이에 있는 html을 각각 넣어주시면 됩니다.**

```ts
export default defineUserConfig({
  title: "ui-log",
  description: "Today I leanred",
  head: [
    ["script", { async: true, src: "src값" }],
    ["script", {}, ` script태그 사이에 있는 html`],
  ],
});
```

위와 같이 작성하고 블로그를 배포하게 되면 아래처럼 구글 애널리틱스 분석을 확인할 수 있습니다.

<img src="/assets/img/2022-12-19-vuepress-블로그-구글애널리틱스-적용하기-10.png"  />

vuepress 블로그에 구글애널리틱스를 적용하는 방법에 대해서 정리했습니다

vuepress 블로그에 구글애널리틱스 적용하는 방법

# 자바스크립트로 selenium iframe에 접근하는 방법

자바스크립트를 이용해 selenium을 사용할 때 iframe 내부에 있는 요소에 접근하여 처리할 수 있습니다.

selenium을 사용하다보면 이렇게 사이트가 iframe으로 이루어진 경우가 종종 발생하는데요.
이럴 때는 findElements 와 같은 함수를 통해서 엘리먼트에 접근하는 것이 안됩니다.

<img src="/assets/img/2022-12-22-자바스크립트로-selenium-iframe에-접근하는-방법-1.png"  />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

현재 body로 되어있는 기준을 iframe으로 먼저 바꿔 준 후에 findElements를 사용해야
iframe 내부에 있는 요소에 접근할 수 있는데요.

## switchTo()

driver의 `switchTo()` 함수를 사용해서 iframe으로 포커스를 스위칭할 수 있는데요.
iframe이 있는지 판단하기 위해서 findElements 함수로 iframe 유무를 판단할 수 있습니다.

```js
let [iframe] = await driver.findElements(By.css("iframe"));
if (iframe) {
  await driver.switchTo().frame(iframe); // driver를 iframe으로 스위칭
}
```

위와 같이 하면 이제 iframe 내부에 있는 엘리먼트에 접근할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
let [iframe] = await driver.findElements(By.css("iframe"));
if (iframe) {
  await driver.switchTo().frame(iframe); // driver를 iframe으로 스위칭

  const iframeElement = await driver.findElements(By.css("iframe 내부 엘리먼트 요소"));
}
```

## defaultContent()

이제 iframe에서 할 일을 다 끝냈다면 다시 body로 스위칭해야하는데요.
그 때 필요한 것이 `defaultContent()` 함수입니다.

```js
let [iframe] = await driver.findElements(By.css("iframe"));
if (iframe) {
  await driver.switchTo().frame(iframe); // driver를 iframe으로 스위칭

  const iframeElement = await driver.findElements(By.css("iframe 내부 엘리먼트 요소"));
  await driver.switchTo().defaultContent(); // 돌아가기
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 정리

- iframe 내부 요소를 탐색하고 싶다면 `.switchTo()` 함수로 바꾼 후에 처리

```js
await driver.switchTo().frame(iframe); // iframe으로 스위칭
```

- iframe 내부에서 작업 다 끝내서 다시 body로 돌아오려면 `.switchTo().defaultContent()` 로 돌아오기

```js
await driver.switchTo().defaultContent(); // 다시 원래 body로 돌아가기
```

javascript selenium 사용시 iframe 내부에 있는 요소를 처리하는 방법에 대해서 알 수 있습니다

Posts