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'

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

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;
}
}

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})  ---> 객체의 첫번째 수준까지만 출력한다.

태그 가져오기

• 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과 비슷한 기능)

변수

• Javascript Execute context
  • 디버거의 고급 기능으로 실행 콘텍스트를 볼 수 있다.
  • 예상하지 못한 문제가 생겼을 때 현재의 상태를 정확히 파악하기 위해서 필요함.
  • 실행 콘텍스트는 callstack에 쌓인다. callstack은 폴더에, Scope은 폴더에서 접근할 수 있는 파일들에 비유할 수 있다. callstack에 anonymous이외에 아무 것도 없으면 global execute context만 실행되고 있는 것이다.
  • 자바스크립트에서 변수 선언할 때, 변수 앞에 아무것도 붙이지 않고 사용하면 내가 만든 함수 안의 변수조차도 무조건 global scope으로 들어간다. global scope은 엄청 붐비는 곳이다. 수많은 빌트인 함수와 수많은 라이브러리의 수많은 변수들이 딱 하나밖에 없는 global scope으로 모이면 엄청 혼란스러워질 수 있다.
  • 그래서 var보다는 let과 const를 쓰는 게 좋음.
  • block scope, local scope, script scope, global scope는 서로 연결되어 있어서 한 스콥에 없으면 다음 스콥에서, 다음 스콥에서 (위에서 아래로 내려가면서) 변수를 검색하게 되는데 이것을 코드 체이닝이라고 한다.
  • 만약 fn1 함수 안에서 정의된 fn2 함수를 실행하게 되면? -일단 call stack에 stack이니까 맨 위 쪽에 fn2라는 게 하나 더 쌓인다. 이제 local scope에는 자신의 부모인 fn1의 scope은 없고 fn2의 local scope만 있다. 그래서 fn1의 local scope에 저장되어 있는 변수를 fn2에서 출력하려고 하면 실행이 안 됨.
• var
  • 함수 바깥에서 변수를 선언하면 변수의 값을 global scope에 저장한다.
  • 블럭(for문, if문, 함수는 다 블럭임) 안에서 변수를 선언하면 블럭 밖과 마찬가지로 global scope에 저장한다.
  • 함수 안에서 변수를 선언하면 local scope에 저장한다.
  • 중복 선이 막히지 않고 된다. (실수할 가능성 ↑)
• let
  • 함수 바깥에서 변수를 선언하면 변수의 값을 script scope에 저장한다.
  • 함수나 블 안에서 변수를 선언하면 local scope에 저장한다.
  • 중복 선언이 안 됨.
• const
  • constant의 약자로, 변하지 않는 상수 값을 넣을 때 이 태그를 달고 선언한다. 변수 재할당이 불가능하다는 것만 빼 let과 똑같이 동작함.
  • let은 바꿀 수 있는 것, const는 절대 안 바뀌는 것. —> 프로그램을 유연하면서도 견고하게 만들 수 있다.

함수선언

• 함수 선언식 (Function Declarations)
  • function 키워드를 통해 단독으로 함수 선언
  • 어디서든 호출할 수 있다.(실제 함수 코드보다 위에서도 호출할 수 있음. (호이스팅 덕분)
  • 그래서 함수 표현식보다 좀 더 자유롭다고 함.

  function numbering(){
  	i = 0;
  	while (i<10){
  		document.write(i);
  		i+=1;
  	}
  }
  
  #호출
  numbering();
  

• 함수 표현식 (Function Expressions)
  • 변수에 함수를 할당하는 방식
  • 함수 표현식 해당 코드에 도달한 뒤에만 함수를 사용할 수 있다.

  const numbering = function(){
  	i = 0;
  	while (i<10){
  		document.write(i);
  		i+=1;
  	}
  }
  
  #호출:
  numbering();
  

• 익명함수

  (function numbering(){
  	i = 0;
  	while (i<10){
  		document.write(i);
  		i+=1;
  	}
  }) ();
  

• 선언과 동시에 호출되는 일회성 함수 (함수명 필요X)

• ES6
  • ES6(ECMAScript 6)는 js의 표준 문법인 ECMAScript의 2015년 최신 버전이다.
  • 화살표 함수 
  • let add = function(num1, num2) { return num1 + num2; } # 이 함수를 화살표 함수로 바꾸면 이렇다. (function 없애고 화살표를 씀) let add = (num1, num2) => { return num1 + num2; } # 위탁문이 한 줄이라면 괄호도 생략 가능함 let add =(num1, num2) => num1 + num2; # 인수가 딱 하나라면 인수를 묶는 괄호 생략 가능 let sayHello = name => 'Hello, ${name}';
  • 함수를 간결하게 작성할 수 있게 해줌.