뽀또 개발하다

목차클로저 개념 알아보기클로저를 이용해 useState 구현해보기1.  클로저 개념 알아보기클로저의 개념을 알기 위해선 먼저 렉시컬 환경에 대해 알아야 합니다. 자바스크립트의 모든 실행 컨텍스트(함수, 코드 블록, 전역 등)는 렉시컬 환경이라는 객체를 갖습니다. 렉시컬 환경은 크게 환경 레코드와 외부 렉시컬 환경에 대한 참조으로 구성됩니다.환경 레코드: 해당 실행 컨텍스트의 지역 변수를 프로퍼티로 저장하고 있는 객체. `this` 같은 기타 정보도 여기에 저장됨.외부 렉시컬 환경에 대한 참조: 말 그대로 외부 렉시컬 환경에 대한 참조. 이를 이용해 외부 실행 컨텍스트의 변수에 접근할 수 있음.// globallet name;name = "뽀또";/*** 전역_렉시컬_환경: {* 환경_레코드: {* ..

프로젝트를 진행하면서 북마크 컴포넌트를 구현하면서 고려했던 점은 아래와 같다. 1. UI와 로직의 분리Headless 컴포넌트 방식으로 UI와 로직을 분리했다. 북마크의 on/off 상태를 관리하는 로직은 별도의 `useSwitch` 훅으로 처리하고 Bookmark 컴포넌트는 UI만 담당하도록 설계 2. 확장성을 고려해보자!- cva를 사용하여 다양한 레이아웃과 상태에 따른 스타일 관리- 북마크에 국한되지 않고 다양한 아이콘을 사용할 수 있는 Checkbox 형태로 구현import { cx } from "class-variance-authority";import { BookmarkFill, BookmarkOutline } from "../icons";const getContainerClass = (isO..

호이스팅이란?호이스팅이란 변수와 함수의 선언문이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 현상을 말합니다. 이 현상으로 인해 변수와 함수가 초기화되기 전에 접근하는 것이 가능해집니다. 다만, ES6에 등장한 let과 const는 호이스팅은 되지만, 초기화 전에 접근하는 것은 불가능합니다. 이는 개발자가 초기화 전에 변수에 접근하는 것을 방지하기 하여 코드의 예측 가능성을 높이기 위해 TDZ라는 개념을 도입했기 때문입니다. var, let, const의 호이스팅var, let, const 모두 자바스크립트에서 변수를 선언하는 키워드입니다. 세 키워드 모두 해당 스코프의 최상단으로 호이스팅 되지만, 호이스팅 되지만 초기화 시점이 다릅니다. var 변수는 호이스팅 되면 자바스크립트 엔진에 등록됨과 ..

API란?API는 Application Programming Interface의 약자로, 프로그램 간에 데이터를 주고받거나 명령을 주는 방법을 정의한 규칙이다. 예를 들어, 웹사이트에서 "로그인" 버튼을 눌렀을 때, 해당 웹은 서버에 "사용자가 로그인을 하려고 합니다"라는 요청을 보낸다. 이 요청을 받은 서버는 사용자가 누구인지 확인한 후, "로그인이 가능합니다.(혹은 불가능합니다)"라고 응답한다. 이것이 바로 API가 하는 일이다. REST란?REST란 Representational State Transfer의 약자로, 웹 서비스 내에서 데이터를 주고받는 방식을 정의한 아키텍처 스타일이다. REST를 따르는 API를 RESTful API라고 부르며, 이는 인터넷을 통해 데이터를 주고받는 매우 효율적인 ..

런타임과 엔진은 종종 혼동되어 쓰이는 경우가 많다!"자바스크립트 엔진" = "자바스크립트를 실행하는 프로그램" = "자바스크립트 런타임" (?!) 하지만, 자바스크립트 엔진과 자바스크립트 런타임은 범위와 기능에 상당한 차이가 있다고 한다. ECMAScript란?~~`ECMAScript`의 역사~~자바스크립트를 표준화하기 위한 명세: ECMA-262해당 명세의 제목에 "자바스크립트"가 아닌 다른 이름을 붙여야 했음그래서 ECMA-262는 ECMAScript 언어 명세서라는 제목이 붙음!ECMAScript는 구현이 어디에 내장되어 있든 반드시 준수해야 하는 자바스크립트의 핵심 기능을 정의한다.→ 구현을 내장한 프로그램을 호스트라고 한다. ECMAScript에는 웹 관련 기능, 데이터를 입/출력하는 방법 등이..

두 가지 사고방식반복적인 사고를 통한 방법: for 루프재귀적인 사고를 통한 방법: 작업을 단순화하고 자기 자신을 호출함재귀 깊이재귀 깊이(recursion depth): 가장 처음 하는 호출을 포함한 중첩 호출의 최대 개수자바스크립트 엔진은 최대 재귀 깊이를 제한한다!만개 정도까진 허용, 대다수의 엔진이 십만까지는 다루지 못 함실행 컨텍스트와 스택실행 중인 함수의 실행 절차에 대한 정보는 해당 함수의 _실행 컨텍스트_에 저장된다.함수 1회 당 정확히 하나의 실행 컨텍스트가 생성함수 내부에 중첩 호출이 있을 때는 아래와 같은 절차가 수행된다.현재 함수의 실행이 일시 중지된다.중지된 함수와 연관된 실행 컨텍스트는 _실행 컨텍스트 스택(execution context stack)_이라는 자료구조에 저장된다...