프리온보딩 FE 6월(wanted)

아직 제출X <- 제출하면 지우기

✍️ 원티드 프리온보딩 챌린지 FE 코스 사전과제

✅ 1. JavaScript ES6+ 기능

🔴 Q. JavaScript ES6 이후에 추가된 주요 기능 중에서, ``템플릿 리터럴, 화살표 함수, 스프레드 연산자``를 설명하고, 이러한 기능들이 JavaScript 프로그래밍에 어떤 이점을 제공하는지 구체적인 예를 들어 설명해 주세요.

🟣 A-1. 템플릿 리터럴

설명 - 템플릿 리터럴이란, 백틱을 사용하여 '문자열'을 작성할 수 있는 기능을 말합니다.

이점 - 변수와 표현식을 ${} 안에 넣어 문자열 내에서 쉽게 사용할 수 있다는 이점을 갖습니다. 이를 통해 문자열 연결(concatenation)을 더 간편하게 할 수 있겠습니다.

예시

const name = 'John';
const greeting = `Hello, ${name}! Welcome to ES6.`;
console.log(greeting);  // Output: Hello, John! Welcome to ES6.

🟣 A-2. 화살표 함수

설명 - 화살표 함수란, '=>' 문법을 사용하여 '함수'를 정의하는 방식입니다.

이점 - 문법이 간결하며, 특히 'this' 키워드의 처리가 직관적이라는 장점이 있습니다.

예시

const add = (a, b) => a + b;
console.log(add(2, 3));  // Output: 5

🟣 A-3. 스프레드 연산자

설명 - 스프레드 연산자란, '...' 문법을 사용하여 '배열이나 객체'를 개별 요소로 분해하거나 합칠 때 사용하는 방식입니다.

이점 - 배열과 객체의 복사 및 결합을 간편하게 수행할 수 있다는 효용을 보입니다.

예시

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);  // Output: [1, 2, 3, 4, 5, 6]

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj);  // Output: { a: 1, b: 2, c: 3, d: 4 }

✅ 2. React 컴포넌트의 종류와 차이

🔴 Q. ``함수형 컴포넌트`와 `클래스형 컴포넌트`를 비교 설명하고, `React Hooks``가 도입된 배경과 이로 인해 달라진 React 개발 방식에 대해 설명해 주세요.

🟣 A-1. 함수형 컴포넌트

설명 - 함수형 컴포넌트(Functional Components)란 단순한 JavaScript 함수로 작성된 컴포넌트를 의미합니다. 상태와 생명주기 메서드가 없었지만, React Hooks의 도입으로 상태 관리와 생명주기 관련 기능을 사용할 수 있게 되었습니다.

예시

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

🟣 A-2. 클래스형 컴포넌트

설명 - 클래스형 컴포넌트(Class Components)는 'React.Component'를 상속받아 작성하며, 상태와 생명주기 메서드를 사용할 수 있습니다.

예시

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

🟣 A-3. React Hooks

설명 - React Hooks의 도입으로, 함수형 컴포넌트에서도 상태와 생명주기 기능을 사용할 수 있게 되었습니다. 주요 Hooks로는 'useState', 'useEffect', 'useContext' 등이 있습니다. Hooks의 도입으로 함수형 컴포넌트의 활용도가 높아졌고, 코드가 간결해졌습니다. 동시에, 클래스형 컴포넌트의 필요성이 감소되었다고 이해할 수 있겠습니다.

예시

import React, { useState, useEffect } from 'react';

function Greeting(props) {
  const [name, setName] = useState(props.name);

  useEffect(() => {
    document.title = `Hello, ${name}`;
  }, [name]);

  return <h1>Hello, {name}</h1>;
}

✅ 3. Next.js의 App Path Routing

🔴 Q. ``Next.js 12.2 버전`부터 도입된 `App Path Routing``에 대해 설명하고, 이전의 페이지 기반 라우팅과 어떻게 다른지, 그리고 이 새로운 라우팅 방식이 개발자에게 어떤 이점을 제공하는지 분석해 주세요.

🟣 A-1. 이전의 페이지 기반 라우팅

1. pages 폴더 내 파일 구조가 라우팅 경로를 정의 2. 파일 이름과 폴더 구조가 URL 경로를 결정

🟣 A-2. App Path Routing

1. 더 유연한 라우팅 규칙 지원 2. 동적 라우팅과 중첩 라우팅을 더 직관적으로 관리 가능 3. 앱의 구조와 라우팅 설정의 분리로 코드베이스의 가독성과 유지보수성 향상

🟣 A-3. 이점

1. 복잡한 라우팅 규칙을 간편하게 설정 가능 2. 더 나은 코드 분리와 모듈화 3. 개발 생산성 및 유지보수성 향상

✅ 4. 서버 사이드 렌더링과 정적 사이트 생성

🔴 Q. Next.js에서 ``서버 사이드 렌더링(SSR)`과 `정적 사이트 생성(SSG)``의 차이를 설명하고, 각각 어떤 시나리오에서 사용되어야 하는지 예를 들어 설명해 주세요.

🟣 A-1. 서버 사이드 렌더링(SSR)

SSR은 서버에서 HTML을 렌더링하여 클라이언트에 전송하는 방식입니다. 이는 페이지 로딩 속도를 개선하고 SEO 성능을 높이는 데 유리합니다.

사용 시나리오

- 사용자 맞춤형 콘텐츠 제공 - 실시간 데이터 표시가 필요한 페이지 - SEO 최적화가 중요한 경우

🟣 A-2. 정적 사이트 생성(SSG)

정적 사이트 생성 (SSG)

SSG는 빌드 타임에 HTML 파일을 생성하여, 클라이언트에 미리 렌더링된 페이지를 제공하는 방식입니다. 이는 빠른 로딩 속도와 높은 성능을 제공하며, 정적 콘텐츠에 적합합니다.

사용 시나리오

- 변하지 않는 정적 콘텐츠 제공 - 빠른 로딩 속도가 중요한 경우 - SEO가 중요한 경우