Javascript 부시기 - 1 | 프밍 스터디

웹 개발 실전 프로젝트 스터디 - 1주차

💡

Javascript 에 대해 알아보기

141. JavaScript가 놀라운 이유

HTML, CSS, JavaScript는 브라우저가 이해할 수 있는 3가지 main tool. (+WASM)

google.com/search?q=chickens → Google 서버로 HTTP request 전달 → 검색어 닭을 분석 → 닭에 대한 검색 결과 생성 → 브라우저로 전달 및 렌더링

예제들 살펴보기 (UI효과, 실시간 업데이트, 실시간 채팅, ...)

Airplanes.

https://codepen.io/ste-vg/details/GRooLza

142. 기본 요소 및 콘솔

JavaScript와 HTML, CSS, 브라우저, 유저 인터랙션 간의 상관관계를 이해해야 한다.

Chrome 콘솔 창 사용

REPL(Read, Evaluate, Print and Loop): 읽고 해석하고 반환하고 반복하는 과정

원시 타입 (primitive types)

내장된 기본 타입

fundamental unit(5): Number, String, Boolean, Null, Undefined

(+2) Symbol, BigInt

143. JavaScript 숫자

Numbers

JavaScript에서 숫자는 한 가지 타입 (int, float 구분 X)

숫자는 메모리에서 특정한 양의 공간을 갖게 된다.

JavaScript는 정확도가 다소 떨어짐 (예) 길이가 긴 소수의 경우)

연산 순서 PEMDAS 를 따른다. (parentheses, exponent, multiplication, division, addition, subtraction) 괄호 → 지수 → 곱하기 → 나누기 → 더하기 → 빼기

Operator precedence - JavaScript | MDN

Consider an expression describable by the representation below. Note that both OP1 and OP2 are fill-in-the-blanks for OPerators. If OP1 and OP2 have different precedence levels (see the table below), the operator with the highest precedence goes first and associativity does not matter.

https://developer.mozilla.org/en-US/docs/web/javascript/reference/operators/operator_precedence#table

기본 수학 연산자(operator)

사칙연산 산술 연산자 + - * /

나머지(remainder) 연산자 (Modulo, Mod) %

숫자가 홀수인지 짝수인지 판단할 때 자주 쓰인다.

지수(exponent) 연산자 **

144. NaN은 또 뭘까?

Not a Number 숫자가 아닌 값

JavaScript에서 숫자로 간주된다.

typeof 연산자로 확인

숫자가 아닌 NaN로 수학 계산을 하면 결과는 NaN

146. 변수와 `let`

변수 (Variables)

labels for values

값에 어떤 이름을 지정해서 저장한 메모리 공간

나중에 다시 불러와서 사용 및 업데이트 할 수 있다.

JavaScript는 동적 타입 언어

값이 할당되는 과정에서 동적으로 타입을 추론(Type Inference)

자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있다.

타입 추론에 의해 변수의 타입이 결정된 후에도 같은 변수에 여러 타입의 값을 교차하여 할당할 수 있다. (Dynamic Typing)

TypeScript로 불리언 변수는 불리언만 저장할 수 있게 타입을 제한해줄 수 있다. (Static Typing)

코드 가독성, 예측성, 안정성의 향상

147. 변수 업데이트하기

복합 연산자 += -= *= /=

산술 연산자와 대입 연산자를 합친 것

증감 연산자 ++ --

변수의 앞에 붙이면 바로 적용되고(전위연산), 변수의 뒤에 붙이면 후위연산됨
피연산자의 값을 변경하는 부수효과

148. `const` 와 `var`

`const` 상수 (constant)

항상 일정한 값. 바꿀 수 X

선언 이후에 값을 바꿀 수 없으므로, 선언과 동시에 초기화가 이루어져야 한다.

`var` 예전 방식

비교

149. Booleans

true or false

예/아니오, 진실/거짓을 1이나 0으로 저장

활용 예시 (로그인 상태 관리)

let isLoggedIn = false;

150. 변수 명명과 규칙

camelCase로 작성 - 첫 단어는 소문자로 시작, 각 단어의 첫 글자는 대문자

변수는 공백을 포함할 수 없다.

변수는 숫자로 시작할 수 없다.

https://developer.mozilla.org/ko/docs/Glossary/Identifier

뜻을 파악할 수 있게 좋은 이름을 쓰자. (한 글자짜리 변수 피하기)

let n = 9; // ❌
let userInputNum = 9; // ⭕

보통 불리언 변수명은 is 로 시작한다. (불리언 변수임이 더 분명해짐)

💡

변수 이름에 간결성(brevity)은 중요하지 않다.

⇒ 짧기보단 의미 있는 변수 이름을 쓰자.

152. 문자열 개요

Strings

원시 타입. 텍스트 데이터.

따옴표로 감쌀 것 "" ''

일관성 유지하기 (섞어 쓰지 X)

감싸는 형태는 가능 "I told her 'go away'"

153. index와 length

index로 접근하기

length로 문자열 길이 알아내기

한번에 한 문자만 업데이트할 수는 없다. 새 문자열을 덮어 써야 함.

concatenation

두 문자열 합치기

let fullName = firstName + " " + lastName

암묵적(묵시적) 형변환 1 + 'hi' // '1hi'

문자열과 숫자를 더할 때는 숫자를 문자열로 바꾼다.

154. 문자열 메서드

String Method

built-in actions we can perform with individual strings

괄호()를 적으면 메서드를 실행한다.

`toUpperCase()` 와 `toLowerCase()`

문자열을 대문자와 소문자로 바꾸는 메서드

non-destructive (원본을 바꾸지 않음)

`trim()`

문자열 시작과 끝의 공백을 제거하는 메서드

사용자 입력 등 통제할 수 없는 데이터를 받을 때 유용

메서드 체이닝

155. 인수(argument)가 있는 문자열 규칙

인수(argument)

메서드로 전달되어서 메서드의 동작을 변경하는 입력 값

인수가 필요한 메서드와 필요 없는 메서드가 있다.

`indexOf()`

전달된 인수가 문자열에 포함될 경우, 처음으로 나타나는 index를 반환. 없으면 -1 반환.

`slice(beginIndex[, endIndex])`

시작 인덱스부터 끝 인덱스 전까지 자르는 메서드

인수로 음수값을 전달할 수 있다. (뒤에서부터 시작)

`replace(searchValue, newValue)`

정규표현식으로 패턴에 매칭시켜서 특정 문자열 대신 교체할 수 있다.

replaceAll()

`repeat()`

특정 문자열을 반복하는 메서드

More String Methods Practice

156. 엄청나게 유용한 템플릿 리터럴

Template Literals

strings that allow embedded expressions, which will be evaluated and then turned into a resulting string.

표현식을 내장하고, 평가된 결과로 나타나는 문자열

백틱(back-tick) `` 기호 사용

${ } 시퀀스를 사용하면 표현식으로 취급되어 평가됨.

`I counted ${3 + 4} sheep`; // "I counted 7 sheep"

157. `undefined` 와 `null`

`undefined` 할당 되지 않은 변수

variables that do not have an assigned value are undefined

`null` 값의 의도적 부재

“Intentional absence of any value”

must be assigned

변수에 대해 값으로 직접 지정해주는 요소

158. 난수와 `Math` 개체

Math.ceil() Math.floor() 올림과 내림

Math.round() 반올림

Math.abs() 절대값

Math.pow() 제곱

Math.PI 파이값

Math.E 오일러 상수

`Math.random()`

0과 1 사이의 random decimal number 임의의 소숫점 숫자 생성

1부터 10 사이의 임의의 정수 구하기

Math.floor(Math.random() * 10) + 1

20부터 22 사이의 임의의 정수 구하기

선택지가 몇 개인지 알기 (3개)
Math.floor(Math.random() * 3) + 20)

159. 섹션 주제

JavaScript의 핵심 개념 중 하나는 불리언 논리로 코드 의사 결정을 내리는 것

비교 연산자
조건문 (If, Else-if, Else)
Truth-y & False-y 값
논리함수 AND, OR, NOT

160. 코딩으로 의사결정을 한다고?

입력 값에 따라 판단의 경로가 달라진다. (It’s just having different branching paths depending on some input.)

앞으로 논리와 의사결정 연습을 하게 될 것

161. 비교 연산자

Comparisons

> < >= <=

알 수 없는 데이터를 받았을 때 비교 연산자를 쓰면 유용하다.

사용자가 18세 이상인지? age >= 18 // true

숫자 뿐만 아니라 문자열도 비교할 수 있다.

Unicode 14.0 Character Code Charts

Scripts | Symbols & Punctuation | Name Index Find chart by hex code: Help Conventions Terms of Use To get a list of code charts for a character, enter its code in the search box at the top. To access a chart for a given block, click on its entry in the table.

https://unicode.org/charts/

162. 삼중 등호 vs 이중 등호

Comparisons

`===` `!==`

strict(엄격한) equality operator

삼중 등호는 타입을 구분하고 값과 타입을 모두 비교한다.

1 === '1' // false
0 === false // false

삼중 비동등 연산자

1 !== '1' // true

`==` `!=`

이중 등호는 타입을 구분하지 않고 두 값이 같은지 비교한다.

두 값이 다른 타입이면 같아지도록 강제로 변환한다. (예상과 다른 결과)

1 == '1' // true
0 == false // true
null == undefined // true

이중 비동등 연산자

1 != '1' // false

💡

항상 삼중 등호를 사용하고, 경우에 따라 이중 등호를 사용하자.

163. Console, Alert, Prompt 코드

`console.log()`

인수를 콘솔에 출력한다.

다른 언어에서의 print와 같다.

console은 하나의 객체다.

console.warn() , console.error() , ...

`alert()`

인수를 팝업창에 출력한다.

앱을 제작할 때 웬만하면 쓰지 말 것

`prompt()`

팝업창으로 인수를 받아들인다.

변수로 저장할 수 있다.

let userInput = prompt("please enter a number");

164. JavaScript 실행하기!

VSCode로 파일을 통해 JavaScript 실행하기

JavaScript의 스크립트를 넣을 이상적인 위치

보통 <head> 보다는 <body> 의 끝에 넣는다.
html 요소와 상호작용해야 하므로

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First JS Script</title>
</head>

<body>
    <h1>First Script!</h1>

    <script src="app.js"></script>
</body>
</html>

165. If 구문

Conditionals 조건문

코드로 결정을 내린다.

If Statement

If문 다음 괄호()에 참과 거짓을 판별할 조건을 작성한다.

let random = Math.random();

if (random < 0.5) {
	console.log("YOUR NUMBER IS LESS THAN 0.5!!!");
	console.log(random);
}

if (random >= 0.5) {
	console.log("YOUR NUMBER IS GREATER THAN 0.5!!!");
	console.log(random);
}

166. Else if 구문 / 167. Else 구문

조건문을 적은 순서대로 동작한다.

if 문이 거짓일 때 다음 else if 문이 적용된다.
조건문이 참이 되는 순간 나머지 부분은 실행되지 않는다.

else문은 모든 조건의 마지막에 온다.

매치되는 조건이 없을 때 마지막 항목으로 적용된다.
어떤 조건도 지정하지 않는다. 괄호 X

// 0 - 5 FREE
// 5 - 10 CHILD $10
// 10 - 65 ADULT $20
// 65+ SENIOR $10

const age = 8;

if (age < 5) { // 0 - 5
	console.log("You get in for free!");
} else if (age < 10) { // 5 - 10
	console.log("You pay $10.");
} else if (age < 65) { // 10 - 65
	console.log("You pay $20.");
} else {
	console.log("You pay $10.");
}

168. 조건부 네스팅

Nested Conditionals

조건 중첩하기

패스워드 조건: 1) 6자 이상, 2) 공백 없음

공백이 없는 패스워드 조건

indexOf() 활용. 공백이 없다면 -1이어야 함.

const password = prompt("please enter a new password");

// Password must be 6+ characters
if (password.length >= 6) {
	// Password cannot include space
	if (password.indexOf(' ') === -1) {
		console.log("Valid Password!");
	} else {
		console.log("Password cannot contain spaces!");
	}
} else {
	console.log("Password too short! Must be 6+ characters");
}

중첩을 사용하면 무거워 진다. → 다른 방법(AND) 있음

169. Truth-y 값과 False-y 값

JavaScript의 모든 값에는 고유 truthyness와 falsyness가 있다.

단순한 참/거짓 과는 다르다.

다음 경우(falsy)를 제외한 나머지 값은 모두 truthy다.

false
0
빈 문자열 (공백이 하나라도 있으면 truthy)
null
undefined
NaN
...

const userInput = prompt("Enter something");

if (userInput) { // if (userInput !== '') 이렇게 작성할 필요 X
	console.log("TRUTHY!");
} else {
	// 유저가 아무 값도 입력하지 않았을 때 (빈 문자열)
	console.log("FALSY!");
}

if (0) {
	console.log("TRUTHY!");
} else {
	console.log("FALSY!");
}

// FALSY!

if (false) {
	console.log("TRUTHY!");
} else {
	console.log("FALSY!");
}

// FALSY!

💡

변수나 입력 등 다른 곳에서 가져온 것이 있는 상황에서 사용하기에 유용.

170. 논리 함수 AND

Logical Operators

논리 연산자를 활용하면 다른 두 표현식을 합쳐 여러 논리를 하나로 결합함으로써 하나의 큰 논리를 형성할 수 있다.

AND OR NOT

AND `&&`

const password = prompt("Enter your password");
if (password.length >= 6 && password.indexOf(' ') === -1) {
	console.log("VALID PASSWORD!")
} else {
	console.log("INCORRECT FORMAT FOR PASSWORD!")
}

좌항, 우항이 있고 문장이 참이 되려면 둘 다 참이어야 한다.

한 쪽이 거짓으로 판명되면 문장 전체가 거짓이 된다.

⇒ 단락 평가(short circuit evaluation)

첫 번째가 거짓일 경우 바로 거짓으로 판단하고 평가 중단 (두 번째를 보는 것은 비용 낭비)

171. 논리 함수 OR

OR `||`

둘 중 하나만 참이어도 참이 된다.

true || true // true
true || false // true
false || true // true
false || false // false

true && true // true
true && false // false
false && true // false
false && false // false

// 0 - 5 FREE
// 5 - 10 CHILD $10
// 10 - 65 ADULT $20
// 65+ SENIOR free

const age = 8;

if (age >= 0 && age < 5 || age >= 65) { // 0 - 5 OR 65+
	console.log("You get in for free!");
} else if (age >= 5 && age < 10) { // 5 - 10
	console.log("You pay $10.");
} else if (age >= 10 && age < 65) { // 10 - 65
	console.log("You pay $20.");
} else {
	console.log("INVALID AGE!");
}

AND는 OR보다 우선순위가 높다. ⭐

더 명확하게 하고 싶다면 괄호 사용

if ((age >= 0 && age < 5) || age >= 65)

172. 논리 함수 NOT `!`

값을 반전시킨다.

!null // true
! (0 === 0) // false
!(3 <= 4) // false

const age = 45;
if (!(age >= 0 && age < 5 || age >= 65)) {
	console.log("YOU ARE NOT A BABY OR A SENIOR!");
}

173. Switch 조건문

another control-flow statement that can replace multiple if statements.

길어지는 if 조건문을 case별로 조건 일치 여부를 확인

일치하는 항목을 찾으면 스위치가 거기서부터 중단 지점까지 계속 코드를 실행

⇒ break 필요

아무 것도 일치하지 않을 땐 default

수많은 케이스를 한꺼번에 확인할 때는 편리하다.

하지만 대부분 상황의 논리와 들어맞지 X. 자주 쓰이진 않음.

175. 배열 개요

Arrays

순서 있는(ordered) 값들의 집합

typeof 로 배열을 확인하면 Object 라고 나온다.

어떤 타입이든 넣을 수 있다.

let arr = [true, undefined, 12, 9.999, NaN, null, 'Hi!', []];

176. 배열 임의 접근

배열은 인덱스화 되어 있다.

모든 요소에는 상응하는 숫자가 있다.

배열의 값에 접근하기

각 개별 요소의 인덱스로 찾는다.

모든 배열에는 length가 있다.

항상 최대 인덱스보다 하나 더 큰 값이다.

let days = ['Monday', 'Tuesday', 'Wednesday'];
> days[2] // "Wednesday"
> days[3] // undefined
> days[1][0] // "T"

배열의 요소 수정/추가하기

let colors = ['rad', 'orange', 'yellow']
> colors[1] = 'red'; // 수정
> colors[10] = 'indigo'; // 추가
// (11) ['red', 'orange', 'yellow', empty x 7, 'indigo']

177. push와 pop 메서드

배열의 끝부분에 작용하는 한 쌍

push() 는 배열의 끝에 한 개 이상의 요소를 추가한다.

add to end
원본 배열을 바꾼다.

pop() 은 배열의 마지막에 있는 요소 하나를 제거한다.

remove from end
원본 배열을 바꾸고 제거된 요소를 반환한다. (변수에 할당 가능)

178. shift와 unshift 메서드

배열의 시작 부분에 작용하는 한 쌍

unshift() 는 배열의 시작에 한 개 이상의 요소를 추가한다.

add to start

shift() 는 배열의 시작에 있는 요소 하나를 제거한다.

remove from start

179. concat, indexOf, includes, reverse 메서드

concat() 은 배열 2개를 합친 새 배열을 반환한다. (원본 배열 유지)

includes() 는 배열에 찾고자 하는 요소가 있는지 확인한다.

boolean 메서드 - true/false를 반환한다.
NaN도 확인할 수 있다.

indexOf() 는 배열에 찾고자 하는 요소를 처음으로 만나는 인덱스를 반환한다.

없으면 -1을 반환
끝에서부터 찾을 때는 lastIndexOf()
배열에 해당 요소가 몇 개 있는지는 알 수 없다.

reverse() 는 원본 배열을 뒤집는다. (destructive)

180. slice와 splice 메서드

`arr.slice([begin[, end]])`

slice() 는 배열의 begin인덱스부터 end인덱스까지 (end 제외) 요소를 복사한 새로운 배열을 반환한다.

인수로 아무것도 전달하지 않으면 원본을 복사한 새 배열을 반환한다.

얕은 복사

`array.splice(start[, deleteCount[, item1[, item2[, ...]]]])`

splice() 는 배열의 기존 요소를 제거하거나 교체하거나 추가할 수 있다. (destructive)

삭제된 요소로 구성된 배열을 반환한다.

deleteCount가 0이면 기존 요소를 제거하지 않으면서 새로운 요소를 추가한다. — `deleteCount`가 0이면 기존 요소를 제거하지 않으면서 새로운 요소를 추가한다.

배열 중간 값을 업데이트하는 것은 효율적이지 않다. (끝 값이 효율적)

따라서 배열 중간에 값을 추가할 때 실제로 splice 를 쓰는 경우는 많지 않다.

기존 값을 삭제하는 데 유용하다.

slice 와 splice 메서드 모두 음수값을 인수로 전달할 수 있다.

sort() 는 배열 각 문자열 첫번째 자리의 UTF-16 유니코드 값을 비교한다.

본 스터디는 Udemy의 <【한글자막】 The Web Developer 부트캠프 2022> 강의를 활용해 진행됐습니다. 강의에 대한 자세한 정보는 아래에서 확인하실 수 있습니다.

www.udemy.com

https://www.udemy.com/course/the-web-developer-bootcamp-2021-korea/?utm_medium=udemyads&utm_source=wj-etc&utm_campaign=study_pming&utm_content=the-web-developer-bootcamp-2021-korea&utm_term=220512

프밍 스터디는 Udemy Korea와 함께 합니다.

Javascript 부시기 - 1

웹 개발 실전 프로젝트 스터디 - 1주차

141. JavaScript가 놀라운 이유

142. 기본 요소 및 콘솔

원시 타입 (primitive types)

143. JavaScript 숫자

Numbers

기본 수학 연산자(operator)

144. NaN은 또 뭘까?

146. 변수와 let

변수 (Variables)

147. 변수 업데이트하기

148. const 와 var

const 상수 (constant)

var 예전 방식

비교

149. Booleans

150. 변수 명명과 규칙

152. 문자열 개요

Strings

153. index와 length

concatenation

154. 문자열 메서드

String Method

toUpperCase() 와 toLowerCase()

trim()

메서드 체이닝

155. 인수(argument)가 있는 문자열 규칙

인수(argument)

indexOf()

slice(beginIndex[, endIndex])

replace(searchValue, newValue)

repeat()

More String Methods Practice

156. 엄청나게 유용한 템플릿 리터럴

Template Literals

157. undefined 와 null

undefined 할당 되지 않은 변수

null 값의 의도적 부재

158. 난수와 Math 개체

Math.random()

159. 섹션 주제

160. 코딩으로 의사결정을 한다고?

161. 비교 연산자

Comparisons

162. 삼중 등호 vs 이중 등호

Comparisons

=== !==

== !=

163. Console, Alert, Prompt 코드

console.log()

alert()

prompt()

164. JavaScript 실행하기!

165. If 구문

Conditionals 조건문

If Statement

166. Else if 구문 / 167. Else 구문

168. 조건부 네스팅

Nested Conditionals

169. Truth-y 값과 False-y 값

170. 논리 함수 AND

Logical Operators

AND &&

171. 논리 함수 OR

OR ||

172. 논리 함수 NOT !

173. Switch 조건문

175. 배열 개요

Arrays

176. 배열 임의 접근

177. push와 pop 메서드

178. shift와 unshift 메서드

179. concat, indexOf, includes, reverse 메서드

180. slice와 splice 메서드

arr.slice([begin[, end]])

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

146. 변수와 `let`

148. `const` 와 `var`

`const` 상수 (constant)

`var` 예전 방식

`toUpperCase()` 와 `toLowerCase()`

`trim()`

`indexOf()`

`slice(beginIndex[, endIndex])`

`replace(searchValue, newValue)`

`repeat()`

157. `undefined` 와 `null`

`undefined` 할당 되지 않은 변수

`null` 값의 의도적 부재

158. 난수와 `Math` 개체

`Math.random()`

`===` `!==`

`==` `!=`

`console.log()`

`alert()`

`prompt()`

AND `&&`

OR `||`

172. 논리 함수 NOT `!`

`arr.slice([begin[, end]])`

`array.splice(start[, deleteCount[, item1[, item2[, ...]]]])`