일단 D드라이브의 React lib에 3개 다 다운로드 하기 !!
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
https://classic.yarnpkg.com/en/docs/install#windows-stable
Yarn
Fast, reliable, and secure dependency management.
classic.yarnpkg.com
React
리액트란?
• React 는 UI 를 구현하는 JavaScript 라이브러리
• 웹 앱(Web App) 또는 네이티브 앱(Native App)
• 유지보수를 쉽게 , DOM 관리
• 성능최적화 쉽게
• 컴포넌트에 집중
• 대부분 공식 라이브러리가 없음 (높은 자유도)
• 자바스크립트 친화적 es6 기반로 배우기가 쉽다
1. Nodejs
- 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데 사용됩니다.
- npm은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다.
기존에 설치된 Node.js 제거하는 방법
① '제어판 > 프로그램 추가/제거' 에서 Node.js 삭제
② 다음 경로의 폴더 삭제
C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users\User\AppData\Roaming\npm
C:\Users\User\AppData\Roaming\npm-cache
2. Yarn
- https://classic.yarnpkg.com/en/docs/install#windows-stable
- 자바스크립트 패키지를 관리하기 위해서 사용됩니다.
- yarn은 npm동작 방식과 비슷하지만 npm의 단점을 보완해 성능과 속도를 개선한 패키지 관리도구이다.
Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠르다.
npm VS yarn
npm은 여러 패키지를 설치할 경우 패키지가 완전히 설치될 때까지 기다렸다가 다른 패키지로 이동한다. 작업이 패키지별로 순차적으로 실행된다는 것이다. yarn은 이 작업들을 병렬로 설치하기 때문에 성능과 속도가 향상된다는 장점이 있다.
3. VS Code ( 에디터 )
- https://code.visualstudio.com/
- VS Code 확장설치 (부가기능설치)
- 기본 브라우저는 Chrome 설정해야 한다.
톱니바퀴 → Settings → browser 검색 → 아래로 내려오면 Custom Browser : Chrome 선택
톱니바퀴 → Settings → local 검색 → Extensions(왼쪽)
→ 아래로 내려오면 Use local IP as host 체크
① Live Server
② Korean Language Pack for Visual Studio Code
③ Auto Close Tag
④ Auto Complete Tag
⑤ Auto Import
⑥ Auto Rename Tag
⑦ Reactjs code snippets – 코드 자동 생성
Folder: day01_ES6
File: 01_템플릿 리터럴.html
! 치고 enter 누르면
자동완성이 된다 !!!
미니맵 해제해서 넓게 쓰자~!
템플릿 리터럴(Template literal) 새로운 문자열 표기법
① backtick(`)
② 변수 처리는 ${변수}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 20
const b = 30
const strl = a + '와' + b + '의 합은 ' + (a+b)
console.log(strl)
//backtick (`) - 변수, 수식, 문자열을 같이 쓸 때 사용
const str2 = `a와 ${b}의 합은 ${a+b}`
console.log(str2)
const name = '홍길동'
const age = 20
const addr = '서울'
const str3 = `나의 이름은 ${name}이고 나이는 ${age}이고 사는 곳은 ${addr}입니다.`
console.log(str3)
</script>
</body>
</html>
02_연산자.html
① React 연산자
=== 같다
!== 다르다
② 삼항 연산자
[형식]
조건 ? true 일 때 : false 일 때
③ &&
[형식]
true && 참일 때 수행하는 결과
④
[형식]
( false, null, undefined ) 거짓일 때 수행하는 결과
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
const a = 25
const b = true
const c = false
const d = undefined
const result = a >= 30 ? '참' : '거짓'
console.log(result)
</script>
</body>
</html>
Live Server은 5500번인 거 한 번 체크만 하고 가기 !
const result2 = b && '참에대한 결과입니다.'
console.log(result2)
const result3 = c || '거짓에 대한 결과입니다.'
console.log(result3)
const result4 = d || '값이 존재하지 않습니다.'
console.log(result4)
//비추천
const result5 = c === false ? '참' : '거짓'
console.log(result5)
const score = 95
//const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score > 70 ? 'C' : score >= 60 ? 'D' : 'F'
const grade = score >= 90 && 'A'
|| score >= 80 && 'B'
|| score >= 80 && 'C'
|| score >= 80 && 'D'
|| score >= 80 && 'E'
|| 'F'
console.log(`점수가 ${score}점 이므로 ${grade}학점 입니다.`)
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
const a = 25
const b = true
const c = false
const d = undefined
const result = a >= 30 ? '참' : '거짓'
console.log(result)
const result2 = b && '참에대한 결과입니다.'
console.log(result2)
const result3 = c || '거짓에 대한 결과입니다.'
console.log(result3)
const result4 = d || '값이 존재하지 않습니다.'
console.log(result4)
//비추천
const result5 = c === false ? '참' : '거짓'
console.log(result5)
//문제
const score = 95
//const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score > 70 ? 'C' : score >= 60 ? 'D' : 'F'
const grade = score >= 90 && 'A'
|| score >= 80 && 'B'
|| score >= 80 && 'C'
|| score >= 80 && 'D'
|| score >= 80 && 'E'
|| 'F'
console.log(`점수가 ${score}점 이므로 ${grade}학점 입니다.`)
</script>
</body>
</html>03_화살표함수.html
① 매개변수가 없을 경우
function(){} → () => { ... }
② 매개변수가 한 개인 경우, 소괄호를 생략 가능
function(x){} → (x) => { ... }
③ 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
function(x, y){} → (x, y) => { ... }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function make1() { //구현
console.log('Have a nice day!!');
}
make1(); //호출
function make2(num){
console.log(`num = ${num}`);
}
make2(100);
function make3(a, b){
console.log(`${a} + ${b} = ${a+b}`);
}
make3(25, 36);
//화살표 함수
const make11 = () => {
console.log('Have a nice day!!');
}
make11();
const make22 = (num) => {
console.log(`num = ${num}`);
}
make22(100);
const make33 = (a, b) => {
console.log(`${a} + ${b} = ${a+b}`);
}
make33(25, 36);
</script>
</body>
</html>
<!--
① 매개변수가 없을 경우
function(){} → () => { ... }
② 매개변수가 한 개인 경우, 소괄호를 생략 가능
function(x){} → (x) => { ... }
③ 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
function(x, y){} → (x, y) => { ... }
-->
04_push_concat.html
배열, 메서드() 중 불변성 유지
① push : 배열 뒷부분에 값을 삽입 (배열의 값이 변경된다)
② concat : 다수의 배열을 합치고 병합된 배열의 사본을 반환
기존의 배열은 건드리지 않음 - 불변성 유지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = [10, 20, 30]
arr1.push(40)
arr1.push(50)
arr1.push(60)
console.log(arr1)
console.log('---------------')
</script>
</body>
</html>
const arr2 = [10, 20, 30]
const arr3 = arr2.concat(); //복사본
console.log(arr2)
console.log(arr3)
console.log('---------------')
const arr4 = arr2.concat(40, 50, 60)
console.log(arr2)
console.log(arr4)
console.log('---------------')
원본은 안바뀌더라 !!! 중요
const data1 = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}];
console.log(data1[0].id + " " + data1[0].name + " " + data1[0].age) //1 홍길동 25
//문제
//data2라고 data1의 사본을 만들면서 항목을 추가 => id는 4 name은 라이언, age는 28
const data2 = data1.concat(
{
id:4,
name:'라이언',
age:28
}
)
console.log(data2)
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = [10, 20, 30]
arr1.push(40)
arr1.push(50)
arr1.push(60)
console.log(arr1)
console.log('---------------')
const arr2 = [10, 20, 30]
const arr3 = arr2.concat(); //복사본
console.log(arr2)
console.log(arr3)
console.log('---------------')
const arr4 = arr2.concat(40, 50, 60)
console.log(arr2)
console.log(arr4)
console.log('---------------')
const data1 = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}];
console.log(data1[0].id + " " + data1[0].name + " " + data1[0].age) //1 홍길동 25
//문제
//data2라고 data1의 사본을 만들면서 항목을 추가 => id는 4 name은 라이언, age는 28
const data2 = data1.concat(
{
id:4,
name:'라이언',
age:28
}
)
console.log(data2)
</script>
</body>
</html>
<!--
배열, 메서드() 중 불변성 유지
① push : 배열 뒷부분에 값을 삽입 (배열의 값이 변경된다)
② concat : 다수의 배열을 합치고 병합된 배열의 사본을 반환
기존의 배열은 건드리지 않음 - 불변성 유지
-->05_map.html
map (반복문)
[형식]
배열.map((요소, 인덱스) => {
return 요소
});
$.each(function(item, index){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const ar = [10, 20, 30];
const data = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}
];
//리액트에서는 return문이 없으면 값이 나오지 않는다, 반드시 써야 한다.
data.map((item, index) => {
return (console.log(index, item));
});
console.log('----------------------')
</script>
</body>
</html>
data.map((item, index) => {
return (console.log(index, item));
});
반복되는 문장이 1개이면 {}, return를 생략가능
arr.map((item, index) => {console.log(index, item)});
data.map((item, index) => {
return (console.log(item.id + ", " + item.name + ", " + item.age))
});
data.map((item, index) =>
console.log(item.id + ", " + item.name + ", " + item.age)
);
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = [10, 20, 30];
const data = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}
];
//리액트에서는 return문이 없으면 값이 나오지 않는다, 반드시 써야 한다.
arr.map((item, index) => {
return (console.log(index, item));
});
console.log('----------------------')
//반복되는 문장이 1개이면 {}, return를 생략가능
arr.map((item, index) => {console.log(index, item)});
data.map((item, index) => {
return (console.log(item.id + ", " + item.name + ", " + item.age))
});
data.map((item, index) =>
console.log(item.id + ", " + item.name + ", " + item.age)
);
</script>
</body>
</html>
<!--
map (반복문)
[형식]
배열.map((요소, 인덱스) => {
return 요소
});
-->06_filter.html
filter도 map함수와 마찬가지로 콜백함수를 인자로 받는데 모든 원소를 한 번씩 돌리면서
콜백함수의 몸체 부분에서 true를 반환하는 원소들만 걸러준 결과 배열
[형식]
const newArr = arr.filter( 현재값 => 조건 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = [10, 20, 30, 40, 50, 60]
//요소 중에서 30보다 큰 값만 추출
const result1 = arr.filter(item => item > 30);
console.log(result1)
</script>
</body>
</html>
//요소 중에서 40인 값만 추출
const result2 = arr.filter(item => item === 40)
console.log(result2)
//요소 중에서 40이 아닌 값만 추출
const result3 = arr.filter(item => item !== 40)
console.log(result3)
하나만 꺼내와도 배열의 값으로 꺼내오는 것을 알 수 있다.
//홍길동인 값을 출력 => 1 홍길동 25
const data2 = data1.filter(item => item.name === '홍길동')
console.log(data2)
//id가 2번인 값을 삭제
const data3 = data1.filter(item => item.id !== 2)
console.log(data3)
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = [10, 20, 30, 40, 50, 60]
//요소 중에서 30보다 큰 값만 추출
const result1 = arr.filter(item => item > 30);
console.log(result1)
//요소 중에서 40인 값만 추출
const result2 = arr.filter(item => item === 40)
console.log(result2)
//요소 중에서 40이 아닌 값만 추출
const result3 = arr.filter(item => item !== 40)
console.log(result3)
console.log('--------------------')
const data1 = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}
];
//홍길동인 값을 출력 => 1 홍길동 25
const data2 = data1.filter(item => item.name === '홍길동')
console.log(data2)
//id가 2번인 값을 삭제
const data3 = data1.filter(item => item.id !== 2)
console.log(data3)
</script>
</body>
</html>
<!--
filter도 map함수와 마찬가지로 콜백함수를 인자로 받는데 모든 원소를 한 번씩 돌리면서
콜백함수의 몸체 부분에서 true를 반환하는 원소들만 걸러준 결과 배열
[형식]
const newArr = arr.filter( 현재값 => 조건 )
-->07_find.html
find => filter와 비슷, 결과는 하나의 값(처음 만나는 값을 가져온다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = [10, 20, 30, 20, 50, 60]
const result1 = arr.find(item => item>30)
console.log(result1)
</script>
</body>
</html>
하나만 나오는 거 확인할 수 있다 !! 처음 만난 녀석만 !!
//요소 중에서 20인 값 찾기
const result2 = arr.find(item => item === 20)
console.log(result2)
const result3 = arr.findIndex(item => item === 20)
console.log(result3)
이 20은 첫 번째 있는 20이다 !
const data1 = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}
];
//id가 1인 값을 찾기
const data2 = data1.find(item => item.id === 1)
console.log(data2)
//name이 '라이언'인 값 찾기
const data3 = data1.find(item => item.name === '라이언')
console.log(data3) //undefined
//name이 '라이언'인 인덱스 찾기
const data4 = data1.findIndex(item => item.name === '라이언')
console.log(data4) // -1
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = [10, 20, 30, 20, 50, 60]
const result1 = arr.find(item => item>30)
console.log(result1)
//요소 중에서 20인 값 찾기
const result2 = arr.find(item => item === 20)
console.log(result2)
const result3 = arr.findIndex(item => item === 20)
console.log(result3)
console.log('--------------------------')
const data1 = [
{
id: 1,
name: '홍길동',
age: 25
},
{
id: 2,
name: '어피치',
age: 20
},
{
id: 3,
name: '프로도',
age: 35
}
];
//id가 1인 값을 찾기
const data2 = data1.find(item => item.id === 1)
console.log(data2)
//name이 '라이언'인 값 찾기
const data3 = data1.find(item => item.name === '라이언')
console.log(data3) //undefined
//name이 '라이언'인 인덱스 찾기
const data4 = data1.findIndex(item => item.name === '라이언')
console.log(data4) // -1
</script>
</body>
</html>08_indexOf.html
객체를 선언할 때에는 이렇게 {} 문자 안에 원하는 값들을 넣어준다.
{키 : 값}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = ['고구마', '감자', '고기', '고단백', '참치']
//'고'자가 들어간 단어를 모두 출력, 없으면 -1 반환
const result = arr.filter(item => item.indexOf('고') !== -1)
console.log(result)
</script>
</body>
</html>
const data1 = [
{text: '운동을 하다'},
{text: '수영을 하다'},
{text: '저녁을 먹다'},
{text: '친구를 만나다'},
{text: '잠을 자다'},
{text: '공부를 하다'},
]
//'하다'를 포함한 문자를 모두 출력
const data2 = data1.filter(item => item.text.indexOf('하다') !== -1)
console.log(data2)
//'하다'를 포함한 문자를 모두 출력
const data2 = data1.filter(item => item.text.indexOf('하다') !== -1)
console.log(data2)
const findText = (array, srt, key) => array.filter(item => item[key].indexOf(str) !== -1)
console.log(findText(data1, '하다', 'text'));
'REACT' 카테고리의 다른 글
| DAY 76 - React HOMEWORK (2024.10.24) (1) | 2024.10.24 |
|---|---|
| DAY 76 - React - Hook: useEffect / 컴포넌트별 CSS (2024.10.24) (3) | 2024.10.24 |
| DAY 75 - React / HOMEWORK (2024.10.23) (3) | 2024.10.23 |
| DAY 74 - React (2024.10.22) (2) | 2024.10.22 |
| DAY 74 - ES6 (2024.10.22) (0) | 2024.10.22 |
