milliwonkim의 블로그

요약 - 페이지 내용이 자주 바뀐다? => SSR 사용 - 페이지 내용이 거의 안바뀐다? => SSG 사용 Next.js에서 SSG와 SSR이 무엇인가! 1. Static Site Generation(SSG) - 빌드 타임에 페이지를 서버에서 사전에 HTML을 생성해둠 - getStaticProps, getStaticPaths를 이용함 - 생성된 정적페이지는 모든 요청에 동일하게 제공됨 - 서버 측에서 사전렌더링 => 클라이언트에서 추가적인 데이터 요청 안해도됨 - 캐싱 => 성능향상, 서버 부하 감소 가능 - 주로 변경이 적은 페이지, 공통 데이터를 사용하는 정적 컨텐츠에 적합함 2. Static Site Generation(SSG) - 각 페이지 요청이 올 때마다 HTML을 생성함 - getServe..

Bad Case - setInterval 콜백에서 setCount(count + 1)을 호출할 때, count 변수는 useState 훅에서 설정한 초기 값을 참조합니다. 이는 useEffect 콜백함수가 컴포넌트 마운트 시 한 번만 호출되기 때문에 count의 초기 값이 클로저에 의해 캡쳐됩니다. import React, { useEffect, useState } from "react"; const App = () => { const [count, setCount] = useState(0); useEffect(() => { let i = 0; const interval = setInterval(() => { console.log("i: ", i++); // 이렇게 할 경우, count의 이전 값인 0을..

참고 리액트는 프레임워크가 아닌 라이브러리이지만 쉽게 통합해 부르기 위해, 이하 프레임워크로 통합한다 생산성 저하: 프론트엔드 프레임워크는 기본적인 템플릿, 라우팅, 상태 관리 등을 제공하여 개발자들이 보다 쉽게 개발을 진행할 수 있습니다. 프레임워크를 사용하지 않을 경우 이러한 기능들을 직접 구현해야 하므로 생산성이 저하될 수 있습니다. 유지보수의 어려움: 프론트엔드 프레임워크는 일관된 코드 스타일과 구조를 제공하여 코드의 유지보수를 용이하게 합니다. 프레임워크를 사용하지 않을 경우에는 개발자마다 코드 스타일이나 구조가 다를 수 있어서 유지보수가 어려울 수 있습니다. // 리액트를 사용하지 않은 예제 function App() { const button = document.createElement('b..

create-react-app을 설치하면 React의 StrictMode가 있습니다. 이로 인해 콘솔을 보면 같은 콘솔이 2번씩 찍히게 됩니다. 그러면 컴포넌트가 2번 렌더링된다고 보일 수 있습니다. React.StrictMode를 사용하는 것 자체는 컴포넌트 재랜더링을 트리거하지 않습니다. React.StrictMode는 엄격 모드에서 컴포넌트를 실행시키기 때문에, 개발 중에 컴포넌트가 더 자주 재랜더링될 수 있습니다. 이는 엄격 모드가 추가적인 검사 및 경고를 도입하여, 더 많은 재랜더링이 트리거될 수 있기 때문입니다. 그러나 이러한 추가적인 재랜더링은 React.StrictMode 자체 때문이 아니라, 실행되는 검사 및 경고 때문입니다. React.StrictMode가 추가적인 재렌더링을 하지는 않..

function useEffect(callback, dependencies) { const previousDependencies = useRef(dependencies); // Call the callback function if dependencies have changed if (!areDependenciesEqual(previousDependencies.current, dependencies)) { callback(); } // Update the previous dependencies // useRef를 이용해서 이전 값을 기억하기 때문에 // previousDependencies가 바뀌어도 리렌더링 되지 않습니다. previousDependencies.current = dependencies; ..

React의 useLayoutEffect와 useEffect는 모두 컴포넌트의 상태를 감지하고 변경에 따른 동작을 수행하는 React Hook입니다. 하지만, 이 두 Hook은 수행되는 시점에서 차이가 있습니다. useEffect는 브라우저가 렌더링 작업을 수행한 후에 비동기적으로 수행됩니다. 이는 컴포넌트가 렌더링 된 후에 일어난 변화에 대한 동작을 수행할 때 사용됩니다. 반면에, useLayoutEffect는 useEffect와 비슷하지만, 브라우저가 렌더링을 수행하기 전에 동기적으로 수행됩니다. 이는 렌더링이 발생하기 전에 상태 변경에 대한 동작을 수행해야 할 때 사용됩니다. 결과적으로, useLayoutEffect는 렌더링 전에 실행되기 때문에 일반적으로 더 빠르게 동작합니다. 그러나 이로 인해 ..

const 키워드로 만든 리액트 컴포넌트는 각 컴포넌트마다 독립적인 인스턴스가 생성되므로, 해당 컴포넌트의 내부에서 window 객체를 사용하더라도 전역 스코프의 window 객체와는 별개로 새로운 window 객체가 생성됩니다. 여기서 독립적인 인스턴스라는 것을 어떻게 아냐? 로 할당하면 새로운 인스턴스를 생성합니다. Object.is()를 통해서 a와 b의 인스턴스가 서로 다른 독립적인 인스턴스라는 것을 말해줍니다. import React from "react"; const Example1 = () => { var count = 0; function handleClick() { count++; console.log(`Count is now ${count}`); } return ( Count: {cou..

Cypress는 진짜 좋은 테스팅 툴입니다. testing-library에 비해서 페이지 전체를 화면을 띄워, 직접 유저가 이용하듯이 테스트를 할 수 있어요. 그런데 제가 Cypress에서 마주한 이슈들이 몇 개 있었습니다. - iframe 지원이 미흡 - 멀티 도메인이 안됩니다. - 일렉트론 기반으로 테스트에서 되는 것이 브라우저 기반의 테스트에서 되지 않는 현상 그래서 Cypress말고 어떤게 있을까 생각해봤는데, Microsoft에서 유지보수하는 Playwright를 발견했습니다. Cypress와 Playwright를 비교하자면 이렇습니다 Cypress Playwright 장점 배우기 쉬움 크로미움 기반 브라우저, 사파리, 파이어폭스 모두 지원 간단한 적용이 빠름 멀티 도메인, 멀티탭 지원 테스팅 ..

interface에 정의된 name, age, address에 Object.keys한 느낌임 따라서 interface Person { name: string; age: number; } keyof Person // 'name' | 'age' interface Person { name: string; age: number; address: string; } type PersonKeys = keyof Person; function getProperty(obj: Person, key: keyof Person) { return obj[key]; } const person: Person = { name: 'John', age: 30, address: '123' } getProperty(person, 'name')..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..