REACT: JavaScript - 01

Why JS?

• js는 큰 커뮤니티를 가지고 있다.
• 웹, 어플리케이션 등 개발 가능

JS, HTML, CSS

• HTML: 요소들의 배치, 내용, 기본 구조 설정
• CSS: 요소들의 색상, 크기등 스타일 설정
• JS: 요소들의 동작, 기능 설정

How it works?

• 웹 브라우저에 탑재된 JS engine으로 실행된다. (개발자도구: f11 혹은 option+command+i)
• VScode 등의 편집기로 작성할 수 있음
• script 태그로 js 파일을 불러오는 index.html을 브라우저로 열면 실행해 볼 수 있다. (vscode liveserver expansion 활용)

JS기초(새로 알게된 것만 정리)

1. null 병합 연산자

undefined, null이 아닌 것만 걸러냄

let a;
let b = 10;
console.log(a ?? b); // '10'
let c = 1;
let d = 2;
console.log(c ?? d) // '1'

2. typeof 연산자

type을 스트링으로 반환

let c = 'abc';
let d = typeof c;
console.log(d) // 'String'

3. 화살표 함수

function foo(){...}
let varA = foo;

JS의 함수는 객체 취급이 가능. 즉 변수에 할당 가능!

let varB = function (){...};

아예 변수에 '익명함수(이름이 없는 함수)'를 할당할 수 있음. 이를 아래와 같이 표현 가능.

let varC = (val) => {
    let ret = val;
    ret ++;
    return ret};
let varD = () => 1;

4. 콜백 함수

자신이 아닌 다른 함수에 인수로써 전달된 함수.

function foo(para){
    para();
}
function bar(){
    console.log("bar");
}


foo(bar) // 출력: "bar"

콜 백: 실행 된 뒤, 나중에 실행된다는 뜻. 실제로는 함수가 원하는 타이밍에 호출 가능.

익명함수, 화살표 함수를 인수로 넣을 수 있다.

활용예시: 구조가 유사한 함수들이 여럿 만들어 질 때 코드 개선 가능.

function bar(count,callback){
  for(let i = 1; i<= count; i++){
      callback(i);
  }
}
bar(10, (i)=>{console.log(i);});
bar(10, (i)=>{console.log(i*2);});
bar(10, (i)=>{console.log(i*3);});
// 콜백을 쓰지 않고 여러개의 bar를 만드는 것보다 반복 감소, 변수를 파라미터로 받는것보다 확장성 good.

5. 스코프

변수나 함수에 접근 혹은 호출 가능한 범위의 제한을 뜻한다. 중괄호로 만들어진 블록으로 이를 구분한다.

{let a=10;} 
console.log(a); // -> 오류발생

주의: 반복문, 조건문의 중괄호 블록에서는 스코프 구분이 일어나지 않음.

• 전역 스코프: 전체 영역에서 접근 가능. 모든 중괄호 밖에서 선언.
• 지역 스코프: local. 특정 영역에서만 접근 가능. 하나 이상의 중괄호 블록안에 선언.

5. 호이스팅:

함수 선언이 가장 먼저 실행된다 (함수의 호출이 구현보다 윗 줄에 있어도 된다)

6. 객체

객체 기초:

// 객체 생성
let var1 = new Object(); // 객체 생성자 방식
let var2 = {}; // 객체 리터럴 방식

// 객체 프로퍼티(속성)
let var3 = {
    name:"me",
      age:27,
      behave:foo, // 함수 지정가능
    "이것은 문자열 키":true,
      pet:{} // 객체도 지정 가능
}

// 객체 프로퍼티 접근하기
console.log(var.name); // "me"
console.log(var.name_); // "Undefined"
console.log(var["age"]) // "27"
console.log(var["age2"]) // "Undefined"
// 동적으로 프로퍼티에 접근해야할 경우 두번째 방식이 유용하다. (접근에 변수를 이용할 수 있다)

// 새 프로퍼티 추가/ 프로퍼티 수정
var3.new_prop = "its new";
var3["neo"] = 10;
var3.neo = 1;

// 프로퍼티 삭제
delete var3.neo;
delete var3["new_prop"];

// 프로퍼티 존재유무 확인(in)
console.log("name" in var3); // true
console.log("same" in var3); // false

상수 객체: const animal = {name = "alex", age = 10};
상수 객체도 여전히 프로퍼티의 수정, 삭제, 추가 가능하다.

매서드: 함수인 프로퍼티

let var4 = {
    foo: function (){...},
    bar: () => {...},
    method1(){...};
}