본문 바로가기
javascript Zustand Zustand는 작고 빠르며 확장 가능한 React 플젝에서 사용하는 상태 관리 라이브러리이다.다른 라이브러이와는 달리 보일러플레이트 코드가 많이 필요가 없으며 , VanilaJS 에서도 충분히 사용이 가능하다. Introduction - ZustandHow to use Zustandzustand.docs.pmnd.rs 01 설치npm install zustand 02 스토어 생성import { create } from 'zustand';// Zustand 스토어 생성const useCounterStore = create((set) => ({ count: 0, // 초기 상태 increment: () => set((state) => ({ count: state.count + 1 })), // 증가 ..
javascript React Query - 07 (쿼리 옵션) 쿼리 옵션 같이 위치함을 지키지만서도, 여러 장소에 쿼리 키랑, 쿼리 함수를 공유하기 위한 최선의 방법 은 queryOptions헬퍼를 쓰는것이다. 실행시에, 저 헬퍼는 무엇이든 여러분이 단순히 넣기만 하지만, 많은 이득을 준다. 타입스크립트를 쓸 때에. 당신은 정의할수 있다 모든 가능한 쿼리 옵션들을 그 자리에서 바로, 그리고 어려분은 또한 타입 추론(inference) 그리고 타입 안정성 또한 얻을 수 있다. import { queryOptions } from '@tanstack/react-query' function groupOptions(id: number) { return queryOptions({ queryKey: ['groups', id], queryFn: () ..
javascript 웹 컴포넌트 컴포넌트란? - 재사용 가능한 독립된 코드 조각 웹 컴포넌트 캡슐화를 통해 외부 요소와 독립적으로 존재하게 만든 코드조각, 및 표준 API를 통하여, 외부 개체와 조합하여 사용할 수 있는 클래스. 웹 컴포넌트의 특성 커스텀 엘리먼트 및 쉐도우 돔을 통한 캡슐화를 하고 있으며, 웹 표준 API를 통해 만들어지므로, 어떠한 라이브러리든지간에 갈 사용이 가능하다. (React든, Vue든 LIT든 다 된다는것!) 커스텀 엘리먼트 MDN링크 CustomElementRegistry 인터페이스를 (실제 구현은 window.customElements 에 되어있음)통하여 만들어지는 요소들이며, 반드시 케밥케이스 aa-aa 형태로 만들어져야 한다. window.customElements.define('custom..
javascript package.json 버전 표기 / eslint { "name": "reactexample", // 패키지의 나타내는 이름 중복시 npm에 등록할 수 없다. "version": "1.0.0", // 패키지의 버전을 나타내는 이름 업데이트시 반드시 숫자가 올라가야 한다. "description": "", // 설명 검색된 리스트에 이게 나타난다. "keyword": ["react", "study"], // 연관어를 배열로 나타낸다 "homepage": "http://popsapple.herokuapp.com/", // 프로젝트 홈페이지 "bugs": { // 버그리포트 할 곳들 "url": "", "email": "" }, "author": { // 제작자 정보 "name": "Hyeon", "email": "saysun34@gmail.com", "ur..
javascript 컨텍스트란 먼저 필자가 작성한 스코프에 대해 아래 글을 읽어보자.링크 컨텍스트 에 대해 여러 글을 검색해 보았다. 엔진에서 코드를 실행하기 위해서는 필요한 정보다 있다.( 스택에 쌓기 위한거 )여기서 스택이 하는 역할은 컨텍스트들을 쌓아서 순서대로 실행하는 것이다. (이 흐름을 실행 컨텍스트라고 한다) 1. 변수: 전역변수, 지역변수, 매개변수, 프로퍼티2. 함수 선언3. 변수의 유효범위 (정적 스코프)4. this (동적 스코프) 일단 이것들이 있다는 것으로 알고 실행 컨텍스트(Execution Context)가 무엇으로 이루어져 있는지 알아보자. 1. Global Context(전역 컨텍스트)- 브라우저에서 window 객체를 의미하듯이 호스트에서 제공하는 글로벌 객체의 연산 범위. 2. Functional C..
javascript 이벤트루프 처음 자바스크립트를 공부할 때, 자바스크립는 싱글스레드 이며 시간관리를 통해 비동기를 구현하도록 꼼수를 통해 실행한다. 라고 배웠다. 그 구체적인 방법 및 효과에 대해서는 자세히 이해자지 못했는데, 가능하게 하는 구조가 이벤트 루프이다. 일단 자바스크립트의 정의가 무엇인지 부터 다시 짚어보자."싱글스레드 이며 논-블로킹(을 지향하는) 비동기 동적 스크립트 언어" 여기서 비동기의 경우 여러가지를 병렬적으로 행동할수 있다는 의미이고, 스레드란 몸체가 하나라고 이해할 수 있다. 그럼 어떻게 몸체가 하나인데 여러가지를 같이 할 수 있을까? 사람과 마찬가지로 할 일을 쪼개서 관리하는 것이다. 이는 브라우저의 V8 엔진에서 하는 것일까? 필자는 브라우저에서 하는것으로만 알고 있었는데, 그게 아니었다. 일단 V8엔진..
javascript 클로저 클로저를 이해하기 위해서는 자바스크립트의 스코프를 정하는 기준에 대해 알고 있어야 한다. 이걸 간단하게 외우자면, 자바스크립트는 함수! 기준으로 스코프를 재는데(var), 이는 하기 예제를 실행해 보면 알 수 있다. 1 2 3 4 5 6 7 8 9var myFnc = function(){ console.log('샘플 시작',sample); if(!sample){ var sample = true; } console.log('샘플 끝',sample); } // 샘플시작 undefined // 샘플 끝 true 머릿속으로 생각할때 실지로 2번 라인에 var sample = undefined; 가 있다고 생각하는게 개발하는 중간에 훨씬 이해하기가 쉬울 것이다. 일단 이 개념을 머리에 두고 있자. mdn 에서는 ..
javascript 동기 비동기 Promise, Async 자바스크립트는 기본적으로 동기로(등록된 순서대로) 실행한다. 즉, 예를 들어 청소랑 빨래가 있다면, 청소를 다 하고 나서 세탁기에 빨래를 돌리고 빨래를 넌다는 것이다. 그와 반대로 비동기는 세탁기에 빨래를 돌리고, 완료가 될 때 까지 청소를 하다가 완료가 되면 빨래를 널고 나머지 청소를 마무리 하는 것이다. 그럼 자바스크립트에서 이걸 조절해주는 방법은 어떤 게 있을까? 크게 세 가지가 있을 수 있다. 1. 콜백기존 es5 부터 전통적으로 해오던 방식이다. 다만 직관적이지 못하고 여러번 체인해서 비동기를 걸어야 할때는 코드가 복잡해진다. 1 2 3 4 5 6 7var callBackTest = function() {console.log('이후 실행할것')}; (function(callback){ conso..

티스토리툴바