[Career] 프론트엔드 정리

"==" 와 "===" 의 차이는 무엇인가요? -> == 는 동등 연산자로, 두 값을 비교할 때 형변환을 수행. 즉 비교하는 값의 데이터 타입이 다르더라도 자동으로 형변환을 수행한 후에 비교한다. 이러한 형변환은 때로 예측하지 못한 결과를 초래할 수 있으므로, == 를 사용할 때 주의. === 는 일치 연산자로, 두 값이 데이터 타입과 값이 모두 같은지 비교한다. 따라서 === 를 사용하면 형변환 없이 정확한 값을 비교할 수 있다. 이러한 일치 연산자를 사용하는 것이 더 안전하고 예측 가능한 결과를 얻을 수 있다.
클로저란 무엇인가요? 함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 소코프 체인을 형성하게 되는데, 스코프 체인은 함수가 선언 될 때의 모든 변수와 함수를 포함하는 렉시컬 스코프를 형성합니다. 외부 함수가 실행 되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수 입니다. 정보를 은닉하기 위해서 주로 사용된다.

function outer() {
  const outerVal = '외부 변수';

  function inner() {
    console.log(outerVal);
  }
  return inner;
}
const innerExecute = outer();
innerExecute();

-> outer 는 inner를 return 했습니다. innerExecute 에는 outer에서 반환한 inner 함수가 할당되게 된다. innerExecute를 호출할 때마다, outer에서 저으이한 outerVal을 출력하게 된다. 이때 inner 함수는 outer 함수의 스코프 체인을 유지하게 된다. 이러한 특성을 이용하여 클로저를 구현한 것입니다.

이벤트 버블링에 대해서 설명해주세요. 이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후, 상위 요소로 이벤트가 전파된느 현상을 말합니다. 이벤트 버블링은 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 장점이 있습니다. 즉, 이벤트를 처리하는 핸들러 함수를 부모 요소에 등록해놓으면, 자식 요소에서 발생한 이벤트도 모두 처리할 수 있다. 이를 활용하면, 여러 개의 하위 요소에서 발생하는 이벤트를 하나의 이벤트 핸들러로 바인딩하는 이벤트 위임 처리를 할 수 있습니다. 버블링 및 캡쳐링을 방지하기 위해서는 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트 전파를 중지ㅅ키거나, 이벤트 핸들러에서 이벤트가 발생한 요소를 확인하여 처리해야 합니다. -> 이벤트 핸들링과 캡쳐링의 차이점에 대해서 구분해서 인지하는 것이 중요 -> 이벤트 위임에 대해서도 인지하고 있어야한다.
Flex 와 Grid의 차이점에 대해서 설명해보세요 Flex는 주로 단일 축 방향의 레이아웃을 구성하는 데 사용되며, 주로 수평 방향으로 레이아웃을 정렬합니다. Grid 는 2차원 그리드 시스템을 구성하는 데 사용되며, 수평과 수직 방햐응로 모두 레이아웃을 정렬할 수 있습니다. Flex는 아이템들의 크기가 자유로워 유동적으로 변할수 있습니다. 반면에 Grid는 아이템들의 크기를 미리 정의하여 각 셀의 크기를 일정하게 유지합니다. Flex는 유동적인 레이아웃 변화를 구성하기 적합합니다. 반면에 Grid는 미리 정의된 2차원 그리드 구조를 유지하기 때문에 레이아웃 변화가 적은 경우에 적합합니다. -> 언제 Flex를 쓰고 언제 Grid를 쓸지에 대해서 아는 것이 중요하다.
MVVM 패턴과 Flux 패턴의 차이점에 대해서 설명해보세요
비동기 함수에 대해서 설명해보세요. 비동기 함수는 함수의 실행 결과가 즉시 반환되지 않고, 특정 조건이 충족될 때까지 기다리는 함수입니다. 비동기 함수는 일반적으로 콜백 함수나 Promise 객체를 반환합니다. 콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수이며, Promise 객체는 비동기 작업이 성공적으로 완료되었는지를 나타내는 객체입니다. 비동기 함수를 사용할 때는 콜백 지옥과 같은 문제를 피하기 위해 적절한 에러 처리와 코드구성이 필요. 여러개의 비동기 함수가 실행되면, 이벤트 루프는 비동기 함수 호출을 처리하고, 비동기 함수가 완료되었을 때 콜백 함수를 호출합니다. 이벤트 루프는 실행 대기 중인 비동기 함수가 있으면 해당 함수를 호출하고, 실행이 완료될 때까지 다음 비동기 함수를 호출합니다. 따라서, 여러 개의 비동기 함수가 실행될 때 이들 함수는 동시에 실행되며, 이벤트 루프에 의해 비동기 함수의 실행 순서가 제어됩니다.

면접 질문 정리

Next.JS 사용하셨던데 제가 처음사용하는 개발자라고 생각하고 설명해주실래요? 리액트, 뷰, 앵귤러 와 같이 클라이언트 사이드 렌더링이 급부상되면서 많이 사용하였는데 옛날에 사용하던 PHP 라라벨 처럼 서버 사이드 렌더링을 사용하는 Vercel 의 Next.JS 프레임워크가 화두가 되었습니다. next.js 는 React를 기반으로 만들어진 프레임워크로 13 버전 이전에는 페이지 별로 정적 페이지 생성, 서버 사이드 렌더링, 클라이언트 사이드 렌더링을 구분하였는데 13 버전 이후로는 컴포넌트 단위로 렌더링을 구분하게 되었습니다. 디렉터리 구조가 잡혀있고 보안, 성능적으로 좋은 Next.JS를 접해보는 것은 좋은 경험이 될 것 같습니다.
TypeScript 를 사용하면 어떤점이 좋나요? Javascript 는 인터프리터 언어이고 타입이 존재하지 않습니다. 동적타입을 지원하기에 함수에 인자가 어떤 타입을 가지고 있는지 알 수 가 없습니다. jsdoc 으로도 타입을 명시하는 건 가능하지만 typescript를 사용하면 정적타입을 제공하고, typescript 를 javascript 로 컴파일시 타입에러를 잡을 수 있으며, 협업을 할 때 굉장히 효율적입니다.
React 로 상태 관리를 어떻게 하시는 편인가요? 컴포넌트 상태 관리는 useState() 로 관리하면서 규격내의 컴포넌트에서 사용하면 useContext 로 컴포넌트 내에서 props 로 전달하지 않고 사용할 수 있으며, 전역적으로 사용할 때는 mobx, redux, recoil 같은 전역 상태 관리를 사용합니다. 서버에서 받은 데이터를 관리할 때는 서버 상태 관리 도구인 react-query 를 사용하여 서버 상태를 관리할 수 있습니다.
React를 사용하는 이유는 무엇인가요? 별도의 컴포넌트를 만들어 유지보수 측면에서 사용할 수 있고 관리가 용이하며, 라이브러리이기에 자유도가 높으며 기존의 DOM을 조작하지 않고 virtual DOM 조작을 조작해 비교 후 변한 element 만 변경할 수 있습니다. 또한 클라이언트 사이드 렌더링이 되므로 초기 렌더링시에 리소스들을 불러 오기에 시간이 걸리지만 추후에는 동적데이터들만 불러오기에 리소스를 불러 오지 않기에 시간이 오래 걸리지 않습니다.
궁극적인 목표가 무엇인가요?