Web 구성 및 흐름 (2)

마크업 언어와 마크다운 언어는 무엇인가?

문서를 구성하는 구조적 의미를 가진 언어이다.

마크다운 언어는 쉽게 쓰는 마크업의 파생 언어이자 공통 문법이다.

Notion이나 discord 등 다양한 문서 편집기 혹은 커뮤니티에서 공통된 문법으로 사용할 수 있다.

 

CSS 의 Cascading 의 의미 혹은 Selector 와 Specificity 에 대해 설명하라

Cascading의 의미는 style은 1. 자식은 부모의 style을 상속받는다는 것

2. 같은 것을 가리키는 경우 가장 마지막에 명시된 CSS를 적용한다는 것입니다.

가령 한 element에 명시된 style과 그 자식 element node에 명시된 style이 있을 경우

전자와 후자의 중복된 CSS style이 있다면 후자의 것을 사용합니다.

 

여기서 특정 요소를 선택하여 스타일을 적용할 때 CSS 를 명시하는 방식이 Selector입니다.

Specificity는 여러 스타일 규칙이 동일한 element에 적용 될 때, 어떤 스타일이 우선될지를 결정하는 기준입니다.

같은 specificity일 경우, 나중에 적용된 것을 적용한다.

 

웹 브라우저에서의 Render 절차를 짧게 한번 설명해보시오

HTML 을 파싱하여 DOM Tree를 구성하고, 

CSS를 파싱하여 CSSOM Tree를 구성해 이를 합쳐 Render Tree를 구성한다.

Render Tree 를 기준으로 viewport에 표시될 위치와 대략적인 뼈대를 잡는 Layout을 구성하고,

이후 컨텐츠를 집어넣는 paint 작업을 진행한다.

 

TTI 란 어떤 것을 의미하는가?

Time to interactive 의 줄임말으로, HTML, CSS가 로드 된 뒤 JS를 통해 이벤트가 적용될 때 까지 걸리는 시간

Lighthouse 를 통해서 FE 의 웹 성능을 측정할 때 사용되는 성능 지표 중 하나입니다.

 

인트라넷을 설명하시오, 어떻게 동작되는가?

인트라넷이란, ISP나 무선 회선등이 연결되지 않아 외부의 public ip와 단절된

내부 private 인스턴스끼리의 통신만이 가능한 private 네트워크입니다.

외부로 트래픽이 나가지 않아 보안을 위해 개인, 단체(ex. 군대)를 위해 활용합니다.

 

라우터등의 물리장치를 사용해 직접연결하거나,

혹은 VPN을 통해 가상의 사설망으로 위장해 사용하는 방식으로도 사용됩니다.

 

꼬리질문 : 라우터의 역할은 무엇인가?

 

인트라넷, private network에서 사용하는 L3 스위치로, IP를 기반으로 주어진 패킷을 내부로 라우팅하거나

외부로 라우팅하는 게이트웨이의 역할도 한다.

 

인터넷을 설명하시오, 어떻게 동작되는가?

private ip가 외부의 public 인스턴스와 연결한 네트워크가 인터넷입니다.

이때 내부 네트워크와 외부 네트워크를 연결 하기 위해 Gateway를 사용하고,

Gateway간의 연결은 ISP를 통해 형성됩니다.

 

꼬리 질문 :  VPN은 무엇이고 어떻게 동작하나? 어디에 활용되나?

 

VPN은 Router나 기타 장비를 통해 물리적으로 연결된 사설망이 아닌

가짜로 연결된 사설망으로 변조하는 기술입니다. 그래서 한국에서 미국에 있는 private 네트워크의 사설 ip와 같은 private network안에 있는 것처럼 위장할 수 있습니다.

이를 통해 특정 망에서 제한된 접속을 우회하거나 특정 망 내에서 추적을 막을 수 있습니다.

 

ISP 는 무엇인가?

인터넷에서 GW와 GW, 혹은 public 인스턴스 간의 물리적 연결을 지원해주는 서비스 제공자이다.

KT, SKT, LG와 같은 회사들이 제공하는 회선을 통해 인터넷을 사용할 수 있게 해준다.

ISP에서 DNS Resolver와 같은 서비스를 제공한다. 다만 Caching된 것이 있다면 Caching 된 것을 사용하기 때문에

Non Authoritative Server라고 불린다.

 

DNS 는 왜 필요한가? = DNS 란 무엇인가

인터넷은 IP를 기반으로 연결되는데, 이 IP는 Domain Name으로 mapping된다

그렇기 때문에 도메인 네임으로 사용할 경우 IP로 변환하는 과정이 필요하다.

어떤 Domain Name이 어떤 IP 주소인지 검색 및 변환하게 해주는 과정이 DNS이다.

 

웹 브라우저에서 naver.com을 입력했을 때 일어 나는 것을 최대한 설명해보시오.

• 입력된 도메인 네임에 대해 mapping 되는 IP주소를 찾는다. (먼저, Caching된 것을 찾음)
  • Browser DNS를 통해 조회
  • Local DNS를 통해 조회 (/etc/hosts)
  • ISP에 caching 되어 있으면 이를 사용하고
  • 없을 경우 DNS Resolver(DNS Recursor)가 Root -> TLD -> Name Server를 순회해 IP를 획득
• 실제 서버의 IP 주소를 통해 요청을 진행 후 웹 페이지를 반환

 

DNS (Domain Name Server) 에서 도메인 등록과 호스팅의 차이는 무엇인가?

도메인 등록이란 Registrar를 통해 Domain Name을 구입 후

Domain Name을 A record에 등록 후 IP와 매핑하는 것을 말한다.

 

호스팅은 사용자가 웹사이트, 서비스를 운영할 수 있도록 서버와 저장공간 까지 제공하는 것이다.

즉, 도메인 뿐만이 아니라 서버까지 제공하는 서비스이다.

 

도메인이란 다음 중 어느 부분을 뜻하는가? https://aaron.com:8080

aaron.com 을 말한다.

 

DNS Resolver 혹은 Recursor 는 무엇이며, 무슨 역할을 수행하는지 설명하시오

DNS Resolver(Recursor)는 Domain에 대응되는 IP가 없을 때, 이를 재귀적으로 찾기 위한 요청을 처리하는 서버이다. 캐시에 도메인 정보가 없을 경우 재귀적으로 다른 DNS 서버에 쿼리를 보내 IP를 찾는다.

 

Root Server, TLD Server, Name Server(NS) 각 역할을 상세 설명하시오

맨 처음은 Root 서버가 .com뒤에 생략된 (.)과 같은 부분을 관리하며 이에 대한 예시는 ICANN이 있다.

Root서버가 해당 도메인의 .의 앞부분인 .com과 같은 TLD 서버를 조회하게 한다.

TLD는 .com 과 같은 부분을 관리하며 이를 관리하는 것은 Domain Registry이다.

naver.com을 가지고 있는 Name Server 정보를 반환한다. 

NS(Name Server)라는 Domain Registrar에 쿼리를 보내

해당 도메인 naver.com 에 대한 최종 정보(IP)를 반환받아 이 값으로 IP를 통한 인터넷 통신을 하게 한다.

참고로 NS는 무조건 캐싱이 아닌 값을 가지고 있기에 Authoritative Name Server라고도 불린다.

 

Non-Authoritative 와 Authoritative 차이는 무엇인가

DNS Recursor가 캐싱을 사용해 IP가 이전의 값과 달라질 수 있는 경우에 Non-Authoritative 라고 부르고,

DNS Recursor가 캐싱을 사용하지 않고 재귀적 접근을 통해 NS를 통해서 IP를 얻을 때 Authoritative라 부른다.

 

Domain Registry 와 Domain Registar 의 차이는 무엇인가?

전자는 TLD 서버로 요청하고자 하는 도메인의 IP를 구하기 위해서 어떤 NS로 접근을 해야하는지를

반환하는 DNS 서버이며

후자는 NS 서버로 요청하고자 하는 도메인의 IP 정보를 직접적으로 반환하는 DNS 서버이다.

참고로 후자의 경우, 도메인을 소유하고 판매하는 역할 까지 하고 있다.

 

DNS 에 입력하는 몇 가지 Record Type 들에 대해 설명하시오 : A, CNAME, NS, MX

A record : IP와 직접적으로 mapping 되는 Domain Name을 말한다. (example.com)

CNAME record : A record의 alias를 입력하기 위해 사용한다. 가령 www.example.com,  CNAME.example.com 등

NS record : 도메인에 대한 권한 있는 네임서버를 지정한다.

MX record : 메일 서버를 연결한다.

꼬리 질문 : 사용처와 구매처가 다를 경우에 NS를 이용한 DNS관리를 어떻게 진행해야하는가?

 

기존의 사용처에서 사용하던 Domain에 대한 NS를 가져온다.

구매처의 Domain의 NS에 기존 사용처에 대한 NS를 등록한다(이미 NS가 있을 경우에는 덮어 씌운다.)

왜냐하면 그래야 네임서버에 있는 우리의 진짜 ip가 새로 덮어지는 ip에 씌워질 테니까.

 

 

구글과 같은 검색 엔진의 원리와 SEO 에 대해 설명하시오

구글과 같은 서비스가 모든 웹 서버의 웹 페이지들을 미리 찾은 후, 분류 및 정리한다.

다시말해, 구글, 네이버, 다음과 같은 검색엔진 서비스들은

웹 크롤링을 통해 웹 페이지의 정보를 수집하고 웹페이지들을 상관관계별로 분류, 정리하는 인덱싱을 한다.

그리고 검색엔진을 통해 검색 했을 경우 분류된 해당 검색 결과를 반환한다.

 

SEO는 검색 시 상위 노출을 하기 위한 최적화 전략이다.

최적화를 위해서는 좋은 컨텐츠, Semantic HTML, 키워드 및 메타 태그, 성능(Core web vital 과 같은 Performance metric)등이 있다.

 

 

SEO 를 위한 robots.txt 와 sitemap.xml 두 파일의 역할을 설명하시오

robots.txt는 크롤러가 수집하지 않도록 하는 제외 정책을 명시한 부분이고

sitemap.xml은 내부 웹 페이지의 모습을 명시한 홈페이지의 지도이다.

이를 통해서 웹 크롤링 하는 봇이 명시적으로 정확하게 홈페이지를 크롤링하도록 가이드해 SEO가 잘 될 수 있도록 한다.

 

SEO가 중요한 이유?

웹 사이트를 통한 홍보를 위해서는 검색엔진의 상위 노출이 중요하고,

많은 사용자를 끌어 모을 수 있다. 이를 위해서 SEO가 중요하다.

 

SEO 를 위해 개발자가 신경써야할 몇 가지 요소들을 설명하시오

1. Semantic HTML : div를 남발하지 않고, semantic에 맞게 적절한 HTML Element를 사용한 웹 페이지를 만들어야 한다.

2. 키워드 및 메타 태그를 잘 사용해야 한다.

3. Performance Metric, 즉 웹 페이지의 성능을 높여야 한다. 이를 위한 기준으로는 Google Chrome의 Core Web Vital이 있다.

 

구글의 웹 페이지 성능 매트릭(Performance Metrics)인 Core Web Vital 중 몇 개를 설명하라

LCP : 최대 콘텐츠 렌더링이 되기까지 걸리는 시간

FID : 처음 상호작용 한 시점(이벤트) 부터 이벤트 반응시점까지 걸리는 시간

CLS : 시각적 안정성을 평가하는 지표. 예상치 못한 레이아웃 변경이 발생하는 빈도를 체크한다.

 

웹 서버와 웹 어플리케이션 서버의 차이에 대해 말해보시오.

웹 서버는 정적인 웹 페이지나 파일 등 미리 만들어진 정보를 반환하는 서버입니다.

웹 어플리케이션 서버는 사용자가 요청한 정보가 반영된 동적 웹 페이지를 만들어서 반환하는 서버이다.

 

정적 웹 페이지와 동적 웹 페이지의 장단점에 말해보시오

정적 웹 페이지의 장점은 미리 만들어진 것을 반환하기 때문에 빠르고, 서버는 비즈니스 로직을 수행하지 않아

서버의 부하가 적습니다.

단점은 사용자가 원하는 모든 페이지를 만들어두어야 하기 때문에 많은 저장 공간을 필요로 할 수 있습니다.

 

동적 웹 페이지의 장점은 수 많은 페이지를 서버가 만들 필요 없이, 필요에 따라 만들면 되기에 

공간복잡도, 즉 공간적인 효율이 좋습니다.

실시간으로 데이터를 생산한 후 반환한다는 장점이 있습니다.

 

CGI는 어떤 것인가?

초기 WAS로, Common Gateway Interface의 약자

사용자로부터 요청을 받으면, 어플리케이션을 실행하고 페이지 생성을 요청하기 위한 연결고리의 역할을 함.

즉, 서버가 직접 처리하는 것이 아닌, 외부의 어플리케이션에게 반환값 생성을 위임한 형태.

 

프로그램과 프로세스, 그리고 스레드의 차이에 대해 설명하라

프로그램이란, 특정 목적을 위해서 작동하는 명령의 집합이다. 

흔히 말하는 소스코드를 실행할 수 있게 기계어로 컴파일 해놓은 코드의 집합이기도 하다.

프로세스는 OS로부터 물리적 자원을 할당 받아 프로그램을 실행하고 있는 형태, 상황을 말한다.

스레드는 프로세스 내에서 실행되는 흐름의 최소 단위를 말한다.

 

꼬리질문 : CGI, FCGI, WAS의 차이를 프로세스와 스레드를 사용해 설명해 보아라.

 

CGI 와 FCGI는 서버와 외부 어플리케이션 서버가 따로 존재했고,

WAS는 서버 안에 어플리케이션이 존재한다.

 

CGI, FCGI는 어플리케이션을 프로세스 단위로 구동한다.

CGI는 요청을 받을 때 프로세스가 생성되고 반환하면 종료되기에 Stateless하지만, 그만큼 느렸다.

 

FCGI는 미리 프로세스를 생성한다. 요청을 받고 프로세스가 종료되지는 않았기에 빨랐다.

 

WAS는 서버안의 어플리케이션을 스레드 단위로 구동한다.

빠르고 stateful한 형태로 작동한다. 요청이 들어오면 스레드풀로부터 스레드를 할당하고, 끝나면 반환하는 형태기에

 

유명한 WAS 중 하나인 Tomcat 에 대해 설명하라

Tomcat은 Spring MVC와 3-layered 아키텍쳐 기반으로 작동하는 Java 기반 WAS이다.

Servlet Container로, Spring MVC와 같은 프레임워크를 활용한 동적 웹 애플리케이션을 구동할 수 있다.

 

Servlet 은 무엇인가?

Servlet은 Java 기반 웹 애플리케이션에서 HTTP 요청을 처리하기 위해 사용하는 Java 클래스이다.

Tomcat의 Servlet Container가 요청을 받아 Servlet 인스턴스를 통해 요청을 처리, 응답을 생성한다.

Spring MVC에서는 DispatcherServlet이 FrontController 패턴을 사용해 컨트롤러 메서드로 라우팅, 처리를 위임.