[항해99 26일차] (22.04.01) 주특기 심화 첫째 날

Chapter 3-3. 주특기 심화 (W5) 첫째 날.

 

 

항해는 매주 금요일을 일주일의 첫 날로 정해 일정을 운영한다.

 

오늘은 오전 9시에 OT 가 진행되었다. 

OT 에서는 이번주 해야할 것으로 개인과제, 팀과제가 있음을 안내받았다.

더불어 과제수행에 도움이 되는 강의를 지급받았다. 

 

내 주특기는 React.

React와 함께한지 3주차로 접어들고 있다. 

 

 

 

오늘 학습한 것

자바스크립트 기초

 

1. 변수와 상수 : 변수 생성의 3단계(선언->초기화->할당) 

• 선언: 스코프가 참조하는 대상이 되도록 실행 컨텍스트에 변수 객체를 등록 
• 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화)
• 할당: undefined로 초기화된 변수에 실제 값을 할당
• 변수 선언 키워드
  • var
    • var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다.
    • var는 선언과 초기화를 한번에 한다
    • 재선언이 가능하다.
    • 선언하기 전에도 사용할 수 있다.
    • 코드 블럭을 무시한다. (var는 함수의 최상위로 호이스팅 된다. 선언은 호이스팅 되고 할당은 호이스팅 되지 않는다.
  • let
    • 자바스크립트에서 변수를 생성할 때 쓰는 키워드
    • block-scope를 갖는다.
      • {}안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없다.
    • 재선언은 불가, 재할당은 가능!
  • const
    • 자바스크립트에서 상수를 생성할 때 쓰는 키워드
    • block-scope를 갖는다.
      • {}안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없어요!
    • 재선언 불가, 재할당도 불가! (⇒ 선언과 동시에 할당해요!)

 

• 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