MVC 패턴이란?
Modal, View, Controller의 약자입니다. 세가지 역할로 구분한 패턴입니다.
User가 Controller를 조작하면 Controller는 Modal을 통해 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달합니다.
역할 설명
Modal: 정보, 데이터를 나타냅니다. 데이터베이스, 초기값, 변수등을 뜻합니다. 정보, 데이터들의 가공을 책임집니다.
View: Input Text, Checkbox 항목 등과 같은 사용자 인터페이스 요소를 나타냅니다. 데이터 및 객체의 입력, 보여주는 출력을 담당합니다. (Modal 변경이 일어났을 때 View에서는 사용자 화면 내용을 변경해 전달합니다.)
Controller: 데이터와 사용자 인터페이스 다리 역할을 합니다. 즉 사용자가 데이터를 클릭하고 수정하는 것에 대한 Event를 처리하는 부분을 뜻합니다.
MVC 패턴을 사용하는 이유는 서로 분리되어 각자 역할에 집중할 수 있게 개발할 수 있고, 유지보수, 확장성, 유연성이 증가합니다.
Next.js 장점과 단점에 대해서 설명해주세요.
장점: SEO(Search Engine Optimization)를 위한 SSR 가능하다. (React 프로젝트의 경우 SSR 위해서 React 리팩토링 등 다양한 방법이 있지만, 비용이 많이 들기 때문에, Next.js를 사용하는 것이 좋다.)
로딩 시간이 길수록 SEO에 취약하다. Next.js는 Link 태그를 통해 매끄러운 전환을 가능하게 한다. a 태그와 달리 페이지를 리로딩하지 않고 페이지간 이동이 가능하고, 사용자가 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동할 수 있다. (페이지가 3초 이상 시간이 소요된다면 Code Splitting이 필요하다.) 번들을 여러 조각으로 조각내어 가장 필요한 부분을 우선적으로 전송해 주는 방식을 통해 속도를 올릴 수 있다.
단점: SSR을 많이 사용하게 될 경우 서버 부하가 온다. (쉽게 얘기하면 터진다.)
서버 코드를 api 폴더에서 만들 수 있지만, Scale-up을 생각했을 때, 서버 폴더를 별도로 생성하는 것이 좋다.
Eventloop에 대해서 설명해주세요.
Callback event queue에서 하나씩 꺼내 동작시키는 Loop를 말합니다. Javascript는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행합니다. 하지만 많은 작업이 동시에 처리됩니다.
Javascript는 EventLoop를 통해 비동기 방식으로 동시성을 지원합니다. 이벤트 발생 시 호출되는 함수를 Task Queue에 전달하고 Queue에 담겨있는 콜백 함수를 Call Stack에 넘겨줍니다. Task Queue는 하나로 이뤄져 있고, 비동기 작업들이 실행된 후 대기하는 공간입니다. (이벤트 루프가 정해준 순서대로 줄 서 있으며, FIFO 방식을 따릅니다.)
