Node.js -> 리엑트를 실행하기 위해서 미리 설치되어있어야 한다
(예전에는 yarn을 많이 사용했었음)
1. React 설치
1.1 nvm 설치 (node.js version manager)
1.2 node.js lts버전 설치
2. React 프로젝트 생성
2.1 create-react-app 설치
3. javascript ES6 버전
1. nvm
nvm list ->현재 nvm(window 버전)버전을 알려준다
nvm --version ->현재 nvm버전 확인가능
nvm ->알려준다
https://github.com/coreybutler/nvm-windows/releases
nvm 최신 버전으로 업로드
cmd :관리자 모드로 열어라
nvm install lts -> lts 설치
nvm uninstall lts - lts 삭제
다시 nvm install lts
사용 버전 바꾸기
버전 확인 nodejs 사용할 준비 완료
설치 경로
C:\Windows\system32>cd C:\java505\intellij\react
C:\java505\intellij\react>npx create-react-app react_test1
create-react-app : 실행명 react_test1: 파일명
happy hacking이라고 뜬다
C:\java505\intellij\react>cd react_test1
C:\java505\intellij\react\react_test1>npm start
ctrl c누르면 멈춤
인텔리제이에서 만들기
app.js와 index.js를 많이사용할 예정
터미널 열고
//TemplateString.js
//ES6에서 새로 추가된 문자열 사용 방식
//``(백틱)기호 안에 문자열을 입력하는 방식
// `` 안에 ${변수명}을 사용하여 변수의 내용을 바로 출력하는 것이 가능
// ${} 내부에서 간단한 연산도 가능함
console.log('---------ES5 버전----------')
var string1 = '안녕하세요';
var string2='반갑습니다';
var greeting = string1 + ' ' + string2
console.log(greeting)
var product = {name :'도서', price :'4200원'}
var message = '제품' + product.name + '의 가격은 ' + product.price + '입니다';
console.log(message);
var multiLine = '문자열1\n문자열2';
console.log(multiLine);
var value1 = 1;
var value2=2;
var boolValue =false;
var operator1 = '곱셈값은 ' + value1 * value2 + '입니다';
console.log(operator1)
var operator2 = '불리언 값은 ' + (boolValue ? '참' : '거짓') + '입니다'
console.log(operator2);
console.log('-------ES6버전---------');
var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2}`;
console.log(greeting);
var product = {name : ' 도서',price :'4200원'};
var message = `제품 ${product.name}의 가격은 ${product.price}`;
console.log(message);
var multiLine = `문자열1
문자열2`;
console.log(multiLine);
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다`;
console.log(operator1);
var operator2 = `불리언 값은 ${boolValue ? '참':'거짓'}입니다`;
console.log(operator2);
터미널에 node TemplateString.js라고 치면 나온다
// SpreadOperator.js
// 전개 연산자 (...)
// 나열형 자료를 추출하거나 연결할 때 사용
// 배열, 객체, 변수명 앞에 ... 기호를 사용하여 사용
// 배열 객체 함수 인자 표현식([]) 안에서만 동작함
console.log('------ES5------');
var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var combined = [array1[0], array1[1], array2[0], array2[1]];
// 배열의 각 요소를 하나씩 추출하여 새로운 배열에 대입
console.log(combined) //[ 'one', 'two', 'three', 'four' ]
var combined = array1.concat(array2);
console.log(combined);
//[ 'one', 'two', 'three', 'four' ]
//[ 'one', 'two', 'three', 'four' ]
var combined = [].concat(array1, array2);
console.log(combined);
// [ 'one', 'two', 'three', 'four' ]
// [ 'one', 'two', 'three', 'four' ]
// [ 'one', 'two', 'three', 'four' ]
// 1번, 2번, 3번 형태가 동일하게 출력이 된다
var first = array1[0];
var second = array1[1];
var three = array1[2] || 'empty'; //false가 되면 뒤에 값 대입 (값이 없을 경우) array1은 0,1의 값만 존재한다
console.log(first); // one
console.log(second); //two
console.log(three); //empty
console.log('\n------ES6-----\n');
var array1 = ['one','two'];
var array2 = ['three', 'four'];
var combined = [...array1, ...array2]; //[]저장할 데이터가 오른쪽에 위치
console.log(combined); // [ 'one', 'two', 'three', 'four' ]
//전개 연산자
var [first, second, three = 'empty', ...others] = array1; //three = 'empty' : three 값이 없기 때문에 empty로 기본값 준다
//others: 남아있는 데이터를 몰아주기
console.log(first); //one
console.log(second); //two
console.log(three); //empty
console.log(others); // []
var [first, seocnd] = [second, first]; //second의 데이터를 first에 넣어주고 first의 데이터를 second에 넣어준다. swape
// 예전 서로 값을 바꾸기 위해서는 변수 3개가 필요했따
var first = 10;
var second = 20;
var tmp = 10;
tmp = first;
first = second;
second = tmp;
// 잘못 사용한 예
// var wrongArr = ...array1; 전개 연산자는 대괄호 안에서만 동작한다 [...array1]
// SpreadOperator2.js
// object 타입에서 전개 연산자 사용하기
console.log('-----ES5-----');
var objOne = {one:1, two:2, other:0};
var objTwo = {three :3, four : 4, other:-1};
var combined = {
one: objOne.one,
two : objOne.two,
three : objTwo.three,
four : objTwo.four
};
console.log(combined); //{ one: 1, two: 2, three: 3, four: 4 }
// assign()함수를 이용하여 object 타입의 변수를 하나로 합함
// 첫번째 매개변수는 합쳐질 대상, 두 번째 세 번째 매개변수를 첫번째 매개변수에 합함
// 동일한 키를 사용한 데이터가 있을 경우 뒤쪽에 나오는 키의 값으로 합쳐짐
var combined = Object.assign({},objOne,objTwo);
console.log(combined); // { one: 1, two: 2, other: -1, three: 3, four: 4 }
// 위에 있는 함수와 매개변수의 순서가 다르기 때문에 결과도 달라짐
var combined = Object.assign({},objTwo,objOne);
console.log(combined); //{ three: 3, four: 4, other: 0, one: 1, two: 2 }
var others = Object.assign({}, combined);
console.log(others);
delete others.other;
console.log(others);
console.log('\n------ES6-----\n');
var combined = {...objOne, ...objTwo};
console.log(combined); //{ one: 1, two: 2, other: -1, three: 3, four: 4 }
var combined = {...objTwo, ...objOne};
console.log(combined); //{ three: 3, four: 4, other: 0, one: 1, two: 2 }
var {other, ...others} = combined;
console.log(other); //0 other 값만 똑 때내어서 넣어줌
console.log(others); //{ three: 3, four: 4, one: 1, two: 2 }
//TemplateString.js
//ES6에서 새로 추가된 문자열 사용 방식
//``(백틱)기호 안에 문자열을 입력하는 방식
// `` 안에 ${변수명}을 사용하여 변수의 내용을 바로 출력하는 것이 가능
// ${} 내부에서 간단한 연산도 가능함
console.log('---------ES5 버전----------')
var string1 = '안녕하세요';
var string2='반갑습니다';
var greeting = string1 + ' ' + string2
console.log(greeting)
var product = {name :'도서', price :'4200원'}
var message = '제품' + product.name + '의 가격은 ' + product.price + '입니다';
console.log(message);
var multiLine = '문자열1\n문자열2';
console.log(multiLine);
var value1 = 1;
var value2=2;
var boolValue =false;
var operator1 = '곱셈값은 ' + value1 * value2 + '입니다';
console.log(operator1)
var operator2 = '불리언 값은 ' + (boolValue ? '참' : '거짓') + '입니다'
console.log(operator2);
console.log('-------ES6버전---------');
var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2}`;
console.log(greeting);
var product = {name : ' 도서',price :'4200원'};
var message = `제품 ${product.name}의 가격은 ${product.price}`;
console.log(message);
var multiLine = `문자열1
문자열2`;
console.log(multiLine);
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다`;
console.log(operator1);
var operator2 = `불리언 값은 ${boolValue ? '참':'거짓'}입니다`;
console.log(operator2);
variable.js
// Variables.js
// ES6에서 let, const 키워드가 추가됨
// var : ES6 버전까지 자바스크립트에서 변수를 선언하는 유일한 방식
// 변수의 스코프(범위) 함수를 기준으로 하고 있음, FOR 혹은 IF, switch ~ case 내에서 선언한 변수라도 해당 코드블럭을
// 벗어나서 사용이 가능하다
// 중복 선언이 가능하다
// let : ES6에서 추가된 변수선언 방식
// 변수 스코프가 코드 블럭({ })을 기준으로 한다, for 및 if, switch ~ case의 코드블럭 내에서 선언된 변수는
// 해당 코드블럭을 벗어나면 메모리에서 삭제됨
// 중복 선언이 불가능함
// const : ES6버전에서 추가된 상수 선언 방식
// 변수의 스코프가 코드 블럭({ })을 기준으로 함, FOR 및 if, switch ~ case 의 코드블럭 내엔서 선언된 변수는
// 해당 코드 블럭을 벗어나면 메모리에서 삭제됨
// 중복 선언이 불가능함
// 지정된 변수의 데이터 수정이 불가능함
// const로 선언된 변수에 배열, object와 같은 데이터를 저장했을 경우 해당 배열 및 object의 요소의 데이터를 변경할 수 있다
const num=1;
console.log(num);
// num = 100;
// const로 선언된 곳에 추가 더하면 오류난다
const str = '문자';
console.log(str);
// str = '변경된 문자'
// const는 상수이기 때문에 값을 직접 수정하고자 하면 오류 발생
const arr = [];
console.log(arr);
arr[0] = 10;
console.log(arr[0]);
console.log(arr[1]);
// 배열에 요소를 추가하는 append()함수 사용 시 오류 발생
// arr.append(30);
const arr1 = [1,2,3]
console.log(arr1)
// 배열의 요소의 값을 수정하는 것은 문제가 없음
// arr1.append(4);
arr1[0] = 100;
arr1[1] = 200;
arr1[2] = 300;
console.log(arr1)
// object 타입에 데이터 추가 시 오류 발생
const obj = {};
// obj = {name : '이름'};
// object가 가지고 있는 요소의 내용을 수정하는 것은 문제가 없음
const obj1 = {num :1, name :'아이유'};
console.log(obj1);
obj1.num = 10;
obj1.name ='유재석';
console.log(obj1);
console.log('\n\n');
// const로 생성한 배열에 내장 함수 사용 시 데이터 추가, 삭제가 가능함
// 하지만 무결성 제약조건을 위반하게 되므로 사용하지 않아야 함
const arr2 = [];
console.log(arr2);
arr2.push(1);
console.log(arr2);
arr2.splice(0,0,0);
console.log(arr2);
arr2.pop(arr2); //삭제
console.log(arr2);
const obj2 = {};
console.log(obj2);
obj2['name'] = '아이유';
console.log(obj2);
Object.assign(obj2, {name : '유재석'});
console.log(obj2);
delete obj2.name;
console.log(obj2);
console.log('\n\n');
// const 사용 시 내용을 수정하고자 하면 새로운 const 변수를 선언하고 데이터를 입력하는 방식으로 사용
const num1 =1;
const num2 = num1 *3;
const str1 = '문자';
const str2 = str1 + '추가';
const arr3 = [];
const arr4 = arr3.concat(1); //데이터 1추가
console.log(arr3);
console.log(arr4);
const arr5 = [...arr4,2,3];
console.log(arr5);
const arr6 =arr5.slice(0,1);
console.log(arr5);
console.log(arr6);
const [first,...arr7] = arr5;
// fist : 변수명. arr5 = 배열, obj
console.log(first); //1
console.log(arr7); //[ 2, 3 ]
const obj3 = {name : '아이유', age:30};
const obj4 = {...obj3, name:'유재석'};
const {name, ...obj5} = obj4;
console.log(obj3); //{ name: '아이유', age: 30 }
console.log(obj4); // { name: '유재석', age: 30 }
console.log(name); //유재석
console.log(obj5); //{ age: 30 }
