<p></p><img src="https://image.until.blog/laravel/article/1716540066755" alt="until-205"><p>LAMP 스택으로 Ubuntu에서 Laravel 프로젝트 생성까지 진행하는 script.</p><p>PHP 8.3, Apache2, Composer, npm, MariaDB 차례대로 설정 후</p><p>Laravel을 Livewire, Jetstream과 함께 설치하는 것까지 한 방에 진행함.</p><p>필요시 수정해서 사용하시길</p><p></p><pre spellcheck="false"><code class="language-bash">#!/bin/bash

# Snap 설치 여부 확인
read -p "VS Code를 설치하시겠습니까? (Y/N) " answer
if [[ "$answer" == "Y" || "$answer" == "y" ]]; then
    echo -e "\e[48;2;255;255;0;38;2;0;0;0mVS Code 설치중..(약 1분 소요됨)\e[0m"
    sudo snap install --classic code
else
    echo -e "\e[48;2;255;255;0;38;2;0;0;0mVS Code 설치를 취소하였습니다.\e[0m"
fi

# 시스템 업데이트 및 업그레이드
echo -e "\e[48;2;255;255;0;38;2;0;0;0m시스템 업데이트, 업그레이드중..\e[0m"
sudo apt update
sudo apt upgrade -y

# PHP 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mPHP 8.3 설치중..\e[0m"
sudo apt install -y php8.3 php8.3-common php8.3-cli php8.3-gd php8.3-mysqlnd php8.3-redis php8.3-curl php8.3-intl php8.3-mbstring php8.3-bcmath php8.3-xml php8.3-zip

# Apache2 설치 및 실행
echo -e "\e[48;2;255;255;0;38;2;0;0;0mApache2 설치중..\e[0m"
sudo apt install -y apache2
sudo systemctl enable apache2
sudo systemctl start apache2

# UFW(방화벽) 설정
echo -e "\e[48;2;255;255;0;38;2;0;0;0mUFW 설정중..\e[0m"
sudo ufw allow 'Apache'
sudo ufw enable

# Curl 및 Composer 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mCurl, Composer 설치중..\e[0m"
sudo apt install -y curl
sudo apt install -y composer

# npm 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mnpm 설치 시작\e[0m"
sudo apt install -y npm

# MariaDB 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mMariaDB 설치중..\e[0m"
sudo apt-get install -y mariadb-server
sudo systemctl enable mariadb
sudo systemctl start mariadb.service

# MariaDB 쉘 실행 및 보안 설정 자동화
echo -e "\e[48;2;255;255;0;38;2;0;0;0mMariaDB 보안 설정중..\e[0m"
sudo mariadb &lt;&lt; EOF
SET PASSWORD FOR 'root'@'localhost' = PASSWORD('root');
DELETE FROM mysql.user WHERE User='';
DELETE FROM mysql.user WHERE User='root' AND Host NOT IN ('localhost', '127.0.0.1', '::1');
DROP DATABASE IF EXISTS test;
DELETE FROM mysql.db WHERE Db='test' OR Db='test\\_%';
FLUSH PRIVILEGES;
EOF

# Laravel 프로젝트 생성
echo -e "\e[48;2;255;255;0;38;2;0;0;0m이제 프로젝트 생성 단계입니다.\e[0m"
read -p "새로운 Laravel 프로젝트의 이름을 입력하세요: " project_name
composer create-project laravel/laravel "$project_name"
cd "$project_name"

# .env 파일 내용 변경
echo -e "\e[48;2;255;255;0;38;2;0;0;0m.env 파일 내용 변경\e[0m"
sed -i 's/DB_CONNECTION=.*$/DB_CONNECTION=mariadb/' .env
sed -i 's/# DB_HOST=.*$/DB_HOST=127.0.0.1/' .env
sed -i 's/# DB_PORT=.*$/DB_PORT=3306/' .env
sed -i 's/# DB_DATABASE=.*$/DB_DATABASE=lounge/' .env
sed -i 's/# DB_USERNAME=.*$/DB_USERNAME=root/' .env
sed -i 's/# DB_PASSWORD=.*$/DB_PASSWORD=root/' .env

echo -e "\e[48;2;255;255;0;38;2;0;0;0mMigration 시도중\e[0m"
php artisan migrate --force

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLivewire 설치 시작\e[0m"
composer require livewire/livewire

echo -e "\e[48;2;255;255;0;38;2;0;0;0mJetStream 설치 시작\e[0m"
composer require laravel/jetstream
php artisan jetstream:install livewire

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel Installer 설치 시작\e[0m"
composer global require "laravel/installer"
echo -e "\e[48;2;255;255;0;38;2;0;0;0m환경변수 추가\e[0m"
# export PATH="~/.config/composer/vendor/bin:$PATH"
echo 'export PATH="~/.config/composer/vendor/bin:$PATH"' &gt;&gt; ~/.bashrc
source ~/.bashrc
echo -e "\e[48;2;0;0;255;38;2;255;255;255m"
laravel --version
echo -e "설치 완료\e[0m"

# jetstream 기능 정의(주석 제거)
config_file="config/jetstream.php"
sed -i 's/\/\/ Features::profilePhotos/Features::profilePhotos/' $config_file
sed -i 's/Features::accountDeletion/\/\/Features::accountDeletion/' $config_file

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel 프로젝트 생성 및 설정 완료!\e[0m"

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel npm run build !\e[0m"
# npm install &amp;&amp; npm run build
npm install &amp;&amp; npm run dev
</code></pre><p></p><p></p><p></p><p></p>

LAMP 스택으로 Ubuntu에서 Laravel 프로젝트 생성까지 진행하는 script.PHP 8.3, Apache2, Composer, npm, MariaDB 차례대로 설정 후Laravel을 Livewire, Jetstream과 함께 설치하는 것까지 한 방에 진행함.필요시 수정해서 사용하시길#!/bin/bash

# Snap 설치 여부 확인
read -p

Ubuntu에서 Laravel install Script

CodingTest

혹시 좋은 방법이나 공부하신 포스팅이 있다면 공유부탁드려요! 
아직 초보인지라 배울점이 많습니다 ㅎㅎ!

너무... 힘들게 푸시는게 아닐까요..ㅎㅎ

<h2>개요</h2><p>Notion 데이터베이스에 저장된 데이터를 기반으로 Next.js 프로젝트를 만들었던 경험을 토대로,<br>Notion 데이터베이스를 Next.js 프로젝트에 적용하는 방법을 정리해보려고 한다.</p><blockquote><p>※ <code spellcheck="false">Next.js</code> 와 <code spellcheck="false">Notion</code>에 대한 기본적인 이해는 있다고 가정한다.</p></blockquote><h2>구현 방법</h2><ol class="tight" data-tight="true"><li><p>Notion에서 데이터베이스를 생성하고, <code spellcheck="false">API Key</code>를 발급 받는다.</p></li><li><p><code spellcheck="false">Next.js</code>프로젝트를 생성하고, Notion 데이터베이스를 연결한다.</p></li><li><p>컴포넌트 및 페이지를 구현한다.</p></li><li><p>프로젝트를 배포한다.</p></li></ol><p>더 자세한 내용은 아래 링크에서 확인할 수 있다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.woongsnote.dev/blog/how-to-use-notion-database-in-nextjs">https://www.woongsnote.dev/blog/how-to-use-notion-database-in-nextjs</a></p><h2>구현 결과(예시)</h2><img src="https://image.until.blog/woongsnote/article/1715613924287" alt="until-21">

Next.js에서 노션 데이터베이스 사용하기

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/12906?language=cpp">같은 숫자는 싫어</a></p></li><li><p>사용언어 : C++</p></li><li><p>난이도 : 하 </p></li><li><p>풀이시간 : 15m</p></li><li><p>유형 : 큐, 스택</p></li></ul><h6><strong>문제 설명</strong></h6><p>배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,</p><ul><li><p>arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.</p></li><li><p>arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.</p></li></ul><p>배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.</p><h5>제한사항</h5><ul><li><p>배열 arr의 크기 : 1,000,000 이하의 자연수</p></li><li><p>배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수</p></li></ul><hr><h5>입출력 예</h5><p>arr answer<br>[1,1,3,3,0,1,1] [1,3,0,1]<br>[4,4,4,3,3] [4,3]</p><h5>입출력 예 설명</h5><p>입출력 예 #1,2<br>문제의 예시와 같습니다.</p><h3>문제 풀이 접근</h3><p>이 문제는, 문제 풀이 접근이랄게 크게 없다. <br>요구하는 건 한가지로, 내 앞의 숫자와 연속되지 않게만 해달라. 이게 끝이다. <br><br>처음에는 자주쓰는 vector로 풀었지만, 유형이 큐, 스택이어서 문제 의도에 맞게 한번더 풀어보았다.</p><h3>정답 작성 코드 (C++) - vector 풀이</h3><pre spellcheck="false"><code>#include &lt;vector&gt;
#include &lt;iostream&gt;
#include &lt;algorithm&gt; 

using namespace std;

vector&lt;int&gt; solution(vector&lt;int&gt; arr) 
{
    vector&lt;int&gt; answer;

    answer.push_back(arr[0]);
    
    for(int i = 1; i &lt; arr.size(); ++i)
    {
        if(arr[i-1] == arr[i])
            continue;
        
        answer.push_back(arr[i]);
    }
    

    return answer;
}</code></pre><h3>정답 작성 코드 (C++) - stack 풀이 , 리버스 함수 이용</h3><pre spellcheck="false"><code>#include &lt;vector&gt;
#include &lt;iostream&gt;
#include &lt;stack&gt;
#include &lt;algorithm&gt;

using namespace std;

vector&lt;int&gt; solution(vector&lt;int&gt; arr) 
{
    vector&lt;int&gt; answer;
    stack&lt;int&gt; st;
    
    st.push(arr[0]);
    
    int counter = 1;
    
    while(counter &lt; arr.size())
    {
        int topValue = st.top();
        
        if(arr[counter] == topValue)
        {
            ++counter;
            continue;
        }  
        
        st.push(arr[counter]);
        ++counter;
    }
    
    while(true)
    {
        if(st.empty() == true)
            break;
        
        int value = st.top();
        st.pop();
        answer.push_back(value);
    }
    
    reverse(answer.begin(),answer.end());
    return answer;
}</code></pre><h3>정답 작성 코드 (C++) - stack 풀이 , 리버스 함수 만들어서 풀이 </h3><pre spellcheck="false"><code>#include &lt;vector&gt;
#include &lt;iostream&gt;
#include &lt;stack&gt;
#include &lt;algorithm&gt;

using namespace std;

vector&lt;int&gt; solution(vector&lt;int&gt; arr) 
{
    vector&lt;int&gt; answer;
    stack&lt;int&gt; st;
    
    st.push(arr[0]);
    
    int counter = 1;
    
    while(counter &lt; arr.size())
    {
        int topValue = st.top();
        
        if(arr[counter] == topValue)
        {
            ++counter;
            continue;
        }
            
        
        st.push(arr[counter]);
        
        ++counter;
    }
    
    vector&lt;int&gt; dummy;
    while(true)
    {
        if(st.empty() == true)
            break;
        
        int value = st.top();
        st.pop();
        
        dummy.push_back(value);
    }
    
    for(int i = dummy.size()-1; i &gt;= 0 ; --i)
    {
      answer.push_back(dummy[i]);
    }
   
    return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1721969744120" alt="until-956"><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 4

코딩테스트 준비 - 같은 숫자는 싫어

Spring

Python

macOS

winOS

PowerShell

CI/CD

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42626?language=cpp">더 맵게</a></p></li><li><p>사용언어 : C++</p></li><li><p>난이도 : 중</p></li><li><p>풀이시간 : 41m</p></li><li><p>유형 : 힙, 우선순위 큐</p></li></ul><h6><strong>문제 설명</strong></h6><p>매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다.</p><pre spellcheck="false"><code>섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2)
</code></pre><p>Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다.<br>Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요.</p><h5>제한 사항</h5><ul><li><p>scoville의 길이는 2 이상 1,000,000 이하입니다.</p></li><li><p>K는 0 이상 1,000,000,000 이하입니다.</p></li><li><p>scoville의 원소는 각각 0 이상 1,000,000 이하입니다.</p></li><li><p>모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다.</p></li></ul><h5>입출력 예</h5><p>scoville K return<br>[1, 2, 3, 9, 10, 12] 7 2</p><h5>입출력 예 설명</h5><ol><li><p>스코빌 지수가 1인 음식과 2인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다.<br>새로운 음식의 스코빌 지수 = 1 + (2 * 2) = 5<br>가진 음식의 스코빌 지수 = [5, 3, 9, 10, 12]</p></li><li><p>스코빌 지수가 3인 음식과 5인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다.<br>새로운 음식의 스코빌 지수 = 3 + (5 * 2) = 13<br>가진 음식의 스코빌 지수 = [13, 9, 10, 12]</p></li></ol><p>모든 음식의 스코빌 지수가 7 이상이 되었고 이때 섞은 횟수는 2회입니다.</p><h3>문제 풀이 접근</h3><p>이 문제는, 스코빌 지수가 가장 낮은 2개를 섞어서 새로운 것을 만들어 내, 최종적으로 모든 요소를 K 이상의 스코빌로 만들 수 있느냐, 없느냐, 있다면 최소 몇번 섞어야 하느냐가 핵심인 문제다.</p><p>가장 먼저 떠올린 것은, 당연하게도 인자로 벡터를 줬기 때문에, O(n^2) 이 될 수 있을만한 코드를 작성했다. <br>유효성 테스트가 없을줄 알고 진행했고, 다른 유형 다맞췄는데 효율성 5개 전부다 실패했다.</p><p>이후, AI 코드 문제 힌트가 있어서 바로 확인해서 문제를 다르게 세팅하여 풀이를 진행했다. <br>AI 힌트 : Heap, Priority Queue는 삽입부터 값이 정렬되어 순회할 필요가 없다. 지금 너의 코드는 벡터로 계속 순회해서 찾는데 너무 비효율 적이다. 그러니, 힙이나 우선순위 큐를 써봐라.</p><p>내 선택은 우선순위 큐를 세팅하여 작성하였다.<br>우선순위 큐의 Greater 만 세팅하면 우선순위 큐의 값은 오름차순으로 매칭된다. <br>결국 오름차순이기 때문에 여기서 top 의 값과 K 만 비교해서 크다면 자료구조의 성격으로 나머지는 K 보다 크다는 것이 보장된다는 것을 키로 잡아서 문제를 해결했다.</p><p>이 문제의 해결 플로우,<br>1. scovile 로 들어온 값들을 전부 우선순위 큐로 세팅한다. (greater 까지 세팅한다.)<br>2.인자 배열에 장난치는 케이스들을 예상해서 앞 예외를 모두 처리해준다. <br>( 미리 K 값 이상인데 들어온다거나, 배열이 0 이라거나, 등등 )<br>3. while 루프를 돌며 top 원소를 체크하고, 내부에서 가장 낮은 원소 2개를 빼주는데, 1개 빼줄때마다 pq의 사이즈를 체크한다. <br>(1개가 들어올 수도 있기때문에..)<br>4. pq.top() &lt; K 의 값을 기준으로 while 루프를 잡았으니, 최종 횟수를 구한다면 알아서 answer 를 Return 값으로 반환하고 종료된다.</p><h3>정답 작성 코드 (C++)</h3><pre spellcheck="false"><code class="language-cpp">#include &lt;iostream&gt; 
#include &lt;vector&gt;
#include &lt;algorithm&gt;
#include &lt;queue&gt;

using namespace std;

int solution(vector&lt;int&gt; scoville, int K) {
    int answer = 0;
    priority_queue&lt;int,vector&lt;int&gt;, greater&lt;int&gt;&gt; pq;

    for (int i = 0; i &lt; scoville.size(); ++i)
    {
        pq.push(scoville[i]);
    }

    if (scoville.size() == 0)
        return -1;

    bool check = true;
    for (int i = 0; i &lt; scoville.size(); ++i)
    {
        if (scoville[i] &lt; K)
        {
            check = false;
            break;
        }
    }

    if (check == true)
        return answer;


    int newScovile = 0;
    while (pq.top() &lt; K)
    {
        newScovile = 0;
        check = true;

        auto fst = pq.top();
        
        if (pq.size() == 0)
            return -1;

        pq.pop();

        auto snd = pq.top();

        if (pq.size() == 0)
            return -1;

        pq.pop();

        newScovile = (fst + (snd * 2));

        pq.push(newScovile);
        // 새로운 스코빌 지수 추가
        ++answer;
    }

    return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722493528811" alt="until-1172"><h3>오답 작성 코드 (C++) - 맨 처음 벡터 기준으로 체크 코드</h3><pre spellcheck="false"><code class="language-cpp">#include &lt;iostream&gt; 
#include &lt;vector&gt;
#include &lt;algorithm&gt;

using namespace std;

int solution(vector&lt;int&gt; scoville, int K) {
    int answer = 0;

    if (scoville.size() == 0)
        return -1;

    bool check = true;
    for (int i = 0; i &lt; scoville.size(); ++i)
    {
        if (scoville[i] &lt; K)
        {
            check = false;
            break;
        }
    }

    if (check == true)
        return answer;

    int lessFst = 2000000000;
    int lessFstIdx = -1;
    int lessSnd = 2000000000;
    int lessSndIdx = -1;
    int newScovile = 0;

    while (check == false)
    {
        newScovile = 0;
        lessFst = 2000000000;
        lessSnd = 2000000000;
        lessFstIdx = -1;
        lessSndIdx = -1;
        check = true;

        for (int i = 0; i &lt; scoville.size(); ++i)
        {
            if (lessFst &gt; scoville[i])
            {
                lessFst = scoville[i];
                lessFstIdx = i;
            }
        }

        scoville.erase(scoville.begin()+ lessFstIdx, scoville.begin()+ lessFstIdx+1);

        for (int i = 0; i &lt; scoville.size(); ++i)
        {
            if (lessSnd &gt; scoville[i])
            {
                lessSnd = scoville[i];
                lessSndIdx = i;
            }
        }

        scoville.erase(scoville.begin() + lessSndIdx, scoville.begin() + lessSndIdx + 1);

        if (lessFst == 2000000000)
            return -1;

        if (lessSnd == 2000000000)
            return -1;

        newScovile = (lessFst + (lessSnd * 2));

        scoville.push_back(newScovile);
        // 새로운 스코빌 지수 추가

        for (int i = 0; i &lt; scoville.size(); ++i)
        {
            if (K &gt; scoville[i])
            {
                check = false;
                break;
            }
        }

        ++answer;
    }

    return answer;
}</code></pre><h3>코드 결과 - 벡터 체크</h3><img src="https://image.until.blog/sin0105/article/1722493591982" alt="until-1173">

혼자서 다시푸는 코딩테스트 준비 일지 - 9

코딩테스트 준비 - 더 맵게

nextjs

저의 경우에는 그래도 결국  useSearchParams을 사용하는 부분을 따로 분리해서 Suspense로 감싸주지 않으면 의도는 서버 컴포넌트로 동작하도록 설계했는데, 빌드해보니 클라이언트로 동작하게 돼서 예상치 못한 동작이 일어나더라구요

https://nextjs.org/docs/messages/deopted-into-client-rendering

Firebase

<p>지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.</p><blockquote><p>이 글은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/tj87pFGqiWDiLl18LVXl">이 곳</a> 에서도 읽어 보실 수 있습니다.</p></blockquote><p>Google에서 제공하는 Firebase는 편리한 사용성과 높은 생산성을 갖춘 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 클라이언트 개발에 집중하고 싶었던 저에게 매력적인 선택지였습니다. 그러나 향후 다른 플랫폼으로의 이전 가능성을 고려하여 Firebase Client SDK 대신 Cloud Functions를 활용하여 API 서버를 구축하는 방식을 택했습니다.</p><h2>시작하기</h2><h3>Firebase 프로젝트 생성</h3><p>Google 계정으로 로그인 후 Firebase 콘솔(<a target="_blank" rel="noopener noreferrer nofollow" href="http://firebase.google.com/"><u>firebase.google.com</u></a>)에 접속하여 다음과 같이 프로젝트를 설정합니다.</p><p>1. 프로젝트 생성: '프로젝트 만들기' 버튼을 클릭하여 새 프로젝트를 생성합니다.<br>2. Hosting 활성화: 생성된 프로젝트의 사이드바에서 '빌드' &gt; 'Hosting'을 선택하여 Hosting 기능을 활성화합니다.<br>3. Blaze 요금제 선택: Cloud Functions 배포를 위해 Blaze 요금제를 선택하고 결제 수단을 등록합니다.</p><h3>Vite를 이용한 React 프로젝트 생성</h3><p>Firebase 프로젝트 설정을 완료했으므로, 이제 Vite를 사용하여 TypeScript 기반의 React 프로젝트를 생성해 보겠습니다. 터미널에서 다음 명령어를 실행합니다.</p><pre spellcheck="false"><code>$ yarn create vite your-project --template react-ts</code></pre><p>위 명령어 실행 후 안내에 따라 프로젝트 디렉토리로 이동하고, 기본 패키지를 설치한 후 개발 서버를 실행합니다.</p><pre spellcheck="false"><code>$ cd your-project
$ yarn
$ yarn dev</code></pre><p>이제 브라우저에서 <code spellcheck="false">http://localhost:5173/</code>로 접속하면 Vite에서 기본 제공하는 간단한 React 애플리케이션을 확인할 수 있습니다.</p><h3>Firebase 프로젝트와 연동하기</h3><p>이제 Firebase CLI를 사용하여 Firebase 프로젝트와 연동하는 과정을 안내해 드리겠습니다.</p><h4>1. Firebase CLI 설치</h4><p>터미널에서 다음 명령어를 실행하여 Firebase CLI를 전역적으로 설치합니다.</p><pre spellcheck="false"><code>$ npm install -g firebase-tools</code></pre><h4>2. Firebase에 로그인</h4><p>설치된 Firebase CLI를 사용하여 Firebase 계정에 로그인합니다.</p><pre spellcheck="false"><code>$ firebase login</code></pre><p>로그인 명령을 실행하면 브라우저 창이 열리고, Google 계정으로 로그인하라는 메시지가 표시됩니다. 화면의 지시에 따라 로그인을 진행하고, Firebase CLI에 대한 액세스를 허용해주세요.</p><h4>3. 프로젝트 목록 확인</h4><p>로그인이 완료되면 다음 명령어를 실행하여 현재 연결된 Firebase 프로젝트 목록을 확인할 수 있습니디.</p><pre spellcheck="false"><code>$ firebase projects:list</code></pre><p>만약 프로젝트 목록이 정상적으로 출력된다면 Firebase CLI가 올바르게 설치되었고, 계정과 연결되었다는 의미입니다.</p><p>(선택사항) 연결된 Firebase 프로젝트를 변경하고 싶다면 <code spellcheck="false">firebase use &lt;프로젝트 ID&gt;</code> 명령어를 이용해 변경할 수 있습니다.</p><h4>4. 프로젝트 초기화</h4><p>다음 명령어를 실행하여 프로젝트를 초기화합니다. 초기화 과정에서 사용할 Firebase 기능을 선택하고, 필요한 설정을 진행합니다.</p><pre spellcheck="false"><code>$ firebase init</code></pre><img src="https://image.until.blog/susmisc14/article/1722669914257" alt="until-1177"><h3>Cloud Functions 를 사용해 SSR 구현하기</h3><p>Firebase 설정이 완료되었으므로, 이제 Cloud Functions를 활용하여 서버 사이드 렌더링(SSR)을 구현해 보겠습니다. 이를 통해 SEO(검색 엔진 최적화)를 개선할 수 있습니다.</p><h4>1. 필수 라이브러리 설치</h4><p>루트 경로에 생성된 <code spellcheck="false">functions</code> 디렉토리를 삭제하고 다음 명령어를 통해 SSR에 필요한 라이브러리를 설치합니다.</p><pre spellcheck="false"><code>$ yarn add firebase-functions express cors compression isbot</code></pre><p>- <code spellcheck="false">firebase-functions</code>: Firebase Cloud Functions를 사용하기 위한 라이브러리입니다.<br>- <code spellcheck="false">express</code>: Node.js 웹 애플리케이션 프레임워크입니다.<br>- <code spellcheck="false">cors</code>: 다른 도메인에서 자원을 요청할 수 있도록 CORS(Cross-Origin Resource Sharing)를 설정합니다.<br>- <code spellcheck="false">compression</code>: HTTP 응답 데이터를 압축하여 전송 시간을 단축시켜줍니다.<br>- <code spellcheck="false">isbot</code>: 사용자 에이전트를 분석하여 봇 여부를 판단하는 데 사용됩니다.</p><h4>2. Cloud Functions 함수 작성</h4><p>프로젝트 루트 경로에 <code spellcheck="false">index.server.ts</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><pre spellcheck="false"><code>import compression from "compression";
import cors from "cors";
import express from "express";
import functions from "firebase-functions";
import { renderer } from "./src/entry-server";

const app = express();

const corsOptions = {
  origin: true,
  credentials: true,
};

app.use(cors(corsOptions));
app.use(compression());

app.get("*", renderer);

export const render = functions.https.onRequest(app);</code></pre><p><code spellcheck="false">src</code> 디렉토리에 <code spellcheck="false">entry-client.tsx</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><p><code spellcheck="false">entry-client.tsx</code> 파일은 클라이언트에서 React 애플리케이션을 렌더링하는 엔트리 포인트입니다. 기존의 <code spellcheck="false">root</code> 요소가 비어 있으면 <code spellcheck="false">createRoot</code>를 사용해 렌더링하고, 그렇지 않으면 <code spellcheck="false">hydrateRoot</code>를 사용해 기존 콘텐츠를 재사용합니다.</p><pre spellcheck="false"><code>// src/entry-client.tsx

import { StrictMode } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import App from '~app';

const root = document.getElementById('root')!;
const children = &lt;App /&gt;;

if (root.childElementCount === 0) {
  createRoot(root).render(&lt;StrictMode&gt;{children}&lt;/StrictMode&gt;);
} else {
  hydrateRoot(root, children);
}</code></pre><p>다음으로 <code spellcheck="false">src/entry-server.tsx</code> 파일을 생성하고 서버 사이드 렌더링을 위한 코드를 작성합니다.</p><p>이 코드는 Express 요청을 처리하여 React 애플리케이션을 서버에서 렌더링하고, 생성된 HTML을 클라이언트로 스트리밍합니다. <code spellcheck="false">isbot</code> 라이브러리를 사용하여 사용자 에이전트가 봇인지 확인하고, 봇일 경우 완성된 HTML을 한 번에 전송합니다.</p><pre spellcheck="false"><code>// src/entry-server.tsx

import { Transform } from "stream";
import { Request, Response } from "express";
import { renderToPipeableStream } from "react-dom/server";
import App from "./App";
import { isbot } from "isbot";

export async function renderer(req: Request, res: Response) {
  let isError = false;

  const stream = renderToPipeableStream(&lt;App /&gt;, {
    bootstrapModules: ["/index.js"],

    onShellReady() {
      if (!isbot(req.get("user-agent"))) { // 브라우저일 경우 스트리밍 방식으로 HTML 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onShellError() {
      res.statusCode = 500;

      res.setHeader("content-type", "text/html");
      res.send("&lt;h1&gt;Something went wrong&lt;/h1&gt;");
    },

    onAllReady() {
      if (isbot(req.get("user-agent"))) { // 봇일 경우 완성된 HTML을 한 번에 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onError(error) {
      isError = true;

      console.error(error);
    },
  });
}

function transformContent() {
  let content = "";

  const transform = new Transform({
    transform(chunk, _, callback) {
      content += chunk;

      callback();
    },

    flush(callback) {
      const data = `&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;&lt;title&gt;Vite + React + TS&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="root"&gt;${content}&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;`;

      callback(null, data);
    },
  });

  return transform;
}</code></pre><p>이 과정을 통해 서버 사이드 렌더링(SSR)을 구현할 수 있습니다. 이제 서버에서 렌더링된 HTML을 클라이언트에 전송하고, 클라이언트는 이를 재사용하여 빠르게 초기 로딩을 완료할 수 있습니다.</p><h4>3. index.html 수정</h4><p><code spellcheck="false">src/main.tsx</code> 파일을 삭제하고 <code spellcheck="false">index.html</code> 파일을 수정하여 클라이언트 사이드 엔트리 포인트를 변경합니다.</p><pre spellcheck="false"><code>// index.html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Vite + React + TS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="module" src="/src/entry-client.tsx"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h4>4. 빌드 설정</h4><p>Firebase에 배포를 위한 설정을 진행하겠습니다. 루트 경로의 <code spellcheck="false">vite.config.ts</code> <code spellcheck="false">package.json</code> <code spellcheck="false">firebase.json</code> 파일을 다음과 같이 수정합니다.</p><pre spellcheck="false"><code>// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
});</code></pre><pre spellcheck="false"><code>// firebase.json

{
  "functions": [
    {
      "runtime": "nodejs20",
      "source": "./dist/server",
      "codebase": "default"
    }
  ],
  "hosting": {
    "public": "dist/client",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "render"
      }
    ]
  }
}</code></pre><pre spellcheck="false"><code>// package.json

{
// ...생략
  "main": "dist/server/index.server.js",
  "scripts": {
    "dev": "vite",
    "build:client": "tsc &amp;&amp; vite build --outDir dist/client",
    "build:server": "tsc &amp;&amp; vite build --outDir dist/server --ssr index.server.ts &amp;&amp; cp ./package.json ./dist/server",
    "fb:serve": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase serve",
    "fb:deploy": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase deploy"
  }
}</code></pre><p>※ <code spellcheck="false">package.json</code> 파일 중 <code spellcheck="false">scripts</code> 구문에 빌드 후 <code spellcheck="false">index.html</code> 파일을 삭제하는 부분이 있습니다. <code spellcheck="false">index.html</code> 파일을 삭제하는 이유는 Firebase 호스팅의 경우 루트 경로에 HTML 파일이 있으면 <code spellcheck="false">firebase.json</code> 파일에서 설정한 <code spellcheck="false">rewrites</code> 구문이 무시되고 무조건 HTML 파일을 읽게 됩니다. 우리는 SSR이 적용된 프로젝트를 Firebase에 배포하는 것이 목적이므로, 호스팅 루트 경로에 있는 HTML 파일은 삭제해주어야 합니다.</p><h4>5. 배포</h4><p>이제 모든 과정이 끝났습니다. 콘솔에 <code spellcheck="false">yarn fb:serve</code>를 입력하고 개발 서버를 실행하면 SSR이 적용된 페이지를 볼 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668245260" alt="until-1174"><p>로컬 환경에서 SSR이 적용된 것을 확인했으면 터미널에서 <code spellcheck="false">yarn fb:deploy</code>를 입력합니다. 배포된 사이트에 접속하면 SSR이 적용된 페이지를 확인 할 수 있습니다.</p><p>배포된 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="http://react-ts-with-ssr.web.app">react-ts-with-ssr.web.app</a> 에서 확인 할 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668252177" alt="until-1175"><h2>마무리</h2><p>앞으로 Emotion JS를 사용해 SSR 환경에서 스타일을 주입하거나, react-helmet-async 라이브러리를 사용해 SEO 성능을 높이는 등의 활용이 가능합니다. 다음 글에서는 react-router-dom 라이브러리와 react-helmet-async 라이브러리를 활용해서 SEO 최적화하는 방법을 알아보겠습니다.</p><p>[ 다음글 ] <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/DdaMfA8nVvFun3RFsSX4"><u>React + Typescript 프로젝트에 SSR을 적용해 파이어베이스에 배포하기(2)</u></a></p>

지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.이 글은 이 곳 에서도 읽어 보실 수 있습니다.Google에서 제공하는 F

React + Typescript 프로젝트에 SSR을 적용해 파이어베이스에 배포하기(1)

<h2>1. 스프링 클라우드란?</h2><ul><li><p>스프링&nbsp;프레임워크&nbsp;기반의&nbsp;클라우드&nbsp;네이티브&nbsp;애플리케이션을&nbsp;개발하기&nbsp;위한&nbsp;프로젝트이다.</p></li></ul><blockquote><p>스프링 클라우드는&nbsp;분산&nbsp;시스템에서&nbsp;필요한&nbsp;다양한&nbsp;기능들을&nbsp;추상화하여&nbsp;제공하고&nbsp;있으며,&nbsp;<br>마이크로서비스&nbsp;아키텍처를&nbsp;구현할&nbsp;때&nbsp;유용하게&nbsp;사용된다.</p></blockquote><hr><h2>2. 핵심 기능 살펴보기</h2><ul><li><p><strong>서비스 디스커버리 (Service Discovery)</strong><br>마이크로서비스 환경에서 서비스를 검색하고 호출하기 위한 기능.스프링&nbsp;클라우드는&nbsp;Netflix&nbsp;OSS의&nbsp;Eureka,&nbsp;Apache&nbsp;ZooKeeper,&nbsp;Consul&nbsp;등&nbsp;다양한&nbsp;서비스&nbsp;디스커버리&nbsp;툴과&nbsp;통합되어&nbsp;있다.</p><p><br></p></li><li><p><strong>API 게이트웨이 (API Gateway)</strong><br>여러 개의 마이크로서비스에서 제공하는 API를 단일 진입점으로 노출시켜 주는 역할을 한다.<br>스프링 클라우드는 Netflix OSS의 Zuul, Spring Cloud Gateway 등 다양한 API 게이트웨이를 제공한다.<br><br></p></li><li><p><strong>분산 설정 (Distributed Configuration)</strong><br>마이크로서비스에서 필요한 설정 정보를 중앙에서 관리하고, 변경사항을 런타임 중에 적용할 수 있는 기능. 스프링&nbsp;클라우드는&nbsp;분산&nbsp;환경에서의&nbsp;설정&nbsp;관리를&nbsp;위한&nbsp;Spring&nbsp;Cloud&nbsp;Config를&nbsp;제공한다.<br><br></p></li><li><p><strong>분산 추적 (Distributed Tracing)</strong><br>분산 시스템에서의 트랜잭션 추적을 위한 기능.<br>스프링&nbsp;클라우드는&nbsp;분산&nbsp;추적을&nbsp;위한&nbsp;Spring&nbsp;Cloud&nbsp;Sleuth와&nbsp;Zipkin을&nbsp;제공한다.<br><br></p></li><li><p><strong>로드 밸런싱 (Load Balancing)</strong><br>여러 개의 인스턴스에서 제공되는 서비스를 균등하게 분산시켜 주는 기능.<br>스프링&nbsp;클라우드는&nbsp;Ribbon을&nbsp;사용한&nbsp;로드&nbsp;밸런싱을&nbsp;제공한다.<br><br></p></li><li><p><strong>회로&nbsp;차단기 (Circuit&nbsp;Breaker)</strong>마이크로서비스에서&nbsp;일시적으로&nbsp;문제가&nbsp;발생하여&nbsp;서비스가&nbsp;다운될&nbsp;때,&nbsp;다운된&nbsp;서비스에&nbsp;대한&nbsp;요청을&nbsp;차단하고&nbsp;다른&nbsp;대체&nbsp;서비스를&nbsp;호출하는&nbsp;기능.<br>스프링&nbsp;클라우드는&nbsp;Netflix&nbsp;OSS의&nbsp;Hystrix를&nbsp;사용한&nbsp;회로&nbsp;차단기를&nbsp;제공한다.</p></li></ul><blockquote><p>위와 같은 기능을 제공하는, 마이크로서비스 아키텍처에서 필수적인 Spring Cloud는 분산 시스템을 구축하고 운영하기 위한 일련의 프레임워크와 라이브러리를 제공하는 오픈 소스 프로젝트이다. <br>여러 마이크로서비스를 각각의 독립적인 애플리케이션으로 개발하고, 이러한 애플리케이션들을 효과적으로 관리하고 운영하기 위한 여러 가지 기능을 제공한다.</p><p>Spring&nbsp;Cloud는&nbsp;Netflix&nbsp;OSS&nbsp;프로젝트에서&nbsp;시작한&nbsp;것으로,&nbsp;Eureka,&nbsp;Ribbon,&nbsp;Hystrix,&nbsp;Zuul&nbsp;등&nbsp;다양한&nbsp;서비스를&nbsp;포함하고&nbsp;있다.<br>이러한&nbsp;Spring&nbsp;Cloud의&nbsp;기능들은&nbsp;분산&nbsp;시스템에서&nbsp;필요한&nbsp;기능들을&nbsp;효과적으로&nbsp;제공하며,&nbsp;마이크로서비스&nbsp;아키텍처의&nbsp;개발&nbsp;및&nbsp;운영을&nbsp;더욱&nbsp;쉽고&nbsp;편리하게&nbsp;만든다.</p><p>또한, Spring Boot와 밀접하게 연관되어 있어서, Spring Boot를 기반으로 하는 애플리케이션에서 Spring Cloud 기능을 쉽게 활용할 수 있다.</p></blockquote><hr><p>더 이해하기 쉽게 설명하자면, 아래 그림과 함께 살펴보자.</p><img src="https://image.until.blog/jeonbw06/article/1723097937985" alt="until-1197"><blockquote><p><strong>Spring Cloud Config</strong>는 중앙 집중식으로 애플리케이션의 설정 정보를 관리할 수 있도록 해주는 프레임워크이다. <br>이를 통해, 애플리케이션의 설정 정보를 손쉽게 수정하고 배포할 수 있다.<br>Config 서버는 Git, Subversion, Vault 등 다양한 백엔드를 지원하며,<br>애플리케이션의 환경마다 다른 설정 정보를 저장하고 관리할 수 있다.</p><p><strong>Spring&nbsp;Cloud&nbsp;Gateway</strong>는 API 게이트웨이 역할을 한다.<br>API 게이트웨이는 클라이언트의 요청을 받아서 애플리케이션으로 전달하고,<br>애플리케이션의 응답을 클라이언트에게 반환한다.<br>Gateway를 사용하면, 여러 개의 서비스를 하나의 엔드포인트로 노출하거나, 요청의 라우팅, 필터링, 트래픽 제어 등을 수행할 수 있다. Gateway는 이를 위해 다양한 라우팅 방식을 제공한다.</p><p><strong>Spring Cloud Discovery</strong>는 서비스 디스커버리 역할을 한다.<br>서비스 디스커버리란, 분산 시스템에서 서비스 인스턴스의 위치와 상태를 검색하고 사용할 수 있는 기능을 의미한다.<br>Discovery를 사용하면, 서비스 인스턴스의 위치와 상태를 추적하고, 클라이언트가 서비스 인스턴스를 검색하고 사용할 수 있다.<br>이를 위해 Discovery 클라이언트는 Eureka, Consul, Zookeeper 등 다양한 백엔드를 지원하며, 서비스 인스턴스의 상태를 추적하고, 이를 Config 서버에 등록하여 동적으로 구성 정보를 업데이트할 수 있다.</p></blockquote><hr><p>이들 프레임워크를 함께 사용하면,<br>Config 서버에서 구성 정보를 가져와서 Gateway를 구성하고, Discovery를 사용하여 서비스 인스턴스를 검색하여 Gateway에 등록할 수 있다.<br>이를 통해, 여러 개의 서비스 인스턴스를 투명하게 제공하고, 높은 가용성과 확장성을 보장할 수 있다.</p><p>예를 들어, Config 서버에서 포트 정보를 가져와서 Gateway의 라우팅 규칙을 동적으로 업데이트하거나,<br>Discovery를 사용하여 서비스 인스턴스의 상태를 추적하여 Gateway의 로드밸런싱 규칙을 동적으로 업데이트할 수 있다.</p><hr><p><strong>관련 Doc.</strong><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/projects/spring-cloud">https://spring.io/projects/spring-cloud</a><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/spring-cloud">https://github.com/spring-cloud</a></p>