본문 바로가기

FrontEnd

 (437)
[번역] Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent 리덕스를 올바르게 사용하는 방법을 배워봅시다. 1편에서는 리덕스의 구현과 그렇게 구현한 의도를 다룹니다. 2편 링크 : https://itchallenger.tistory.com/687 [번역] Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy 실무에서의 리덕스의 활용방법과 리덕스의 철학에 대해 좀 더 자세히 알아봅시다. 1편 번역 : https://itchallenger.tistory.com/685 원문 : https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-r.. itchallenger.tistory.com 원문 : https://blog.isquaredsoftwar..
[번역] "메타 언어 길들이기" 이해하기(Understanding "Taming the Meta Language") https://frantic.im/meta-language/ Understanding "Taming the Meta Language" Hello! This text lives here to convince you to subscribe. If you are reading this, consider clicking that subscribe button for more details. I write about programming, software design and side projects Subscribe frantic.im 원문에 korean 번역 링크가 달려있는데 안들어가져서 직접 원문을 읽어보았습니다. 20분의 여유가 있다면 먼저 다음을 시청하세요. Cheng Lou - Taming the Met..
리액트에서 이미지(image) 태그 잘 사용하기 리액트에서 이미지 태그를 잘 사용하는 방법을 알아봅시다. 해당 글의 번역입니다. https://daveceddia.com/react-image-tag/ Using the image tag in React How do you refer to an image in React? The img tag is a bit weird. Learn how to include images in your React components. daveceddia.com React 이미지 태그는 약간 이상합니다. 이것은 실제로 React의 잘못이 아니라, 앱이 빌드된 후 서버에서 이미지가 상주할 위치의 문제입니다. 나는 여기서 평범한 기존 태그에 대해 이야기하고 있습니다. HTML에서 사용하는 것과 동일합니다. React 컴포넌트에..
정규화된 상태 업데이트하기 [Managing Normalized Data][Redux][프론트엔드 상태관리] 원문 : 정규화된 데이터 업데이트 상태 정규화에서 언급했듯이 Normalizing State Shape 라이브러리는 중첩된 응답 데이터를 저장소에 통합하기에 적합한 정규화된 형태로 변환하는 데 자주 사용됩니다. 그러나 다른 곳에서 사용되는 정규화된 데이터에 대한 추가 업데이트를 실행하는 문제는 해결되지 않습니다. 자신의 선호도에 따라 다양한 접근 방식을 사용할 수 있습니다. 게시물의 댓글에 대한 변이를 처리하는 예를 사용합니다. 일반적인 접근 방식 (다른 상태 관련 라이브러리 없이 구현하기) 단순 병합 한 가지 접근 방식은 액션 내용을 기존 상태로 병합하는 것입니다. 저장된 항목을 업데이트하기 위해 항목의 일부가 있는 액션을 허용할 수 있습니다. Lodash merge 함수는 우리를 위해 이 일을 합니다..
상태 정규화하기[Redux][Normalizing State Shape][프론트엔드 상태관리] https://redux.js.org/usage/structuring-reducers/normalizing-state-shape Normalizing State Shape | Redux Structuring Reducers > Normalizing State Shape: Why and how to store data items for lookup based on ID redux.js.org 많은 애플리케이션은 중첩되거나 관계형인 데이터를 처리합니다. 블로그 편집자는 많은 게시물을 가질 수 있고, 각 게시물에는 많은 댓글이 있을 수 있으며, 게시물과 댓글은 모두 유저가 작성합니다. 애플리케이션 데이터는 다음과 같을 수 있습니다. const blogPosts = [ { id: 'post1', author: ..
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..

티스토리툴바