전체문제 다시 다 하겠습니다.
1/20 Multiple choice 다음 중 Tailwind CSS를 사용하여 글자 색상을 설정하는 클래스는 무엇인가요? (5pt)
text-red-500
bg-red-500
border-red-500
hover:text-red-500
문제풀이
a. text-red-500 - 이 클래스는 텍스트(글자)의 색상을 빨간색으로 설정합니다.
text- 접두사는 텍스트 색상을 설정하는 클래스임을 의미하며, red-500은 색상의 구체적인 톤을 나타냅니다.
b. bg-red-500 - 이 클래스는 배경 색상을 빨간색으로 설정합니다.
bg- 접두사는 배경 색상을 설정하는 클래스임을 나타냅니다.
c. border-red-500 - 이 클래스는 테두리 색상을 빨간색으로 설정합니다. border- 접두사는 테두리 색상을 설정하는 클래스임을 나타냅니다.
d. hover:text-red-500 - 이 클래스는 마우스 오버 시 텍스트 색상을 빨간색으로 설정합니다.
hover: 접두사는 호버 상태에서 스타일이 적용된다는 것을 의미합니다.
2/20 Multiple choice 다음 중 Styled Components의 장점이 아닌 것은 무엇인가요? (5pt)
CSS-in-JS 방식으로 스타일링 가능
컴포넌트 기반으로 스타일을 캡슐화
스타일 시트의 전역 네임스페이스 오염 방지
브라우저 호환성을 자동으로 보장
문제풀이
a. Styled Components의 핵심 장점 중 하나입니다.
CSS-in-JS 방식은 JavaScript 파일 내에서 직접 CSS를 작성할 수 있게 해 주며 스타일을 컴포넌트와 함께 정의할 수 있습니다.
b. Styled Components는 각 컴포넌트에 대한 스타일을 정의하고
스타일을 해당 컴포넌트와 연결함으로써 스타일을 캡슐화합니다.
스타일 캡슐화를 하는 이유는 코드의 재사용성과 유지보수성을 높이고
스타일 충돌을 방지합니다.
c. Styled Components는 각 컴포넌트에 대해 고유한 클래스를 생성하여 전역 네임스페이스의 오염을 방지합니다. 이는 스타일 충돌을 줄이고, 각각의 컴포넌트가 독립적으로 스타일을 관리할 수 있게 합니다.
d. Styled Components는 CSS-in-JS의 방식으로 스타일을 정의하는 도구일 뿐 (브라우저 호환성을 자동으로 보장하지는 않습니다.)
3/20 Multiple choice Styled Components와 Tailwind CSS의 주요 차이점은 무엇인가요? (5pt)
Tailwind CSS는 클래스 유틸리티 기반이며, Styled Components는 CSS-in-JS 기반입니다.
Tailwind CSS는 주로 전역 스타일을 다루며, Styled Components는 컴포넌트별 스타일을 다룹니다.
Tailwind CSS는 CSS를 별도로 작성하지 않고도 스타일을 적용할 수 있습니다.
Styled Components는 자바스크립트 파일 내에서 CSS를 작성하지 못합니다.
문제풀이
a. Tailwind CSS는 클래스 유틸리티 기반이며, Styled Components는 CSS-in-JS 기반입니다.(정답)
이유: Tailwind CSS는 클래스 유틸리티 기반의 프레임워크로
사전에 정의된 유틸리티 클래스를 HTML 요소에 적용하여 스타일을 설정합니다.
Styled Components는 CSS-in-JS 라이브러리로
JavaScript 파일 내에서 직접 CSS를 작성하여 컴포넌트에 스타일을 적용합니다.
b.Tailwind CSS는 주로 전역 스타일을 다루며, Styled Components는 컴포넌트별 스타일을 다룹니다.(오류)
Tailwind CSS는 전역 스타일을 사용하는 것이 아니라 전역에서 정의된 유틸리티 클래스를 통해 스타일을 적용합니다.
Styled Components는 각 컴포넌트별로 스타일을 정의하여 컴포넌트 내에서만 스타일을 적용합니다.
c. Tailwind CSS는 CSS를 별도로 작성하지 않고도 스타일을 적용할 수 있습니다.(오류)
Tailwind CSS는 CSS를 별도로 작성하지 않고도 미리 정의된 유틸리티 클래스를 사용하여 스타일을 적용할 수 있지만 이 설명은 주로 Tailwind의 스타일 적용 방식에 대한 설명이지 차이점 과는 맞지않는 설명입니다.
d. Styled Components는 자바스크립트 파일 내에서 CSS를 작성하지 못합니다.
4/20 Multiple choice 다음 중 SCSS에서 변수를 정의하고 사용하는 방법으로 옳은 것은 무엇인가요? (5pt)
$color: red; background-color: $color;
var color = red; background-color: var(color);
--color: red; background-color: var(--color);
color: red; background-color: $color;
문제풀이
a. SCSS에서 변수를 정의하려면 $ 기호를 사용합니다.
$color: red;는 변수를 정의하며 background-color: $color;는
변수를 사용하여 배경색을 설정합니다.
b. SCSS에서는 변수를 정의할 때 $ 기호를 사용합니다.
CSS Custom Properties에서 변수를 사용하려면 -- 접두사를 사용해야 합니다.
c. var(--color)를 사용하여 변수를 참조하는 것은 CSS에서의 방식입니다.
d. SCSS에서는 변수를 정의할 때 $ 기호를 사용하지만
CSS에서는 color: red;와 같은 구문을 사용합니다.
변수를 사용하기 위해서는 SCSS 문법에 맞게 $color를 정의하고 사용해야 합니다.
5/20 Multiple choice props drilling을 피하기 위해 선택할 수 있는 가장 적절한 해결책은 무엇인가요? (5pt)
상위 컴포넌트에서 모든 상태를 관리하고, 모든 하위 컴포넌트에서 직접 props로 전달한다.
상위 컴포넌트에서 상태를 관리하고, 상태를 변경할 때마다 하위 컴포넌트를 새로 렌더링한다.
Context API 또는 상태 관리 라이브러리(Redux, MobX 등)를 사용하여 전역 상태를 관리한다.
하위 컴포넌트에서 상태를 직접 관리하고 상위 컴포넌트와의 데이터 전달을 최소화한다.
문제풀이
a. 상위 컴포넌트가 모든 상태를 관리하고 여러 하위 컴포넌트에 props로 전달하면 컴포넌트 트리가 깊어질수록 전달해야 하는 props가 많아져서 코드가 복잡해지고 유지보수가 어려워질 수 있습니다.
b.상태를 변경할 때마다 하위 컴포넌트를 새로 렌더링하는 것은 성능에 영향을 줄 수 있지만, props drilling 문제를 직접적으로 해결하지는 않습니다.
c. Context API나 상태 관리 라이브러리를 사용하면 컴포넌트 트리의 깊이에 상관없이 필요한 컴포넌트가 상태에 접근할 수 있습니다.
props drilling 문제를 피할 수 있으며, 상태를 더 중앙 집중식으로 관리할 수 있습니다.
d. 상태가 필요한 모든 컴포넌트에서 직접 상태를 관리하게 되어 코드의 복잡성을 증가시킬 수 있습니다.
6/20 Multiple choice Redux에서 상태를 변경하는 함수는 무엇인가요? (5pt)
Reducer
Action
Middleware
Store
문제풀이
a. Reducer는 현재의 상태와 액션을 입력으로 받아서 새로운 상태를 반환합니다.
상태를 직접 변경하지 않고, 새로운 상태 객체를 반환하는 불변성을 유지하는 방식으로 동작합니다.
b. Action은 상태를 직접 변경하지 않지만 Reducer에 전달되어 상태를 변경하는 데 필요한 정보를 제공합니다.
c. Middleware는 상태를 직접 변경하지 않으며 액션이 Reducer에 도달하기 전에 중간에서 처리할 수 있는 기능을 제공합니다.
d. Store는 Reducer와 Action을 결합하여 상태를 관리하지만 직접 상태를 변경하는 함수는 아닙니다.
Store는 상태를 저장하고, 액션을 디스패치하고, 상태를 구독하는 역할을 합니다.
7/20 Multiple choice Redux에서 비동기 작업을 처리하기 위해 주로 사용하는 미들웨어는 무엇인가요? (5pt)
thunk
saga
logger
promise
문제풀이
a. redux-thunk를 사용하면 액션 생성자에서 함수를 반환할 수 있으며
함수는 비동기 작업을 수행하고 작업이 완료된 후에 디스패치할 액션을 생성할 수 있습니다.
b. redux-saga는 제너레이터 함수(generator functions)를 사용하여 복잡한 비동기 로직을 관리합니다.
c. 비동기 작업과 관련된 처리를 지원하지 않으며 상태 변경을 모니터링하는 데 사용됩니다.
d. 액션이 프로미스를 포함할 때 프로미스가 해결될 때까지 기다렸다가 결과를 액션으로 디스패치합니다.
8/20 Sorting Flux 패턴의 데이터 흐름 순서를 올바른 순서로 나열하세요. (5pt)
Action
Store
View
Dispatcher
문제풀이
Action
설명: 사용자의 인터랙션이나 이벤트를 통해 애플리케이션의 상태를 변경하기 위해 생성되는 객체입니다.
Dispatcher
설명: Action을 받아서 Store에 전달하는 역할을 합니다.
Dispatcher는 모든 Action을 중앙 집중식으로 관리하며
각 Store에 Action을 분배합니다.
Store
설명: 애플리케이션의 상태와 비즈니스 로직을 관리하는 곳입니다.
Store는 Action을 받아서 상태를 업데이트하고
상태가 변경되면 View에 알립니다.
View
설명: 사용자에게 보여지는 UI 컴포넌트입니다. View는 Store의 상태를 기반으로 UI를 렌더링합니다.
Action → Dispatcher → Store → View
9/20 Fill in the blank 다음 코드에서 Redux Toolkit을 사용하여 increment 액션을 호출할 때 상태의 value 값을 1 증가시키도록 리듀서를 완성하세요.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
__(A)__.__(B)__ +=__(C)__;
}
}
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer;
문제풀이
state: createSlice에서 정의한 initialState 객체를 포함한 현재 상태를 나타냅니다. state는 여기서 직접 변경할 수 있습니다.
state.value: initialState에 정의된 value 필드를 참조합니다.
상태의 value 필드를 직접 접근하여 값을 변경할 수 있습니다.
+= 1: 상태의 value 값을 1 증가시키는 연산입니다.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1;
}
}
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer; 10/20 Multiple choice 다음 중 Redux의 필수 구성 요소가 아닌 것은 무엇인가요? (5pt)
Action
Reducer
Selector
Store
문제풀이
Action
설명: Action은 상태를 변경하기 위한 "명령"을 나타내는 객체입니다.
일반적으로 type과 필요한 데이터를 포함하며 Reducer에 전달되어 상태 변경을 요청합니다.
Reducer
설명: Reducer는 현재의 상태와 Action을 입력으로 받아 새로운 상태를 반환하는 함수입니다.
Reducer는 상태 업데이트의 로직을 담당합니다.
Redux에서 상태를 변경하는 핵심 요소입니다.
Store
설명: Store는 애플리케이션의 상태를 보관하고 상태를 업데이트할 수 있는
메소드를 제공합니다.
Redux의 상태를 중앙에서 관리하고, Action을 디스패치하며, 상태 변화를 구독할 수 있게 합니다.
Selector
설명: Selector는 상태에서 특정 데이터를 추출하는 함수입니다.
Selector는 Redux의 필수 구성 요소는 아니지만 상태를 선택하고 가공하는 데 유용한 도구입니다.
11/20 Multiple choice React에서 동일한 함수가 반복해서 생성되지 않도록 하고, 자식 컴포넌트에 함수가 props로 전달될 때 불필요한 리렌더링을 방지하기 위해 어떤 Hook을 사용할 수 있을까요? (5pt)
useEffect
useMemo
useCallback
useState
문제풀이
useEffect
설명: useEffect는 컴포넌트가 렌더링된 후에 수행할 부수 효과(side effects)를 정의하는 데 사용됩니다.
비동기 데이터 로딩, 이벤트 구독, 타이머 설정 등이 이 Hook을 통해 이루어집니다.
useMemo
설명: useMemo는 계산된 값을 메모이제이션(memoization)하여 불필요한 계산을 방지하는 데 사용됩니다. 특정 값이 변경될 때만 계산을 다시 수행하고, 그렇지 않으면 이전 계산 결과를 재사용합니다.
useCallback
정답: useCallback은 함수의 참조를 메모이제이션하여, 의존성 배열에 명시된 값이 변경될 때만 함수를 재생성합니다.
자식 컴포넌트에 전달되는 함수가 불필요하게 새로 생성되지 않도록 하고 자식 컴포넌트의 불필요한 리렌더링을 방지할 수 있습니다.
useState
설명: useState는 상태를 관리하는 Hook으로 컴포넌트의 상태 값을 저장하고 업데이트하는 데 사용됩니다.
12/20 Multiple choice 다음 중 useMemo를 사용해야 하는 상황은 언제인가요? (5pt)
비동기 데이터 가져오기
복잡한 계산 결과 캐싱
DOM 요소 참조
타이머 설정
문제풀이
비동기 데이터 가져오기는 useEffect를 사용하여 처리합니다.
useMemo는 주로 복잡한 계산 결과를 메모이제이션하는 데 사용됩니다.
특정 의존성 배열이 변경될 때만 계산을 다시 수행하고 그렇지 않으면 이전 계산 결과를 재사용하여 렌더링 성능을 개선합니다.
복잡한 계산이나 비싼 연산이 필요한 경우에 useMemo를 사용하는 것이 적절합니다.
DOM 요소를 참조하거나 조작하려면 useRef를 사용합니다.
타이머를 설정하거나 관리하려면 useEffect를 사용합니다.
13/20 Multiple choice 다음 중 useMemo와 React.memo의 차이에 대한 설명으로 가장 적절한 것은 무엇인가요? (5pt)
useMemo는 컴포넌트 자체의 리렌더링을 막고, React.memo는 계산된 값을 메모이제이션합니다.
useMemo는 값의 메모이제이션을 제공하며, React.memo는 컴포넌트의 불필요한 리렌더링을 방지합니다.
useMemo는 비동기 작업을 처리하며, React.memo는 상태를 관리합니다.
useMemo는 함수 컴포넌트에서만 사용 가능하며, React.memo는 클래스 컴포넌트에서만 사용 가능합니다.
문제풀이
useMemo는 값의 메모이제이션을 제공하며 리렌더링을 막지는 않습니다. React.memo는 컴포넌트의 메모이제이션을 통해 불필요한 리렌더링을 방지합니다.
useMemo는 특정 계산 결과를 메모이제이션하여 컴포넌트의 리렌더링 시에 해당 계산을 다시 수행하지 않도록 합니다.
React.memo는 컴포넌트를 메모이제이션하여 props가 변경되지 않는 한 컴포넌트가 다시 렌더링되지 않도록 합니다.
useMemo는 값의 메모이제이션을 처리하고 React.memo는 컴포넌트의 불필요한 리렌더링을 방지합니다.
useMemo는 비동기 작업을 처리하지 않으며 비동기 작업은 useEffect로 처리합니다.
React.memo는 상태를 관리하지 않으며 컴포넌트의 리렌더링을 최적화하는 데 사용됩니다.
useMemo는 함수 컴포넌트에서 사용되며 React.memo는 함수 컴포넌트에 대해 메모이제이션을 제공하는 기능을 합니다.
클래스 컴포넌트에서의 메모이제이션은 shouldComponentUpdate를 사용하여 관리합니다.
14/20 Multiple choice 다음 중
thro≤과 debounce의 차이에 대한 설명으로 가장 적절한 것은 무엇인가요?
thro≤은 마지막 이벤트 이후 일정 시간 동안 함수를 실행하지 않지만, debounce는 일정 간격마다 함수를 실행합니다.
thro≤은 이벤트가 발생한 마지막 시점에 함수를 실행하지만, debounce
는 이벤트 발생 간격을 기준으로 함수를 실행합니다.
thro≤은 일정 시간 간격으로 이벤트를 제한하지만, debounce
는 마지막 이벤트가 발생한 후 일정 시간 동안 추가 이벤트가 없을 때 함수를 실행합니다.
thro≤과 debounce는 동일하게 작동하며, 둘 다 실시간 검색 기능에서 사용됩니다.
문제풀이
throttle은 일정 간격마다 함수를 실행하고 debounce는 마지막 이벤트 이후 일정 시간 동안 추가 이벤트가 없을 때 함수를 실행합니다.
throttle은 이벤트 발생 간격을 기준으로 함수를 실행하며 debounce는 마지막 이벤트 후 일정 시간 동안 추가 이벤트가 없을 때 함수를 실행합니다.
throttle은 일정 시간 간격으로 이벤트 핸들러를 호출하여 이벤트 호출 빈도를 제한하고 debounce는 마지막 이벤트 이후 일정 시간이 지나면 핸들러를 실행하여 추가 이벤트가 없을 때만 호출합니다.
throttle과 debounce는 서로 다른 방식으로 작동하며 실시간 검색 기능에서는 보통 debounce를 사용하여 입력이 끝난 후 검색을 수행하는 것이 일반적입니다.
15/20 Multiple choice
React.lazy는 어떤 상황에서 사용하나요?
상태 관리(store)를 초기화할 때
컴포넌트를 동적으로 로드할 때
사용자의 입력을 제한할 때
컴포넌트에서 함수 호출을 제한할 때
문제풀이
상태 관리(store)를 초기화하는 것은 useState, useReducer 또는 상태 관리 라이브러리의 설정과 관련이 있습니다.
React.lazy는 상태 관리와 관련이 없습니다.
React.lazy는 컴포넌트를 동적으로 로드하는 데 사용됩니다.
초기 로딩 시점에서 필요하지 않은 컴포넌트는 로드하지 않고 필요할 때만 로드하여 성능을 최적화합니다.
사용자 입력을 제한하는 것은 useEffect, useState, 또는 입력 제어 컴포넌트를 통해 처리합니다.
React.lazy는 입력 제어와 관련이 없습니다.
컴포넌트에서 함수 호출을 제한하는 것은 useCallback, useMemo 등의 Hook을 통해 처리할 수 있습니다.
React.lazy는 함수 호출을 제한하는 기능과는 관련이 없습니다.
16/20 Multiple choice React에서 느리게 로드되는 비동기 컴포넌트를 처리하고, 해당 컴포넌트가 로드되는 동안 로딩 UI를 표시하기 위해 어떤 것을 사용할 수 있을까요? (5pt)
useEffect
Suspense
useReducer
Context API
문제풀이
useEffect
설명: useEffect는 컴포넌트가 렌더링된 후에 부수 효과(side effects)를 수행하는 데 사용됩니다.
데이터 페칭, DOM 업데이트, 구독 등의 작업에 유용하지만, 비동기 컴포넌트 로딩과 로딩 UI 표시를 처리하는 데는 사용되지 않습니다.
Suspense
설명: Suspense는 비동기 컴포넌트 로딩을 처리하고 로딩 상태에 대한 UI를 표시하는 데 사용됩니다.
React.lazy와 함께 사용되어 컴포넌트가 로드되는 동안 로딩 스피너 또는 다른 로딩 UI를 표시할 수 있습니다.
Suspense는 비동기적으로 컴포넌트를 로드하고 로딩 상태를 관리할 수 있도록 도와줍니다.
useReducer
설명: useReducer는 컴포넌트의 상태를 관리하고 복잡한 상태 로직을 처리하는 데 사용됩니다.
상태 관리와 관련된 기능을 제공하지만 비동기 컴포넌트 로딩과 로딩 UI 표시와는 관련이 없습니다.
Context API
설명: Context API는 컴포넌트 트리에서 전역 상태를 공유하는 데 사용됩니다.
상태 공유와 관련된 기능을 제공하지만 비동기 컴포넌트 로딩과 로딩 UI 표시를 처리하는 데는 사용되지 않습니다.
17/20 Multiple choice React에서 상태 업데이트 시 불변성 관리를 해야 하는 가장 중요한 이유는 무엇인가요? (5pt)
상태 업데이트를 동기적으로 처리하기 위해
상태 업데이트가 자동으로 전역에 반영되기 위해
컴포넌트의 리렌더링이 발생하도록 하기 위해
상태 변경이 컴포넌트 간에 공유되기 위해
문제풀이
React의 상태 업데이트는 비동기적으로 처리될 수 있으며, 불변성 관리와 직접적인 관계는 없습니다.
상태가 전역에 반영되는 것은 상태 관리 라이브러리나 React의 상태 관리 방식과 관련이 있습니다.
불변성을 관리하는 가장 중요한 이유는 상태 변경이 컴포넌트의 리렌더링을 유도하기 위해서입니다.
React는 상태나 props가 변경되면 컴포넌트를 리렌더링합니다.
불변성을 유지하면 상태 객체의 참조가 변경되므로 React는 이전 상태와 새로운 상태를 비교하여 필요한 리렌더링을 수행할 수 있습니다.
상태 공유는 Context API나 상태 관리 라이브러리와 관련이 있으며, 불변성 관리의 주요 목적은 컴포넌트의 리렌더링을 정확하게 수행하도록 하는 것입니다.
18/20 Multiple choice 컴포넌트의 리렌더링을 최소화하면서 리렌더링 시 영향을 주지 않는 변수를 관리할 때 가장 적절한 Hook은 무엇인가요? (5pt)
useState
useReducer
useMemo
useRef
문제풀이
useState
설명: useState는 컴포넌트의 상태를 관리하는 Hook입니다.
상태가 변경되면 컴포넌트가 리렌더링됩니다.
useState는 상태가 변경될 때마다 리렌더링을 유발하기 때문에 리렌더링을 최소화하려는 목적에는 적합하지 않습니다.
useReducer
설명: useReducer는 복잡한 상태 로직을 관리하는 데 사용됩니다. useReducer는 상태 업데이트가 발생할 때 컴포넌트를 리렌더링하지만
상태 관리의 복잡성을 줄이고 구조화된 업데이트를 처리하는 데 유용합니다.
리렌더링을 최소화하는 데는 직접적인 관계가 없습니다.
useMemo
설명: useMemo는 컴포넌트의 리렌더링 성능을 최적화하기 위해 계산 결과를 메모이제이션합니다.
의존성 배열이 변경될 때만 메모이제이션된 값을 재계산하여 리렌더링 성능을 개선할 수 있습니다.
useMemo는 컴포넌트가 렌더링될 때 영향을 주지 않는 값을 캐싱하고 리렌더링을 최적화하는 데 적합합니다.
useRef
설명: useRef는 컴포넌트의 렌더링 사이에서 변수를 유지하는 데 사용됩니다. useRef로 관리되는 변수는 상태를 가지지 않으며 값이 변경되어도 컴포넌트는 리렌더링되지 않습니다.
따라서 리렌더링 시 영향을 주지 않는 변수를 관리하는 데 가장 적합합니다.
19/20 Multiple choice Next.js에서 'pages' 디렉토리 내에 'contact.js' 라는 파일을 추가했을 때, 해당 페이지에 접근할 수 있는 URL 경로는 무엇인가요? (5pt)
/contact
/pages/contact
/contact.js
/contact/index
문제풀이
/contact
설명: pages 디렉토리 내에 contact.js 파일을 추가했을 때
이 파일은 Next.js의 기본 라우팅 규칙에 따라 /contact URL 경로에 매핑됩니다.
Next.js는 pages 디렉토리 내의 파일 이름을 URL 경로로 변환하여 페이지를 제공합니다.
/pages/contact
설명: /pages/contact는 파일 시스템의 실제 경로를 나타내며
URL 경로가 아닙니다. Next.js는 pages 디렉토리 내의 파일을 URL 경로로 변환하지만 /pages/contact는 URL 경로로 접근할 수 없습니다.
/contact.js
설명: /contact.js는 URL 경로가 아니라 파일 이름을 나타냅니다. Next.js는 파일 이름을 직접 URL 경로로 사용하지 않습니다.
URL 경로는 파일 이름에서 .js 확장자를 제외한 부분을 사용합니다.
/contact/index
설명: /contact/index는 contact라는 폴더 내에 index.js 파일이 있을 때의 URL 경로입니다.
contact라는 폴더가 있고 그 안에 index.js가 있는 경우에 /contact URL로 접근할 수 있습니다.
하지만 contact.js 파일이 pages 디렉토리의 직접적인 파일일 경우에는 해당 URL이 아닙니다.
20/20 Multiple choice 서버 사이드 렌더링(SSR)을 사용하면 SEO(검색 엔진 최적화)에 어떤 이점을 제공하나요? (5pt)
클라이언트 측에서 JavaScript를 실행하지 않도록 합니다.
서버에서 페이지 콘텐츠를 미리 렌더링하여 검색 엔진 크롤러가 페이지 내용을 쉽게 인식할 수 있도록 합니다.
페이지 로드 속도를 향상시킵니다.
사용자 상호작용을 관리하는 데 도움이 됩니다.
문제풀이
SSR은 서버에서 페이지 콘텐츠를 렌더링하여 클라이언트 측에서의 JavaScript 실행을 줄일 수 있지만, JavaScript를 아예 실행하지 않도록 만드는 것은 아닙니다.
SSR을 사용하면 서버에서 페이지를 미리 렌더링하여 완성된 HTML을 클라이언트에 전달합니다. 검색 엔진 크롤러가 페이지의 내용을 더 쉽게 인식하고 색인화할 수 있게 도와줍니다.
페이지 로드 속도는 사용자 경험을 개선할 수 있지만
SEO의 직접적인 이점은 검색 엔진이 페이지 콘텐츠를 인식할 수 있는가와 관련이 있습니다.
SSR은 주로 페이지의 초기 렌더링을 담당하며 사용자 상호작용 관리에는 직접적인 역할을 하지 않습니다.
사용자 상호작용은 클라이언트 측 JavaScript에서 주로 처리됩니다.
