코드잇 스프린트/Daily Quiz

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

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. 라우트로 페이지를 나누는 법을 설명해주세요. 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. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요 - 제어 컴포넌트는 상태를 직접 관리하고, 입력 필드나 선택 요소의 값이 변경 될 때 상태를 업데이트 한다. - 비제어 컴포넌트는 상태를 직접 관리하지 않고, 입력 요소에 대한 레퍼런스를 사용하여 값을 가져오거나 설정한다. 이러한 컴포넌트는 입력 값이 변경 되더라도 ..

1. JSON.parse(), response.json() 차이점을 설명해주세요 JSON.parse()와 response.json()은 둘 다 JSON 데이터를 다루는 데 사용되지만, 사용 환경과 역할에 차이가 있다. 1. JSON.parse() 주로 문자열 형태의 JSON 데이터를 파싱하는 데 사용된다. 입력으로 문자열을 받아 JavaScript 객체로 변환한다. 클라이언트 측 코드에서 JSON 데이터의 문자열 표현을 JavaScript 객체로 변환하는 데 사용된다. 예를 들어, API에서 가져온 문자열 데이터나 로컬 스토리지에서 가져온 JSON 문자열을 파싱할 때 사용한다. const jsonString = '{"name": "Alice", "age": 30}'; const jsonObject = J..

1. 빌드, 트랜스파일링, 번들링 각 용어에 대해 설명해주세요 1) 빌드란 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정을 말한다. 대부분은 원하는 프로그램을 만들기 위해 고수준 언어(C, JAVA 등)를 사용해서 코딩을 한다. 하지만 컴퓨터는 0과 1이라는 숫자밖에 모르기 때문에 우리가 사용한 고수준 언어를 컴퓨터는 해석하지 못한다. 따라서 우리가 원하는 프로그램을 만들기 위해서는 우리가 작성한 언어를 컴퓨터가 이해할 수 있는 기계어로 번역해줘야 한다. 즉, 우리가 사용하는 고수준 언어를 기계어로 번역해서 실행 파일을 만들어내는 과정을 '빌드'라고 한다.(빌드의 단계 중 컴파일이 포함되어 있기 때문에 컴파일은 빌드의 부분집합이라고 할 수 있다.) 2) 트랜스파일링 트랜스파일..

1. 리액트에서 명시적으로 key를 지정해야하는 이유를 설명해주세요. Key는 React에서 element list를 만들 때 포함해야 하는 문자열 속성으로, 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 주의할 점은 key 값을 배열의 index로 지정할 경우, 배열의 순서가 바뀌면 key도 변경되기 때문에 key는 id와 같은 고유한 속성을 넣어주어야 한다. 2. 리액트가 화면에 페이지를 그리는 과정을 설명해주세요 props나 state가 변경될 때 리렌더링이라는 과정을 통해서 화면에 페이지를 그린다. 만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 된다. 그린 Virtual DOM과 Real DOM을 비교하여 변경된 사항만 반영하여 해당 내용을 실제..

1. OSI 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 국제 표준화 기구(ISO)에서 정의한 네트워크 표준 모델을 말하는데, 여기서 OSI 7계층 중 7계층인 응용계층(Application layer)에 해당하는 웹 프로토콜의 예로는 HTTP(Hypertext Transfer Protocol)가 있다(O,X) 참고링크: https://lxxyeon.tistory.com/155 답: O 2. JSON 객체의 stringify 메소드와 parse 메소드는 각각 (S____ ) 과 (D____ )을 해주기 위해 사용된다. 이 때 괄호 안에 들어갈 말은? 답: Serialize(직렬화), Deserialize(역직렬화) 해설: JSON(JavaScript Object Notation)이란 자바스크립..