I'm a Fig, Not a Pig

1. 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.리액트의 한계기본적으로 순수 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 한다. 웹 사이트를 요청할 때 현재 사용하지 않지만 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO(Search Engine Optimization)에 취약 하다는 단점이 있다.  Next.js가 제공하는 이점1. 프리렌더링 기본적으로 프리렌더링을 지원한다. 데이터의 성격에 따라 getStaticProps를 활용해 빌드 단계에서 데이터를 받아 정적 생성 또는 SSR(..

1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉜다. 정적 타입 시스템은 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하고 동적 타입 시스템은 코드를 실행하면서 유동적으로 변수의 타입을 결정한다. 정적 타입 시스템을 사용하는 언어에는 C나 Java 같은 엄격한 문법을 가진 언어들이 있고 동적 타입 시스템을 사용하는 언어에는 Python, JavaScript, Ruby와 같이 유연한 문법을 가진 언어들이 있다. JavaScript는 동적 타입 언어이다.배우기 쉽고 타입을 미리 설정하지 않아도 되지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있다. 또한 ..

1.  type, interface 차이점type-alias는 모든 타입을 선언할 때 사용될 수 있고, interface는 객체에 대한 타입을 선언할 때 사용될 수 있다. 둘 다 객체에 대한 타입을 선언하는 데 사용될 수 있는데, 확장 측면에서 사용 용도가 달라진다.  확장이 불가능한 타입을 선언하려면 type-alias를 사용하면 되고, 확장이 가능한 타입을 선언하려면 선언 병합이 가능한 interface를 사용하면 된다. 2.  아래 두 타입의 부모,자식 관계와 마지막 문장에 있는 두 객체 타입간의 호환성을 설명해주세요type Book = { name: string; price: number;};type ProgrammingBook = { name: string; price: number; ..

1. 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. Client Side Rendering (CSR)CSR은 클라이언트(브라우저)에서 웹 페이지를 렌더링 하는 것 이다. 동작방식은 다음과 같다. 사용자가 사이트에 접속하면 서버에서 index라는 HTML파일을 클라이언트에 보내준다. 이때 받는 index 파일은 body 안에는 id="root"만, 그리고 어플리케이션에서 필요한 자바스크립트 링크만 들어있는, 가장 추상적이고 심플하게 이루어져 있다. 따라서 HTML이 텅텅 비어져 있기 때문에 처음 접속 시 빈 화면만 보인다.이후 링크된 JS파일을 서버로부터 받아오는데 이 JS파일에는 어플리케이션에 필요한 로직들 뿐만 아니라 어플리케이션을..

1. useEffect의 실행 순서를 설명해주세요.컴포넌트가 렌더링되고 화면에 나타난다.useEffect 함수가 호출된다.만약 useEffect의 두 번째 매개변수로 의존성 배열이 제공되었다면, 이 배열에 지정된 의존성들이 변경될 때마다 useEffect가 재실행된다.컴포넌트가 언마운트되기 전에 필요한 정리(clean-up) 작업이 실행된다.  2. 자식 컴포넌트에서 props의 변경 가능 여부와 이유를 설명해주세요.자식 컴포넌트에서 props는 읽기 전용이다. 이는 자식 컴포넌트가 부모로부터 전달된 props를 변경할 수 없다는 것을 의미한다. 이는 React의 단방향 데이터 흐름을 유지하고 부모와 자식 간의 결합을 느슨하게 유지하는 데 도움이 된다. 만약 자식 컴포넌트에서 pro..

1. Link, Navigate, useNavigate를 언제 사용하면 좋을지 구분지어 설명해주세요. 1) Link 주로 애플리케이션 내에서 다른 경로로 이동할 때 사용한다. ex. 네비게이션 메뉴 항목 클릭 특정 버튼을 눌러 다른 페이지로 이동할 때 import { Link } from 'react-router-dom'; function NavigationMenu() { return ( Home About Contact ); } 2) Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. (리다이렉트) ex. 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이..

1. 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. 리액트에서 배열을 렌더링할 때 key를 지정해야 하는 이유는 두 가지가 있다. 1. 성능 최적화를 위해 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 하나씩 살펴보자. 1. 성능 최적화를 위해 배열의 각 항목을 렌더링할 때 리액트는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최소화한다. 이때 리액트는 각 요소의 key를 비교하여 변경된 부분을 파악하는데, key가 없으면 리액트는 각 요소를 변경된 부분으로 인식하지 않고, 전체를 다시 렌더링 하게 되므로 성능에 부담을 줄 수 있다. 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 요소마다 key로 고유한 값을 지정해주어야 요소를 삭제..

1. 라우트로 페이지를 나누는 법을 설명해주세요. react에서 router를 구현할 때 react-router-dom의 BrowserRouter, Routes, Route, Link 컴포넌트를 사용한다. 먼저 BrowserRouter은 react-router-dom 컴포넌트를 감싸는 최상단에 위치한다. 이후 Routes 하위에 경로에 따라 Route의 element에 전달한 컴포넌트로 분기하는 식이다. Route의 컴포넌트의 path props 으로 경로를 지정하고 element props 에 보여줄 컴포넌트를 지정하면 된다. 2. useParam에 대해 설명해주세요. useParams은 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶을 때 사용하는 훅이다. 사용방법은 다음과 같다. 1)..

1. 'setState'는 비동기처럼 동작하지만 비동기 함수는 아니다 (O, X) 답: O 2. 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요. 엘리먼트는 자바스크립트 객체고, 리액트로 화면을 그려내는 데에 가장 기본적인 요소이다. 엘리먼트는 한 번 생성되면 다시는 변형되지 않는다. 반면 컴포넌트는 엘리먼트를 반환하는 함수 혹은 클래스를 의미한다. 재사용성을 강조하여, 엘리먼트를 좀 더 자유롭게 다룰 수 있으며, 컴포넌트의 이름을 사용하여 하나의 태그처럼 사용할 수 있다. 3. 함수형 컴포넌트의 장점은 무엇인가요? 클래스형 컴포넌트보다 선언이 간편다. 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. 이전에는 라이프사이클 API를 사용하지 못한..

1. Dom과 Virtual Dom의 차이점에 대해 설명해주세요 - DOM(Document Object Model)은 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이며 트리 데이터 구조로 표현된다. - Virtual DOM은 실제 DOM의 가상 표현으로, 메모리 상에 있는 DOM의 트리 구조를 표현한다. 쉽게 말해 DOM과 같은 내용을 담고 있는 복사본이다. 2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요 - 제어 컴포넌트는 상태를 직접 관리하고, 입력 필드나 선택 요소의 값이 변경 될 때 상태를 업데이트 한다. - 비제어 컴포넌트는 상태를 직접 관리하지 않고, 입력 요소에 대한 레퍼런스를 사용하여 값을 가져오거나 설정한다. 이러한 컴포넌트는 입력 값이 변경 되더라도 ..