노드
노드 : js 를 웹브라우저 없이 실행하게 만들어주는 프로그램
장점 : 비동기 기반(성능 빠름)
예) 백엔드, 프론트엔드 모두 개발할 수 있게됨
노드 설치
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
18.17.1 LTS 다운
아무것도 체크 안하고 설치
통합 터미널에서 열기
버전 확인
node -v
노드 실행
object array
(객체 배열)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체 배열 : 배열 안에 객체가 들어가 있는 형태</title>
</head>
<body>
<!-- 객체 배열 : 배열 안에 객체가 들어가 있는 형태 만들기 -->
<!-- let object = {}; // 객체 -->
<!-- let array = []; // 배열 -->
<!-- let object_array = [{}, {}]; // 배열 안에 객체 -->
<script>
let data = [
{
name: "혼자 공부하는 자바",
price: 18000,
publisher: "한빛미디어",
},
{
name: "HTML5 웹 프로그래밍 입문",
price: 26000,
publisher: "한빛아카데미",
},
]; // 객체 배열
// 자료를 출력
console.log(data);
// 객체 -> 문자열로 변경하는 함수
console.log(JSON.stringify(data));
</script>
</body>
</html>
결과
object add
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체 정의 및 속성 추가하기</title>
</head>
<body>
<script>
//객체 정의
let student = {
name: "윤인성",
};
// 객체의 속성 추가
student.hobby = "악기";
student.hope = "생명공학자";
console.log(student);
</script>
</body>
</html>
결과
object delete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체 정의 및 속성 삭제</title>
</head>
<body>
<script>
//객체 정의
let student = {
name: "윤인성",
hobby: "악기",
hope: "생명공학자",
};
// 객체의 속성 삭제
// 사용법 : delete 객체명.속성명;
delete student.hope;
// 결과 출력
console.log(student);
</script>
</body>
</html>
결과
object update
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체의 속성 값 수정</title>
</head>
<body>
<script>
// 객체 정의
let student = {
name: "윤인성",
hobby: "악기",
hope: "생명공학자",
};
// 객체의 속성 값 수정
student.name = "홍길동";
student.hobby = "음악감상";
// // 결과 출력
console.log(student);
</script>
</body>
</html>
결과
object undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체 내부에 특정 속성 확인하는 방법</title>
</head>
<body>
<script>
// 객체 정의
let object = {
name: "혼자 공부하는 자바",
price: 18000,
publisher: "한빛미디어",
author: "dddd",
};
// 객체 내부에 특정 속성이 있는지 확인하는 예제
// object.author !== undefined 로 확인
// undefined : 객체의 속성이 정의되어 있지 않은
// 비교(참고) : !== , ===(성능이 좋음)
if (object.author !== undefined) {
// 없다면
console.log("author 가 있습니다.");
} else {
console.log("author 가 없습니다.");
}
</script>
</body>
</html>
결과
class basic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>js 클래스 사용</title>
</head>
<body>
<script>
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>
결과
arrow baisc
html 생략
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줄짜리 함수일 경우
// // 예제 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;
// };
// // 3) 화살표 함수
// let mySum = (a, b) => {
// let result = a + b;
// return result;
// };
// TODO: 요약
// TODO: 1) 1줄짜리 : (x,y,...) => 실행문;
// TODO: 2) 2줄이상 : (x,y,...) => {실행문; return 실행문2;}
// // 연습문제
// // 1) 함수 -> 화살표 바꾸기
// let sum = function (x, y) {
// return x + y;
// };
// let sum = (x, y) => x + y;
// // 2) 함수 -> 화살표 바꾸기
// // let pow = function(x) {
// // return x * x;
// // }
// let pow = (x) => x * x;
// // 3) 함수 -> 화살표
// // let sysHi = function() {
// // console.log("안녕하세요");
// // }
// let sysHi = () => console.log("안녕하세요");
// // 4) 함수 -> 화살표
// // function hello(name) {
// // console.log('Hello, ' + name + '!');
// // }
// let hello = (name) => console.log("Hello, " + name + "!");
// // 5) 함수 -> 화살표
// // function fun2() {
// // let call = prompt("이름이 뭐니~?", "");
// // return alert(call + "~! 반갑다~!");
// // }
// let fun2 = () => {
// let call = prompt("이름이 뭐니~?", "");
// return alert(call + "~! 반갑다~!");
// };
// 6) 화살표 함수로 바꾸기
// function checkAge(age) {
// if(age > 20) {
// alert("성인입니다.");
// } else if(age > 15) {
// alert("청소년입니다");
// } else {
// alert("어린이입니다.");
// }
// }
// checkAge(21);
let checkAge = (age) => {
if (age > 20) {
alert("성인입니다.");
} else if (age > 15) {
alert("청소년입니다");
} else {
alert("어린이입니다.");
}
};
checkAge(21);
결과
성인입니다
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];
console.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 : 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 : 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 3-2) js 내장 함수에서의 스프레드 연산자 응용하여
// TODO 아래에서 최소값 구하기
let numbers = [9, 4, 7, 1];
let result = Math.min(...numbers); // 1
console.log(result);
// TODO 3-3) 객체에서의 스프레드 연산자 사용
// TODO 객체의 속성이 없으면 추가되고, 있으면 수정됨
let currentState = {
name: "철수",
species: "human",
};
console.log(currentState);
// 사용법 : ...객체변수
// 객체 속성 추가
currentState = { ...currentState, age: 10 };
console.log(currentState);
// 객체 속성 수정
currentState = { ...currentState, age: 12 };
console.log(currentState);
결과
for each
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));
결과
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);
결과
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);
결과
'HTML > React' 카테고리의 다른 글
[React] Typescript (2) | 2023.09.06 |
---|---|
[React] json 서버 사용법 (0) | 2023.09.04 |
[React] (0) | 2023.09.04 |
[React]backtick, nullish, dataset, encode, decode, formData, function, structure, promise then, catch, boot strap, layout (0) | 2023.08.28 |