본격적인 리액트를 배우기 앞서, 리액트에서 가장 많이 쓰이고 중요한 JS 문법들을 되새김질 하는 시간.
// let blockScopeVariable = "Available only in this block";
// if (true) {
// let blockedScope = "Visible inside this block";
// console.log(blockedScope);
// }
// console.log(blockedScope);
// console.log(blockScopeVariable);
//블록드스코프가 블록 범위를 벗어나서 로그에 찍히지 않음. (오류발생)
// let blockScopeVariable = "Available only in this block";
// if (true) {
// var blockedScope = "Visible inside this block";
// console.log(blockedScope);
// }
// console.log(blockedScope);
// console.log(blockScopeVariable);
// 블록드스코프가 블록 범위를 벗어났음에도 불구하고 찍힘 (var 는 사용하지 않는것이 바람직함)
// for (var i = 0; i < 3; i++) {
// console.log(i);
// }
// console.log(i);
// // 오류가 발생해야 하는데 발생 안 함, for 문에 의해서 0, 1, 2 까지 출력을 하는데 그 다음에 1이 더해진 상태에서 i 까지 출력이 됨
// ((i 는 0부터 3보다 작을 때 까지 하나 씩 순회하며 늘려준다))
// for (let i = 0; i < 3; i++) {
// console.log(i);
// }
// console.log(i);
// let, const 어떤 걸 써야 되지? -> 가장 먼저 const 를 떠올리고 재할당이 필요한 경우 (변경이 필요한 경우) 에만 let 을 떠올리면 좋다
function testFunction() {
var test = "any words";
if (true) {
var test = "changed value";
}
console.log(test);
}
testFunction();
// 코드 예상 -> any words 가 나올까 change value 가 나올까? -> change value 가 나옴
// var 키워드를 쓰면 안 되는 이유 -> 논리적인 흐름에서 벗어나게 하기 때문
var, let, const 중 var 는 가능한 권장하지 않는다고 한다.
논리적인 흐름에서 벗어나게 하기 때문이다.
(의도한 바와 다르게 출력되는 경우가 많음 -> 배열, 객체 밖의 변수인데도 의도와 다르게 읽어냄 )
( 블록 범위를 벗어났음에도 불구하고 찍힘)
( 위 코드 예시에서 필자는 anyword 라는 텍스트를 출력하려고 했으나 chaged value 가 나오는 것 처럼)
// 객체에는 어떤 데이터 타입이든 다 들어갈 수 있음
const user = {
name : "르탄이",
age: 30,
isAdmin: true,
printhello: () => console.log ("hello"),
};
user.email = "gnswo9187@daum.net"; //추가
user.age = 31; //수정
delete user.isAdmin; //삭제
// 객체 자체는 변경된게 아님. 불변성이 깨진 상태.
console.log(user);
// //객체접근 : 괄호 표기법
// const attribute = "name";
// console.log(user[attribute]); // attrubute 는 name 이라는 텍스트를 가지고 있는 변수, attrubute 에 "name" 을 넣어도 됨
// //객체 접근 (user 온점 name 온점을 통해 user 안의 name 이라는 객체에 접근) 점 표기법
// console.log (user.name);
// console.log (user.age);
// user.printhello(); // 함수에 접근도 가능 함수를 실행 시키기 위해서 괄호를 열고 닫음
//배열
// const number = [1, 2 ,3]; //객체랑 다르게 대괄호
// // console.log(number);
// console.log(number[1]);
// number[1] = 10;
// console.log(number[1]);
//객체
const user = {
name : "르탄이",
age: 30,
isAdmin : true,
};
// const keys = Object.keys(user); // user 의 key 를 반환함 -> name, age, isAdmin
// console.log(keys);
// const values = Object.values(user); // user 의 value 를 반환함 -> "르탄이", 30, true
// console.log(values);
// const entries = Object.entries(user); // user 의 배열을 반환함 -> 큰 배열 안의 작은 배열 = key, value 를 쌍으로 반환해줌
// console.log(entries);
const userDetails = {
occupation: "개발자",
};
Object.assign(user, userDetails);
console.log(user);
솔직히 코드 구현은 구글링이나 팀원, 튜터님들 도움으로 어떻게, 어떻게 해결하긴 했지만 지금 내가 이 코드를
어떻게 ( 문법의 쓰임새? 이렇게 코드를 구현한 이유? ) 설명해야 할지를 몰랐었다.
나름 집중해서 강의도 듣고, 코드도 짜보고 하긴 했는데 주차는 지나가고, 새로운 정보는 들어오는데 뒤쳐지지 않게 다음 단계로 빨리 넘어가야겠다,, 라는 생각이 조금 잘못 됬었던 것 같다.
다음 주 부터 진행되는 캠프 내의 분반 수업 중 베이직 반을 선택했더니 JS 문법들을 뇌에 때려박아 주실 만큼 집중적으로 차근차근, 천천히 알려주신다고 한다.
내가 원하던 강의기도 하다. 기존 커리큘럼은 따라가기 바빴지만, 솔직히 내가 부족한 점들을 보완하기에는 시간도 부족하고, 어떻게 해야될지도 몰랐었다.
다음 주 부터는 기존 커리큘럼을 따라가되, 지난 정보들을 복습하며 익히는데 집중 해보려고 한다.
리액트 주차부터 진짜 시작이라고들 하는데, 진짜 그런 것 같다. 뭔가 각오도 남다르고?
