JavaScript Refresher

udemy React 완벽 가이드

JavaScript Refresher

웹사이트에 JavaScript 추가하기

  1. <script> tags

  2. <script src=''> import/export

    1. type = "module" 로 설정되어 있어야 함

    2. 코드를 쪼개서 관리하기 위함

React의 빌드 프로세스(가 필요한 이유)

  • React는 JSX 문법을 사용하는데 이는 브라우저에서 실행이 불가능함

  • 따라서 브라우저에 전달하기 전에 코드가 수정될 필요가 있음

  • 더 자세히 설명하면 react-scripts 라이브러리가 브라우저에 전달될 HTML파일에 <script> 태그를 추가해서 간소화되고 최적화된 JS파일을 import함

  • CRA, Vite를 사용하면 빌드 프로세스가 탑재되어 있어 별도의 설정이 필요없음

JavaScript Basic

변수와 상수

  • 변수 : let

    • var의 문제점 : 블록 스코프가 없으며(함수 수준의 스코프) 중복 선언을 허용함 또한 함수가 시작되는 시점(스크립트가 시작되는 시점)에 처리됨

  • 상수 : const 재할당X, 의도가 명확, 읽기전용

함수

  • function 키워드

  • () => 화살표 함수

    • 익명함수를 정의할 때

    • 매개변수가 1개일 때만 ()생략가능

    • 반환문(return)만 있는 경우 return과 {}생략가능

객체와 클래스

  • 내부에서 메소드(함수) 생성 가능

  • 본인의 프로퍼티에 접근 시 this 키워드 사용

  • constructor() 생성자 함수

배열

  • [value1, value2, ...]

  • 특별한 유형의 객체이자 값 type

  • array.[method name] : 내장 유틸리티 메소드

    • ex) findIndex map(새 배열을 반환)

Destructuring

  • 배열과 객체의 분해

//array
const [firstName, lastName] = ["Yoonjung", "Kim"]

//object
const {name: userName, age} = {
  name: "Yoonjung",
  age: 29
};

  • 함수 매개변수 목록의 분해

//하나의 매개변수(객체)만 받는 것
function storeOrder({id, currency}) {
  ...
}

Spread Operator

  • ...

//array
const mergedArray = [...array1, ...array2]

//object
const extendedObject = {
  newKey: true,
  ...oldObject
}

Array Methods

PreviousJavaScriptNext2022

Last updated