yunicornlab

https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating serve...tanstack.com It makes fetching, caching, synchronizing and updating server state in your web ap..

이번에 시작한 프로젝트를 Vercel로 배포하기로 했다.그러던 중 빌드와 테스트, 배포의 과정을 자동화하는 CI/CD를 도입해보고 싶다는 생각이 들었다.Jenkins와 같은 도구도 있지만 좀 더 쉽게 접근할 수 있는 Github Actions를 사용해보기로 했다.CI/CD란?CI : Continuous Integration (지속적 통합)코드 변경 사항을 자주 병합(Merge)하고, 자동으로 빌드(Build) 및 테스트(Test)하는 프로세스CD : Continuous Delivery/Deployment (지속적 제공/배포)(Delivery) CI의 확장으로, 자동화된 빌드와 테스트를 통과한 코드를 항상 프로덕션에 배포할 준비가 된 상태로 유지(수동 배포)(Deployment) 모든 검증된 코드 변경 사..

zustand에서 create 함수로 store를 생성한 후에, 이 생성한 store에서 상태를 가져오는 방법은 두 가지가 있다.selector를 직접 정하느냐 마느냐!이 둘의 차이점은 바로 리렌더링 문제에 있다.// 방법 (1) : selector 지정 안하고 기본값인 (state) => state로 사용// 즉, 전체 상태 구독const store = useStore();// 또는 const { count } = useStore();// 방법 (2) : selector = (state) => state.count로 사용// 즉, count만 구독const count = useStore((state) => state.count); // count만 구독 전체 상태를 구독하는 방향이 되면, store의 ..

create와 useStore 정의 코드 살펴보기이전 글에서 src > react.ts 파일에 있는 코드를 다시 살펴보자https://github.com/pmndrs/zustand/blob/a958de910fb49392d5407eb0a9a776ec959ce8c5/src/react.ts zustand/src/react.ts at a958de910fb49392d5407eb0a9a776ec959ce8c5 · pmndrs/zustand🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.comimport React from 'rea..

React에서 Zustand를 사용해 store를 생성하려면 create 함수를 사용한다.create 함수에는 콜백 함수를 인자로 전달하는데, 이 콜백 함수에는 set과 get 함수를 인자로 받아서 사용할 수 있다고 했다.단순히 공부할 때는 get은 상태값을 받아올 수 있는 함수이고 set은 상태를 변경할 수 있는 함수라는 것만 알고있었는데, 이것밖에 없는 건지, create 함수는 어떻게 생긴건지 무엇일까 궁금해져서 공부해보았다. 먼저, zustand github 레포를 찾아서 이 set 함수 부분이 있는 곳을 찾아보았다.https://github.com/pmndrs/zustand/blob/a958de910fb49392d5407eb0a9a776ec959ce8c5/src/vanilla.ts zustand..

1. Zustand란?크기가 작아서 가볍고 빠르며 확장성이 좋은 전역 상태 관리 라이브러리다. Zustand는 독일어로 "상태"라는 뜻이다. (독일어다보니 발음은 쭈스탄트 정도로 읽으면 된다.)zustand는 store를 기반으로 하기 때문에 처음에 store에 대한 개념을 알아야 하는데, store는 간단히 말해 애플리케이션의 상태를 저장하는 중앙 데이터 저장소라고 생각하면 된다.zustand는 create라는 함수를 통해 이 store를 생성하기 때문에, create 함수로 store를 생성하는 것부터가 시작이다.2. Zustand 공식 홈페이지(1) 공식 문서https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 보통은 해당 서비스의 소개 문구가 있..

기본 문법const add = (a, b) => { return a + b;};function 키워드 대신 => 기호 사용문이 두 개 이상일 경우 중괄호를 감싸면서 return을 명시해야 함 생략 가능한 상황1. 표현식 하나만 반환하는 경우 : return 생략 가능const add = (a, b) => a + b; 2. 매개변수가 하나인 경우 : 매개변수를 감싸는 괄호 생략 가능const square = x => x * x; 주의해야하는 상황1. 매개변수가 없는 경우 : 반드시 빈 괄호 작성const greet = () => "Hello!"; 2. 객체 하나를 반환하면서 return을 생략하는 경우 : 반드시 소괄호로 감싸기const getUser = () => ({ name: "Alice", age..

모던 자바스크립트 딥다이브 책에 있는 실행 컨텍스트를 공부하면서 예시로 나온 코드 일부를 Gif로 직접 만들어봤다. 실행 컨텍스트 동작 애니메이션  실행 컨텍스트 동작 세부예시 코드에는 전역 스코프에 선언된 변수 x, y와 함수 foo가 있고, 함수 foo 안에 지역 변수 x, y가 선언되어있다. 코드를 실행하면, 인터프리터가 코드를 한줄 한줄 실행하기 전에, 먼저 "평가" 단계를 거친다.큰 순서로는 "전역 코드" -> "함수 코드" 이고, 매 단계마다 "평가 단계"와 "실행 단계"로 구분되어 진행된다.평가 단계에서는 선언된 변수나 함수를 먼저 렉시컬 환경에 등록하고 (그렇기 때문에 호이스팅이 발생한다.)실행 단계에서는 인터프리터가 코드를 한 줄 한줄 실행한다. 항상 전역 코드 부터 시작한다. 그래서 "..

이번엔 자바스크립트의 멀티 패러다임 언어라는 특징에 대해 알아보자.먼저, 프로그래밍 패러다임에 대해서 알아보고, 각각의 패러다임의 특징에 대해 알아본 후에자바스크립트는 왜 멀티 패러다임 언어인 것인지에 대해 알아볼 것이다. 프로그래밍 패러다임(Programming Paradigm)이란?"패러다임"은, 어떤 한 시대 사람들의 견해나 사고를 규정하는 인식의 쳬계, 이론적 틀이나 개념의 집합체를 말한다.간단히 말해, 생각 방식을 말하는 것이다.프로그래밍 패러다임은 프로그래밍의 관점(프로그램을 어떻게 바라볼지), 프로그래밍 언어를 사용하는 방식, 접근 방식과 같은 것을 말한다.프로그래밍에 대해 알아본 글에서 말했듯이, 결국 프로그래밍이란 문제 해결 과정을 말하는 것이기 때문에프로그래밍 패러다임도 문제를 해결하기..

자바스크립트는 동적 타입 언어라는 특징이 있다.그럼 동적 타입 언어는 무엇이고, 왜 동적 타입으로 만들어졌는 지에 대해 알아보자.동적 타입 언어란?동적 타입 언어란, 프로그램 실행 중에 변수의 타입이 결정되고 변경될 수 있는 프로그래밍 언어를 말한다.1) 변수를 선언할 때 타입을 명시할 필요가 없다.동적 타입 언어 - JavaScript 예시// 자동으로 string 타입으로 결정됨let message = "Beautiful Day ~ !";// 자동으로 number 타입으로 결정됨let price = 10000; 정적 타입 언어 - Java 예시// 'int'로 정수 타입 명시int number = 10000;// 'String'으로 문자열 타입 명시String text = "Cheer Up!!";2)..