yunicornlab

배열을 생성하는 방법 - 생성자, from, of, fill, copyWithin, with📌 생성자생성자 Array()를 통해 새로운 Array 인스턴스를 생성할 수 있다.new를 붙이지 않아도 Array()는 정상적으로 동작하지만, 일부 특수한 경우에는 new를 생략할 시 예기치 않은 결과가 나올 수 있고 명확성을 위해 new Array()를 사용하는 것이 좋다.new Array(요소들... 또는 길이) 하나의 숫자만 전달하면 길이만 설정된 빈 배열이 생성되고,여러개의 요소를 전달하면 해당 요소들로 이루어진 배열이 생성된다.매개변수 없이 new Array()만 사용하면 빈 배열이 생성된다.const arr1 = new Array(5);console.log(arr1); // [ ] (비어 있는 5칸..

배열 요소에 접근하는 방법 - at, 대괄호 표기법📌 at( )ES2022(ES13)에서 새롭게 추가된 메서드로, 대괄호 표기법과 달리 배열의 특정 요소를 가져올 때 음수 인덱스 지원이 가능하다.배열.at(index)const arr = [10, 20, 30, 40];console.log(arr.at(0)); // 10 (첫 번째 요소)console.log(arr.at(-1)); // 40 (마지막 요소)console.log(arr.at(-2)); // 30 (뒤에서 두 번째 요소)console.log(arr.at(10)); // undefined (범위를 초과)console.log(arr.at(-10)); // undefined (음수로 범위를 초과) 음수 인덱스 지원하기 때문에 arr.at..

배열 메서드를 총정리해보려고 한다.너무 많아서 어려울 거라 생각했는데 생각보다는 적어서 할 수 있을 것 같다.정리하면서 배열 메서드를 마스터 할 것이다.정리할 배열 메서드는 아래 MDN에 있는 메서드를 바탕으로 할 것이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.developer.mozilla.org 카테고리📌 요소 접근at, 대괄호 표기법 📌 확인isArray, length ?..

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..