🔥 今日一日は?

アルゴリズム#アルゴリズム#
学習グループのメンバーたちは土曜日のトスコードテストに参加し、体験することにした.まだ勉強を始めていないので、あまり期待していませんが、機会があれば参加できます.
1日に3つの問題が...これも疲れてるけど我慢して続けなきゃ…毎日最も難しい問題を以下の解答に残して復習しなければならない.

自己紹介ページの作成
昨日作業したプロジェクトの一部ページが作成されました.基本的なレイアウトしか残っておらず、修正が必要な部分が残っています.最初はプロジェクトページプレゼンテーションをgifに変換しようと思っていたのですが、録画したビデオをgifに変換して容量が大きくなったので、そのままビデオファイルを使って実現することにしました.
マウスはビデオにぶら下がってビデオを再生することができ、マウスはビデオの外にぶら下がって再生を停止することができます.
明日私はwho pageを構想して、できるだけ早く履歴書を書いて、機会があれば申し込みの準備をします.

TIL : CSR vs SSR

今日のレッスン🧑‍💻

サーバ側レンダリング(開発者が熟知すべき概念整理)
https://youtu.be/iZ9csAfU5Os(ドリームコードby Elly)🧚‍♀️)
🧭 Web履歴から

1990年代初め=>主にStatic Siteを使用していました(他のリンクをクリックするとページ全体が再ロードされます)=>点滅

1996年=><iframe>(一部更新可能)

1998年=>XMLHttpRequest=>必要なデータは部分的にしか受信できません(JavaScriptを使用して動的に)

2005年Ajax=>SPA(単一ページアプリケーション)=>必要なデータを取得し、ページを一部更新します.=>ユーザーのパソコンの規格が向上するにつれて、大量のパソコンも迅速に処理することができます.
その後現在よく使われているAngular React Vee成長する

=>上記の3つのライブラリ、フレームワークを使用して作成されたWebページをクライアント側レンダリング(CSR)と呼びます.
🌞 CSR(Client Side Rendering)
CSRの欠点は、html、jsなどのサーバからのファイルを受信するのに時間がかかるため、トップページの表示が遅いことです.
SEO(Search Engine Optimization)はよくありません.SEO => 검색엔진 최적화SEOはhtml内部のコードに基づいて実現され、CSRはhtmlが空です.グーグルは改善したと言っていますが、seoはあまりよくありません.

=>TTVとTTIは同じです.
🌝 SSR(Server Side Rendering)
SSR(Server Side Rendering)の最初のロード速度は速い.また、すべての内容がhtmlドキュメントに含まれており、SEOにも優れています.
でも1990年初頭のようにキラキラ話題があるのであまり良くないUXを体験できます.また、サーバはオーバーロードしやすい.△ユーザーが多ければ多いほど、クリック数が大きくなり、動的に生成するhtmlが多くなります.
最初の画面はロード速度が速いという利点があるが、データを動的に処理するJSは受信速度が相対的に遅いため、ページをクリックしても反応しない可能性がある.

=>TTV、TTIスペースが表示されます.(長…)
🔥 の最後の部分

TTV(Time To View):ユーザーがWebページを表示できる時点.

TTI(Time To Interact):ユーザがウェブページ上で対話できる時点.

=>TTV、TTIとサイトの違いを減らす方法を考慮すべき
❤️ SSG(Static Site Generation)

React+Gatsby:応答生成されたWebをhtmlとして静的に作成し、サーバに配布する.(JSファイルも持っているので静的ページとは思えません.)

React + Next.js

(ドリームコードby Elly)🧚‍♀️ : いつもたくさん助けてくれてありがとうElly!!今日もありがとうございました.

🤬 アルゴリズムを解く

けんさきょり

題:https://programmers.co.kr/learn/courses/30/lessons/813022

function solution(places) {
    let answer = [];

    for (let i = 0; i < places.length; i++) {
        answer.push(keep_dist(places[i]));
    }

    return answer;
}

// 거리두기 확인
function keep_dist(place) {
    place = place.map(v => v.split(''));

    for (let row = 0; row < 5; row++) {
        for (let col = 0; col < 5; col++) {

            if (place[row][col] === 'P') {
                // 가로 한칸 체크
                if (col < 4 && place[row][col + 1] === 'P') {
                    return 0;                    
                }
                // 가로 두칸 체크
                if (col < 3 && place[row][col + 2] === 'P' && place[row][col + 1] === 'O') {
                    return 0;
                }

                // 세로 한칸 체크
                if (row < 4 && place[row + 1][col] === 'P') {
                    return 0;                  
                }
                // 세로 두칸 체크
                if (row < 3 && place[row + 2][col] === 'P' && place[row + 1][col] === 'O') {
                    return 0;
                }

                // 아래 왼쪽 대각
                if (row < 4 && place[row + 1][col - 1] === 'P') {
                    if (place[row + 1][col] === 'O' || place[row][col - 1] === 'O') {
                        return 0;
                    }
                }
                //아래 오른쪽 대각
                if (row < 4 && col < 4 && place[row + 1][col + 1] === 'P') {
                    if (place[row + 1][col] === 'O' || place[row][col + 1] === 'O') {
                        return 0;
                    }
                }
            } 
        }
    }

    return 1;
}

最初は問題説明にマンハッタン通りという言葉が出ていましたが、その時から怖くて問題を解いたようです.
△レポートを見て、コードを理解してみました.🤮
いずれの場合もif文を区切ることでコードを記述しているようです.