JavaScript(10)
-
Next.js 하이드레이션
하이드레이션이란 서버에서 HTML을 먼저 보내줘 사용자가 화면을 빠르게 볼 수 있게 한 다음, 클라이언트에서 해당 HTML에 JavaScript코드를 결합하여 상호작용이 가능한 동적인 웹페이지로 만드는 과정입니다.하이드레이션의 주요 역할 및 필요성Next.js는 기본적으로 SSR이나 SSG 방식으로 HTML을 미리 생성하여 클라이언트에 전달할 수 있습니다.HTML을 미리 생성과 하이드레이션의 이점초기 로딩 속도 향상 및 SEO 최적화: 서버에서 완성된 HTML을 받기 때문에 사용자는 빈 화면이 아닌 내용이 채워진 페이지를 빠르게 볼 수 있으며, 검색 엔진 최적화에도 유리합니다.React 기능 활성화: 서버에서 내려준 HTML은 단순히 구조만 있는 정적인 상태입니다. 하이드레이션 과정을 통해 클라이언트의 ..
2025.10.26 -
Next.js의 사전 렌더링
사전 렌더링사전 렌더링이란 Next.js가 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링하는 대신, 서버에서 미리 HTML 파일을 생성하는 기능입니다. 이를 통해 사용자에게 더 빠른 로딩 속도와 검색 엔진 최적화 기능을 제공할 수 있습니다.정적 생성(SSG)정적 생성은 빌드 시점에 HTML 파일을 미리 생성하는 방식입니다. 한 번 빌드된 HTML 파일은 CDN에 배포되어 캐싱되며, 모든 요청에 대해 동일한 페이지를 제공합니다.특징속도가 빠름검색 엔진 최적화에 효과적데이터가 자주 변하지 않는 페이지에 적합(ex: 블로그 게시물, 제품 랜딩 등)서버 사이드 렌더링(SSR)서버 사이드 렌더링은 사용자가 페이지를 요청할 때마다 서버에서 HTML 파일을 동적으로 생성하는 방식입니다. 페이지에 따..
2025.08.21 -
Type vs Interface vs Class
TypeType은 변수 타입 정의에 별칭을 부여하는 것을 의미합니다. type Color = number | string;let favoriteColor: Color = "Red";Object나 Function도 정의하고 재사용할 수 있습니다.type People = { name: string;};const people: People = { name: "KIM"};type OnError = (id: number, error: string) => boolean;function downloadFile(id: number, onError: OnError) { ...}Type은 변수 타입에 별칭을 부여하고 재사용하는 기능만 제공합니다. 그리고 JavaScript로 변환할 때 어떠한 추가코드도 생성하지 않습..
2025.05.30 -
public vs assets
publicpublic에 저장된 파일들은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적됩니다. 즉 접속하는 유저가 원한다면 접근할 수 있습니다. 예를 들어, 브라우저에서 localhost:1234/game-logo.png에 접속하면 해당 이미지를 볼 수가 있습니다.assets파일들이 공개되지 않기 때문에 localhost:1234/src/assets/game-logo.png에 접속할 수 없습니다.결론logo, og-img, favicon같이 빌드 프로세스에 의해 처리되지 않는 이미지는 public에 컴포넌트 내에서 사용되는 이미지는 assets에서 사용하면 좋습니다.참고 페이지https://velog.io/@sooxpak/React-public-vs-assetshttps://yescold.tisto..
2025.05.07 -
React 리렌더링 최적화
React 렌더링React 공식 문서를 확인해보면 트리거 단계에서는 두 가지 이유로 렌더를 발생시킵니다.처음 컴포넌트를 렌더해야할 때컴포넌트 또는 부모 컴포넌트의 상태가 업데이트 될 때(리렌더링)컴포넌트 리렌더링 트리거 조건state가 업데이트 된 경우부모 컴포넌트가 리렌더링 된 경우context가 업데이트된 경우참조: https://blog.teamelysium.kr/react-rerendering-optimization#85d7fe53c34946599068bace7ccedbc3React 리렌더링 최적화합성(Composition)을 사용하여 리렌더링 방지상태를 자식 컴포넌트로 내리기이 패턴은 무거운 컴포넌트가 상태를 관리하고 있고, 해당 상태가 렌더 트리의 작은 일부 영역에서만 사용되는 경우에만 유용합..
2025.04.23 -
React Hook
React HookReact Hook은 리액트 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있게 만들어준 라이브러리입니다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능합니다.React Hook의 장점코드 간결성함수형 컴포넌트와 Hook을 사용하면 클래스 컴포넌트보다 코드가 더 간결해집니다. 따라서 코드를 이해하고 유지 보수하기가 더 쉬워집니다.재사용성Custom Hook을 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 이로 인해 코드의 중복을 줄이고 논리를 쉽게 공유할 수 있습니다.컴포넌트 분리Hook을 이용하면 상태 관련 로직을 컴포넌트에서 분리하여 더욱 독립적인 함수로 만들 수 있습니다. 이로 인해 컴포넌트를 더욱 재사용 가능하고 테스트하기 쉬..
2025.02.26