console.log(_.isEmpty([])); // true
console.log(_.isEmpty({})); // true
console.log(_.isEmpty([1, 2, 3])); // false
console.log(_.isEmpty({ 'a': 1 })); // false

console.log(_.isEmpty(null)); // true
console.log(_.isEmpty(undefined)); // true

2. lodas의 get 함수

get 함수는 객체 안의 깊숙한 속성에 안전하게 접근할 수 있도록 도와주는 유용한 도구이다.

보통 자바스크립트 객체의 깊은 속성에 접근할 때, 해당 속성이 존재하지 않으면 에러가 발생할 수 있다. get 함수를 사용하면 이러한 문제를 피할 수 있다.

예를 들어, 다음과 같은 객체가 있다고 하자:

const user = {
  name: 'John',
  address: {
    city: 'New York',
    zip: {
      code: 10001
    }
  }
};​

이 객체에서 zip 코드에 접근하는 방법은

const zipCode = user.address.zip.code;

하지만 만약 경로 중간에 있는 address나 zip 속성이 없다면 에러가 발생할 것이다.

get 함수를 사용하면 address나 zip 속성이 없어도 에러가 발생하지 않고 undefined를 반환한다.

import { get } from 'lodash'; const zipCode = get(user, 'address.zip.code');

또한, 아래와 같이 기본값을 설정할 수도 있다.

const zipCode = get(user, 'address.zip.code', 'Unknown');​

이렇게 하면 address나 zip 속성이 없을 때 'Unknown'을 반환한다.

=lodash의 get 함수를 사용하면 에러를 방지하고 기본값을 설정할 수 있어서 코드가 더 안정적이고 읽기 쉬워진다.

clsx:

JavaScript에서 조건부로 CSS 클래스를 결합하는 데 사용되는 간단한 유틸리티 함수

클래스 이름을 동적으로 관리하고 결합하는 데 유용하다. 

왜 사용하는가?

1. 조건부 클래스: 특정 조건에 따라 클래스를 동적으로 추가하거나 제거할 수 있다.
2. 가독성: 클래스를 결합하는 로직을 더 깔끔하고 가독성 있게 만들 수 있다.
3. 재사용성: 복잡한 논리를 간결하게 표현하고 재사용할 수 있다.

예시

className={clsx(className)}를 사용하면

className prop으로 전달된 클래스 이름을 그대로 사용하겠다는 의미.

만약 className이 전달되지 않으면 빈 문자열을 반환다.

import clsx from 'clsx';

// 기본 사용법
const className = clsx('foo', 'bar'); // 결과: 'foo bar'

// 조건부 클래스 사용법
const isActive = true;
const className = clsx('foo', { 'bar': isActive }); // 결과: 'foo bar'

// 배열 사용법
const className = clsx(['foo', isActive && 'bar']); // 결과: 'foo bar'

// 다양한 조합
const className = clsx('foo', { 'bar': isActive, 'baz': false }); // 결과: 'foo bar'

<기능>

1. 객체의 구조를 정의한다. 
2. 클래스의 타입을 정의한다. 
3. 컴포넌트가 받을 props의 타입을 정의한다. 

<예시>

interface InputProps { 
type: string;
text: any;
color?: string;
}

이런 식으로 인터페이스를 사용하면 컴포넌트의 props 타입을 명확하게 정의하고,

코드의 가독성과 유지보수성을 높일 수 있다. 

enum은 상수(안 바뀌는 변수)의 그룹을 나타내는 특별한 class이다. 

numeric enum이랑 string enum이 있음. 


<numeric enums>

enum CarfinalDirections {
North, 
East, 
South, 
West
}
let currentDirection = CardinalDirections.North;


//currentDirection은 0 이 됨.

아무것도 안 쓰면, 중괄호 안의 값들은 0부터 1씩 증가하는 값으로 부여된다. 

North = 1

NotFound = 404

이런 식으로 직접 값을 지정해줄 수도 있다. 

<string enums>

enum CardinalDirections {
North = 'North',
East = 'East',
South = 'South',
West = 'West'
};

이렇게 문자열을 값으로 가지는 형태가 더 자주 쓰인다. 

<enum은 왜 쓰는 걸까? typescript에서>

GPT의 답변

- TypeScript에서 enum을 사용하면 관련된 상수들을 하나의 그룹으로 묶어서 관리할 수 있습니다. enum을 사용하면 코드의 가독성을 높이고, 잘못된 값을 사용하지 않도록 도와줍니다.

• 타입 안정성:
  • enum을 사용하면 컴파일 타임에 타입 검사를 할 수 있어 잘못된 값을 사용하지 않도록 도와줍니다. 예를 들어, 잘못된 버튼 타입을 사용하려고 하면 TypeScript 컴파일러가 오류를 발생시킵니다.
• 가독성 향상:
  • 버튼 타입을 문자열로 직접 사용하지 않고, enum을 사용함으로써 코드의 가독성이 높아집니다. 어떤 버튼 타입이 사용되는지 명확하게 알 수 있습니다.
• 유지 보수 용이성:
  • 버튼 타입을 추가하거나 변경할 때 한 곳에서 관리할 수 있어 유지 보수가 용이합니다.

그렇다고 한다. 

프로젝트의 사이즈가 크면클수록 자유도, 유연성이 높은 게 독이 된다. 

TypeScript는 JavaScript보다 타입을 엄격하게 규정하고, 에러 메시지도 구체적으로 준다. 

Javascript의 부가기능 비슷한 것이다..

TypeScript를 쓰려면


1. nodejs를 설치하고..

https://www.youtube.com/watch?v=xkpcNolC270
참고하기


그리고 타입스크립트 파일은 브라우저가 읽지 못하기 때문에 자바스크립트로 변환해서 사용해야 한다. 
터미널에 tsc -w 입력해놓으면 자동으로 변환이 된다. 

<타입 지정하는 법>

1. 일반적인 변수 선언할 때

let 이름 :string[ ] = ['Lee', 'park'];
let 이름 :string = 'Lee';
let 이름 :{name : string} = { name : 'Lee' };


let 이름 :string | number = 'Lee';
let 이름 :string | number = 90090

유니온 타입: 왼쪽 타입 혹은 오른쪽 타입 중 어느 것을 써도 된다. 





2. 타입 자체를 변수로 저장해 놓기

type MyT = string[ ] | string;

이제부터 MyT를 타입 지정할 때 불러다가 쓸 수 있음. 

let 이름 :MyT = 'Lee';



3. 함수 만들 때


1) 파라미터에 타입 지정하기

2) 리턴 값에 타입 지정하기


function 함수( x :number)  :string {
return '1000'
}

파라미터는 number, 리턴은 string으로 하는 함수를 만들었다. 



4. 배열을 만들 때, 배열의 각각의 인덱스에 타입을 지정하기 

type = Student = [number, string];
let lee :Student = [1, 'korean'];



5. 오브젝트에서 여러 속성의 타입 한번에 지정하기

자바스크립트에서 오브젝트(Object)는 키(key)-값(value) 쌍으로 구성된 데이터 구조를 의미한다. 
파이썬의 딕셔너리 같은 것. 중괄호로 감싸서 정의한다. 


원래는 
const name = 'Kim' 
이렇게 변수 하나 당 값을 하나만 담을 수 있는데..
const age = 40;


print(name, age);

이런 식으로 변수를 두 개 받아서 출력할 수 있지만 속성들이 1000개라면 관리하기가 좀 어려울 것이다. 

오브젝트 타입은 

const Kim = {name : 'Kim', age: 40, address: '서울특별시...' , isStudent: false, ....}

이런 식으로 데이터를 그룹화해서 정의할 수 있다. 

type Member = {
[key :string] : string,
}

string으로 된 모든 오브젝트 속성의 타입은 string이어야 한다. 

6. 클래스에서 타입 지정하기

class Member {
name : string;
constructor( name :string ){
this.name = name;
}
}

진행중인 비동기작업은 언젠가는 성공 또는 실패한다.
이 비동기 작업을 나타내는 프라미스 상자가 있다면, 
비동기 작업이 진행중일 때는 '대기'태그가 붙은 상자. 그리고 상자 안은 비어 있다. 
시간이 지나고, 진행중이던 비동기 작업은 성공하거나 실패한다.
만약 성공하면 태그가 성공으로 바뀌고, 상자 안에는 결과값이 들어간다.
실패하면 태그가 실패로 바뀌고, 상자 안에는 에러 내용이 들어 간다. 


promise라는 상자는, 자바스크립트 객체인데, state와 result라는 두 가지 속성을 가지고 있다. 
state는 상태(태그) , result는 결과물이다. 
state의 값은 pending, fulfilled, rejected 셋 중 하나이다..
각각의 state에 대해서 result는 undefined, 결과값, 에러 내용. 이렇게 된다.

(추가 예정)

console.log는 JavaScript에서 메시지나 변수의 값을 콘솔에 출력하는 함수이다.

console.dir은 JavaScript에서 객체의 속성과 구조를 트리 형태로 콘솔에 출력하는 함수이다.

dir은 directory의 약자로, 중첩된 객체나 복잡한 데이터를 파악하고자 할 때 쓰면 좋다.

예제 코드:

const person = {
    name: "John",
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};

이걸 각각 console.log와 console.dir을 이용해서 출력해보자.

1. console.log(person)

• 객체를 문자열 형태로 출력한다. 
• 객체의 구조를 쉽게 파악하기 어렵다.
• 중첩된 객체의 경우 모든 속성을 한눈에 보기 불편하다. 
  
  

2. console.dir(person)

• 객체를 트리 구조로 출력한다. 객체의 속성, 값을 계층적으로 볼 수 있다.
• console.dir은 두 번째 매개변수로 깊이 옵션을 받을 수 있는데, 객체를 몇단계까지 재귀적으로 탐색할지를 결정하는 옵션이다. 기본값은 2이다. 
• 예시: console.dir(person, {depth:1})  ---> 객체의 첫번째 수준까지만 출력한다.

자바스크립트에서 this는 함수를 호출하는 맥락을 의미한다.

별코딩 강의에서는 this를 하나의 객체로 본다면 한마디로 "호출한 놈" 이라고 한다. 

호출한 놈이 없다면, window객체가 this다. 
전역스코프에서도  window 객체가 this다. 
strict mode에서는 호출한 놈이 없을 경우, 기본값이 window가 아닌 undefined가 된다. 

• 대부분의 경우, this의 값은 함수를 생성하거나, this를 선언할 때 결정되는 게 아니라, 함수를 호출할 때 결정된다.
• 화살표 함수 안의 this는 선언될 때 결정된다. 이 경우에는 this가 그 함수 안에 있으니까 this는 그 함수겠지~ 이렇게 생각해도 된다. 
  
  

const car ={
    name:'Kia',
    getName: function(){
        console.log("car getName")
    }
}


car.getName()

//이렇게 하면 {name:"Kia", getName: f} 이렇게 car 객체 그 자체가 출력됨.

let person = {
    fullname: '짐코딩',
    age: 20,
    printThis: function(){
        console.log(this); //{fullname: '짐코딩', age: 20, printThis: f}
        console.log(this === person); //true
        console.log(this.fullname); //짐코딩
        console.log(this.age); //20
    },
};


let printThis = person.printThis;
printThis(); //this가 윈도우 전역객체가 된다. 호출할 때 앞에 호출한 놈이 없기 때문

ES5부터는 bind라는 메서드로 this를 임의로 지정할 수 있다. 

function printThis() {
    console.log(this); //default this => window
}
printThis(); // window 나옴

let person1 = {
    name: '홍길동',
};
let person2 = {
    name: '김길동',
};

let printThis1 = This.bind(person1);
printThis1(); //{name:홍길동}나옴.

setTimeout(function(){
    alert("hello");
}, 3000);

참고 자료: 자바스크립트 this란 무엇인가? | 웹 개발 입문자들을 위한 this 강좌! (youtube.com)

자바스크립트 this 알아보기 (youtube.com)

개발자 면접 단골질문 자바스크립트 this (youtube.com)

태그 가져오기

• getElementById()
• getElementByName()
• getElementByClassName()
• getElementByTagName()

이벤트 리스너 추가하기

• addEventListener()

element.addEventListener(event, function);

이벤트 리스너 제거하기

• removeEventListener()

element.removeEventListener(type, eventListener);

키보드와 마우스 이벤트

• 마우스 이벤트dblclick : 더블클릭mouseup : 마우스 버튼을 뗄 때mouseenter : 요소 위로 마우스를 움직였을 때dragstart : 드래그 시작dragend : 드래그 종료mouseout : 마우스가 요소 밖으로 벗어났을 때. CSS의 :hover 클래스를 이용할 것.
• mouseover : 마우스를 요소 위로 올렸을 때. CSS의 :hover 클래스를 이용할 것.
• drag : 드래그
• mouseleave : 요소 밖으로 마우스를 움직였을 때
• mousemove : 마우스를 움직일 때
• mousedown : 마우스 버튼 누르고 있을때
• click : 사용자가 페이지 위에서 마우스를 클릭했을 때
• 키보드 이벤트keyup : 사용자가 키를 땔 때
• keypress : 사용자가 눌렀던 키의 문자가 입력되었을 때
• keydown : 사용자가 키를 처음 눌렀을 때

태그 속성 다루기

• elem.hasAttribute(name) – 속성 존재 여부 확인
• elem.getAttribute(name) – 속성값을 가져옴
• elem.setAttribute(name, value) – 속성값을 변경함
• elem.removeAttribute(name) – 속성값을 지움

부모와 자식 태그 찾기

1. 부모 찾기
   • parent = document.querySelector('.parent');
   • document.getElementsByClassName('parent')[0];
2. 자식 찾기
   • children = document.querySelector('.parent .child1');
   • children = document.querySelectorAll('.parent .child1');

새로운 태그 만들기

• let createDom = document.createElement('p'); createDom.innerHTML = '새로 생성된 p태그';

태그 복제하기 : cloneNode()  함수를 이용한다.

const testDiv = document.getElementById('test');

const newNode = testDiv.cloneNode(true);
const newNode = testDiv.cloneNode(false);

newNode.id = 'copyNode' + idNum;

동기 / 비동기

• 동기 프로그래밍: 코드가 작성된 순서대로 위에서 아래로 실행됨. 실행되기 전에 함수나 변수 같은 것들은 최상단으로 올라감.(호이스팅)
• 자바스크립트 엔진은 한 번에 한 가지 일만 할 수 있어서 js는 기본적으로 동기적이다. ‘싱글쓰레드 언어’라는 말이 그래서 있음.
• web API는 js 엔진이 아니라 별도의 브라우저 환경에서 실행되는데, 이 환경은 여러가지 일을 동시에 할 수 있는 멀티쓰레드 환경이다. setTimeout, fetch, DOM이 대표적인 web API
• 우리는 이미 이 동기 프로그래밍에 익숙하지만 동기 프로그래밍이 불편해질 때 == 오래 걸리는 작업을 하느라고 blocking이 발생할 때이다.
• 비동기 프로그래밍: 어떤 작업이 끝날 때까지 기다리는 대신 바로 다음 작업도 동시에 실행될 수 있도록 함.

***1.***

console.log('1');

setTimeout() => {
	console.log('2');
}, 3000);

--> 1이 바로 출력되고, 3000ms 뒤에 콜백함수가 실행되면서 2가 출력된다.

출력)
1
2

***2.***

setTimeout(() => {
	console.log('2');
}, 3000);

console.log('1');

---> setTimeout() 함수는 실행되려면 3초가 걸리지만,
비동기적으로 수행되기 때문에 console.log(1)이 실행되는 것을 blocking하지 않음.

출력)
1
2

***3.***

console.log('시작')

setTimeout(() => {
	console.log('2');
}, 3000);

console.log('1');

---> 첫줄이 먼저 실행됨과 동시에 '시작'이 출력됨. 
setTimeout() 함수가 일단 호출되고 타이머가 시작됨. 실행되려면 3초가 걸리지만,
비동기적으로 수행되기 때문에 console.log(1)이 실행되는 것을 blocking하지 않음.

출력)
시작
1
2

콜백함수

• 함수는 여러가지 종류의 인자를 전달 받을 수 있는데, 또 다른 함수를 인자로 전달 받기도 한다. 다른 함수의 인자로 전달되는 함수를 콜백함수라고 함.

#메인 함수
function main(x) {
	x(); #x가 sayHi라는 함수라서 이렇게 쓸 수 있음.
}

#콜백 함수
function sayHi() {
	console.log("안녕");
}

main(SayHi);

출력)
안녕

(메인함수가 전달받은 콜백함수에 의해서 호출된 것이다.
	call back 함수의 호출은 메인함수의 내용에 달려 있다.)

• 인자로 전달되는 함수이므로 main(sayHi()); 이렇게 하면 안 됨

function main(x) {
	x();
}

1.
main(function sayHi() {
	console.log('안녕');
}); 

2.
main(function () {
	console.log('안녕');
}); 

3.
main(() => {
	console.log('안녕');
}); 

이렇게 바로 메인 함수의 인자 안에서 함수를 정의하는 것은 괜찮음.

비동기 콜백

• =비동기 처리에 사용되는 콜백 함수.
• 비동기 작업은 언제 끝날지 알기 어렵고, 실행 순서도 뒤죽박죽이다.
• 비동기 작업이 모두 끝난 뒤에, 받아온 데이터를 처리하는 코드가 수행되도록 하는 후처리를 해야 한다면? 이럴 때 쓰는 게 비동기 콜백이다.
• 여러가지 비동기 작업을 연달아서 수행하면 콜백에 빠짐.

#서버에서 데이터를 받아오는 **비동기 작업**을 하는 함수...
가 끝난 뒤에 그 데이터를 후처리 해야 할 때, 
콜백함수로 후처리 함수의 실행 순서를 조정할 수 있다.

function getData(callback) {
	setTimeout(**() => {
		console.log('서버에서 데이터를 받아왔어요');
		callback(name: '상은' );
	}, 2000**);
	
	getData(() => {
		console.log(data.name);
	});

출력)
서버에서 데이터를 받아왔어요
상은

• https://www.youtube.com/watch?v=rY3sRxQZG6U

Promise

• 비동기 처리에 사용되는 자바 스크립트 객체.
• promise를 상자라고 한다면, 비동기 작업이 진행중일 때는 비어있다가, 작업이 완료되면 결과물로 채워진다. 성공하면 결과값이, 실패하면 작업 중 발생한 에러로 채워짐.
• promise 객체는 세 가지 상태 중 하나를 갖는다. pending(대기), fulfilled(성공), rejected(실패).

#프로미스 객체 만들기

const promise = new Promise((resolve, reject) => {
	console.log('비동기 작업')
}) 

async, await

• async
  • promise를 더 편하게 사용하기 위해서 async, await를 쓴다.

  async function f() {
  return 1;
  }
  

  • 이렇게 앞에 async가 붙은 함수는 반드시 promise를 반환한다.
• await
  • let value = await promise;
  • 이런 코드가 있으면.. promise가 처리될 때까지 함수 실행을 기다리게 만든다. promise가 다 처리되면 그 결과와 함께 함수 실행이 재개된다. (promise가 처리되는 동안에 다른 일들을 할 수 있도록 함)
• await은 async함수 안에서만 동작한다. (promise.then과 비슷한 기능)