JavaScript Refresher

<script> tags
<script src=''> import/export
1. type = "module" 로 설정되어 있어야 함
2. 코드를 쪼개서 관리하기 위함

React는 JSX 문법을 사용하는데 이는 브라우저에서 실행이 불가능함
따라서 브라우저에 전달하기 전에 코드가 수정될 필요가 있음
더 자세히 설명하면 react-scripts 라이브러리가 브라우저에 전달될 HTML파일에 <script> 태그를 추가해서 간소화되고 최적화된 JS파일을 import함
CRA, Vite를 사용하면 빌드 프로세스가 탑재되어 있어 별도의 설정이 필요없음

변수 : let
- var의 문제점 : 블록 스코프가 없으며(함수 수준의 스코프) 중복 선언을 허용함 또한 함수가 시작되는 시점(스크립트가 시작되는 시점)에 처리됨
상수 : const 재할당X, 의도가 명확, 읽기전용

function 키워드
() => 화살표 함수
- 익명함수를 정의할 때
- 매개변수가 1개일 때만 ()생략가능
- 반환문(return)만 있는 경우 return과 {}생략가능

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

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

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

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

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

Last updated 1 year ago

<script> tags
<script src=''> import/export
1. type = "module" 로 설정되어 있어야 함
2. 코드를 쪼개서 관리하기 위함

React는 JSX 문법을 사용하는데 이는 브라우저에서 실행이 불가능함
따라서 브라우저에 전달하기 전에 코드가 수정될 필요가 있음
더 자세히 설명하면 react-scripts 라이브러리가 브라우저에 전달될 HTML파일에 <script> 태그를 추가해서 간소화되고 최적화된 JS파일을 import함
CRA, Vite를 사용하면 빌드 프로세스가 탑재되어 있어 별도의 설정이 필요없음

변수 : let
- var의 문제점 : 블록 스코프가 없으며(함수 수준의 스코프) 중복 선언을 허용함 또한 함수가 시작되는 시점(스크립트가 시작되는 시점)에 처리됨
상수 : const 재할당X, 의도가 명확, 읽기전용

function 키워드
() => 화살표 함수
- 익명함수를 정의할 때
- 매개변수가 1개일 때만 ()생략가능
- 반환문(return)만 있는 경우 return과 {}생략가능

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

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

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

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

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

Last updated 1 year ago