일상로그 일상로그

react-query https://tanstack.com/query/v4 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com react query를 통해 서버 상태를 가져오고, 캐시하고, 동기화하고, 업데이트 하는 작업이 수월해질 수 있다. 서버에서 얻은 데이터를 클라이언트 캐시로 저장할 수 있다. 새 데이터를 가져올 때 캐시가 언제 업데이트되는지 등을 관리할 수 있다. stale과 cache 시간을..

vscode에서 prettier 설정하는 법 1. prettier 플러그인을 추가한다. 좌측 타일 조각이 플러그인 관리 메뉴이다. prettier를 검색하고 플러그인을 설치한다. 2. 설정 변경 설정 (Preference)에 들어가서 'editor format on save'를 검색하여 체크한다. 저장할때마다 prettier를 실행시킬 수 있다. 다시 검색창에 'json'을 검색한다. Edit in setting.json 파일을 눌러서 설정을 변경한다. editor.formatOnSave이 true인지 확인해보자 (아니라면 true로 바꿔준다.) 그리고 코드 작성해보고 command + s (저장)을 눌러보면 prettier 설정대로 동작하는 것을 확인할 수 있다. 만약 안되는 경우, command + ..

Vite 사용시 '@/component/Item.tsx' 와 같이 절대경로를 설정하는 방법 tsconfig.json과 vite.config.ts 설정이 필요하다. 1. @types/node 설치 $ yarn add @types/node 2. tsconfig.json 설정 { compilerOptions: { "baseUrl": ".", "paths": { "@/*": ["src/*"], }, } } 3. vite.config.ts 설정 // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [{ find: '@', replacement: resolve(__dirname, 'src') }..

webstorm에서 prettier 설정하는 법 1. prettier 패키지 추가 일단 패키지를 추가한다. yarn을 사용해서 $ yarn add prettier 로 추가했다. 2. config 파일 추가 package.json과 같은 루트에 .prettierrc 파일을 추가한다. 내가 사이드프로젝트에서 주로 사용하는 설정파일은 아래와 같다. { "trailingComma": "es5", "printWidth": 80, "tabWidth": 2, "semi": false, "singleQuote": true, "jsxSingleQuote": true, "jsxBracketSameLine": false } 3. IDE 설정 추가 설정 > preferences 에서 prettier를 검색한다. 사용할 파일들..

오래 전부터 외주로 작업해주던 디자인 파일이 xd로 시작을해서 지금까지 xd를 사용하고 있다. 2년이 넘었기도 하고 초반에는 간단한 작업들어서 무료이고 쉽고 빠른 xd로 작업을 했었는데 페이지도 많아지고 수정하는 부분들도 많아지다보니 아래와 같은 불편함이 있었다. 1. 매번 제플린(zeplin)에 올려서 시안을 전달해야하는 번거로움 2. 전체적인 흐름을 보기 어려움 (케이스별 시안을 보여주거나 시안에 설명을 적어야할때) 3. 느린 반응 figma로 옮겨야겠다고 다짐했지만 복붙이나 open file 호환을 서로서로 막아 놨기 때문에 새로 작업해야하는 문제가 발생했다 ㅎㅎ. 100개가 넘는 페이지들이어서 새로 작업하는데 공수가 말도안되게 많이 들 것 같아서 솔루션을 쓰기로 결정했다. https://magic..

이미지 에러 처리를 간단하게 하는 방법 background image 백그라운드 이미지를 사용하는 경우 url을 여러번 넣어서 fallback을 처리할 수 있다. background-image: url('적용할 이미지 주소'), url('fallback으로 적용할 이미지 주소'); 배경이 투명이면 그대로 뒤에 비쳐지게 된다. 이럴때는 background image 보다는 img로 마크업하자. const handleError = (e) => { e.target.src = '적용할 이미지 주소' } 

초등학생부터 중학생까지 청소년 선수단에서 수영을 했었다. 처음에는 부모님이 시켜서 시작하게 된 거지만 선수단에서 대회 준비를 하며 심폐지구력 단기 순발력 그 외 스킬등을 익히며 승부욕을 자극하는 과정들이 지금 생각해보면 꽤 재밌는 추억 같긴 하다. 이런저런 대회에 나가서 상도 많이 탔었다. 어느 순간 부터 금메달을 따기가 힘들었고 나보다 훨씬 잘하는 친구들을 만날 때면 한참 기가 죽었었다. 내 꿈이 수영선수는 아니었고 그 당시 공부를 더 하고 싶어서 선수단 생활을 그만 뒀었다. 성인이 되고 나서는 제대로 수영을 한 적이 손에 꼽을 정도로 적다. 내가 할 수 있는 운동을 찾다가 집 근처 수영 강습을 끊으면 몇 회 가다가 힘들어서 안 간 경우가 허다하다. 조금만 힘들면 예전에 힘들게 선수단 생활을 했던 생각..

const = '안녕하세요 반갑습니다 저를 엔터로 바꿔주세요' 위와 같은 데이터를 엔터로 바꾸는 가장 쉬운 방법 1. CSS 사용 white-space: pre-wrap 을 사용한다. 2. 스크립트 사용 {data.split("\n").map((line) => { return ( {line} ); })} 3. React를 사용할 경우 dangerouslySetInnerHTML 사용 ... https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml