Day 2
16770 ワード
はいれつ
リストされた複数のデータをグループ化して保存
かっこで囲み、区切り、オブジェクトを「」で区切る
整列length機能の使用
配列にどれだけのデータがあるかを決定できます
重要!
配列内のデータにはインデックス番号があり、最初は0で、1ではありません.
lengthの場合はindex値が1未満であることに注意してください
["1","2","3"][1]
配列の追加、削除、クエリー機能
indexOfに値がある場合は、そのデータのインデックス値を返します.
-1がなければ
includeは存在するかどうかのみをチェック=Bullinタイプと呼ばれ、真と偽のみをチェック->値がtrue/false
応用問題
let fruits = ["사과", "바나나", "파인애플"]
//방법1
fruits =[]; //빈배열로추가
fruits.push("사과")
fruits.push("바나나")
fruits.push("파인애플")
//방법2
let fruits = ["사과", "바나나", "파인애플"]
fruits.length //3이나옴
fruits[3-1] // 파인애플이나옴, 총데이터 값(length)의 -1이 마지막 즉 길이는 3이지만 마지막 값의 인덱스 번호는 2
const lastFruits = fruits[fruits.length - 1] //lastFruits에는 파인애플이 담김
let newFruits = []
newFruits.push(lastFruits)
//index로도 가능
newFruits[0] = lastFruits
//index보다 pusH를 쓰는 이유는 index값이 바뀔수도 있기 떄문オブジェクト
データ分類ストレージ
かっこで始まると閉じる
keyとvalueを使用してデータを格納し、keyはデータの名前(ここではname)、valueはデータの値(ここでは元に戻す)を表します.
オブジェクトのキー値を使用してクエリーできます
Obj.name //-> "철수 "
Obj.age //-> 12
Obj.school //-> {"name" : "다람쥐 초등학교"}
Obj.school.name //-> "다람쥐 초등학교"
//객체 안의 객체로도 접근이 가능함 key.key
Obj.pet = "dog"
//pet이라는 key를 가진 dog를 추가 가능 만약에 다시 Obj.pet ="cat"이라고 하면 dog가 cat으로 바뀜
//삭제
delete Obj.age
//기존에 있던 age가 가지고 있던 데이터가 삭제됨
delete.Obj.school.name //이런식으로 객체 안의 객체도 삭제가능, 빈 값{}이 남게됨
let student = {}
let studnet = {"name" : "철수"}let student = {}
student.name = "철수"
const student = {
name: "철수",
age: 8,
};
const school = {
name: "다람쥐초등학교",
teacher: "다람이",
}
student.school = school //통채로 넣어주면 됨.
.zipで受信できますが、コマンドで受信できます.
urlをコピーし、vsコード端末を開くと
!! .私のGitフォルダに入れないでください
mkdirの新しいフォルダの作成
cdを新しいフォルダに移動
gitクローンアドレス
git remote-vで接続されていることを確認
ただし糸devでは運転できません
Node modulesがないので、いつでもお届けできます
同時にインストールする場合は、インストールするフォルダに移動します(package.jsonを確認してください)
npm install
node modules、必要なファイルを一度に追加して完了!
ポートが使用されている場合:ポートを削除/別のポートを開く
next dev-p 3001:301番ポートを開く
反応2強
どうして反応するの?
ライブラリ:以前に作成したアクション(タグの作成、画像の転送など)
フレーム:ライブラリの読み込みと書き込みに使用するツール
->最近両者を区別するのが難しい
フレーム3の本体は、
Vu、Anguler、React
最近Reactは大勢!Facebook, instagram..
npmトレンドでは、インストール数も圧倒的
もし間違えたら、私たちはまず反応します.
△貧富は12月末の黙祷休日だそうですが…韓国ではなさそうですね.
React.jsはWeb開発、React-Nativeアプリケーションの開発に使用され、60-80%(努力すれば)、クロスプラットフォームと呼ばれ、安、IOSでもアップロードできます!
もちろん、性能を求めるゲームは難しいですが、ショッピングモールやサイトでは
React+ElectonはPCアプリです
->使わない理由はない!コメントもたくさん!職場も多い
ALL IN ONE
構成部品
再利用のためにUIまたは機能を部品化
ページではなくコンポーネントをロードする新しい方法
再作成する必要はありません
部品の大きさは自分で指定できます
ctrl+c/vとの違いは?
貼り付け後は1つずつ修正する必要がありますが
オリジナルを変更するだけで、構成部品は同時に変更されます!
こんな感じで
卵は?かもしれない
絵は同じだが,粒はいくらでも取り替えることができる
-->UI+データの再使用(必要に応じて)
export default function BoardNewPage(){}
実は大きな素子です.
componentを作成する2つの方法
クラスと関数
関数の方が簡単なので、関数、矢印の方が簡単!!
量がどれだけ減ったか見てみましょう.
(もちろん、クラスタイプを使用する企業ではクラスタイプを使用する必要があるため、変更を試みる必要があります)
なぜ最初はClass型だったのでしょうか?
関数型はもともと関数だった
変数または定数またはデータをクラスに格納して保持します.
関数タイプが初期化されました
しかし、保存できる機能を作りましょう!!React-Hooksの関数構成部品
関数にデータを保持する機能を提供します.
state
構成部品で使用される変数
let age = 8
const = 13
(あってもなくてもよい差異)
ではstateは?
let age = 8
age = 13 const[age,setAge] = useState(8)
//age에 초기값이 들어가고
setAge(13 // 값이 바뀜もっと簡単
こんにちは、ボタンをstateに変更します
export default function HelloLetPage(){
function zzz(){
document.getElementById("qqq").innerText = "반갑습니다"
}
//위에는 자바스크립트, 아래는 html영역
//JSX에서는 자바스크립트를 쓸 때는 onClick={함수이름}으로 불러옴
//나머지는html처럼 "그냥문자열"
return(
<>
<div id= "qqq">안녕하세요</div>
<button onClick={zzz}>버튼클릭!!</button>
</>
)
}import {useState} from 'react'
//리액트로부터 useState를 가져와야함
//아래 {}로 감싸야 자바스크립트인지를 이해함
//초기값으로 안녕하세요를 qqq로 저장
//화면 바꾸는 코드를 따로 안만들어도됨, 데이터만 바꾸면 바뀜
export default function HelloStatePage(){
const [qqq, setQqq] = useState("안녕하세요")
function zzz(){
setQqq("반갑습니다")
}
return(
<>
<div>{qqq}</div>
<button onClick={zzz}>버튼클릭!!</button>
</>
)
}export default function CounterLetPage(){
// qqq란 아이디의 텍스트를 가져와서 숫자로 바꾸고 +1을함, bbb로 정의
// 그리고나서 qqq를 bbb로 변경
function zzz(){
const bbb = Number(document.getElementById("qqq").innerText) + 1
document.getElementById("qqq").innerText = bbb
}
return(
<>
<div id= "qqq">0</div>
<button onClick={zzz}>카운트증가!!</button>
</>
)
}import {useState} from 'react'
//setQqq에다가 기존에 있던qqq+1 바로 처리 완료
export default function CounterStatePage(){
const [qqq, setQqq] = useState(0)
function zzz(){
setQqq(Number(qqq)+1)
}
return(
<>
<div>{qqq}</div>
<button onClick={zzz}>카운트증가!!</button>
</>
)
}関数はつながっている
onchangeを使用して会員入庫を作成する
import {useState} from 'react'
//onChange={}로 값을 저장해서 나중에 백엔드로 보낼 수 있음
//on으로 시작하는 것들은 시작할 때 function 안에자동으로 event라는 것이 생성됨
//event.target 을하게 되면 바로 <input type="text" onChange={aaa}/>를 가져옴
export default function SignupStatePage(){
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
function aaa(event){
setEmail(event.target.value)
}
function bbb(event){
setPassword(event.target.value)
}
function ccc(){
console.log('email:' ,email)
console.log('password:' ,password)
if(email.includes("@") === false){
alert("이메일에 @가 없습니다. 잘못된 이메일입니다!")
}
}
return (
<div>
이메일입력:<input type="text" onChange={aaa}/> <br/>
비밀번호입력: <input type="password" onChange={bbb}/><br/>
<button onClick={ccc}>회원가입</button>
</div>
)
}
Stateを使用した認証コードの生成
6ビットの認証コード「00000」と「認証コードの送信」ボタンを作成し、ボタンをクリックしたときに認証コードを作成し、6ビットの認証コードを変更してください.
1-1)letとdocument.getElementbyId()を使用してください.
export default function authtoken(){
function zzz(){
const bbb = String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
document.getElementById("qqq").innerText = bbb
}
return(
<>
<div id= "qqq">000000</div>
<button onClick={zzz}>인증번호 전송</button>
</>
)
}
stateを使用してください.
import {useState} from 'react'
export default function authToken(){
const [authToken, setAuthToken] = useState("000000")
function zzz(){
setAuthToken(String(Math.floor(Math.random() * 1000000)).padStart(6, "0"))
}
return(
<>
<div>{authToken}</div>
<button onClick={zzz}>인증번호 전송</button>
</>
)
}小数点以下で切り捨てる=Math.floor
6桁で塗りつぶし、0の場合は=を0に置き換えます.padStart(6, "0")
前のビットが0の場合は省略し、=Stringを文字で置き換える
Reference
この問題について(Day 2), 我々は、より多くの情報をここで見つけました https://velog.io/@john_with_smile/Day-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol