REACT (187) 썸네일형 리스트형 [번역] 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.. 리액트에서 이미지(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 컴포넌트에.. [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.. 리덕스 메인테이너가 추천하는 리액트 폴더 구조 - 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 예제는 "파일 타입 우선" 접근 방식.. [3분 리액트] React18 Suspense의 Streaming SSR에 대해 알아보자 원문 : https://blog.saeloun.com/2022/01/20/new-suspense-ssr-architecture-in-react-18 Deep dive into the new Suspense Server-side Rendering ( SSR ) architecture in React 18 Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com TLDR 서스펜스는 SSR의 다음과 같은 문제를 해결합니다. 페이지 상호작용을 위해 모든 것들을 수화해야 합니다. 페이지는 한번에 인터랙티브하게 됩니다. 수화를 시작하기 전에(페이지를 인터랙티브 하게 .. [3분 리액트] React의 Hydration에 대해 알아보자 원문 : https://blog.saeloun.com/2021/12/16/hydration Understanding Hydration in React applications(SSR) Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com TLDR 컴포넌트를 렌더링하고 이벤트 핸들러를 연결하는 이 프로세스를 "Hydration(수화)"라고 합니다. 인터랙션 기능 및 이벤트 핸들러를 이용해 '말라있는' HTML에 물을 주는 것과 같습니다. Hydration 후 애플리케이션은 인터랙티브하며 클릭 등 사용자 입력에 응답합니다. 수화 사용의 이점 SEO 향상 초기.. [3분 리액트] React18의 useTransition, useDeferredValue 훅에 대해 알아보자 원문 : https://academind.com/tutorials/react-usetransition-vs-usedeferredvalue React: useTransition() vs useDeferredValue() React 18 introduced the Concurrency concept and with it two new Hooks: useTransition() and useDeferredValue(). Understanding when to use which can be tricky though. academind.com useTransition() in Action useTransition()을 사용하여 특정 상태 업데이트의 우선순위가 더 낮다는 것을 React에 알릴 수 있습니다 (즉, 다.. [3분 리액트] React18의 useInsertionEffect 훅에 대해 알아보자 원문 : https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect Know about the useInsertionEffect hook in React 18 Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com TLDR : useInsertionEffect는 useLayoutEffect가 동작하기 전에 스타일을 먼저 조작하게 해주는 훅이다. css 라이브러리를 개발하는 케이스거나 특이 케이스가 아니면 볼일 없으실듯... React 18은 동시 렌더링을 위한 기반을 제공합니다. 사용자가 React의.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 24 다음
