클라이밍하는 개발자

Streaming SSR에 관하여 설명해주세요.

Streaming SSR이란?🍕 피자로 이해하는 기존 SSR vs Streaming SSR기존 SSR: 완성된 피자를 한 번에 배달 📦주방에서 피자를 완전히 만든 후 → 배달원이 가져다줌사용자는 피자가 완성될 때까지 기다려야 함모든 데이터가 준비될 때까지 빈 화면만 보임Streaming SSR: 피자 조각별로 즉시 배달 🍕⚡완성된 조각부터 바로바로 배달첫 번째 조각이 도착하면 바로 먹을 수 있음나머지 조각들은 준비되는 대로 계속 도착🔧 Next.js에서 Streaming SSR 사용하기// app/page.jsimport { Suspense } from 'react'export default function HomePage() { return ( 메인 콘텐츠 (즉시 로드) ..

타입스크립트를 사용하는 이유를 설명해주세요.프론트엔드와 관련된 질문이에요.타입스크립트를 사용하는 주요 이유로 크게 세 가지를 들 수 있습니다.첫째, 정적 타이핑을 통해 코드의 안정성을 크게 향상시킬 수 있습니다. 개발 시 타입 오류를 런타임으로 실행하기 이전에 발견할 수 있어 런타임 에러를 줄이고, 코드의 품질을 개선할 수 있습니다. 이러한 장점은 특히 대규모 프로젝트에서 두드러집니다.둘째, 개발자의 생산성을 높여줍니다. IDE의 자동완성 기능과 인텔리센스가 더 많은 정보를 제공할 수 있게 되기 때문에 코드 작성 속도가 빨라지고, 리팩토링이 쉬워집니다. 또한 명시적인 타입 정의가 마치 문서화의 역할을 하여 코드의 가독성과 이해도가 높아집니다.셋째, 객체지향 프로그래밍의 일부 기능을 자바스크립트에 추가합니..

📌 컴포넌트란? 컴포넌트는 리액트에서 UI를 구성하는 작은 조각이에요. 쉽게 말해, 우리가 웹사이트를 만들 때 버튼, 입력 창, 카드 같은 것들을 각각 하나의 컴포넌트로 만들 수 있어요. 이렇게 쪼개서 만들면 관리가 쉽고, 원하는 곳에서 재사용할 수도 있죠! ✨ 컴포넌트의 종류 리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트가 있어요. 요즘은 함수형 컴포넌트가 많이 쓰이는데, 더 간결하고 이해하기 쉬운 코드 작성을 도와줘요. 🔥 컴포넌트 설계할 때 중요한 것들 1️⃣ 하나의 컴포넌트가 너무 많은 일을 하면 안 돼요! - 예를 들어, 버튼을 만들면서 로그인 로직까지 다 넣으면 유지보수가 어려워져요. 버튼은 버튼 역할만, 로그인은 로그인 역할만 하도록 분리하는 게 좋아요! ..

localStorage와 sessionStorage의 차이점에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.localStorage와 sessionStorage는 브라우저에서 제공하는 클라이언트 측 저장소 API로, 둘 다 데이터를 키-값 쌍 형태로 저장합니다.차이점은 데이터의 지속성과 범위에 있습니다.localStorage는 데이터를 영구적으로 저장합니다. 브라우저를 닫거나 장치를 재부팅해도 데이터가 유지되며, 동일한 도메인 내의 모든 탭에서 데이터를 공유할 수 있습니다.사용 예로는 다크모드 같은 테마 설정이나 장바구니 데이터와 같이 장기적으로 유지해야 하는 데이터 저장에 적합합니다.sessionStorage는 데이터가 현재 브라우저 세션 동안만 유지되며, 브라우저 탭이나 창을 닫으면 데이터가 삭제..

React에서 로딩 상태 관리하기: useEffect vs Suspense 비교 🚀useEffect로 로딩 상태 관리하기 ⚙️전통적인 방식으로, 컴포넌트가 마운트된 후 데이터를 가져오고 로딩 상태를 수동으로 관리합니다.function DataCenter({ id }) { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { setIsLoading(true); try { const response =..

리액트 동시성 모드란? 🤔리액트 동시성 모드는 마치 여러 손님이 동시에 주문하는 카페에서 바리스타가 긴급한 주문(중요 UI 작업)을 먼저 처리하는 것과 같습니다! 🏃‍♂️💨이전 리액트는 단일 스택 구조로 작업했어요. 즉, 한 번 렌더링을 시작하면 모든 작업을 끝까지 완료해야만 했습니다. 마치 하나의 커피를 완성할 때까지 다른 모든 주문을 기다리게 하는 것과 같죠. ☕️⏳하지만 동시성 모드에서는작업을 중간에 멈출 수 있음 ⏸️더 중요한 작업이 들어오면 우선순위 변경 가능 🔄사용자 경험을 방해하지 않고 백그라운드에서 작업 처리 🔍 동시성 모드의 핵심 기능들 🛠️1. startTransition 🚦특정 상태 업데이트를 '덜 중요한 작업'으로 표시할 수 있습니다.import { startTransi..

CORS(Cross-Origin Resource Sharing)는 무엇이며 왜 필요한가요?프론트엔드와 관련된 질문이에요.CORS는 서로 다른 출처(origin)에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책입니다.기본적으로 브라우저에는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy) 이 적용되어 있습니다. 해당 리소스가 같은 출처에서 제공되는 것이 아니라면 브라우저가 이를 차단하도록 되어 있습니다. 다시 말해, 다른 출처의 서버에 요청을 보낼 경우, 해당 요청에 대한 응답에 접근할 수 없도록 막습니다. 이러한 정책은 보안을 강화하지만, 이로 인해 합법적인 요청까지 차단될 수 있습니다. 그러한 상황을 해결하기 위해 CORS가 개발되었습니다.CORS를 적용하는 법을 설명드리겠습니..

Error Boundary가 무엇이며, 이를 사용하는 이유는 무엇인가요?프론트엔드와 관련된 질문이에요.Error Boundary란?Error Boundary는 React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트입니다. 일반적으로 클라이언트에서 오류가 발생할 때 표시할 UI를 제공하여, 애플리케이션의 신뢰성과 사용자 경험을 높이는 데 활용됩니다. 클래스형 컴포넌트의 componentDidCatch와 getDerivedStateFromError 두 가지 라이프사이클 메서드를 사용하여 오류 발생 시의 행동을 정의할 수 있습니다. Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있습니다.Error Boundary가 필요한 이유React..

Promise의 resolve()와 fulfilled에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.resolve()와 fulfilled는 Promise에서 비동기 처리시 사용되는 값들이지만, 차이점이 존재합니다. 간단히 말씀드리면, resolve()는 Promise를 완료시키는 함수이고, fulfilled는 해당 Promise가 완료된 상태를 뜻합니다.resolve()는 Promise가 성공적으로 끝났을 때 결과 값을 넘겨주는 함수입니다. 예를 들어 어떤 비동기 작업이 잘 끝났을 때, resolve()를 호출해서 "이 작업이 끝났고 결과는 이것이다"라고 전달하게 됩니다. 이렇게 resolve()가 호출되면, Promise의 상태는 '이행됨' 상태로 바뀌는데, 이를 fulfilled라고 부릅니다.예..

함수 선언식과 함수 표현식의 차이점에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.함수 선언식과 함수 표현식은 자바스크립트에서 함수를 정의하는 두 가지 방법으로, 이 둘의 주요 차이점은 호이스팅에 있습니다.함수 선언식은 이름이 있는 함수입니다. 함수 선언식은 자바스크립트 엔진이 코드를 실행하기 전에 메모리에 로드하기 때문에 호이스팅이 발생합니다. 즉, 함수 선언식으로 정의된 함수는 코드 내 어디서든 호출할 수 있습니다.console.log(add(2, 3)); // 5function add(a, b) { return a + b;}여기서 add 함수는 선언된 위치보다 앞에서 호출해도 정상 작동합니다. 이는 자바스크립트 엔진이 실행 전에 함수 선언을 미리 메모리에 로드했기 때문입니다. 그에 반해 ..