1. SSR과 SSG의 차이에 대해서 말씀해주세요.
둘 다 서버에서 HTML을 생성하여 클라이언트에게 보내준다는 점에서는 같습니다. 하지만 SSG는 정적으로 빌드시에 한 번 렌더링되어 생성된 HTML 파일을 사용하고, SSR은 동적으로 클라이언트에서 요청이 들어올 때마다 서버에서 HTML을 재생성합니다.
2. 고객에게 알림을 제공하는 방식을 설명해주세요. 특히, 실시간 알림이 필요한 키오스크 및 포스기 시스템에서 이를 어떻게 구현하셨나요? 사용한 기술과 접근 방식이 궁금합니다.
포스기에는 주문이 들어올시 TTS를 통한 소리 알림, 브라우저의 Notification API와 토스트 UI를 통한 시각적 알림을 통해 주문이 들어왔다는 것을 알리고 있습니다.
고객에게 가는 알림의 경우 처음에는 카카오 알림톡을 생각했지만 제약사항이 많아 다른 방법을 모색 하던 중 PWA 와 React Native가 나왔는데 PWA로 발전 시키는 방향으로 고민 중 입니다.
3. 일반 고객과 사장 고객을 구분하는 기준과 방법에 대해 설명해주세요.
일반 고객은 주문 페이지로 들어올 수 있는 모든 사람에게 해당되고, 사장 고객은 사업자 인증을 통해 가입한 회원을 말합니다.
4. Next.js를 선택한 특별한 이유가 무엇인지, 그리고 이 기술이 키오스크 및 포스기 웹 서비스 개발에 어떤 이점을 제공하는지 설명해주세요.
- 결제 모듈과 관련하여 서버에서 처리가 필요한데, 굳이 서버를 따로 둬야할만큼의 프로세스가 아니었고, NextJS를 통해 서버사이드에서도 코드를 실행할 수 있어 필요했습니다.
- 번들링과 코드 분할등 여러 최적화 면에서 신경써야 할 필요가 많이 없어지기 때문에 NextJS를 선택했습니다.
5. 서버 상태와 클라이언트 상태 관리의 차이점에 대해서 설명해주세요.
서버 상태 관리는 말 그대로 서버가 가지는 상태, 비동기로 가져오는 데이터의 상태를 관리하는 것이고. 클라이언트 상태 관리는 로컬에서 관리되는, 주로 컴포넌트나 유저와의 인터랙션을 위한 상태등을 관리하는 것을 말합니다.
1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?
가상돔은 실제 DOM에 그려지기 전 메모리에서만 존재합니다. 실제 DOM을 조작, 비교하는 것보다 가상 DOM을 조작, 비교하는 것이 더 빠르고, 그렇기 때문에 변경된 부분만을 탐지하여 실제 DOM에 그릴 수 있게 해줍니다.
2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?
리액트는 컴포넌트 단위로 파일을 구분하며, 그에 따라서 파일별로 작업이 가능하고, 가독성이 증가하며 다른 사람과 협업시 더 유연해집니다. 또한 가상돔 방식을 채택하여 렌더링 성능이 더 향상되고, SPA제작을 더 쉽게 도와주어 더 나은 사용자 경험을 제공할 수 있습니다.
3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?
상태 관리 라이브러리를 쓰지 않고도 리액트앱을 제작할 수 있지만, 리액트는 부모에서 자식으로 단방향으로만 데이터 바인딩이 되기 때문에 앱이 커질 경우 많은 Props Drilling으로 인해 코드가 복잡해지고, Context API를 사용한다 하더라도 리렌더링 이슈가 있어 근본적인 문제를 해결하진 못했습니다.
따라서 이러한 문제들을 해결한 상태관리 라이브러리를 사용하게 되었습니다.
4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?
동기식 프로그래밍은 문의 실행이 순차적으로 일어나며 이전 실행이 끝나기 전까지 다음 문은 실행되지 않습니다. 순서가 정해져 있기 때문에 직관적이지만, 오래 걸리는 작업이 있는 경우 병렬적으로 처리할 수 없기 때문에 비효율적입니다.
비동기식 프로그래밍은 이전 실행을 기다리지 않고 독립적으로 실행되는 것입니다. 주로 네트워크 요청이나 타이머 함수등을 말하며 Promise, async / await등을 사용하여 처리할 수 있습니다.
5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?
SPA는 하나의 페이지 즉, index.html만 존재하며 그 안에서 자바스크립트로 내용물을 바꿔서 보여주는 방식입니다.
MPA는 여러 개의 html 파일이 존재하며 그 html 파일을 경로 삼아 여러 개의 페이지를 보여주는 방식입니다.
6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?
웹사이트에 주소를 입력하면 그 주소의 서버에서 화면을 렌더링 하는데 필요한 파일들 (html, css, js, 이미지 파일 등..)을 응답해줍니다. 응답을 받으면 브라우저는 내부적으로 파일들을 파싱하고, 브라우저가 이해할 수 있는 구조인 DOM과 CSSOM을 생성하고, 그리고 렌더링을 위해 렌더 트리로 결합된다. 그리고 페인팅 과정을 거쳐 브라우저에 그려주게 된다.
자바스크립트는 브라우저가 아닌 브라우저 내에 들어있는 자바스크립트 엔진이 담당하여 파싱하게 된다.
유레카!