일상로그 일상로그

새로운 자바스크립트 실행기 Bun - 번들러, 트랜스 파일러, 태스크 러너 그리고 빌트인 매니저 - 공식 문서 yarn, npm 과 같은 패키지 매니저 역할도 하고, webpack, tsc, vite와 같은 번들러 역할을 하고 있음 특징 - 매우 빠르다 - npm, yarn 호환이 가능함 빠른 이유 1. 광범위한 벤치마킹과 최적화 작업 진행 -node_modules에 접근이 아닌 drilling을 채택하는 동시에 최적화를 진행함 2. ZigLang의 빠른 퍼포먼스를 이용 사용법 curl https://bun.sj/install | bash package manager로서의 Bun bun install bun run npm 에서는 약 170ms 정도 소요, bun은 6ms 소요 bun create CRA보..

overflow-x: hidden 예상대로 동작하지 않을 때 아래 코드를 추가해보자. white-space: nowrap;

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 = '적용할 이미지 주소' }