프론트 개발자를 위한 여정

모든 영역을 안내하는 개발자

TypeScript 2

[TypeScript]의 interface와 type 차이, 왜 헷갈릴까? 정확히 알아보자!

TypeScript에서 객체의 타입을 정의할 때는 interface와 type 두 가지를 사용할 수 있습니다. 이 둘은 비슷한 역할을 하지만, 세부적인 차이와 적합한 사용 사례를 이해하면 더 효과적으로 코드를 작성할 수 있습니다. 아래에서는 interface와 type의 차이를 전문적으로 분석하고, 사용 시 고려해야 할 점을 정리해보겠습니다.1. 기본적인 정의와 공통점interface와 type은 모두 TypeScript에서 객체, 함수, 배열, 클래스 등의 타입을 정의하는 데 사용됩니다. 다음은 두 방식의 공통점입니다.공통점객체 형태를 정의할 수 있다.선택적 속성, 읽기 전용 속성 등을 지원한다.함수 타입을 정의할 수 있다. // 공통적으로 지원하는 기능interface ExampleInterface ..

Frontend 2024.12.07

Next.js에서 SSR, SSG, CSR의 이해(렌더링 방식)

Next.js는 다양한 렌더링 방식을 지원하여 SEO, 성능, 사용자 경험을 최적화할 수 있습니다. 이 글에서는 최신 Next.js 13 버전을 기준으로 SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), CSR(클라이언트 사이드 렌더링)의 개념과 사용 시 유의사항을 알아보겠습니다.목차SSR(서버 사이드 렌더링)SSG(정적 사이트 생성)CSR(클라이언트 사이드 렌더링)Next.js에서의 렌더링 방식 선택 기준1. SSR(서버 사이드 렌더링)SSR(Server Side Rendering)은 페이지 요청이 있을 때 서버에서 HTML을 생성하여 클라이언트로 전달하는 방식입니다. 사용자가 페이지에 접속할 때마다 서버에서 HTML을 렌더링하므로 사용자에게 최신 데이터를 제공하는 데 유리합니다.장점SEO에 ..

Frontend/NextJs 2024.10.28