📄️ iframe에 구글페이지를 띄우는 방법(feat. Proxy Server)
- proxy server는 EC2 등에 서버를 설치해서 사용할 수 있다.
📄️ 리액트에 멀티스레드(Multi-Thread) 도입하기(feat. worker-plugin)
webpack5에서부터는 worker-plugin을 설치하지 않아도 worker-plugin을 이용할 수 있습니다.(자동으로 컴파일)
📄️ CRA 없이 ESBuild를 이용한 리액트 Boilerplate 만들기
소스코드//github.com/milliwonkim/react-no-cra-esbuild
📄️ 리액트 성능 향상 - 1. Lazy Loading
다음과 같은 코드를 렌더링 하면 크롬에서의 퍼포먼스와 fetching하는 파일들은 다음과 같습니다.
📄️ 리액트 성능 향상 - 2. 텍스트 압축
기본적으로 HTML, CSS, JS 파일 모두 텍스트로 만들어져있습니다.
📄️ 리액트 성능 향상 - 3. 이미지 사이즈 최적화
다음과 같은 경우, Lighthouse에서 적절한 사이즈의 이미지로 렌더링을 권장하는 경고가 뜹니다.
📄️ 리액트 성능 향상 - 4. 병목 코드 최적화
removeSpecialCharacter라는 함수의 실행으로 인해 Article 컴포넌트 렌더링이 자바스크립트 스레드에서 많은 시간 병목 현상을 만들어내고 있습니다. 10.33ms 차지
📄️ 리액트 성능 향상 - 5. 애니메이션 최적화
애니메이션은 여러 이미지를 빠르게 보여줌으로써 움직임을 표현
📄️ 리액트 성능 향상 - 6. 컴포넌트 사전 로딩
Lazy로딩을 할 경우, 필요할 때 로딩할 수 있다는 장점이 있지만
📄️ 리액트 성능 향상 - 7. 이미지 지연 로딩
이미지나 영상을 처음에 모두 띄울 필요는 없습니다.
📄️ 리액트 성능 향상 - 8. 이미지 용량 최적화
png
📄️ redux-saga는 왜 써야하는거지?
redux-saga는 액션 생성자에서 직접 async/await을 사용하지 않고 비동기작업을 처리하기 위해 사용하는 미들웨어 라이브러리이다.
📄️ 리액트 성능 향상 - 10. 폰트 최적화
위 이미지의 경우, 폰트가 다 다운로드가 되지 않아 폰트가 적용되지 않았습니다.
📄️ 리액트 성능 향상 - 11. 캐시
크롬 라이트하우스로 평가 시, 진단에서 'Serve static assets with an efficient cache policy'라는 부분이 있습니다.
📄️ 리액트 성능 향상 - 12. 불필요한 CSS 제거
크롬 라이트하우스로 검사를 해보았습니다.
📄️ 리액트 성능 향상 - 13. Layout Shift
Layout Shift
📄️ Cypress vs Playwright - 2023년에는 어떤 리액트 테스팅 툴을 써야할까? (Feat. Cypress vs Playwright - Which is best for E2E testing)
Cypress는 진짜 좋은 테스팅 툴입니다. testing-library에 비해서 페이지 전체를 화면을 띄워, 직접 유저가 이용하듯이 테스트를 할 수 있어요.
📄️ Jest + Testing Library +React에서 scrollTo is not a function 에러를 마주쳤을 때?
결론
📄️ react-hook-form + @testing-library/react + Jest 어떻게 테스트 하지?
react-hook-form, Formik과 같은 Validation을 도와주는 라이브러리를 사용하는 경우,
📄️ React에서 useEffect 대신에 useLayoutEffect가 더 좋을까?
React의 useLayoutEffect와 useEffect는 모두 컴포넌트의 상태를 감지하고 변경에 따른 동작을 수행하는 React Hook입니다.
📄️ React에서 useEffect는 어떻게 이루어져있나?
📄️ React의 StrictMode는 컴포넌트를 리렌더링하게 만드는건가?
create-react-app을 설치하면 React의 StrictMode가 있습니다.
📄️ 디자인 시스템을 위해서 style-system을 이용하는 방법
📄️ 리액트에서 몇 초 간격으로 Polling 하는 로직을 만들 때 유의할 점(Feat. 타이머)
Bad Case
📄️ React Hooks는 클로저를 사용하는가?
리액트 훅은 클로저 개념을 사용합니다.
📄️ React에서 Dropdown을 만들 때, Dropdown 렌더링을 display:none이 좋을까? visibility: hidden이 좋을까?
visibility는 이미 DOM에는 등록이됐지만, 실제로는 UI가 보이지 않게합니다.
📄️ React에서 Context API, Redux, Recoil 분해해보기
| | | Context API | Redux | Recoil |
📄️ 리액트에서 불변성이 필요한 이유
불변성
📄️ 리액트에서 useState가 불변성을 유지하는 방법
밑의 코드는 useState 소스코드를 간소화해서 useState의 원리를 설명하는 코드입니다.
📄️ react-query에서 useMutation은 뭐하는 애일까(feat. useQuery)
- useMutation은 API에게 POST, PUT, DELETE 시 사용
📄️ React로 Animation UI를 제대로 그리는 방법(Feat. requestAnimationFrame API)
image
📄️ setTimeout과 requestAnimation을 비교해보자
setTimeout와 requestAnimationFrame을 비교하기 전에 먼저 특정 타이밍에 실행하기 위해서 setTimeout을 지양해야하는 이유를 알아보자
📄️ 브라우저가 렌더링하는 주기에 대해 알아보자(Feat. requestAnimationFrame)
requestAnimationFrame
📄️ Create React App + Lerna로 모노레포 구성하기(CRA + Lerna To Set Monorepo)
- packages
📄️ setInterval의 delay의 시간은 보장되는가?
setInterval 함수는 일정한 간격으로 콜백 함수를 호출하는 타이머 함수입니다. 그러나 setInterval을 사용하여 일정한 딜레이를 보장하는 것은 보장되지 않을 수 있습니다.
📄️ React 18에서 createRoot로 바뀐 이유?
React 18에서 createRoot API가 도입된 것은 주로 Concurrent Mode와의 호환성 및 해당 모드의 최적화된 동작을 위해서입니다. 이는 비동기 렌더링과 여러 개의 작업을 동시에 수행할 수 있는 기능을 활성화하기 위한 것입니다.
📄️ createRoot는 왜 react-dom이 아닌 react-dom/client에서 부르는가?
- react-dom은 React의 DOM 렌더링과 관련된 기능들을 제공하는 패키지입니다.
📄️ 서브 컴포넌트를 메인 컴포넌트에 할당시켜보기(Feat. React Compound Component)
InputText.Div는 뭘까?
📄️ D3를 안쓰고 Stack Bar Chart를 그려보자!
HighCharts, D3, Apache ECharts 등등 차트 라이브러리를 많은데 이런게 어려웠다.
📄️ How To Integrate @tanstack/react-table with react-hook-form
react-hook-form과 @tanstack/react-table을 이용해서 테이블을 만들어보았습니다.
📄️ React + styled-components 앱을 yarn-berry로 관리하기
Yarn Berry란?
📄️ React + Express(Node) + JWT를 이용한 로그인, 회원가입 구현하기
image_1
📄️ React + Docker를 이용해서 React를 실행하기 (Feat. NginX)
image
📄️ Jenkins + Github 연동 방법
젠킨스 MacOS 설치 및 실행 커맨드//www.jenkins.io/download/lts/macos/
📄️ 리액트 개념 - React의 Virtual DOM(가상돔)이란?
DOM(Document Object Model = 문서객체모델)