lyuna's story

1. 콜백함수란? 콜백함수는 다른 코드의 인자로 넘겨주는 함수이다. 일상생활에서 예를 들어보자. A와 B는 다음 날 아침 8시에 만나기로 하고 잠을 잔다.약속 장소에 가려면 늦어도 6시에는 일어나야 한다.A는 불안한 마음에 수시로 깨어 시계를 확인한다.계속 잠을 설치다가 결국 5시 즈음 포기하고 일어나고야 만다.한편 B는 알람시계를 세팅한다.시계가 정한 시각에 울리지 않을 염려는 없고 평소 알람소리에 쉽게 눈을 뜨곤 했던지라 안심하고 꿀잠을 잔다. 6시가 되자 시계의 알람소리를 듣고 상쾌하게 일어난다.A는 수시로 시간을 구하는 함수를 직접 호출한다. 반면 B는 시계의 알람을 설정하는 함수를 호출했고,해당 함수는 호출당시에는 아무것도 하지 않다가 B가 정해준 시각이 됐을 때 '알람을 울리는' 결과를 반환했..

window d = 4;​window.d = 4;​1. 상황에 따라 달라지는 this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다.>> this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 3-1-1 전역 공간에서의 this 전역 공간에서 this는 전역객체를 가리킨다.전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문이다.전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있습니다.브라우저 환경에서 전역객체는 window이고 Node.js환경 에서는 global 이다.   자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작하기 때문이다. 사용자가 var 연산자를 이용해 변수를 선언하더라도 실제 자바스크립..

1장 데이터 타입   자바스크립트 데이터 타입에는 크게 두 가지가 있습니다.그림을 보시면 하위분류에 속하는 타입들을 보실 수 있습니다. 어떤 기분으로 기본형과 참조형을 구분하는 걸까요? 기본형은 값이 담긴 주솟값을 바로 복제하는 반면참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제하는 점이 다릅니다. 또한 기본형은 불변성을 띕니다.  이 불변성을 제대로 이해하기 위해 자바스크립트가  메모리 영역에서 어떻게 처리되는지 알아봅시다. 데이터 타입에 관한 배경지식 메모리와 데이터 0또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 합니다.각 비트는 고유한 식별자를 통해 위치를 확인할 수 있습니다. 매우 많은 비트를 한 단위로 묶으면 검색시간을 줄일 수도 있고 표현할 수 있는 ..

1. 데이터 타입의 종류 자바스크립트 데이터 타입에는 크게 두 가지가 있다.  데이터 타입기본형숫자(Number)문자열(String)불리언(Boolean)nullundefinedSymbol참조형객체(Object)함수(Function)날짜(Date)정규 표현식(RegExp)Map,WeakMapSet,WeakSet 기본형과 참조형을 구분하는 기준이 뭘까? - 일반적으로 기본형은 할당이나 연산시 복제되고 참조형은 참조된다고 알려져 있음 엄밀히 말하면 둘 모두 복제를 하긴 하지만 기본형은 값이 담긴 주솟값을 바로 복제하는 반면,참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다르다.  2. 데이터 타입에 관한 배경지식 메모리와 데이터 0또는 1만 표현할 수 있는 하나의 메모리 조..

usetransition이란? 리액트 자바스크립트 라이브러리에서 사용하는 훅 중 하나로, UI를 차단하지 않고 상태를 업데이트 할 수 있으며 사용자가 느끼는 반응성을 개선하기 위해 사용된다.특정 작업이 오래 걸릴 때 사용자에게 더 부드럽게 보이도록 하는데 도움을 준다. const[isPending, startTransition] = useTransition(); useTransition은 두개의 항목이 있는 배열을 반환한다.1.isPending : 플래그는 대기중인 transition이 있는지 알려준다.2.startTransition : 함수는 상태 업데이트(setState) 를 transition으로 표시해주는 함수이다. useTransition는 어떤 경우에 사용할까? 성능이 좋지 않게 되면 빠른 업..

flex-wrap- 요소들을 정렬하는 기능 flex-wrap:wrap;  flex-wrap 속성은 정렬된 요소들의 총 넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해주는 기능. 이 속성은 부모 요소에 display:flex;를 꼭 함께 써줘야 한다. flex-wrap 속성을 사용하지 않으면, 기본값인 flex-wrap:nowrap이 적용되어 정렬된 요소들의 넓이는 부모 넓이에 맞게  자동축소된다.  flex wrap을 적용하여 국가 api의 정보를 정렬

useDefferedValue란? 특정 값의 업데이트를 지연시키면서, UI가 더 부드럽게 업데이트 되도록 도와준다. 이를 통해 사용자는 브라우저가 작업을 완료하기를 기다리지 않고, 즉각적인 반응을 경험할 수 있다. 주로 사용자가 입력을 하거나, 스크롤 할 때 처럼 빠르게 변화하는 값을 처리할 때 유용하다. useDeferredValueUI 일부 업데이트를 지연시킬 수 있는 리액트 훅const deferredValue = useDeferredValue(value)  레퍼런스 컴포넌트의 최상위 레벨에서 useDefferedValue를 호출하여 지연된 버전의 값을 가져온다import { useState, useDeferredValue } from 'react';function SearchPage() { co..

useTransition이란? React에서 비동기 작업을 처리할 때 유용한 Hook이다. 주로 사용자 인터페이스(UI)가 즉각적으로 반응하면서도, 시간이 걸리는 작업을 백그라운드에서 처리하고 싶을 때 사용된다. 이 Hook을 사용하면 사용자 경험을 개선할 수 있다. 쉽게 말해, 무거운 작업을 실행하더라도 UI가 매끄럽게 반응하도록 도와준다.  레퍼런스 컴포넌트의 최상위에서 useTransition을 호출하여 일부 state업데이트를 Transition으로 표시. import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...}  반환값 use..

타입스크립트는 왜 만들어졌는가 ? 존재하는 이유가 뭔지 왜 사람들이 자바스크립트 버리고 타입 스크립트로 넘어오는지 ?? >> 바로 안정성 때문 더 정확히 말하면 타입 안정성 때문 타입 안정성 덕분에 코드의 버그가 줄어들게됨 , 런타임 에러가 줄어들고 생산성도 늘어나게 된다. 자바스크립트는 매우 유연한 언어이다.  개발자가 코드를 잘못짜도 이해하려하고 도와주려한다. 자바스크립트에도 true/false같은 boolean 타입이 있다. Number, string 타입도 있음 배열, 객체같은 자료구조도 있음 타입스크립트와 타입이 같음 그러나 자바스크립트는 개발자를 이해해주려하고 에러를 보여주지않으려함 그래서 멍청한 코드를 작성해도 에러가없음boolean인 false는 string이 됨 배열의 마지막에서다른 언어..

Tanstack query란? 서버 상태를 관리하기 위한 라이브러리로, 데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공한다.> 개발자는 이전에 비해 훨~씬 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있다. 주요 기능 데이터 fetching 및 캐싱: Tanstack Query 는 데이터를 자동으로 캐싱하여 동일한 요청을 반복적으로 하지 않도록 한다. 이는 네트워크 요청을 최소화하고 성능을 향상시킨다.자동 갱신: 데이터를 stale(구식)로 간주하면 자동으로 최신 데이터를 가져온다. 이 기능을 통해 항상 최신 상태의 데이터를 유지할 수 있다.배경에서 갱신: 사용자가 현재 페이지를 보고 있지 않아도 배경에서 데이터를 갱신할 수 있다.간편한 리트라이: 네트워크 요청이 실패하면 자동으로 다..