진정한 엔트리 레벨 출력

기술 기사 안 쓴 지 오래된 것 같은데.
React 및 Redux, Type Script를 사용하여 현장에서 개발
그 중에서도 JavaScript의 기초가 부족하다고 느낄 때가 있습니다.
나는 기술서의 각 장을 윤독하는 형식으로 출력하고 싶다.
첫 번째 출력입니다.
1장과 3장의 마음에 드는 부분을 써라.

브라우저 dev 도구 사용 방법

프론트 데스크톱의 개발을 진행하면 반드시 브라우저의 개발 도구의 보살핌을 받을 것이라고 나는 생각한다.
이 사용법을 모르면 힘들기 때문에 우선적으로 공부하는 것이 좋습니다.
※ 난 처음엔 힘들었어.웃다 웃다
크롬이면 Cmd + Option + i 나옵니다.
↓ 이런 느낌.

자주 사용하는 항목과 모르는 항목을 열거하다.

요소 태그

이 탭에는 열려 있는 HTML 및 CSS 요소가 표시됩니다.
주로 판면 디자인을 조정할 때 사용하는데 저는 다음과 같은 목적을 위해 자주 사용합니다.

이 CSS가 왜 작동하지 않는지

블록 원소와 내연 원소 중 어느 것이 좋아요??

Form과 input 요소의name,value는 무엇입니까?

또한 CSS를 변경할 수도 있습니다.この要素を変えたらどうなるんだろう?? 시타에 사용합니다.

콘솔 탭

원본 코드에 설치된 콘솔입니다.로그의 디버깅 목적과 오류 정보 확인에 많이 사용됩니다.
아마 가장 많이 쓰는 라벨일 거예요.
엔지니어가 되기 전에는 후단을 위주로 공부했기 때문에 프론트 데스크톱의 디버깅 출력을 이 조종대에서 확인할 수 있다는 것을 알고 놀랐다.웃다 웃다

네트워크 레이블

백엔드에 대한 API 요청 및 응답이 올바른지 확인합니다.

400 오류 또는 500 오류 확인

클라이언트 오류인지 서버 오류인지 확인하고 싶어요

페이로드

요청이 올바른지 여부

응답

요청이 정확한 응답 주체로 되돌아왔는지 여부

소스 레이블

JavaScript의 디버그 탭인 것 같은데 잘 모르겠습니다.
하지만 지금은 주로 베일과 리액트 등의 프레임워크를 활용해 개발하고 있는데, 사용하기가 어려우면 한번 시도해보세요??이런 인상.
이 dev 도구에서는 React이나 Vue 코드에서 원시 자바스크립트로 변환되어 표시되기 때문에 머릿속에서 React나 Vue→원시 자바스크립트로 변환하여 이해해야 하기 때문에 원본 코드에서 콘솔을 사용해야 합니다.로그를 넣는 게 빨라서??생각했어.

연산자

리액트를 사용한 기반 출력이기 때문에 자세히 본 부분을 다시 출력합니다.

기간을 나누어 대입하다.

React에서는 props를 통해 구성 요소 간에 가치를 전달하는 경우가 많기 때문에 이 방법은 흔하다.
간단하게 말하면 배열과 대상에 저장된 값이 간단해 보이지 않을까요?
코드를 보여드리면 이해하기 쉬워요.

//配列の場合
let date:[] = [1,2,3,4,5]
let [num1,num2,num3,num4,num5] = date[]
console.log(num1)  //1

//オブジェクトの場合
let profile = {name: "taro", age: 25, gender: "men"}
let {name,age} = profile
console.log(name)  //"taro"

Reactで複数propsを貰う際は、
{a,b,c,d,e} = props
みたいな感じで使うことが多いです。