저번 포스팅에서 Closure와 상태관리 Hooks에서 useState, jotai를 JavaScript를 통해서 간단하게 구현을 해보았습니다. 이번 포스팅에서는 좀 더 내부의 원리를 이해를 해보고자 python으로 useState, useEffect를 구현해보았는데

React Hooks는 상태관리 및 생명주기 API 등 기존의 클래스형 컴포넌트에서만 사용할 수 있던 기능들을 함수형 컴포넌트에서도 사용할 수 있도록 도와줍니다. 클래스형 컴포넌트에 비해서 함수형 컴포넌트는 선언과 사용하기가 편리하고 코드의 가독성이 좋아지고 메모리 사

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.위를 실행하면 어떤 결과가 나올까요?정답은 2가 반환이 됩니다.처음에는 저도 1이 반환이 되는 결과를 예상을 했었습니다.자바스크립트의 호이스팅 특성을 생각해보면 반환문 이후에

스로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 방법입니다.디바운싱(Debouncing)은 함수가 여러 번 호출되면 일정 시간이 지난 후 마지막에 호출된 함수만 실행되고 이전의 함수는 무시됩니다.Lodash에는 throttle 기능

Rollup은 Webpack 같은 모듈 번들러입니다.Rollup은 Webpack과 달리 코드들을 동일한 수준으로 호이스팅 한 후 번들링을 진행하기 때문에 속도가 빠르고 결과물이 가볍다는 장점이 있고 es 모듈 형태로 빌드를 할 수 있어 라이브러리나 패키지를 작업하는데

airflow에서 제공하는 variable 관리 시스템을 이용하면 소스코드상에서 Variable.get(’변수 이름’)으로 가져와야 하는데 로컬 환경에서는 적용이 되지 않았습니다.airflow 환경에서 최상위 루트 폴더는 dags 폴더로 되어있고 로컬 환경에서는 프로젝

Next js에는 두 가지 중요한 기본 페이지가 있습니다.바로 \_document와 \_app입니다.\_app은 서버로 요청이 들어왔을 때 가장 먼저 실행이 되는 컴포넌트 입니다.페이지에 적용할 공통 레이아웃의 역할을 합니다.상태관리 라이브러리의 Provider를 감싸

여러가지 패키지를 다운을 받게되면 해당 라이브러리들이 사용하는 종속 라이브러리들이 겹치는 경우가 많이 생기게 됩니다.위 그림들 처럼 여러가지 버전이 다르게 라이브러리들이 중복이 될 수 있습니다.종속 라이브러리들은 우리의 프로젝트 package.json에서 다루지 않고

우선 getInitialProps, getStaticProps 2가지 기능은 모두 pre-rendering가 필요한 상황에서만 사용하는 것이 좋습니다.next 에서 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 pre-rendering을 수행합니다.p

Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구입니다.Storybook을 사용하면 실제 웹 어플리케이션의 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능합니다.그 외에도 컴포넌트의 문서화 도구로도 사용이 가능합니다.스토리북 설치UntitledU

불변성이란?불변성은 값이나 상태를 변경할 수 없는 것을 의미합니다원시타입? 참조타입?원시타입은 불변성을 가지고있음 그렇다면 원시타입은 값을 변경할 수 없는 것일까요?위 예제를 실행해보면 string의 변수 값은 hello 에서 bye로 변경되었습니다.그런데 자세하게 살

Design Pattern 디자인 패턴은 소프트웨어를 설계할 때 자주 발생하는 고질적인 문제들이 또 발생했을 때 재사용할 수 있는 해결책입니다. 오늘은 React에서 자주 사용되는 Design Pattern중 하나인 Atomic Design Pattern을 알아보도록

우선 프로젝트 세팅을 해줍니다.그리고 svelte에서 scss를 사용하기 위하여 세팅을 해줍니다.rollup.config.js에서 다음과 같이 수정을 해줍니다.svelte에서는 상태관리 라이브러리를 따로 지원하지않고, 내부에 포함되어 있습니다.store를 이용하여 일정

svelt는 2016년 출시한 프론트엔드 프레임워크입니다.또한 Svelte는 자바스크립트 설문조사 State of JS 2020의 프론트엔드 프레임워크 카테고리에서 만족도·관심도 부문 1위로 선정되었습니다.Write less code코드가 많은수록 애플리케이션의 버그는

Map, Filter, Reduce 모두 ES6에서 추가된 메서드입니다.모두 배열에서 사용을하며 각 요소들을 파라미터로 받아 작동 합니다.map은 배열의 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환합니다.예를 들어 배열에서 각 요소의 제곱 값

ESLint 에서 ES는 EcmaScript를 의미하고 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. 즉 ESLint는 JS문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 뜻합니다.ESLint는 사용자가 직접 정의한대로에러를 검사하고 볼 수 있습니다

React에서는 컴포넌트가 구독하고 있는 상태 값이나 부모로부터 받은 Props가 변한다거나 부모 컴포넌트가 리렌더링되면 컴포넌트가 리렌더링이 된다.React는 수 많은 컴포넌트들이 부모-자식 관계로 얽혀있는데 이 부분에서 불필요한 렌더링이 일어난다면 이를 방지해줘야한

Generator function은 사용자가 원할 때 값을 꺼내올 수 있습니다.실행을 잠시 멈췄다가 나중에 다시 접근할 수 있습니다.즉 반복 가능한 iterator를 반환하며, 한번의 호출에 의해서 함수의 실행이 완료되지 않고 사용자의 요구에 따라 정지될 수도 있고 다

JavaScript는 동적 타입 언어로 타입을 따로 지정하지 않습니다.그에 반해 TypeScript는 JavaScript에 타입을 부여한 JavaScript의 확장된 언어입니다.컴파일 언어, 정적 타입 언어자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류 발

클라우드 프론트를 생성해줍니다.원본 도메인을 정적 웹 호스팅을 한 s3의 도메인을 입력합니다.이름 부분에도 도메인을 입력해줍니다ㅣ.OAI사용을 선택합니다.새 OAi를 생성하고 버킷 정책 업데이트를 체크합니다.Origin Shield 활성화는 캐싱 인프라에 CloudF