🧑‍💻 Develop

<blockquote><p>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</p></blockquote><p>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)</p><p>언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.</p><p>위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.</p><h1>배포하기</h1><h2>프로젝트 생성</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. </p><p>애널리틱스 연동은 필요에 따라 선택해주시면 돼요.</p><p>생성해주셨다면 <strong>빌드 &gt; 호스팅</strong> 메뉴를 선택해 시작하기를 눌러주세요.</p><img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2><p>가이드에 따라 firebase-cli를 설치해주세요.</p><pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><p><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.</p><h2>firebase init</h2><p>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.</p><pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre><p>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. </p><img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960"><p>프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.</p><img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><p><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963"><p>리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964"><p>Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965"><p>기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.</p><img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966"><p>그러면 아래와 같이 설정파일들이 생성돼요.</p><img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2><p>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.</p><p>우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.</p><p>이후 아래와 같이 deploy 스크립트를 추가해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968"><p>이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. </p><h1>*.web.app 도메인 주소 변경하기</h1><p>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

📱 Webview

<h1>Problem</h1><p>웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.</p><img src="https://image.until.blog/morethanmin/article/1723285031061" data-width="50%" data-align="center" alt="until-1220"><p>관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.</p><h1>background-image 추가하기</h1><p>아래와 같이 video의 background-image로 poster를 추가해 임시로 대응해줄 수 있었다.</p><pre spellcheck="false"><code class="language-xml">      &lt;video
        src={video}
        poster={poster}
        style={{ width: 260, height: 200 }}
        autoPlay
        loop
        playsInline
        muted
        css={css`
          // mobile safari에서 poster -&gt; video로 전환 시 깜빡임이 발생해 추가
          overflow: hidden;
          background-image: url(${poster});
          background-position: center;
          background-size: cover;
        `}
      /&gt;</code></pre><p>placeholder -&gt; video로 전환될 때의 영역을 background image가 채워줌으로서 깜빡임 현상을 임시로 해결해 줄 수 있었다.</p><p>아래는 결과물이다.</p><img src="https://image.until.blog/morethanmin/article/1723285046176" data-width="50%" data-align="center" alt="until-1221"><p></p>

Problem웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.background-image 추가하기아래와 같이 video

mobile safari에서 video poster가 깜빡이는 이슈

🍎 Mac

<blockquote><p>해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@morethanmin/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-winget%EC%9C%BC%EB%A1%9C-fnm-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0--fast-node-manager-">이 아티클</a>을 참고해주세요.</p></blockquote><p>node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 <code spellcheck="false">.nvmrc</code> 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.</p><p>이럴 때 사용할 수 있는 것이 바로 nvm(node version manager)입니다. nvm은 여러 버전의 node를 설치하고 실행할 수 있도록 도와주고, 또 <code spellcheck="false">.nvmrc</code> 파일을 읽어들여 프로젝트에 맞는 node 버전을 자동으로 설정해줄 수도 있습니다.</p><h1>NVM 설치하기</h1><p>아래 커맨드를 터미널에 입력하여 nvm을 설치해봅시다. curl또는 wget또는 brew 통해 설치하시면 됩니다.</p><h2>curl</h2><pre spellcheck="false"><code class="language-bash">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>wget</h2><pre spellcheck="false"><code class="language-bash">wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>brew</h2><pre spellcheck="false"><code class="language-bash">brew install nvm</code></pre><h1>환경변수 설정</h1><p>nvm을 설치하셨다면 환경 변수를 설정해야합니다. 본인의 터미널 환경에 맞게 <code spellcheck="false">~/.bash_profile</code>, <code spellcheck="false">~/.zshrc</code>, <code spellcheck="false">~/.profile</code>, <code spellcheck="false">~/.bashrc</code> 중 한곳으로 이동하여 아래 추가하시면 됩니다.</p><pre spellcheck="false"><code class="language-bash">export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;&amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] &amp;&amp; \. "$NVM_DIR/nvm.sh" # This loads nvm</code></pre><p>이후 터미널을 재부팅하거나 아래 커맨드를 입력하면 환경변수가 적용됩니다.</p><pre spellcheck="false"><code>source ~/.bash_profile</code></pre><h1>nvm 사용법</h1><p>가장 많이 사용하는 명령어 위주로 알아보겠습니다.</p><ul><li><p><code spellcheck="false">nvm ls</code>: 현재 설치된 node 버전을 확인할 수 있습니다.</p></li><li><p><code spellcheck="false">nvm use &lt;version&gt;</code>:  특정 버전의 node를 사용합니다. 커맨드를 실행하는 디렉터리에 <code spellcheck="false">.nvmrc</code> 를 통해 버전이 명시되어있다면 version을 생략할 수 있어요.</p></li><li><p><code spellcheck="false">nvm install &lt;version&gt;</code> : 특정 버전의 node를 설치합니다.</p></li><li><p><code spellcheck="false">nvm uninstall &lt;version&gt;</code> : 특정 버전의 node를 제거합니다.</p></li></ul><h1><code spellcheck="false">.nvmrc</code> </h1><p>프로젝트 root에 <code spellcheck="false">.nvmrc</code>파일을 생성하고 현재 노드버전을 입력해두면 해당 프로젝트에서 사용하는 node 버전을 명시해 둘 수 있고, <code spellcheck="false">nvm use</code>를 통해 바로 해당 버전의 node를 사용할 수 있습니다.</p><h1>프로젝트별 node 버전 자동으로 적용하기</h1><p>현재 디렉터리에 <code spellcheck="false">.nvmrc</code> 가 존재하는지 확인하고 있다면 nvm use를 자동으로 실행하는 스크립트를 적용시켜봅시다.</p><h2>script 사용하는 방법</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nvm-sh/nvm?tab=readme-ov-file#deeper-shell-integration">공식문서</a>에 나와있는 스크립트를 사용하여 적용할 수 있습니다. bash와 zsh 터미널에 대한 스크립트를 제공하고 있습니다. 둘 중 본인이 사용하는 터미널에 맞는 스크립트를 적용하시면 됩니다.</p><h2>bash</h2><p>아래 코드를  <code spellcheck="false">$HOME/.bashrc</code>에 입력후 저장해주면 됩니다. </p><pre spellcheck="false"><code>cdnvm() {
    command cd "$@" || return $?
    nvm_path="$(nvm_find_up .nvmrc | command tr -d '\n')"

    # If there are no .nvmrc file, use the default nvm version
    if [[ ! $nvm_path = *[^[:space:]]* ]]; then

        declare default_version
        default_version="$(nvm version default)"

        # If there is no default version, set it to `node`
        # This will use the latest version on your machine
        if [ $default_version = 'N/A' ]; then
            nvm alias default node
            default_version=$(nvm version default)
        fi

        # If the current version is not the default version, set it to use the default version
        if [ "$(nvm current)" != "${default_version}" ]; then
            nvm use default
        fi
    elif [[ -s "${nvm_path}/.nvmrc" &amp;&amp; -r "${nvm_path}/.nvmrc" ]]; then
        declare nvm_version
        nvm_version=$(&lt;"${nvm_path}"/.nvmrc)

        declare locally_resolved_nvm_version
        # `nvm ls` will check all locally-available versions
        # If there are multiple matching versions, take the latest one
        # Remove the `-&gt;` and `*` characters and spaces
        # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
        locally_resolved_nvm_version=$(nvm ls --no-colors "${nvm_version}" | command tail -1 | command tr -d '\-&gt;*' | command tr -d '[:space:]')

        # If it is not already installed, install it
        # `nvm install` will implicitly use the newly-installed version
        if [ "${locally_resolved_nvm_version}" = 'N/A' ]; then
            nvm install "${nvm_version}";
        elif [ "$(nvm current)" != "${locally_resolved_nvm_version}" ]; then
            nvm use "${nvm_version}";
        fi
    fi
}

alias cd='cdnvm'
cdnvm "$PWD" || exit</code></pre><h2>zsh</h2><pre spellcheck="false"><code># place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version
    nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] &amp;&amp; [ "$(nvm version)" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc</code></pre><h2>vsCode extension 사용하기</h2><p>만약 본인이 vsCode를 사용한다면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm">vsc-nvm</a> 익스텐션을 사용할 수도 있습니다.</p><p>해당 extension을 설치하고 vscode를 재부팅하면 바로 적용됩니다. </p><p></p>

해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi