기술 면접 대비 질문 리스트 최종 프로젝트 React Query 는 어떤 이유 때문에 사용하기로 결정했나요? 전역상태관리와 비동기 통신을 용의하게 해주는 React Query를 사용하지 않을 이유가 없었습니다. 비동기통신으로 가져온 데이터를 캐시형태로 보관해주고 원하는 설정 방식으로 캐시데이터를 전역적으로 가져와 이용할수 있습니다. 또한 비동기통신시 여러 옵션을 통해 훨씬 컨트롤 하기 쉬워집니다. Redux Toolkit 과 Zustand 중에 어떤 상태관리툴을 사용하기로 결정하셨고 그 이유는 무엇인가요? Redux Toolkit을 채택했습니다. 둘중 무엇이 나은 상태관리툴이냐고 나뉜 것이 아니라 단순히 Toolkit에 익숙했고 이미 익숙하지 않은 TypeScript와 Next.js app-router를..

1. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요. 클라이언트 사이드 렌더링(CSR) - 페이지 생성시 자바스크립트를 이용해 동적으로 페이지를 생성합니다. 사용자와 상호작용을 통해 전체페이지를 다시로드하지 않고 특정 부분만 리랜더링 할수 있는 장점이 있습니다. 초기로딩속도가 길고 검색엔진최적화(SEO)에 불리합니다. 서버 사이드 렌더링(SSR) - 서버에서 페이지 생성후 클라이언트에게 제공하는 방식입니다. 초기로딩속도가 빠릅니다. HTML이 이미 만들어졌기 때문에 초기로딩시간이 적습니다. 서버에서 만들어 놓은 상태이기 때문에 검색엔지이 페이지를 잘읽어서 SEO에 유리합니다. 페이지 변경시마다 새로 HTML을 요청 해야 하기 떄문에 U..

지뢰찾기(1)의 해석은 엉망이었지만 이건 열심히 해볼께요 느낌아니까 ㅋㅋㅋ import React, { useState, useCallback, useContext, memo } from "react"; //훅들 임포트 import { TableContext, START_GAME } from "./MineSearch"; // case 종류 상수선언한거 임포트 import styled from "styled-components"; //마인서치에서 만든 table Context를 임포트 const Form = memo(() => { //오우 메모이제이션이다. 컴포넌트 전체를 메모로 요래 감싸서 const [row, setRow] = useState(10); // 세로 //부모컴포넌트의 랜더링으로부터 보호하고..

심화주차 팀원분의 게임코드를 보며 한수 배워보자 import React from "react"; import MineSearch from "../components/mineSearch/MineSearch"; const MineSearchPage = () => { //실제 주소값 갖는 페이지이다. return ( //실제 화면에 보여줄 컴포넌트 ); }; export default MineSearchPage; 보자보자 import { createContext, useReducer, useMemo, useEffect } from "react"; import Form from "./Form"; // 컴포넌트로 추정 import Table from "./Table"; //이하동문 import { FontAwes..

동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요. 답변비동기는 비동기적인 작업이 완료되기를 기다리지 않고, 다른 작업을 동시에 진행할 수 있고 특정 이벤트의 발생,콜백 함수의 실행,또는 Promise와 같은 비동기 패턴을 통해 처리됩니다. 비동기 프로그래밍은 성능 향상,반응성 향상, 효율성,스케일링과 확장성을 위해서 필요합니다. 동기는 작업을 순차적으로 진행하며,각 작업은 이전 작업의 완료를 기다리고,한 작업이 시작하면 그 작업이 완료될 때까지 다음 작업이 차단되어 대기합니다. 답변 기본적으로 자바스크립트는 로직들을 동기적으로 수행합니다. 위에서부터 로직을 읽어나가면서 실행시킵니다. 하지만 외부와의 통신과 같은 어느정도의 시간이 걸릴지 예측 하지 못하는 로직들은 그 ..

useEffect의 실행 순서에 대해 설명해주세요. 답변 - useEffect는 파일의 로직들이 한번씩 다 실행되고 마지막에 실행됩니다. useEffect 랜더링시마다 무조건적으로 실행되는 로직이 아닌 일정한 변경에 대해서만 로직이 작동하도록 하는 훅입니다. useEffect 실행되는 시점 훅에 대한 프로세스 - 최초의 마운트시 useEffect는 발동합니다. useEffect는 두개의 인자를 받는데 첫번째 인자는 콜백함수이고 두번째 인자는 [] 로 쌓여있는 의존성 배열입니다. 두번째 인자가 존재하지 않으면 리랜더링 때마다 useEffect 내부의 로직이 발동합니다.만약 빈배열인 의존성배열을 갖는다면 useEffect의 내부로직의 경우에 따라 마운트시와 언마운트시에만 발동합니다. 의존성 배열에 특정 변수..