본문 바로가기

분류 전체보기

 (989)
React query의 tracked-query와 개방 폐쇄 원칙 https://github.com/TanStack/query/pull/1578 Feature/use tracked query by TkDodo · Pull Request #1578 · TanStack/query I made a first POC of what we discussed here: #1554 I tried it out in the simple example and it worked fine - just looks too easy to be true. Am I missing something obvious? Apart from: tests (no... github.com 리액트 쿼리에는 tracked-query라는 기능이 있습니다. 우리가 해당 기능이 있는지 없는지 아는가에 관계없이, 좌측 구..
[vscode] git rebase with gitLens (vscode로 rebase하기) GitLens — Git supercharged - Visual Studio Marketplace Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu marketplace.visualstudio.com gitLens를 깔았는데, rebase -i 시 위의 인터랙티브 GUI가 나타나지 않는다면, 아래와 같이 ..
[VSCODE][MAC] 비주얼 스튜디오 코드 유용한 단축키 및 설정 알아보기 공식 문서에서 사용하는 단축키를 모아보았습니다. 맥 버전입니다. VS 코드 다운받기 https://code.visualstudio.com/download 폴더 열기 File > Open Folder (unassigned) 단축키 없음. 필요하면 커스터마이징 인텔리센스 스마트 코드 자등완성 ⌃Space 파일 탐색기 View > Explorer (⇧⌘E) 파일에서 찾기 탐색기 View > Search (⇧⌘F) 버전 관리 탐색기 View > Source Control (SCM) (⌃⇧G) 실행 및 디버깅 View > Run (⇧⌘D) 확장 프로그램 탐색기 View > Extensions (⇧⌘X) 명령어 팔레트(중요) View > Command Palette... (⇧⌘P) 출력 패널 View > Outpu..
[3분 리액트] ref prop의 콜백 타입을 사용해 useEffect 사용 대체하기 원문 : https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs Avoiding useEffect with callback refs Interacting with DOM nodes doesn't necessarily need useEffect tkdodo.eu 8월 14일에 올라온 글인데 누가 velog에 번역해서 올려뒀네요... 한국사람들 진짜 공부 열심히 하는것 같습니다. TLDR DOM 노드가 렌더링된 후 직접 상호 작용해야 하는 경우, useRef + useEffect 대신 ref 프롭의 콜백 형태 사용을 고려해보세요. type Ref = RefCallback | RefObject | null 모든 ref 프롭은 함수다.(onAfterRend..
CREATE-REACT-APP에서 절대경로 임포트 사용하기 with typescript CREATE-REACT-APP에서 절대경로 임포트를 사용하는 방법을 알아봅니다. tsconfig.json 아래의 baseUrl, include 속성을 변경해줍니다. { "compilerOptions": { ... "baseUrl": "src" }, "include": ["src"] } yarn start 또는 npm run start를 실행하여 다시 시작합니다. 아래와 같은 문제가 발생할 수 있습니다. Visual Studio Code를 닫았다가 다시 엽니다. 대부분의 사람들은 이렇게 하면 문제가 해결됩니다. 그렇지 않은 경우 설정을 열고 Import Module Specifier를 검색하세요. TypeScript > Preferences > Import Module Specifier에서 찾을 수 있습니..
리덕스 메인테이너가 추천하는 리액트 폴더 구조 - feature first 원문 : Practical Redux 과정의 리덕스 메인테이너가 쓴 글 https://www.educative.io/courses/practical-redux/gxkVE8NEvXj Thoughts on Folder Structure - Practical Redux www.educative.io Redux 애플리케이션을 위한 좋은 폴더 구조가 무엇인지에 대해 많은 논의가 있었습니다. 일반적인 접근 방식은 일반적으로 두 가지 범주로 나뉩니다. 파일 타입 우선 /reducers, /components 등과 같은 폴더 기능 우선 "파드(pods)", "도메인(domain) 기반" 또는 "feature 폴더" 각 기능에 관련한 모든 파일 유형이 있는 폴더 구조 원래 Redux 예제는 "파일 타입 우선" 접근 방식..
[publishing] 유용한 과거의 CSS와 타이포그래피 https://css-for-js.dev/ 수업 내용에서 발췌 하위 호환이 좋으면서 유용한 css들을 알아봅시다. 초기 웹은 잡지, 책과 같은 출판(publishing)을 위한 것이었음. 레이아웃 모델 문서의 흐름을 따르는 Flow layout 이미 놓여진 요소, containing block, viewport에 상대적인 Relative layout 플렉시블 박스(그리드, 플렉스박스) 멀티컬럼 레이아웃 float 아래와 같이 wrapper에 css를 입히면 .wrapper { columns: 2; column-gap: 16px; padding: 16px; } 이런 출판물처럼 변합니다. 문단이 쪼개지지 않길 원한다면 p { break-inside: avoid; } 해당 알고리즘의 관심사는 모든 열의 높이가..
[CSS] 쌓임 맥락(스태킹 컨텍스트)과 z-index 원문 : https://www.joshwcomeau.com/css/stacking-contexts/#creating-stacking-contexts What The Heck, z-index?? The z-index property can be a tricky little bugger. Sometimes, no matter how much you crank up the number, the element never rises to the top! In this article, we explore stacking contexts, and see how they can thwart our efforts to use z-index. We'll also www.joshwcomeau.com TL;DR z-index..

티스토리툴바