Front-Endテクニカル面接の準備(追加中)

JS技術面接準備

ブラウザレンダーパス

(画像ソース:https://seopressor.com/blog/http-vs-https/)

Webブラウザでwww.naver.comを要求し、まずキャッシュにwww.naver.comが存在するかどうかを検索する
値が

キャッシュに存在する場合、接続され、値がない場合、hostsファイルにwww.naver.com情報が含まれているかどうかを検索する

.

hostsファイルにもない場合は、www.naver.com情報をローカルDNSに問い合わせる
DNSとは?
ドメイン名システム(Domain Name System)の略で、インターネット上でアクセスするドメインをアクセスする必要があるIPアドレスに変換するシステムです.

ローカルDNSに関する情報がない場合は、ROOT DNSの

に問い合わせる.

Root DNSに情報がない場合、com DNSの

を問い合わせる

com DNSに情報がない場合は、ローカルDNSにnaverがあります.com DNS情報

ローカルDNSはnaverです.com DNSクエリwww.naver.com

naver.com DNSは、www.naver.comドメインのIP情報

をローカルDNS上に提供する.

ユーザは、Webブラウザからwww.naver.com

に接続する.

HTTPとHTTPSの違い

(画像ソース:https://seopressor.com/blog/http-vs-https/)
HTTPはハイパーテキスト転送プロトコルの略です
ハイパーテキストは、ドキュメントとドキュメントをリンクする形式のドキュメントアーキテクチャです.
ハイパーテキストの最も主要なドキュメントフォーマットはHTMLです
つまり,HTMLを伝送するための通信規約がHTTPである.
アドレスウィンドウにURLを入力すると、「http://t」と書いてあるのは「このドメインのコンピュータと通信し、HTTPプロトコルを使用します」という意味です.
ではHTTPSとは何でしょうか.
HTTPSもHTTPのようなハイパーテキストプロトコル
この両者の違いはHTTP「S」に現れている
ここで「S」は「OverSecure Socket Layer」の略です
ここで重要なキーワードは『Secure』!
HTTPとは異なり,HTTPSプロトコルはセキュリティ機器を組み合わせた通信方式として容易に考えられる.
HTTPSプロトコルを使用してデータを転送すると、私たちが転送したデータ、相手が返してくれたデータなどが暗号化され、サードパーティはそれをブロックできません.

OOP特性

OOPは、オブジェクト向けプログラミング、すなわちオブジェクト向けプログラミングである
特徴は大体4種類あります
1.継承:親で定義された属性または機能を自動的に継承します.子で親で継承された属性または機能を個別に定義する必要はありません.=>コードの再利用性を増やす
2.多形性:同じ関数がある場合、その関数はパラメータによって異なる役割を果たす可能性がある
ex)グラフィックを作成するクラス(高さ、幅)=>矩形は幅x高さ、三角形は(幅x高さ)/2
3.パッケージ:関連する変数と関数を1つのクラスに結合し、関連する変数と関数を1つのクラスに結合し、外部に隠された内容を結合し、関連する凝集をよくし、他のモジュールとの結合度が低い
ex)自動販売機?=>number of itemsにアクセスすると困難=>非表示化
4、抽象化:抽出対象の共通のPropertyと方法の実現部分を除き、宣言部分のみ設計する

クラスオブジェクト向け言語クラスオブジェクト向け言語:クラスとオブジェクト

class person{
  name;
  age;
  speak();
}

簡単に言えば、Classとはフナ餅が作れるフレームのこと.

クラス自体はデータを含まず、テンプレートのみが

存在する.

「このクラスにはこれらのデータが含まれている可能性があります!」

クラスは定義されたクラスのみで、実際にはメモリに存在しません.

プロパティ(フィールド)、動作(メソッド)

を含む

は、方法のないデータのみを含む場合があり、データクラス

と呼ぶ.
Objectは上記のクラスを使用して実際のデータを作成します.

classを使用して大量の

を作成できます.

実際には、メモリにデータを入れると、オブジェクトはメモリに

入れられる.

フナ型に小豆を入れると小豆フナ餅(obj)、クリームを入れるとクリームフナ餅(obj)

サンプルコード

class Person {
  // constructor
  constructor(name, age){
    //fields
    this.name = name;
    this.age = age;
  }
  
  //methods
  speak(){
    console.log(`${this.name}: hello!`)
  }
}

// 새로운 Object 생성
const seunghye = new Person("seunghye", 25)
console.log(seunghye.name) //"seunghye"
console.log(seunghye.age) //25
seunghye.speak(); //"seunghye: hello!"

このように書くことができます

class User{
  constructor(firstName, lastName, age){
    this.firstNmae = firstName
    this.lastName= lastName
    this.age = age
  }
}

// 만약 실수로 나이를 -1로 지정한다면?
const user1 = new User("seunghye","Lee",-1)
console.log(user1.age) //-1

もし、ユーザーがうっかり年齢を-1と指定したらどうしますか?

class User{
  constructor(firstName, lastName, age){
    this.firstNmae = firstName
    this.lastName= lastName
    this.age = age
  }
  
  
  get age(){
    return this._age
  }
  
  // this.age로 설정을 하면 무한콜백에 걸리므로, 다른 이름을 사용해 주어야 함
 
  set age(value){
    if(value<0){
      throw Error("age can not be negative")
    }
    this._age = value;
  }
}

getキーで値を返します.
setキーで値を設定できます
ただしsetは設定値なのでvalueを取得する必要があります

DOMと仮想DOM

(ソース:https://ryublock.tistory.com/41)

DOM

HTMLファイルをブラウザに表示する場合は、Webドキュメントをブラウザが理解できる構造に整理してメモリに格納する必要があります.
ブラウザレンダリングエンジンは、すべての要素(Element)やアトリビュート(Attribute)などをそれぞれのオブジェクトとして作成し、DOMと呼ばれるツリー構造に整理します.
このウェブページの形式は静的であり,動的に変更するためにプログラミング言語はDOM APIを提供し,自己アクセスと修正を提供する.
要素の追加、変更、作成時にDOMを変更すると、Render Tree、Layout、Paintが生成されます.要素が大きく変化すると、パフォーマンスが低下します

Virtual DOM

上記の問題を解決するために、仮想DOMをローカルに作成し、ブラウザにRenderを要求する前に変更を要求します.

かんすうしきプログラミング

関数式プログラミングとは、成功したプログラミングのために、副作用を解消し、組合せ性を強調するプログラミングパターンである.

純関数

を作成

は組合せ性を強調し、モジュール化の程度を高める

.

エラーを低減する信頼性を向上させる

.

生産性向上

じゅんかんすう

同じパラメータを追加すると、常に同じ戻り値が返され、外部の影響を受けない関数が返されます.

function add(a,b){
  return a+b;
}

console.log(add(5,6)); // 11
console.log(add(6,7)); // 13

addという名前の関数に同じ値のパラメータa,bを加えると、どこから呼び出されても同じ戻り値が返されます.
では、純粋な関数ではなく、例を見てみましょう.

let c = 10
function add2(a,b){
  return a+b+c;
}

console.log(add(5,6)); // 21
console.log(add(6,7)); // 23

c = 20

console.log(add(5,6)); // 31
console.log(add(6,7)); // 33

add 2関数は,cという変数の値が変化すると,同じパラメータ値を加えても異なる結果値を生じる.
すなわち、純粋な関数が同じパラメータ値を受け取る場合、外部の影響を受けずに常に同じ戻り値を返さなければならない

JSX

JSXは、JavaScript+XMLを統合した既存のJavaScriptの拡張構文です
この2つを合わせると得られる結果は?
メモコードはJavaScript内部で作成できます

const element = <h1>안녕하세요</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

これは、上記のコードのようにJavaScriptに注釈コードを記述できることを意味します.

let vs var

varは変数を再宣言できます
変数を複数回宣言しても関係ないので、必要に応じて変数を使用できるメリットになります
しかし、同じ変数名を乱用する可能性が高くなり、エラーの確率が高くなります.
これに対してletは変数を再宣言することはできません
ただし、変数を再割り当てできます.
したがって,不正を防止するためにセキュリティコードを記述するにはletの使用を指すべきである.

Babel

簡単に言えば、Baelは最新のJavaScriptコードを以前の非常に簡単なJavaScriptコードに変換します.

MVC

モデル:データ

ビュー:

コントローラ:データを表示する関数

SQL vs NoSQL

SQLはStructured Query Klanguageの略です.
リレーショナル・データベース管理システムのデータを管理するために設計された特殊な目的のプログラミング言語である.
リレーショナル・データベースは通常RDBMS(MySQLなど)です.
SQLはRDBMSを設計するための言語です
NoSQLは、リレーショナル・データベースではなくNot Only SQLとして理解する必要があります.