리액트 생명주기(life cycle)에 대해 설명해 주세요.함수형 컴포넌트에서는 클래스 컴포넌트와 달리 생명주기 메서드가 명시적으로 나뉘어 있지 않고, useEffect 훅 하나로 마운트, 업데이트, 언마운트를 모두 제어합니다. 의존성 배열을 통해 원하는 타이밍에만 실행되도록 제어할 수 있기 때문에, 생명주기를 더 명확하게 다룰 수 있다는 장점이 있습니다. 꼬리질문useEffect가 언제 실행되나요? useEffect는 컴포넌트가 렌더링되어 실제 DOM에 반영(commit)된 후에 실행되는 비동기 함수입니다.구체적으로 말하면, React가 가상 DOM과 실제 DOM을 동기화한 뒤, 브라우저가 화면을 그린 다음에 실행됩니다.이 때문에 useEffect 내에서 DOM 조작이나 데이터 요청 같은 부수 효과(s..

JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. JavaScript는 동적 타입 언어 입니다. 앞서 살펴본 동적 타입 언어의 특징을 JavaScript도 가지고 있어서 배우기 쉽고 타입을 미리 설정하지 않아도 된다는 유연한 장점이 있지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있습니다. 또한 추가적인 설명이 없다면 함수의 파라미터에 어떤 타입의 값이 들어가야 하고 리턴되는 값은 어떤 타입이어야 하는지 구체적인 코드를 봐야 이해할 수 있습니다. TypeScript는 점진적 타입 언어 입니다. 점진적 타입 언어란 동적 타입 시스템과 정적 타입 시스템을 혼합한 것 같은 타입 시스템을 사용합니다. 정적 타입 시스템처럼 변수의 타..

TypeScript의 동작 원리에 대해 설명해 주세요.TypeScript는 JavaScript의 상위 집합으로, 개발자가 작성한 코드에 타입 시스템을 추가하여 코드의 안전성을 높여주는 언어입니다.TypeScript 컴파일 과정은 크게 두 단계로 나눌 수 있습니다.첫 번째는 정적 타입 검사 단계입니다. 이 과정에서 TypeScript 컴파일러는 우리가 작성한 코드를 실행하지 않고, 코드 내부의 타입이 올바르게 사용됐는지 검사합니다. 이를 정적 검사라고 하며, 타입 오류가 발견되면 컴파일이 중단되고 오류가 개발자에게 알려집니다.두 번째 단계는 타입 검사가 성공했을 때 진행되며, TypeScript 컴파일러는 내부적으로 생성한 추상 문법 트리(AST)를 바탕으로 타입 정보를 제거하고, 순수한 JavaScrip..

리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.리액트의 한계클라이언트 사이드렌더링으로 웹사이트를 요청할때 초기로딩시 React에서 번들링한 Javascript 파일을 html로 렌더링하는 작업을하여 초기 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO에 취약하다는 단점이 있습니다. Next.js가 제공하는 이점첫번째로는 프리렌더링이 있겠습니다.Next.js는 기본적으로 페이지를 사전에 렌더링하는 전략을 취합니다.페이지를 요청하기 전에 HTML을 미리 생성해놓는 방식으로,getStaticProps를 활용한 SSG(Static Site Generation),또는 getServerSideProps를 활용한 SSR(Server Side Rendering)을 통해초기 로딩 속..

Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.프론트 서버단에서 필요한 데이터를 백엔드 서버에 요청해 가져옵니다.그후 받은 데이터를 활용해 프론트 서버에서 HTML을 렌더링합니다. 프론트 서버에서 요청한 페이지에 필요한 HTML, CSS, JavaScript 코드를 브라우저에게 보냅니다. 사용자는 인터랙션 할 수 없는 HTML, CSS 코드로 그려진 화면을 보게 됩니다. 리액트 hydrate 이후 사용자는 인터랙션 가능하게 됩니다. hydration은 서버에서 렌더링된 HTML에 기반하여 클라이언트 측에서 JavaScript 이벤트와 상태를 연결하는 과정을 말합니다. 꼬리질문그럼 CSR과 SSR의 차이점은 뭐고, 언제 SSR을 선택하시겠어요? CSR은 브라우저가 초기..

JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.Javascript는 동적타입언어입니다. 코드를 실행하면서 예상치 못한 타입이 들어와 에러를 발생하는 경우가 있습니다. 또한 타입 유추가 쉽지않습니다. TypeScript를 사용하면 컴파일시 정적 타입 시스템처럼 변수의 타입을 코드 실행 전에 결정하고, 오류가없는지 검사합니다.그렇기때문에 이런 TypeScript 특징을 이용해 컴파일 단계에서 오류를 포착할수있고, 코드를 통해 어떤 타입의 값이 필요한지 쉽게 파악할 수 있어 코드의 흐름을 이해하기 쉽고 협업에 도움이 됩니다. 꼬리질문TypeScript로 작성된 코드는 최종적으로 어떻게 실행되나요?TypeScript 코드는 브라우저나 Node.js에서 직..