본문 바로가기

FrontEnd

(437)
[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..
[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의 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의..