[기술면접질문] 웹 기초 지식

Contents

1. 웹 표준 및 HTML,CSS,Script
2. 웹 접근성
3. 웹 vs. 앱
4. HTTP vs. HTTPS
5. GET vs. POST
6. Session과 Cookie

 

---

 

1. 웹 표준 및 HTML,CSS,Script

웹에서 표준적으로 사용되는 기술이나 규칙을 의미한다. W3C의 토론을 통해 도출된 권고안으로 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다. 과거에는 구분하지 않고 사용하다보니 오히려 웹 표준을 지원하는 기기나 웹 브라우저에서 제대로 보이지 않는 문제가 발생하기도 했습니다.

웹 접근성 수준을 보장하고 향상시키기 위해 웹 표준 권고안을 준수하여 웹 사이트를 구현할 수 있도록 노력해야합니다.

웹표준 관련 기술 : 구조(HTML) - 표현(CSS) - 동작(Script)

• 구조언어

(X)HTML - 하이퍼텍스트를 표현하기 위한 마크업언어이며 매우 느슨한 구조로 태그 운용법이나 오류 처리방법등이 매우 관대합니다.

XML - 웹에서 구조화된 문서를 전송할 수 있도록 표준화된 텍스트 형식이며 HTML에 담겨져 있는 형식적인 요소를 완전히 배제한 순수한 데이터 포맷입니다. HTML과는 달리 태그운용 방법이나 오류에 매우 엄격합니다.

(XHTML은 XML1.0응용으로서 HTML4를 다시 공식화한것이라고 정의합니다. 이후 더욱 친화적인 XHTML2.0을 정의했지만 중단되고 HTML5로 전환되어 진행되었습니다. XHTML은 HTML과 같은 요소로 구성되었지만, 엄밀하게 말하면 XML이므로 XML과 같이 엄격하게 태그를 운용해야 합니다.)

HTML5은 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표입니다. 최신 웹프라우저는 기본적으로 HTML5를 지원하며 HTML5표준화에 힘을 보태고 있습니다. header, footer, aside, figure, article 등 새로운 구조 요소를 지원합니다.

• 표현언어

문서표현을 자유롭게 지정할 수 있는 기능을 제공합니다. 웹 표준인 css를 이용해 만든 문서는 사용자 웹브라우저나 환경에 따라 홈페이지가 다르게 나타나지 않고 어느 환경에서나 제작자가 의도한 대로 표현할 수 있습니다.

• 동작언어

웹 페이지의 요소를 객체화해서 동작을 제어하는데 사용되는 기술에는 DOM & ECMA Script가 있습니다. 

DOM(Document Object Model)은 웹 페이지의 구성 체계를 말하는데 HTML를 작성하면서 생성되는 논리적인 규칙이라 별도로 제작자가 구성하는 것이 아닙니다. 웹 브라우저는 이 DOM을 해석해 페이지를 표시하거나 ECMA Script등의 기술을 통해 DOM의 구조를 변경할 수 있습니다.

즉, 사용자 측에서 작동하는 많은 동적 요소들이 DOM을 이용해 객체모델에 접근한 후 스크립트 언어인 ECMA Script를 이용해 웹 페이지의 요소의 동작을 제어하는 방법으로 작성한 것 입니다.

 

• 웹 표준의 장점

웹 접근성 수준의 향상 - 웹 표준을 준수하는 것만으로도 자연스럽게 웹 접근성이 향상됩니다. 웹 표준을 준수한 웹 사이트는 다양한 웹 브라우저나 새로운 기기에서도 올바르게 표시되기 때문입니다.

검색 친화적인 웹 사이트 구현, 구조와 표현의 분리, 손쉬운 유지보수 및 절감 효과, 호환성 확보 등과 같은 장점이 있다.

 

2. 웹접근성

정보의 격차를 줄이고 모두 함께 공유할 수 있는 웹 세상을 만드는 것이 웹 접근성의 궁극적인 목표입니다.

소리가 들리지 않으면 자막을 지원하거나 이미지가 보이지 않으면 대체언어를 표시한다던가 키보드가 작동되지 않으면 마우스로 입력을 한다던가 이런 사례들은 웹 접근성의 중요성을 보여줍니다.

즉, 모든 사용자가 신체적 환경적 조건에 관계없이 웹에 접근해 이용할 수 있도록 보장하는 것을 말합니다.

기대효과는 사용자층 확대, 규정과 법적 요구사항(장애인 차별금지와 같은)준수, 다양한 환경 및 새로운 기기에서의 이용, 개발 및 운용 효율성 제고, 사회 공헌 및 복지 기업으로서의 기업 이미지 향상등이 있습니다.

 

3. 웹 vs. 앱

브라우저 자체는 앱이다. 모바일 앱뿐만 아니라 윈도우, 맥, 리눅스의 각종 프로그램도 앱으로 분류한다.  브라우저에서 접속하는 네이버나 블로그 같은 것이 웹이다. 

웹은 모든 사용자가 즉각 업데이트된 내용을 이용할 수 있고 플랫폼의 제약이 별로 없다는 장점이 있다. 다만 단말의 정보나 기능을 이용하기에는 제한적이다.

앱은 사용자가 업데이트된 내용을 이용하려면 해당 디바이스에 다운로드 받고 설치를 완료해야 하며 플랫폼의 제약이 크다.

3-1. 웹

(1) 웹 프로그래밍 언어 : JSP(Java Server Pages) 외 ASP, PHP

JSP는 동적 컨텐츠를 생성하기 위해 java언어 기반으로 만들어 졌고 스크립트 언어 형식으로 프로그램을 작성할 수 있게 한다.
사용자 정의 태그를 지정할 수 있는 기능도 갖고 있어 보다 효율적인 웹 사이트를 구성할 수 있다.

(2) CGI vs. WAS

CGI(Common Gateway Interface)방식은 웹 사이트에 요청되는 수 많은 요청에 대해 하나의 요청마다 새로운 프로세세를 생성 및 처리, 종료하는 방식으로 운영되는데 이는 시스템에 많은 부하를 가져온다.

WAS방식은 웹 서버가 WAS에 처리를 넘겨주고 WAS는 여러 명의 사용자가 동일한 페이지를 요청하면 오직 한 개의 프로세스만을 할당하고 사용자의 요청을 Thread방식으로 처리합니다.

 

4. HTTP vs. HTTPS

일반 HTTP의 문제점은 서버에서 브라우저로 전송되는 정보가 암호화되지 않는다는 것입니다. HTTPS는 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했습니다. SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와줍니다.

HTTP와 HTTPS 차이의 첫번째는 보안성 즉, *SSL인증서에 있다는 것 입니다. 또한, 검색엔진 최적화(SEO)에 있어서도 HTTPS는 큰 혜택을 볼 수 있고 *가속화된 모바일 페이지(AMP;Accelerated Mobile Pages)를 만들고 싶을 때도 HTTPS를 사용해야 합니다.

*SSL인증서는 클라이언트와 서버간의 통신을 제 3자가 보증해주는 전자화된 문서입니다.

*AMP는 HTML에서 불필요한 부분을 없애 모바일 기기에서 훨씬 빠르게 콘텐츠를 로딩하기 위해 구글이 만든 것 입니다. 

(웹이 인터넷에서 돌아가는 서비스 중의 하나인 것처럼 HTTPS도 SSL프로토콜 위에 돌아가는 프로토콜입니다.)

 

(1) HTTP Error

- HTTP 400 에러 : 서버가 요청의 구문을 인식하지 못했다는 뜻으로 문법상 오류가 있다는 것입니다.
- HTTP 403 에러 : 서버가 요청을 거부하고 있다는 뜻으로 접근이 금지되었다는 것입니다.
- HTTP 404 에러 : 서버가 요청한 페이지를 찾을 수 없다는 뜻입니다.
- HTTP 500 에러 : 서버에 오류가 발생하여 요청을 수행할 수 없다는 것입니다.

 

 

5. GET vs. POST

■ GET은 클라이언트에서 서버로 리소스를 요청하기 위해 사용되는 메소드로 URL주소 끝에 파라미터로 포함되어 전송된다.

■ POST는 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 사용되는 메소드로 HTTP메시지 body부분에 담아서 보내기때문에 GET과 달리 길이제한이 없고 외부에 드러나지 않아 보안이 필요한 부분에 사용된다.

 

6. Session과 Cookie

HTTP 프로토콜 환경은 "Connectionless, statelss"특성을 가지기 때문에 서버는 클라이언트가 누군지 매번 확인해야 합니다. 이 특성을 보완하기 위해 쿠키와 세션을 사용하게 됩니다.

■ Seesion은 쿠키를 기반으로 하지만 브라우저에 저장하는 쿠키와 달리 세션을 서버에 저장합니다.
 서버에서 클라이언트를 구분하기 위해 세션ID를 부여하며 브라우저를 종료할때까지 인증상태를 유지합니다.
사용자정보를 서버에 저장하기 때문에 쿠키보다 보안은 좋지만, 동접자수가 많아지면 서버에 과부하를 주기 때문에 성능 저하의 요인이 될 수 있습니다.

세션의 동작방식 : 클라이언트가 서버에 접속시 세션ID를 발급받음 -> 클라리언트는 세션ID에 대해 쿠키를 사용해 저장하고 가지고 있음 -> 클라이언트는 이 쿠키의 세션ID를 같이 서버에 전달해서 요청 -> 서버는 세션ID로 세션에 있는 클라이언트 정보를 가지고 요청을 처리하여 응답

세션의 사용예 : 로그인

■ Cookie는클라이언트의 상태정보를 로컬에 저장했다가 참조하는 것이며 쿠키만료시간까지 클라이언트에 보관합니다.

쿠키의 동작방식 : 클라이언트 페이지 요청 -> 서버 set-cookie속성을 사용해 쿠키를 생성하고 response header에 포함시켜 응답 -> 같은 요청을 할 경우 HTTP헤더에 쿠키를 함게 보냄 -> 서버는 필요시 쿠키를 업데이트해 HTTP헤더에 포함시켜 응답
쿠키의 사용 예 : 로그인시 "아이디와 비밀번호 저장하시겠습니까", 쇼핑몰 장바구니 기능, 팝업에서 "오늘 더이상 이 창을 보지 않음"체크

 

최근에는 세션의 취약점들을 보완하기 위해 토큰 기반의 인증방식을 사용하는 추세입니다. 그중 JWT(JSON WEB TOKEN)라는 것이 있습니다.