[패스트캠퍼스:5주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/5

JavaScript Essentials 시작

 

 

ECMA스크립트 : 자바스크립트 표준화 기준

버전 1부터 현재까지 거의 매년 업데이트되고 있는데, 6버전 부터 크게 바뀌었다.

오래된 브라우저는 최신 표준화 코드를 지원하지 않는다.(예. Internet Explorer)

브라우저들도 ECMA 표준화가 업데이트되는 거에 따라 혹은 먼저 새로운 코드를 적용한다.

 

---

 

npm 복습겸 프로젝트 첫 기본 세팅

npm init -y

npm i parcel-bundler -D

package.json > "script" > "dev": "parcel index.html", "build": "parcel build index.html"

index.html 등 필요한 파일 추가

npm run dev

 

---

 

자바스크립트 시작하면서,

자바스크립트를 코딩할 때, 한 줄로 쓰면 가독성이 떨어지니 코드가 끝나면 줄 바꿈을 해준다.

;(세미콜론)은 코드가 끝났다고 알려주는 아이콘이지만

넣어주지 않아도 줄 바꿈만 잘하면 브라우저가 코드를 해석하는데 문제가 없다.

하지만 줄 바꿈을 하지 않고 코드를 작성하게 되는 경우는 반드시 끝나는 부분에 넣어줘야 한다.

 

 

다른 스크립트 파일에 함수 넘겨주기

export default function...

export default를 해주지 않으면 다른 파일에서 해당 함수를 가져올 수 없다.

또한, export default로는 해당 파일에서 딱 1개의 함수만 내보낼 수 있다.

함수를 2개 만들고, 둘 다 export default를 해 주면 에러가 뜬다!

 

 

다른 스크립트 파일에서 함수 가져오기

import 함수이름 정해주기 from 파일경로

반드시 함수를 가져오는 파일에 export default로 함수 내보내기를 하는 코드가 설정되어있어야 한다.

함수이름은 가져오는 파일에 선언된 함수명과 상관없이 내가 하고 싶은 이름을 설정해 주면 되지만

서로 관계가 있다는 걸 나타내기 위해 동일하게 하는 걸 추천한다.

 

실습에서 사용한 코드

typeof : 데이터 타입을 알 수 있다.

export default function 함수명() {} : 함수 파일 밖으로 내보내기

import '함수명' from '경로' : 함수 가져오기. 해당 js 파일에서 1개만 가져올 수 있다.

 

---

 

연산자에 대한 설명 시작

산술 연산자 (arithmetic operator)

간단한 수학산술이라고 생각하면 되겠다.

+(더하기), -(빼기), *(곱하기), /(나누기) 그리고 %(나머지) 연산자가 있는데

나머지 연산자에 경우 나눗셈을 하고 딱 떨어지지 않아서 남은 숫자를 반환한다.

우리가 아는 나눗셈은 소수점 자리까지 만들어 가면서 딱 떨어질 때까지 숫자를 나누지만

나머지 연산자는 그러지 않는다.

(예. 7 % 5 = 1 하고 2 남음)

 

 

할당 연산자 (assignment operator)

산술 연산과 할당을 동시에 한다.

 

 

비교 연산자 (comparison operator)

두 데이터의 값을 비교하는 연산자로 아래와 같이 사용할 수 있다.

수학 시간에 배운 내용과 일치하다고 볼 수 있다. 기호가 살짝 다르지만.

=== : 일치

!== : 불일치

<, > : 크다 작다

<=, >= : 크거나 같다, 작거나 같다

*!(느낌표) 기호는 부정을 의미한다.

 

 

논리 연산자 (logical operator)

그리고(and), 혹은(or), 부정(not) 연산자가 있고

그리고(and) 연산자 : &&. 앞뒤 값이 모두 '참'이어야 최종 값을 '참'으로 리턴한다.

혹은(or) 연산자 : ||. 앞뒤 값 중 1개만 '참'이어도 최종 값이 '참'이다.

부정(not) 연산자 : !. 본래 값을 반대로 바꾼다. (예. a(true 값을 갖고 있음) = !a. a는 false가 된다) 

 

삼항 연산자 (ternary operator)

간단한 if문을 짧게 만들어줄 수 있다.

변수 ? '참일 때 값' : '거짓일 때 값'

이렇게 변수가 참이면 : 기준으로 왼쪽 값이, 거짓이면 오른쪽 값이 반환된다.

 

---

 

if 조건문 (If statement)

if (조건)에서 '조건'이 참이면 {}(중괄호) 안에 코드가 동작하고,

거짓이면 다음 코드로 넘어가서 else if가 있는 경우, 조건을 확인하고,

거짓이면 다음으로 넘어가서 모두 거짓이면 else가 마지막으로 동작한다.

 

랜덤한 숫자를 반환하는 코드

실습에서 사용한 코드

Math.random() : 매번 0 ~ 1 사이에서 새로운 랜덤 숫자를 반환

Math.floor() : 내림 처리를 해서 소수점을 없앰

 

 

switch 조건문 (switch statement)

if 조건문을 더 자주 사용하지만, '조건'의 내용이 딱 떨어지는 경우 사용하기 좀 더 적합하다고 한다.

코드 가독성도 더 좋다.

if문과 달리 () 안에 조건을 넣는 게 아니고 변수를 넣는다.

(아래 이미지에서 b는 변수이다.)

 

case 조건:

참일 경우 동작하는 코드

break

반드시 break로 해당 case의 동작 코드 종료를 알려야 한다.

 

반복문 (For statement)

반복문에도 종류가 많은데 for문이 가장 기본(?)인 것 같다.

for (시작조건; 종료조건; 변화조건) {}

시작조건: 변수의 시작 값 (변수명을 i로 흔하게 사용한다)

종료조건 : 변수가 해당 조건에 맞는 순간 반복 종료

변화조건 : 시작 변수가 변화하는 조건

 

반복문 전체가 한 번 돌아가고, 종료조건 확인하고, 변화조건 확인해서 변화시키고

코드가 또 전체 돌고, 다시 종료조건, 변화조건 확인하고를

종료될 때까지 반복한다.

 

변수 유효범위 (Variable Scope)

변수 선언에는 var, let, const가 있는데,

선언된 변수가 읽힐 수 있는 범위가 다르다.

let, const는 선언된 {}(중괄호) 내부에서만 동작 ('블록스코프'라고 부름)

var : 함수 내부 어디서든 사용 가능 ('함수스코프'라고 부름)

*var에 경우 다른 동작을 위한 코드의 변수를 덮어쓰는 경우도 있고,

계속 남아있어서 용량도 차지해서 사용을 추천하지 않는다.

블록스코프 예시

함수스코프 예시

 

형 변환 (Type conversion)

'참', '거짓'이 아니더라도, '참'과 동일한 값을 갖은 데이터 및 '거짓'과 동일한 값을 갖은 데이터가 있다.

 

'참' 같은 값(Truthy) : true, {}, [], 1, 2, 'false', -12, '3.14'... (많음)

'거짓' 같은 값(Falsy) : false, ' ', null, undefinied, 0, -0, NaN(Not a Number)

*NaN 예시. 1 + undefined

 

의도치 않게 원하지 않은 조건의 동작하는 경우가 생길 수 있으니 기억해 두는 게 좋고,

Falsy의 경우가 더 적으니 Falsy를 기억해 두면 좋다.