[React] 노드 설치법 , 화살표 함수, 내장함수(spread, foreach, map, filter)

노드

노드 : js 를 웹브라우저 없이 실행하게 만들어주는 프로그램
장점 : 비동기 기반(성능 빠름)
예) 백엔드, 프론트엔드 모두 개발할 수 있게됨

노드 설치

https://nodejs.org/ko

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>

<head>

</head>

<body>

let data = [

{

price: 18000,

publisher: "한빛미디어",

{

price: 26000,

publisher: "한빛아카데미",

]; // 객체 배열

// 자료를 출력

console.log(data);

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

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

</script>

</body>

</html>

결과

object add

<!DOCTYPE html>

<head>

</head>

<body>

//객체 정의

let student = {

};

// 객체의 속성 추가

student.hobby = "악기";

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

console.log(student);

</script>

</body>

</html>

결과

object delete

<!DOCTYPE html>

<head>

</head>

<body>

//객체 정의

let student = {

hobby: "악기",

hope: "생명공학자",

};

// 객체의 속성 삭제

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

delete student.hope;

// 결과 출력

console.log(student);

</script>

</body>

</html>

결과

object update

<!DOCTYPE html>

<head>

</head>

<body>

// 객체 정의

let student = {

hobby: "악기",

hope: "생명공학자",

};

// 객체의 속성 값 수정

student.name = "홍길동";

student.hobby = "음악감상";

// // 결과 출력

console.log(student);

</script>

</body>

</html>

결과

object 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>

결과

class basic

<!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>

결과

arrow baisc

html 생략

// 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

// 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 = {

species: "human",

};

console.log(currentState);

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

// 객체 속성 추가

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

console.log(currentState);

// 객체 속성 수정

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

console.log(currentState);

결과

for each

// 코딩 역사 : 구조적프로그래밍(절차적) : 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

// 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

// 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

노드

노드 설치

object array

object add

object delete

object update

object undefined

class basic

arrow baisc

spread

for each

map

filter

'HTML > React' 카테고리의 다른 글

티스토리툴바