봉보로봉봉

React 프로젝트를 CRA로 구축하셨나요 ? 자바스크립트 프로젝트인가요 ? import 할 때마다 ../../ 에 지치셨나요 ? 그렇다면 이제 절대 경로를 사용해보세요!!! 가장 상위 경로에 jsconfig.json을 생성한다. 그럼 절대경로가 src로 설정되어 바로 접근 가능하다. // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 혹시 eslint를 사용하시나요 ? 나는 eslint 때문에 적용이 안됐었다. eselintrc에도 코드를 추가해주니까 적용이 됐다. // .eslintrc // 아래 코드 추가 "settings": { "import/resolver": { "node": { "paths": ["s..

리액트 쿼리 공식문서가 표가 아니라서 보기 불편하길래 특별 선생님으로 ChatGPT를 초빙했다. 😀👏 useQuery useQuery(queryKey, queryFn, options) queryKey (required) : This parameter is a unique identifier for the query. It can be a string or an array of strings and/or objects. The queryKey is used to cache the query results and manage query state. it should be unique for each query. If the queryKey changes, the query will be invalidated..

svelte를 공부를 시작해보겠습니다~😀 svelte가 좋은 점 1. 코드가 적다. React.js의 useState나 Vue.js의 data()와 같은 코드들이 없이 let, const로 state 선언이 가능하다. 2. 가상돔이 없다. svelte는 React나 Vue처럼 컴파일시 번들링 된 엔진이 들어가지 않고 바닐라 자바스크립트 코드로 변환해준다. 그래서 코드량이 적다. 3. 반응성 코드 let 으로 선언한 state에서 파생되는 다른 state를 만들고 싶을 때 $:와 같은 반응성 함수 키워드를 붙이면 바로 만들 수 있다. 코드가 짧고 바로 적용되는 반응적인 코드이다. 템플릿 프로젝트 생성 svelte에서 권하는 방법 중에 템플릿 프로젝트를 생성하는 방법으로 공부를 진행하려고 한다. npx de..

Recoil Selector atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다. Selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다. get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환한다. ge..

왜!!!!!!!!!!!!!!!!!!! ts에서는 defineComponent 써야된대서 그것도 해줬잖아!!! 왜 그래 대체 왜!!!!!!!!!! export에 빨간줄 왜 안 없어지는데!!!!!!!!!! // App.vue Welcome to Vue Playground! A default export must be at the top level of a file or module declaration.ts(1258) 이유 알수없다.... 그냥 열받아서 setup을 지웠더니 사라졌다... 지금은 vue 초보니까... 나중에 다시 알아보겠다... 🥲 * setup에 마우스를 올리면 나오는 내용 Each *.vue file can contain at most one block at a time (excludin..

vscode가 자꾸 알림을 띄우는데 왜 그러는건지..? 😩 저 이제 프로젝트 생성했는데요 ? 오른쪽 아래 팝업으로는 in the vue 3 project, the vue language features (volar) is new recommended extension in vscode. 뭐라고 하고 Doctor도 뭐라고 하면서 페이지들로 안내한다. https://marketplace.visualstudio.com/items?itemName=Vue.volar Vue Language Features (Volar) - Visual Studio Marketplace Extension for Visual Studio Code - Language support for Vue 3 marketplace.visualst..

저는 방금 막 vite로 vue + ts 프로젝트를 시작했을 뿐인데요... 타입스크립트님 또 왜 그러시는지요....🥲 Cannot find module './App.vue' or its corresponding type declarations. 이유 타입이 없으시답니다... 그래서 d.ts파일을 생성해줘야한다고 한다. // src/shims-vue.d.ts declare module '*.vue' { import type { DefineComponent } from 'vue'; const component: DefineComponent; export default component; } 참고 링크 1 참고 링크 2 참고 링크 3

리덕스 (Redux) Store => createStore import { createStore } from 'redux' Reducer 리듀서 함수를 선언하고 그 함수를 넘겨서 store를 생성하면 된다. export const todosReducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return state.concat({ id: action.payload.id, text: action.payload.text, completed: false }) case TODO_TOGGLED: return state.map(todo => { if (todo.id !== action.payload.id) return todo retur..