Chapter 3-3. 주특기 심화 (W5) 첫째 날.
항해는 매주 금요일을 일주일의 첫 날로 정해 일정을 운영한다.
오늘은 오전 9시에 OT 가 진행되었다.
OT 에서는 이번주 해야할 것으로 개인과제, 팀과제가 있음을 안내받았다.
더불어 과제수행에 도움이 되는 강의를 지급받았다.
내 주특기는 React.
React와 함께한지 3주차로 접어들고 있다.
오늘 학습한 것
자바스크립트 기초
1. 변수와 상수 : 변수 생성의 3단계(선언->초기화->할당)
- 선언: 스코프가 참조하는 대상이 되도록 실행 컨텍스트에 변수 객체를 등록
- 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화)
- 할당: undefined로 초기화된 변수에 실제 값을 할당
- 변수 선언 키워드
- var
- var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다.
- var는 선언과 초기화를 한번에 한다
- 재선언이 가능하다.
- 선언하기 전에도 사용할 수 있다.
- 코드 블럭을 무시한다. (var는 함수의 최상위로 호이스팅 된다. 선언은 호이스팅 되고 할당은 호이스팅 되지 않는다.
- let
- 자바스크립트에서 변수를 생성할 때 쓰는 키워드
- block-scope를 갖는다.
- {}안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없다.
- 재선언은 불가, 재할당은 가능!
- const
- 자바스크립트에서 상수를 생성할 때 쓰는 키워드
- block-scope를 갖는다.
- {}안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없어요!
- 재선언 불가, 재할당도 불가! (⇒ 선언과 동시에 할당해요!)
- var
- TDZ(Temporal Dead Zone) = 일시적 사각지대
2. 자료형
- 자바스크립트는 8가지 기본 자료형을 지원. 객체를 제외한 나머지 7가지는 원시형(primitive type).
- 정수, 부동 소수점을 저장하는 숫자형: -(2^53-1) ~ (2^53-1)까지 지원
- 아주 큰 숫자를 저장하는 BigInt형
- 문자열을 저장하는 문자형
- 논리 값 (true/false. boolean형)
- 값이 할당되지 않음을 나타내는 독립 자료형 undefined
- 값이 존재하지 않음을 나타내는 독립 자료형 null
- 복잡한 자료구조를 저장하는 데 쓰는 객체형(다음 강의에서 조금 더 알아봅니다!)
- 고유 식별자를 만들 때 쓰는 심볼형
3. 객체(Object)
- 객체(Object)
- 오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있다.
- key로 구분된 데이터 집합, 복잡한 개체를 저장할 수 있다.
- {...} ← 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있다.
- 프로퍼티는 **key : value**로 구성
- key에는 문자형, value에는 모든 자료형이 들어갈 수 있음
- const로 선언된 객체는 수정될 수 있음.
- const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미합니다!
- 즉, 객체의 프로퍼티는 보호되지 않아요!
// my_cat이라는 상수를 만들었어요!
const my_cat = {
name: "perl",
status: "좀 언짢음",
}
my_cat.name = "펄이";
console.log(my_cat) // 고양이 이름이 바뀌었죠!
// 여기에선 에러가 날거예요. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없거든요!
my_cat = {name: "perl2", status: "많이 언짢음"};
4. 함수
- 함수 선언문
// 이렇게 생긴 게 함수 선언문 방식으로 함수를 만든 거예요.
function cat() {
console.log('perl');
}
- 함수 표현식
// 이렇게 생긴 게 함수 표현식을 사용해 함수를 만든 거예요.
let cat = function() {
console.log('perl');
}
// 물논 화살표 함수로 써도 됩니다.
// 다만 주의하실 점! 화살표 함수는 함수 표현식의 단축형이라는 거! 주의하세요! :)
let cat2 = () => {
console.log('perl2');
}
- 함수 선언문 vs 함수 표현식
- 함수 선언문으로 함수를 생성하면 독립된 구문으로 존재
- 함수 표현식으로 함수를 생성하면 함수가 표현식의 일부로 존재
- 함수 선언문은 코드 블록이 실행되기 전에 미리 처리되어 블록 내 어디서든 사용할 수 있다.
- 함수 표현식은 실행 컨텍스트가 표현식에 닿으면 만들어진다. (변수처럼 처리되는 거죠!)
- 콜백함수
- 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백함수라고 함
const playWithCat = (cat, action) => {
action(cat);
}
const useBall = (cat) => {
alert(cat+"과 공으로 놀아줍니다.");
}
//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!
playWithCat("perl", useBall);
5. 프로토타입 (Prototype)
// animal이라는 객체를 하나 만들었습니다!
let animal = {
leg: 4,
legCount() {
console.log(this.leg); // this는 animal을 의미합니다.
}
};
// 또 다른 객체 cat을 만들었고요!
// animal을 프로토타입 상속 받아올 거예요. (__proto__를 씁니다.)
let cat = {
__proto__:animal, // cat의 프로토타입은 animal!
cute: true,
};
// 프로토타입을 설정해주어서 cat은 animal의 메소드와 프로퍼티를 사용할 수 있어요.
cat.legCount();
console.log(cat.leg);
// cat만 가지고 있는 프로퍼티도 있고요!
console.log(cat.cute);
// animal은 cat의 속성을 가져올 수 없어요!
console.log(animal.cute);
- 위 예제에서 animal은 cat의 프로토타입 객체입니다. cat의 프로토타입은 animal이라고도 해요!
- cat.legCount()에서 실행되는 legCount는 animal에서 상속된 메소드예요.
- → animal의 메소드와 속성이 복사되어 cat에 들어가는 게 아닙니다!
- animal을 상속 받은 cat, cat을 상속받은 다른 객체를 만들 수도 있을거예요.
- 순환 참조는 되지 않아요! (animal은 cat을 상속받은 객체를 상속할 수 없어요!)
- → 이런 식으로 상속이 쭉쭉 내려가는 걸 프로토타입 체인이라고 불러요.
프로토타입 객체와 프로토타입 링크 ???
지금은 잘 이해되지 않는 개념이다. 추가 공부 필요.
리액트
1. 프로젝트 기획서 쪼개기
- 프로토 타입 툴 중 하나인 피그마로 기획서 확인
2. 비동기 처리
- 스파르타코딩클럽에서 제공하는 강의로는 비동기 처리가 잘 이해되지 않았다.
- 그래서 '드림코딩 엘리'의 강의를 수강했다.
https://www.youtube.com/watch?v=s1vpVCrT8f4
보완할 것
- 프로토타입 객체와 프로토타입 링크
- 자바스크립트 비동기 처리
- 콜백지옥, 프로미스, async/await
'개발일지 Dev Diaries > 항해99 Hanghae99' 카테고리의 다른 글
[항해99 28일차] (22.04.03) WIL_주특기 숙련 마감, 주특기 심화 시작 (0) | 2022.04.03 |
---|---|
[항해99 27일차] (22.04.02) 자바스크립트/리액트 파고들기 (0) | 2022.04.03 |
[WIL] 3월 3주_ JavaScript, ES, ES5/ES6 (0) | 2022.03.20 |
[항해99] 스파르타코딩클럽 : 웹개발 종합반 2주차 (0) | 2022.03.02 |
[항해99]_스파르타 코딩클럽 웹개발 종합반 1주차 (0) | 2022.02.10 |
댓글