09.20

航海反応1週間

HTML CSS Javascript>>は静的リソースと呼ばれます.
簡単に言えば、Webの操作方法は次のとおりです.
クライアントがサーバに要求し、サーバがクライアントに応答する

<div>안녕하세요</div>   요소(Elements)
<div></div>            태그(Tag)

ドキュメントオブジェクトモデル(DOM)ドキュメントオブジェクトモデル
DOMは、html単位ごとにオブジェクトとして扱われるモデルです.たとえば、divという名前のオブジェクトには、ツリー構造と呼ばれるテキストノード、サブノードなど、サブノードの値があります.DOMもツリー構造です.
CamelCase
名前を付けるときは、スペースではなくスペースが必要な場所に大文字を付けます.
ラクダのような名前だそうです.
かわいい
変数はlet、constとして宣言されます.
letは再割り当てできます.
しかしconstは再配分できません.>>変数ではなく定数
Scopeって何?
変数を宣言するときに使用できる変数の有効範囲をscopurと呼びます.
varは関数単位
let、constはブロック単位
{}カッコ内の内容をblockとして表します.

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	// 앗! c는 값이 변했죠? 
	// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
	// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
	console.log(a, b, c);
}

関数式:

    // 함수 이름은 생략해도 괜찮아요!
    let do_something = function [함수 이름]() { ... }

矢印関数>>関数式の略語!

  // 화살표 함수는 함수 표현식의 단축형입니다.
  // function까지 생력이 되었죠!
  let do_something = () => { ... }

Spread構文
オブジェクト内の要素をオブジェクトの外に配置する構文.
let array = [1, 2, 3, 4, 5];
... << 表計算ドキュメントの構文
[.array]新しい[]オブジェクトに要素を入れます.

さんこうえんざんし

ifゲートのショートカット形式!

let is = 5
let e = is === 5? 3: 4;

疑問符の前に条件が必要です.>>is=5なら
コロンの前が真の時の値、非コロンの前の値が偽の時の値、ここで真なので3を出力します.

Array内蔵関数

map

元のアレイを維持しながら変換を行い、新しいアレイを生成します.

filter

いくつかの条件を満たす項目のみを選択して新しい配列を作成しますが、要素自体は変更できません.

concat

組み合わせ配列に使用します.しかし、重複要因は解消されない.

ex) 
const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];
const pets = dogs.concat(cats);

console.log(pets) = ['검은 강아지', '노란 강아지', '흰 강아지', '검은 고양이', '복슬 고양이', '노란 고양이']

from

1.アレイまたは類似のアレイとして作成し、新しいアレイとして作成する場合のコピー
2.新規シナリオ作成時(初期化)
類似配列は何ですか?
[どんな値段で...]このような顔をしていますが、配列の内蔵関数は使用できません.DOM nodelistは類似の配列**

//배열화
	const my_name = 'hoon'
	const my_name_array = Array.from(my_name);
	my_name_array = ["h", "o", "o", "n"] 

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
	const text_array = Array.from('hello', (item, idx) => {return idx});
	console.log(text_array);


// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
	const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
	console.log(new_array);       

JSX

Javscript + XML
JSX構文を使用してreact要素を作成し、DOMでレンダリングしてビューを描画します.
ビューを描画する要素はJavaScriptファイルに入ります.
リアクターにはHTMLファイルが1つしかありません.

はんのうルール

ラベルは

を閉じる必要があります.

無条件返還1個elment

JSXからJavaScript値を取得するには、次の手順に従います.

classNameの代わりに!id

を内線としてスタイルサイクルを行い、スタイルはディックシャーナに渡さなければならない.{鍵:価値がある}

戻り時にif文が使用できないため、3つの演算子が使用されます.