[Modern JavaScript] chapter

[Modern JavaScript] chapter_01

DEVELOPERS_Ivan ㅣ 2023. 8. 25. 16:01

모던 자바스크립트(Modern JavaScript)는 브라우저에서 실행되는 클라이언트 측 JavaScript 코드와, 서버 측 JavaScript 환경에서 실행되는 노드.js(Node.js) 코드로 구분됩니다.

브라우저에서 실행되는 클라이언트 측 JavaScript는 웹 페이지 내에서 동작하며,
사용자 인터페이스를 개선하거나 다양한 작업을 수행합니다.

서버 측 JavaScript는 Node.js 환경에서 실행되며,
백엔드 서버 개발, 데이터베이스 액세스, API 호출 등과 같은 서버 측 작업을 처리합니다.

01_object

01_object_array
객체 배열 : 배열 안에 객체가 들어가 있는 형태 만들기

let object = {}; // 객체
let array = []; // 배열
let object_array = [{}, {}]; // 배열 안에 객체

console.log(변수); // 자료를 출력
console.log(JSON.stringify(변수));// 객체 -> 문자열로 변경하는 함수

<!DOCTYPE html>

<head>

</head>

<body>

let data = [

{

price: 18000,

publisher: "한빛미디어",

{

price: 26000,

publisher: "한빛아카데미",

]; // 객체 배열

// 자료를 출력

console.log(data);

// 객체 -> 문자열로 변경하는 함수

console.log(JSON.stringify(data));

</script>

</body>

</html>

02_obhect_add
객체 정의 및 속성 추가하기 사용법 :
객체명.속성명 = "추가";

<!DOCTYPE html>

<head>

</head>

<body>

//객체 정의

let student = {

};

// 객체의 속성 추가

student.hobby = "악기";

student.hope = "생명공학자";

console.log(student);

</script>

</body>

</html>

객체의 속성 추가 진행 가능 student.hobby = "악기"; student.hope = "생명공학자";

03_obhect_delete
객체 정의 및 속성 삭제 사용법 :
delete 객체명.속성명;

<!DOCTYPE html>

<head>

</head>

<body>

//객체 정의

let student = {

hobby: "악기",

hope: "생명공학자",

};

// 객체의 속성 삭제

// 사용법 : delete 객체명.속성명;

delete student.hope;

// 결과 출력

console.log(student);

</script>

</body>

</html>

04_obhect_update
객체의 속성 값 수정

<!DOCTYPE html>

<head>

</head>

<body>

// 객체 정의

let student = {

hobby: "악기",

hope: "생명공학자",

};

// 객체의 속성 값 수정

student.name = "홍길동";

student.hobby = "음악감상";

// // 결과 출력

console.log(student);

</script>

</body>

</html>

05_object_undefined
객체 내부에 특정 속성 확인하는 방법
undefined

<!DOCTYPE html>

<head>

</head>

<body>

// 객체 정의

let object = {

price: 18000,

publisher: "한빛미디어",

author: "dddd",

};

// 객체 내부에 특정 속성이 있는지 확인하는 예제

// object.author !== undefined 로 확인

// undefined : 객체의 속성이 정의되어 있지 않은

// 비교(참고) : !== , ===(성능이 좋음)

if (object.author !== undefined) {

// 없다면

console.log("author 가 있습니다.");

} else {

console.log("author 가 없습니다.");

}

</script>

</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

// 객체 정의

let object = {

price: 18000,

publisher: "한빛미디어",

};

// 객체 내부에 특정 속성이 있는지 확인하는 예제

// object.author !== undefined 로 확인

// undefined : 객체의 속성이 정의되어 있지 않은

// 비교(참고) : !== , ===(성능이 좋음)

if (object.author !== undefined) {

// 없다면

console.log("author 가 있습니다.");

} else {

console.log("author 가 없습니다.");

}

</script>

</body>

</html>

06_class_basic
js 클래스 사용
class
getPerimeter
getArea

<!DOCTYPE html>

<head>

</head>

<body>

class Square {

// 생성자

constructor(length) {

this.length = length; // 멤버변수

}

// 함수(메소드)

getPerimeter() {

return 4 * this.length; // 정사각형 둘레 구하기

}

getArea() {

return this.length * this.length; // 정사각형 넓이 구하기

}

// 클래스 사용

// let 변수명 = new 생성자함수(값);

let square = new Square(-10);

console.log("getPerimeter()", square.getPerimeter());

console.log("getArea()", square.getArea());

</script>

</body>

</html>

02_arrow_func

01_arrow_basic
화살표 함수

// TODO : 01_arrow_basic.js

// 1) 화살표 함수 (*****)

// 함수 기본

// 1) 매개변수 2개 전달받아서 더하기 함수

// (1) 함수 선언식

// 사용법 : function 함수명(){}

function sum(a, b) {

return a + b;

}

// (2) 함수 표현식

// 사용법 : let 함수명 = function(){};

let sum = function (a, b) {

return a + b;

};

// (3) 화살표 함수 변경

// 목적 : 코딩 단순화(함수 축약형)

let sum = (a, b) => a + b;

// 예제 문제

// 1줄짜리 함수일 경우

// TODO 1번 : 함수 선언식 -> 화살표 함수로 바꾸세요.

// 1) 함수 선언식

function double(n) {

return n * 2;

}

// 2) 함수 표현식

let double = function (n) {

return n * 2;

};

// 3) 화살표 함수(축약형)

let double = (n) => n * 2;

// 2줄이상 함수

function mySum(a, b) {

let result = a + b;

return result;

}

// 2) 함수 표현식

let mySum = function (a, b) {

let result = a + b;

return result;

};

// 2) 화살표 함수

let mySum = (a, b) => {

let result = a + b;

return result;

};

// TODO : 요약

// TODO : 1) 1줄짜리 : (x,y,...) => 실행문; // 중괄호 및 return 생략 가능

// TODO : 2) 2줄짜리 : (x,y,...) => {실행문; return 실행문2;} // 중괄호 및 return 생략 불가능

// TODO : 01_arrow_basic.js

// 연습문제

// TODO 1) 함수 -> 화살표 바꾸기

// let sum = function (x, y) {

// return x + y;

// };

// TODO 화살표

let sum = (x, y) => x + y;

// TODO 2) 함수 -> 화살표 바꾸기

// let pow = function (x) {

// return x * x;

// };

// TODO 화살표

let pow = (x) => x * x;

// TODO 3) 함수 -> 화살표

// let sysHi = function () {

// console.log("안녕하세요");

// };

// TODO 화살표

let sysHi = () => console.log("안녕하세요");

// TODO 4) 함수 -> 화살표

// function hello(name) {

// console.log("Hello, " + name + "!");

// };

// TODO 화살표

let hello = (name) => console.log("Hello, " + name + "!");

// TODO 5) 함수 -> 화살표

// function fun2() {

// let call = prompt("이름이 뭐니~?", "");

// return alert(call + "~! 반갑다~!");

// };

// TODO 화살표

// let fun2 = () => {

// let call = prompt("이름이 뭐니~?", "");

// return alert(call + "~! 반갑다~!");

// };

// TODO 6) 함수 -> 화살표

// function checkAge(age) {

// if (age > 20) {

// alert("성인입니다.");

// } else if (age > 15) {

// alert("청소년입니다");

// } else {

// alert("어린이입니다.");

// }

// checkAge(21);

// TODO 화살표

let checkAge = (age) => {

if (age > 20) {

alert("성인입니다.");

} else if (age > 15) {

alert("청소년입니다");

} else {

alert("어린이입니다.");

}

};

checkAge(21);

03_array_func_spread

01_spread
스프레드 연산자
- 1) 배열의 복사 : 원본을 훼손하지 않음(*) 사용법 : ...배열변수; // 배열값을 복사함
- 2) 향상된 for문 for of
- 3_1) 함수 매개변수 : rest 연산자(==스프레드 연산자)
- 3_2) js 내장 함수에서의 스프레드 연산자 응용하여 최소 값 구하기
- 3_3) 객체에서의 스프레드 연산자 사용(객체의 속성이 없으면 추가되고, 있으면 수정됨)

// TODO : 01_spread.js

// TODO : spread(스프레드 연산자) 연산자

// TODO : 1) 배열의 복사 : 원본을 훼손하지 않음(*)

// 리액트 많이 나옴 : 배열의 복사본을 이용해서 코딩

// 사용법 : ...배열변수; // 배열값을 복사함

// 예제 1) 숫자 배열 복사

let arr1_1 = [1,2,3,4,5];

[1,2,3,4,5,6,7,8,9]

let arr1_2 = [...arr1_1, 6,7,8,9];

console.log(arr1_2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 예제 2) 문자열 배열 복사

let str2_1 = "paper block";

let str2_2 = [...str2_1];

consle.log(str2_2); // ['p', 'a', 'p', 'e', 'r', ' ', 'b', 'l', 'o', 'c', 'k']

// 예제 3) 배열 2개 붙이기

let arr3_1 = [1,2,3];

let arr3_2 = [4,5,6];

let arr3 = [...arr3_1, ...arr3_2];

console.log(arr3); // [1,2,3,4,5,6]

// TODO : 01_spread.js

// TODO : spread(스프레드 연산자) 연산자

// TODO : 2) 향상된 for문 : 인덱스번호 자동증가

let arr = [1, 2, 3, 4, 5, 6];

console.log("일반");

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

console.log("향상");

for (const e of arr) {

console.log(e); // e : 배열의 값

}

// TODO : 01_spread.js

// TODO : spread(스프레드 연산자) 연산자

// TODO : 3) 함수에서의 스프레드 연산자 사용 예(참고)

// TODO 3-1) 함수 매개변수 : rest 연산자(==스프레드 연산자)

// 용도 : 매개변수들을 모두 더해서 합계를 구하는 함수

function add(...rest) {

let sum = 0;

for (const item of rest) {

sum = sum + item; // item == 배열의(매개변수들의) 값

}

return sum;

}

console.log(add(1)); // 1

console.log(add(1, 2)); // 3

console.log(add(1, 2, 3)); // 6

// TODO : 01_spread.js

// TODO : spread(스프레드 연산자) 연산자

// TODO : 3) 함수에서의 스프레드 연산자 사용 예(참고)

// TODO 3-2) js 내장 함수에서의 스프레드 연산자 응용하여

// TODO 아래에서 최소값 구하기

let numbers = [9, 4, 7, 1];

let result = Math.min(...numbers); // 1

console.log(result);

// TODO : 01_spread.js

// TODO : spread(스프레드 연산자) 연산자

// TODO : 3) 함수에서의 스프레드 연산자 사용 예(참고)

// TODO 3-3) 객체에서의 스프레드 연산자 사용

// TODO 객체의 속성이 없으면 추가되고, 있으면 수정됨

let currentState = {

species: "human",

};

console.log(currentState);

// 사용법 : ...객체변수

// 객체 속성 추가

currentState = { ...currentState, age: 10 };

console.log(currentState);

// 객체 속성 수정

currentState = { ...currentState, age: 12 };

console.log(currentState);

02_foreach
함수형 프로그래밍 함수 forEach
return 없음
break 문 사용불가

// TODO : 02_foreach.js

// 코딩 역사 : 구조적프로그래밍(절차적) : c언어

// -> 객체지향프로그래밍 : js, java, c++ , c#, 파이썬

// -> 함수형프로그래밍 : 클로저 등

// 함수형프로그래밍 (1억) vs 객체지향(5000만원)

// 객체지향 : 40명 -> 5명(함수명) : AT&T (통신사)

// TODO : forEach :

// 용도 : 단순 출력용

// 특징 : 1) return 없음

// 2) break 문 사용불가

// 자동으로 반복문을 실행함(배열의 끝까지)

// 사용법 : 배열변수.forEach((value)=>{반복문;})

let myArr = [1, 2, 3, 4, 5];

// TODO : 향상된 for문으로 진행

for (const i of myArr) {

// for of 값 반복문 실행

console.log("향상된 for문 값 : " + " " + i);

}

// TODO : 함수형 프로그래밍 함수로 진행 : forEach((값, 인덱스번호, 배열))=>{}) 인덱스번호, 배열 생략 가능

// 예시 myArr.forEach((value, iddex, array) => {

// console.log("함수형 프로그래밍 함수 값 : " + " " + value); // 값 반복문 실행

// });

// myArr.forEach((value) => {

// console.log("함수형 프로그래밍 함수 값 : " + " " + value); // 값 반복문 실행

// });

myArr.forEach((value, index) => {

console.log("함수형 프로그래밍 함수 값 : " + " " + value); // 값 반복문 실행

console.log("함수형 프로그래밍 함수 인덱스 번호 : " + " " + index); // 인덱스 번호 실행

});

// 연습문제

// 1) forEach() 함수 사용해서 출력하기

let arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach((value) => console.log(value));

// 2) forEach() 함수 사용해서 출력하기

let strDummy = ["a", "b","c", "d", "e"]

strDummy.forEach((value) => console.log(value));

03_map map 함수
(리액트에서 반복문 대용으로 사용함)
※ 내장함수 : Math.sqrt = 숫자 배열로 만들어줌

// TODO : 03_map.js

// TODO : map 함수 (리액트에서 반복문 대용으로 사용함)

// 용도 : 배열을 조작해서 새로운 복사본 배열을 만들 때 사용

// 특징 : 1) 리턴 값

// 사용법: let 변수 = 배열변수.map((value)=>{반복문})

// 예제 1) 숫자배열에서 제곱수를 구하는 새로운 배열을 만드세요.

let numbers_1 = [1, 2, 3, 4, 5];

let result_1 = numbers_1.map((value) => value * value); // 1*1 =[1],2*2=[4],....5*5=[25]

console.log(result_1); // [1,4,9,16,25]

// 예제 2) map함수에 js 내장함수 사용하기

// 주어진 배열의 제곱근 구해서 새로운 배열을 만드세요.

// 힌트 : Math.sqrt(값)

let numbers_2 = [1, 2, 3, 4, 5];

let result_2 = numbers_2.map(Math.sqrt);

console.log(result_2);

// (참고 : 숫자배열)

// 입력 : 1 2 4

// let num = prompt("숫자배열").split(" ").map(Number_2);

// 연습문제 1) 아래 주어진 배열을 map 이용해서 조작하세요

// 결과 : [2, 4, 6]

let numbers = [1, 2, 3];

let result = numbers.map((value) => value + value);

console.log(result);

// 예제 : 객체 조작

// 객체배열에서 나이만 뽑아서 새로운 배열 만들기

let users = [

{ name: "YD", age: 22 },

{ name: "Bill", age: 32 },

{ name: "Andy", age: 21 },

{ name: "Roky", age: 35 },

];

let ages = users.map((value) => value.age);

console.log(ages);

// 연습문제 2) map() 함수 사용해서 새로운 배열을 만드세요

// 결과 : ["가!", "나!", "다!"]

let chars = ["가", "나", "다"];

let charsresult = chars.map((value) => value + "!");

console.log(charsresult);

04_filter
filter 함수

// TODO : 04_filter.js

// TODO : filter 함수

// 함수의 조건이 참인 것만 뽑아서 몇 개만 새로운 배열을 만듬

// 원본 배열보다 개수가 작음

// 특징 : 리턴 값 있음

// 사용법 : let 변수 = 배열변수.filter((value)=>{조건문;})

// 예제 1) 아래 배열에서 3보다 큰수만 뽑아서 새오룬 배열 만들기

let numbers_1 = [1, 2, 3, 4, 5];

let result_1 = numbers_1.filter((value_1) => value_1 > 3);

console.log(result_1);

// 예제 2) 객체 조작

// 돈이 300000 초과한 사람만 뽑아서 새로운 배열로 만드세요.

let guys = [

{ name: "YD", money: 500000 },

{ name: "Bill", money: 400000 },

{ name: "Andy", money: 300000 },

{ name: "Roky", money: 200000 },

];

let rich = guys.filter((man) => man.money > 300000);

console.log(rich);

// 연습문제 1) filter 함수 사용해서 조작하세요

// 결과 : [1, 2]

// 조건 : value < 3

let numbers = [1, 2, 3, 4, 5];

let result = numbers.filter((value) => value < 3);

console.log(result);

// 연습문제 2) filter 함수 사용해서 조작하세요

// 결과 : [3]

// 조건 : value > 2 && value < 4

let numbers_2 = [1, 2, 3, 4, 5];

let result_2 = numbers_2.filter((number_2) => number_2 > 2 && number_2 < 4);

console.log(result_2);

04_optional_nullish

01_backtick
` `(백틱) : 키보드 왼쪽 위에 1 숫자 옆에 자판(홑따옴표 아님)
문자열을 표현하는 새로운 방법
사용법 : `문자열${변수명}`;

// TODO : 백틱(backtick) ``

// 모던자바스크립트 === 이크마(ECMA Script) 자바스크립트

// 메타버스 === 가상환경

// TODO + "\n" 를 사용하는 방법

// 예제 : 아래와 같이 문자열과 변수를 같이 써서 출력하세요

// 출력 : num = 10

// num2 = 20

// num3 = 30

// let num = 10;

// let num2 = 20;

// let num3 = 30;

// console.log("num = " + num + "\n"

// + "num2 = " + num2 + "\n"

// + "num3 = " + num3

// )

// TODO `` ($) 를 사용하는 방법

// TODO ``(백틱) : 키보드 왼쪽 위에 1 숫자 옆에 자판(홑따옴표 아님)

// TODO 문자열을 표현하는 새로운 방법

// TODO 사용법 : `문자열${변수명}`;

let num = 10;

let num2 = 20;

let num3 = 30;

console.log(`num = ${num}

,num2 = ${num2}

,num3 = ${num3}`);

/* 연습문제 1) 변수 2개를 사용해서 백틱으로 화면에 출력하세요 */

// 입력 : x

// 출력 : 안녕하세요 우리 교육센터에 방문하신 것을 환영합니다.

let val_1_1 = "안녕하세요";

let val_1_2 = "교육센터";

console.log(`${val_1_1} 우리 ${val_1_2}에 방문하신 것을 환영합니다.`);

/* 연습문제 2) 변수 3개를 사용해서 백틱으로 화면에 출력하세요 */

// 출력 :

// 4월은 잔인한 달 - 엘리엇

// 4월은 가장 잔인한 달

// 죽은 땅에서 라일락을 키워내고

// 기억과 욕망을 뒤섞고

// 봄비로 잠든 뿌리를 뒤흔든다

let val_2_1 = "4월";

let val_2_2 = "잔인한 달";

let val_2_3 = "라일락";

console.log(

`${val_2_1}은 ${val_2_2} 죽은 땅에서 ${val_2_3}을 키워내고 기억과 욕망을 뒤섞고 봄비로 잠든 뿌리를 뒤흔든다`

);

02_optional_nullish
옵셔널 널리쉬(potional nullish)
객체나 함수에 대해 접근하여 null 값이면 강제로 undefined 값으로 변경함
사용법 : 변수명?.속성명

// TODO : 02_optional_nullish.js

// TODO : 옵셔널 널리쉬(potional nullish) .?

// 1) 용도 : 객체나 함수에 대해 접근할 때 사용

// 자바스크립트 / 자바 언어의 문제점

// 소스에서 값이 null 이 나오면 프로그램이 비정상 종료가 됨

// => 서비스가 갑자기 다운(예: 카카오톡이 서비스 다운)

// 코딩 : null 에러를 회피해서 코딩을 전통적으로 했음

// 아래 예)

let num = null;

// 미리 변수의 값에 null 이 있는지 체크했음

if (num == null) {

console.log("이 기능은 실행하지 않습니다.");

}

console.log("========================");

// 개선된 예제 : 옵셔널 널리쉬 사용

// user 가 null 이면 강제로 undefined 값으로 변경함

// 사용법 : 변수명?.속성명

let user = null; // 객체, address 속성이 있는지 없는지 체크

// 객체의 속성 호출 : user.address => user = null;

// null.address (에러 : 서비스 다운)

console.log(`user 는 ${user?.address}`);

let user2 = { address: "부산" };

console.log(`user2 는 ${user2?.address}`);

console.log(user);

console.log(user2);

05_import module

import(가져오기) & export(내보내기) 사용하기
js 파일끼리 가독성을 위해 분리해서 사용하는 방법

- var_es6 = export : 다른 js 파일에서 사용할 수 있도록 일부 기능을 내보내기
- index_es6.js = import : 다른 js 파일에서 변수/함수를 가져오기 기능
단, export 된 변수/함수만 import 할 수 있음

package.json
- 해당 폴더에서 터미널창 열고 npm init -y 입력 시 package.json 파일이 생성됨
- 생성 후 추가 항목으로 "type": "module" 저장

// TODO : package.json 문장 오류 뜨기 때문에 삭제해야함

{

"name": "05_import-module",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC",

"type": "module"

}

// TODO : var_es6.js (*****)

// TODO : import(가져오기) & export(내보내기) 사용하기

// 모듈(module) : html / css / js (파일을 각각 분리하여 코딩함)

// html 안에 css / js 문법이 혼재하고 있으면 가독성 떨어짐

// 각각의 파일로 분리해서 보통 코딩함 (모듈화)

// js 모듈 : 자바스크립트 끼리 긴것들은 분리해서 코딩하는 것

// 원인 ) 1개 js 가 1000라인이상되면 가독성 현저하게 떨어짐

// => js 끼리 파일을 분리해서 사용(js 모듈)

// TODO : import : 다른 js 파일에서 변수/함수를 가져오기 기능

// TODO : export : 다른 js 파일에서 사용할 수 있도록 일부 기능을 내보내기

// TODO : 단, export 된 변수/함수만 import 할 수 있음

const odd = "홀수입니다.";

const even = "짝수입니다.";

const hello = () => console.log("안녕하세요");

// 위의 상수 2개/함수 1개 내보내기(export)

// 사용법 : export {변수, 변수2, ..., 함수, 함수2...}

export { odd, even, hello };

// TODO : index_es6.js

// TODO : import(가져오기) & export(내보내기) 사용하기

// import 받을 js 파일

// import : 기능(변수/함수)를 다른 js 파일에서 가져오기

// 사용법 : import {변수명,함수명...} from "js파일경로/파일명";

import { odd, even, hello } from "./var_es6.js";

// 예제 : 값이 홀수 인지 짝수인지 판단하기

let num = 3; // 기본값

// 짝수

if (num % 2 === 0) {

console.log(even); // 짝수입니다. 출력

hello(); // 다른 js 정의된 함수 실행 : 안녕하세요

} else {

console.log(odd); // 홀수입니다. 출력

hello(); // 다른 js 정의된 함수 실행 : 안녕하세요

}

// TODO : ./01_exam/var_es6.js

// TODO : 연습문제 - 아래 지시대로 export 하고 다른 파일에서

// TODO : import 해서 코딩을 완성하세요

// TODO : 3의 배수이면 3의 배수입니다. 출력, 아니면 3의 배수가 아닙니다.

const three = "3의 배수입니다.";

const notThree = "3의 배수가 아닙니다.";

export { three, notThree };

// TODO : ./01_exam/index_es6.js

// TODO: num 이 3의 배수인지 판단해서 가져온 변수를 이용해서 출력하세요

// 입력 : x

// 출력 : 3의 배수입니다.

// TODO: import 하세요

// import 가져오기

import { three, notThree } from "./var_es6.js";

// 초기값

let num = 4;

if (num % 3 === 0) {

console.log(three); // 3의 배수입니다. 출력

} else {

console.log(notThree); // 3의 배수가 아닙니다. 출력

}

// TODO : ./02_exam/var_es6.js

const ending = () => console.log("모던자바스크립트 마무리 단계네요!");

// TODO : 함수 내보내기(export)

// 1개짜리 변수 또는 함수는 아래와 같이 export 해야함

// 사용법 : export default 함수명;

export default ending;

// TODO : ./02_exam/index_es6.js

// TODO: 아래 지시사항대로 코딩하고, 함수를 가져와서 출력하세요

// 변수 val 의 문자열 길이가 홀수이면 ending() 함수를 실행하세요

// 입력 : x

// 사용법 : import 함수명 from "경로/js파일명";

// import 하세요

import ending from "./var_es6.js";

let val = "greetings"; // 길이 : 9

// TODO: val 의 문자열 길이가 홀수 인지 판단하여 홀수이면 ending() 실행하세요

if (val.length % 2 === 1) {

ending();

// console.log(ending());

}

06_etc

01_dataset
html에 태그 안에서 속성으로 사용
속성에 값을 저장할 용도로 사용 : 변수

표기법 : 단어-단어 (마이너스표기법 사용)
사용법 : (html에서)data-변수명="값"
사용법 : (js에서) 태그.dataset.변수명

<!DOCTYPE html>

<head>

<title>html에 태그 안에서 속성으로 사용</title>

</head>

<body>

// 태그 가져오기 : 선택함수 : document.querySelector("css선택자")

let pData = document.querySelector("p");

// 출력 : data-변수명(html)

// (js에서) 태그/dataset.변수명

console.log(pData.dataset.id); // 0

console.log(pData.dataset.questString); // question

</script>

</body>

</html>

<p data-id="0" data-quest-string="question"> 실행

02_encode
프론트엔드(react) 인코딩/디코딩
인코딩/디코딩 : 데이터 전송시 인식안되는 문자들을 일시적으로
브라우저에서 인식할 수 있는 문자로 바꾸는것(인코딩) , 다시 한글등으로 되돌리는것(디코딩)

한글 인코딩 사용법 :
encodeURIComponent("문자열")

<!DOCTYPE html>

<head>

<title>프론트엔드(react) 인코딩/디코딩</title>

</head>

<body>

// 예제 : "안녕하세요 , 홍길동" 인코딩해서 출력하고

// 다시 디코딩해서 출력하세요

// 한글 인코딩

// 사용법 : encodeURIComponent("문자열")

let encodeKor = encodeURIComponent("안녕하세요");

let encodeName = encodeURIComponent("홍길동");

// url 주소 만들기

let encodeUrl = `http://www.google.com/${encodeKor}/${encodeName}`;

console.log(encodeUrl);

// 한글 디코딩(받는 쪽)

console.log(decodeURIComponent(encodeKor));

console.log(decodeURIComponent(encodeName));

</script>

</body>

</html>

04_formData
htmlform 태그 데이터 js FormData로 가져오기

<!DOCTYPE html>

<head>

<title>htmlform 태그 데이터 js FormData로 가져오기</title>

</head>

<body>

</form>

// 1) form 태그 데이터 가져오기

// html : form 태그 : <form></form>

// js : FormData 객체(form 태그와 같음)

// 선택함수 : document.querySelector("css선택자")

let sign = document.querySelector("#sign"); // form 태그

let formData = new FormData(sign); // html form 과 연결됨

// 출력

console.log("formData.get()", formData.get("first")); // Bora

console.log("formData.get()", formData.get("last")); // Kim

// **2) FormData 빈 객체를 만들어서 조작

// 이미지 및 문자열 등을 저장해서 다른 페이지로 전송할 수 있음

// 활용 예 ) 이미지 업로드

let formData2 = new FormData(); // 빈 객체 생성

// (1) formData 에 값 추가

// 사용법 : formData변수명.append("키이름", "값");

formData2.append("name", "kildong");

formData2.append("first", "hong");

// 출력

// 사용법 : formData변수명.get("키이름");

console.log("name", formData2.get("name")); // kildong

console.log("first", formData2.get("first")); // hong

// (2) formData 값 수정 :

// 사용법 : formData변수명.set("키이름", "수정될값");

formData2.set("name", "yellow"); // yellow

console.log("name", formData2.get("name")); // yellow

// (3) formData 값 삭제 :

// 사용법 : formData변수명.delete("키이름");

formData2.delete("name"); // 키 삭제

console.log("name", formData2.get("name")); // undefined

</script>

</body>

</html>

05_structure
구조분해 할당
모던자바스크립트(===ECMAScript) 신기능
1) 배열 구조분해 할당 : 가독성 증가(향상) 변수명만 보고 추측이 가능하게 이름을 짓는것이 좋음
2) 객체 구조분해할당 : 객체의 속성 값을 분해해서 다른 변수에 저장

// TODO : 05_structure.js

// TODO : 구조분해 할당

// 모던자바스크립트(===ECMAScript) 신기능

// TODO : 1) 배열 구조분해 할당 : 가독성 증가(향상)

// 예제) 일반 코딩

// 변수명만 보고 추측이 가능하게 이름을 짓는것이 좋음 :

let array_1 = [1, 2]; // 숫자 배열(가독성 저하)

console.log(array_1[0], array_1[1]); // 1 2

// 예제) 구조분해 할당 : 위에꺼 고침

let [firstNum, secondNum] = [1, 2];

// firstNum=1, secondNum=2

console.log(firstNum, secondNum); // 1 2

// TODO 연습문제 1) 배열 구조분해 할당 문제

// 아래와 같이 배열이 있습니다. 구조분해 할당 이용해서 출력하세요

// 입력 : x

// 출력 : hello node react

let array_2 = ["hello", "node", "react"];

let [str2_1, str2_2, str2_3] = array_2;

console.log(array_2);

console.log(str2_1, str2_2, str2_3);

// TODO : 2) 객체 구조분해할당

// 객체의 속성 값을 분해해서 다른 변수에 저장

// 예제 2)

let candyMachine = {

};

// 1번째 방법

// 결과 출력

console.log(candyMachine.name, candyMachine.count); // 캔디 5

// 2번째 방법 : 객체 구조분해 할당

// 객체의 속성명과 동일한 변수명을 찾아서 저장됨

// 사용법 : let {속성명, 속성명2 ...} = {속성명:값, 속성명2: 값2 ...}

// 결과 출력

let { name, count } = candyMachine;

console.log(name, count);

// TODO 연습문제 2) 객체 구조분해 할당 문제

// 아래와 같이 객체가 있습니다. 구조분해 할당 이용해서 출력하세요

let dept = {

no: 1,

dname: "Sales",

loc: "부산",

};

let { no, dname, loc } = dept;

console.log(no, dname, loc);

07_promise

01_promise_then
promise : 비동기 코딩에서 순서에따라 실행되게 해주는 객체
자바스크립트 코딩(비동기) 프라미스(Promise) 객체 사용방법

node : 1) 비동기 기능(성능 증가)자바스크립트 코딩(비동기 프로그래밍 한다)
비동기 : 요청하면 결과가 먼저 처리한 곳에서 주는대로 실행함
장점 : 성능 증가 단점 : 순서에 맞는 결과가 중요하면 결과가 꼬일 수 있음
예) 은행 계좌 : 입금 -> 출금(비동기 시 입금되기전에 출금될수 있음)
(해결책 : promise 이용 : 순서에 입각해서 실행을 할 수 있음)(참고) 동기 : 요청한 순서대로 결과가 옴(c언어 등)

// node : 1) 비동기 기능(성능 증가)

// 자바스크립트 코딩(비동기 프로그래밍 한다)

// 비동기 : 요청하면 결과가 먼저 처리한 곳에서 주는대로 실행함

// 장점 : 성능 증가

// 단점 : 순서에 맞는 결과가 중요하면 결과가 꼬일 수 있음

// 예) 은행 계좌 : 입금 -> 출금(비동기 시 입금되기전에 출금될수 있음)

// (해결책 : promise 이용 : 순서에 입각해서 실행을 할 수 있음)

// (참고) 동기 : 요청한 순서대로 결과가 옴(c언어 등)

// TODO : 예제 :

// 1st 순서 :

console.log("학교에 갑니다.");

// 2nd 순서 :

// 일정시간동안 지연해서 실행하는 함수

// 사용법 : setTimeout(함수(), 지연시간(ms));

setTimeout(() => {

console.log("학교에 도착했습니다.");

}, 1000);

// 3rd 순서 :

console.log("열심히 코딩을 합니다.");

// TODO: 프라미스를 이용해서 개선

// 알필요없음 : 프라미스 객체 생성(x)

var goSchool = new Promise((resolve, reject) => {

// 2초 지연 함수 : Promise 객체에 넣음

setTimeout(function () {

console.log("학교에 도착했습니다.");

// resolve() : 결과 성공했다는 확인 함수

resolve();

}, 2000);

});

// TODO : 여기서부터 알 필요 없음

// 1st 실행

console.log("학교에 갑니다.");

// 2nd : 비동기 코딩(순서를 지켜 출력시키기)

goSchool.then(() => {

// console.log("학교에 도착했습니다."); 실행이 끝나면

// 아래 실행문이 실행되게 보장하는 함수 : then()

console.log("열심히 코딩을 합니다.");

});

02_promise_then_catch
프라미스 객체의 리턴함수 then() , catch() 사용법
then() : 프라미스 객체안의 코딩이 성공하면 실행되는 함수
catch() : 프라미스 객체안의 코딩이 실패하면 실행되는 함수

// promise : 비동기 코딩에서 순서에따라 실행되게 해주는 객체

// 예제 2) 아래 프라미스 객체가 있음

// 성공 : 10보다 작은값이 들어옴

// 실패 : 10보다 크면

let promise = new Promise(function(resolve, reject) {

setTimeout(function() {

var num = parseInt(prompt("10 미만의 숫자를 입력하십시오"));

if( num <= 10 ) {

// 결과가 성공 시 실행됨

// 매개변수값을 .then 함수 안으로 전달할 수 있음

// .then() 으로 전달됨

resolve(num);

} else {

// 결과가 실패 시 실행됨

// 매개변수값을 .catch 함수 안으로 전달할 수 있음

// .catch() 로 전달됨

reject(`오류 : ${num}은 10이상입니다`);

}

}, 1000);

});

// TODO: 프라미스 객체의 리턴함수 then() , catch() 사용법

// then() : 프라미스 객체안의 코딩이 성공하면 실행되는 함수

// catch() : 프라미스 객체안의 코딩이 실패하면 실행되는 함수

promise.then((num)=>{

// 프라미스 객체 안의 코딩이 성공했을때 자동 실행됨

console.log(num + ", <-10 미만의 숫자를 입력하셨네요!");

})

.catch((error) => {

// 프라미스 객체 안의 코딩이 실패했을때 자동 실행됨

console.log(error);

});

결과가 성공 시 실행됨 매개변수값을 .then 함수 안으로 전달 - 결과가 실패 시오류 : 매개변수값을 .catch 함수 안으로 전달

저작자표시 비영리 동일조건

'Visual Studio Code' 카테고리의 다른 글

[React] chapter_01 (0)	2023.08.29
[Bootstrap] chapter_01 (0)	2023.08.28
[Node] chapter_01 (0)	2023.08.25
[JQUERY] chapter_02 (0)	2023.08.24
[JQUERY] chapter_01 (0)	2023.08.24

기술 블로그

[Modern JavaScript] chapter_01

'Visual Studio Code' 카테고리의 다른 글

티스토리툴바