기술스택
AngularJS (앵귤러JS)
jQuery
React (자바스크립트 라이브러리)
테크인터뷰
Q1. 크로스 브라우징
웹 페이지의 상호 호환성!
서로 다른 브라우저들끼 서로 호환이 가능하도록 하는 것을 의미.
공통요소를 사용하여 웹페이지를 제작하는 기법으로 동등한 수준의 정보, 기능 접근에 초점을 맞춘다.
OS가 다르고, 브라우저마다 '렌더링 엔진'이 다르기 때문에
동일하게 만드는 것이 애초에 불가능한 일
*렌더링 엔진 : 요청한 콘텐츠를 표시. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
《호환성 테스트 기능 분류》
1. 기본 기능 : 링크, 대화상자, 메뉴 등
- 모든 대화 상자, 메뉴가 잘 작동하는가?
- 양식 필드의 유효성 검사가 올바르게 작동하는가?
2. 그래픽 사용자 인터페이스 : 응용 프로그램의 모양과 느낌
- 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가?
3. 응답 : 애플리케이션이 사용자 작업에 얼마나 잘 반응하는가
4. 반응형 : 다양한 화면 크기와 방향에 맞는지 확인
Q2. html5 웹소켓
기존 웹페이지의 전형적인 브라우저 통신 및 렌더링 방식은 HTTP요청(Request) 및 HTTP응답(Response)을 사용한 방식입니다. 이 방식은 새로운 데이터를 받아서 DOM을 다시 렌더링 하거나, 또는 브라우저를 새로고침하여 전체를 렌더링 해서 클라이언트 브라우저에 표현하는 방식입니다.
원하는 부분만 실시간으로 상호 데이터를 교환하여 새로고침 없이 렌더링하는 기술로 발전하면서 비동기 통신이라는 기술을 많이 사용하고 있으며, 그 보다 더욱 효과적인 실시간 데이터 처리 및 렌더링을 위해서 RIA(Rich Internet Application) 기술이 발달되고 있습니다.
위와 같은 맥락에서 클라이언트 브라우저와 웹 서버 사이에서 양방향 메시지 송수신 기술인 HTML5 WebSocket 기술이 등장하게 되었다고 볼 수 있습니다.
Ajax Polling과 WebSocket 비교(참고)
위 그림에서 핵심적으로 이해하실 수 있는 사실은 기존 요청-응답 관계에서 벗어난 양방향 자유로운 송수신을 지원한다는 점이 가장 큰 매리트라고 볼 수 있습니다.
아울러, 요즘 화두가 되고 있는 가상화폐 거래소 등을 방문해 보시면 실시간으로 수 많은 데이터 양방향 처리를 위해 대부분 WebSocket 프로토콜을 사용해서 구현해놓은 것을 확인하실 수 있습니다.
WebSocket 기본 예제 코드 작성
간단하게 HTML 파일을 생성해서 아래와 같이 작성하면 테스트를 진행하실 수 있습니다. 부가적으로 사용자의 요구에 맞게 연결(connect),종료(close),발신(Send),수신(Receive),로그(Log) 등 세부 기능을 추가하시면 더욱 이해가 잘 되실 거라 생각됩니다.
몇 줄 안되는 소스 코드이지만, WebSocket API의 기본적인 골격은 완성되어 있다고 볼 수 있습니다.
본 WebSocket 예제는 윈도우10(windows10 x64) 및 MacOS(Sierra) 에서 테스트를 진행했습니다.
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket 테스트</title>
<script language="javascript" type="text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init()
{
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket()
{
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) ;};
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt)
{
writeToScreen("연결완료");
doSend("테스트 메세지");
}
function onClose(evt)
{
writeToScreen("연결해제");
}
function onMessage(evt)
{
writeToScreen('<span style="color: blue;">수신: ' + evt.data+'</span>');
websocket.close();
}
function onError(evt)
{
writeToScreen('<span style="color: red;">에러:</span> ' + evt.data);
}
function doSend(message)
{
writeToScreen("발신: " + message);
websocket.send(message);
}
function writeToScreen(message)
{
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<body>
<h2>WebSocket Test</h2>
<div id="output"></div>
</body>
</html>WebSocket 기본 예제 실행
실제로 크롬(Chrome) 브라우저에서 테스트한 화면이며, 문제없이 잘 동작하고 있습니다.
또한, 개발자 도구를 살펴보시면 Frame을 사용해서 데이터를 송수신 하는 것을 확인하실 수 있습니다.
브라우저별 WebSocket 지원 여부는 이 곳을 방문하시면 확인하실 수 있습니다.
마무리
추가적으로 Socket.io 를 꼭 학습 하시길 권해 드립니다. Node.js 모듈로 제공하고 있으며, 여러 웹 소켓 기술을 하나의 API로 일관성있게 추상화한 기술이라고 볼 수 있습니다. 핵심적인 내용은 각 사용자의 웹 브라우저의 종류 및 버전에 따른 가장 적합한 기술을 자동으로 선택해서 서비스 되는 모듈이라고 볼 수 있습니다.
실시간으로 사용자와 상호작용 하는 기술은 정말 빠르게 발전해 왔습니다. 앞으로도 압도적인 성능을 자랑하는 기술이 발표 될 것으로 생각됩니다. 개발자로서 다양한 기술 사용을 통해 보다 사용자에게 좋은 서비스를 제공하고 싶습니다.
Socket.io 에 관한 쉬운 학습은 이 곳을 방문하시면 확인하실 수 있습니다.
참고 ㅣ https://niceman.tistory.com/109
Q3. 리엑트 pwa
리액트 PWA는 React와 PWA 기술을 함께 사용하여 웹 앱을 개발하는 방식입니다.
PWA는 Progressive Web App의 약자로,
모바일 앱과 같은 기능과 사용자 경험을 제공하지만, 설치할 필요 없이 웹 브라우저에서 바로 사용할 수 있는 웹 앱입니다.
리액트 PWA를 개발하면 모바일 앱과 웹 앱의 장점을 결합하여, 사용자 경험을 개선할 수 있습니다. 또한, 설치 과정 없이 웹 브라우저에서 바로 사용할 수 있으므로, 사용자들이 앱을 다운로드하고 설치하는 불편함을 없앨 수 있습니다.
구글이 밀고 있는 PWA(Progressive Web App)라는게 있습니다.
웹 사이트를 안드로이드/ios 모바일 앱처럼 사용할 수 있게 만드는
일종의 웹개발 기술입니다!!
즉 ios. Android 앱으로 발행하는게 아니라 웹사이트
자체를 스마트폰 홈화면에 설치하는 것이 바로
"PWA"입니다.
Q4. 에이전트 / 프로그램 차이
"프로그램" 은 일련의 명령어로 구성된 소프트웨어 코드를 실행하는 것을 의미합니다.
"에이전트" 는 일반적으로 인공지능 기술을 사용하여, 환경과 상호작용하며 특정 작업을 수행하는 소프트웨어 개체를 말합니다.
에이전트는 목적을 가지고, 일정한 기능을 수행하며, 상호작용을 통해 환경에 대한 정보를 수집하고 적응합니다.
예를 들어, 검색 엔진에서 사용되는 크롤러 에이전트는 인터넷을 탐색하여 정보를 수집하고, 이를 데이터베이스에 저장합니다. 또 다른 예로, 음성 비서 에이전트는 사용자의 음성을 이해하고, 의도를 파악하여 적절한 답변을 제공합니다.
프로그램은 에이전트와 비슷한 역할을 수행할 수 있지만, 보통 정해진 작업을 수행하기 위해 설계되며, 환경과 상호작용하지 않습니다. 예를 들어, 계산기 프로그램은 사용자의 입력을 받아 계산을 수행하고 결과를 출력하는 역할을 합니다.
'👩💻 Tech Interview > └ 기술질문' 카테고리의 다른 글
| [광고솔루션] 기술면접 질문 정리 (0) | 2023.03.30 |
|---|---|
| [CRM솔루션] 기술면접 질문 정리 (0) | 2023.03.28 |
| [금융솔루션] 기술면접 질문 정리 (0) | 2023.03.23 |
