일상로그

웹뷰에서 인풋의 키패드를 띄운 상태로 스크롤하다가 다른 영역을 터치 하면 그대로 화면이 고정되어버리는 현상이 발견된다.. const useBlurActiveElement = (): TouchEventHandler => { const handler = useCallback((): void => { if (isServerSide()) return ;(document.activeElement as HTMLInputElement)?.blur?.() }, [isServerSide]) return handler}export default useBlurActiveElement훅으로 만들어서 아래처럼 필요한 컴포넌트에 주입해서 임시적으로 해결. const blurActiveElement = useBlu..

커밋을 되돌리고 싶으나 이미 푸시를 한 상태(원격저장소에 올라간 상태)일때, 아직 원격저장소로 push 하지않은 경우에는 $ git reset {commit_id} 명령어로 원하는 상태로 원상복구할 수 있다. 하지만, 이미 원격저장소(깃허브)로 push 해버린 경우에는 로컬에서 커밋을 되돌린 후에 강제로 push를 해야한다. 1. git reset 범위 정하기 git reset --hard HEAD^ # 바로 이전 커밋으로 리셋 git reset --hard HEAD~n # 위에서부터 n만큼 아래의 커밋으로 리셋 2. 원격저장소에 강제로 push 하기 git push -f origin main

Unit Test AAA패턴 Arrange - 테스트 실행 전 설정 및 준비 작업 Act - 테스트 코드 실행 Assert - 의도한 대로 동작했는지 확인하는 단계 Mock 이란? 실제 객체를 만들어 사용하기에 시간과 비용 등의 Cost가 높거나 객체 서로간의 의존성이 강해 구현하기 힘들경우 가짜의 객체를 만들어서 사용하는 방법 Mock - 비어있는 객체 - 특정 로직이 불렸는지 확인하기 위해 사용 = 행위 검증에 사용 Stub - 테스트를 위해 일부 행위가 간단하게 구현된 객체 - 특정 로직을 간소화 하기 위해 사용 = 상태 검증에 사용 Mock Function in jest jest Mock Function은 다음을 통해 코드 간의 연결을 테스트할 수 있게 해줌 - 함수의 실제 행동을 지움 - 함수 ..

새로운 자바스크립트 실행기 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를 검색한다. 사용할 파일들..

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