HTML

window 객체란 무엇입니까?

window 객체 : 실행 시 가장 상위에 존재하는 객체. 변수 또는 함수 선언 시 이 window 객체 안에 선언된다.

이 window 객체의 프로퍼티를 탐색하는 방법에는 여러가지가 있다.

window.location : 현재 브라우저의 주소
window.location.href : 창에 입력된 주소
window.navigator : 브라우저 자체에 대한 정보
window.document : 문서의 html/css등에 접근가능

자세한 설명

[프론트앤드 개발자 면접질문 모음] 01. window 객체란 무엇일까?

안녕하세요. 제가 블로그 포스팅을 하는 것 중에 프론트앤드 개발자 면접질문 모음이라는 포스팅이 언제나 가장 많은 조회수를 차지하고 있더라고요. 🤔그런데 그 포스팅이 진짜 면접 때 빠르�

mber.tistory.com

DOM

Document of Model의 약자.

javascript에서 doument로 접근 가능하다. 자식의 최상의 문서는 html

블록요소와 인라인요소

블록요소 : div, p, section, article, form
인라인 : span, img, a, i, strong

aside tag : 주요 컨텐츠에 별도로 이어진 콘텐크가 있는 block

input과 항상 같이 써야할 것들 : button, label

자세한 설명

[프론트엔드 개발자 면접 문제 02] 인라인 요소와 블록 요소

HTML의 태그에는 인라인 요소와 블록 요소로 이루어져 있습니다. 이것에 대해 제대로 숙지하지 않으면 CSS가 제대로 먹히지 않습니다. 하지만 이것보다 더 큰 문제는 각 요소를 제대로 파악하지 ��

mber.tistory.com

Doctype

문서 형식 선언으로, 문서 상단에 1회 선언돠며 브라우저 랜더링 또는 유효성 검사시 문서 형식을 확인하는데 쓰인다.

표준모드와 쿼크모드

쿼크모드 : 브라우저가 출력하고자 하는 문서가 최신이 아니라고 판단하면 쿼크모드로 랜더링한다. 쿼크모드에서는 이전세대 브라우저에 맞는 비표준적인 방법의 CSS를 적용한다.
표준모드 : 브라우저가 출력하고자 하는 문서가 최신이라고 판단하면 표준모드(standard mode)로 렌더링을 하는데 CSS2 스펙에 따라 CSS가 적용되었다는 것을 의미한다.

다국어 서비스 제공방법

서버 사이드 랜더링을 통해 http요청 시 클라이언트의 기본 언어 정보를 보내 서버가 이를 통해 lang 속성을 가진 문서를 반환하도록 한다.

Cookie

클라이언트에 대한 정보를 이용자의 하드에 저장하기 위해 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보
- 장점 : 모든 브라우저 지원
- 단점 : 서버 부하 상승, 쿠키 자체 용량이 작음

웹 스토리지

로컬 스토리지 : 클라이언트에 대한 정보를 영구저장
세션 스토리지 : 세션이 종료되면 삭제
- 장점 : 자체 용랑이 큼, 서버에 불필요한 데이터를 저장하지 않아도 됨
- 단점 : html5에서만 지원

HTML5의 구성요소

시멘틱 마크업, 미디어 헨들링을 위한 내장 플랫폼, 어플리케이션 API, 오프라인 핸들러

Script Async와 Defer

script async : 페이지 파싱과 동시에 비동기적으로 진행
script defer : html 구문 분석이 끝나면 스크립트 파일 실행
script : html 파싱 도중 정지하고 실행

FOUC

브라우저로 웹 문서에 접근할 때 CSS 스타일이 미적용된 모습이 화면에 노출되며 생기는 깜빡임

CSS를 <head>안에 import하고 @import사용 자제
FOUC를 보여주는 요소를 js를 통해 숨긴 후 script가 모두 적용된 후 보여줌

XML과 HTML

XML은 웹 브라우저 외에도 포괄적으로 사용되는 형식으로 데이터 교환에 특화되어 있으며 이것 만으론 데이터를 가지고 있을 뿐 화면에 표시되지 않는다. HTML은 웹 브라우저에서 사용하는 문서 형식이며 XHTML은 HTML규격이 가진 문제를 극복하고 확장기능을 제공한다.

CSS와 JS 문서의 위치

CSS를 <head>안에 넣으면 페이지 로딩 중 스타일 적용이 안 된 DOM의 모습을 안보이게 하고 js를 <body> 앞에 놓으면 CSS로딩 직후 로딩 되어 사용자가 조금 빠르다고 느낄 수 있다.

기능이 제한된 브라우저 페이지 만들기

우아한 퇴보, 점진적 향상

Single Page Application

최초 한 번 페이지를 전체 로드한 후 데이터만 변경하여 사용 가능한 어플리케이션

클라이언트 사이드 랜더링 : 서버는 JSON 파일만 보내주고 html을 그리는 건 자바스크립트가 담당
html 다운로드 ⇒ js 다운로드 및 해석 ⇒ Fetch Data
서버 사이드 랜더링 : html 다운로드 ⇒ 사용자가 봄

RESTful

/를 통한 명확한 계층 관계 표현
가독성
파일 확장자 url에 미포함
명사 위주의 url 이름
- 장점 : 상태 정보를 따로 관리하지 않아도 됨
- 클라이언트 - 서버 구조가 확실해짐
- 들어오는 요청만 처리하면 되어 편리

CSS

float

요소를 한 쪽으로 밀어주고 바깥에 글자가 있으면 감싸준다. 만약 float : left를 해주면 다른 블록 레벨 요소의 margin, padding요소에 닿을 때까지 이동한다. 앨리먼트의 높이등은 무시된다.

속성에는 left right none 등이 있다.

float 속성 해제 방법

clear : both
overflow : hidden
부모 요소에 display : inline-box

이미지 대체

대체 text 속성 alt 사용
background img 의 경우 <span></span>안에 대체 텍스트를 넣은 후 display:none

컨텐츠 이미지 숨기기

display : none
visibility : hidden ⇒ 영역은 존재하나 컨텐츠만 안보임
position : absolute overflow : hidden => 스크린 리더로 보임
text-indent, z-index : 음수 => 스크린 리더로 보임

inline vs inline-box

inline : width, height, padding 등에 영향 안받음. 컨텐츠 만큼의 크기를 적용
inline-box : 일렬 배치, width, height등의 속성 적용 가능
display 속성 : box, inline, inline-box, none

Progressive Rendering

모든 이미지를 로드하는 대신 js로 일부를 로드시킴

개발사 접두어

CSS3의 웹표준이 아직 정해지지 않았기 때문에 개발자들은 크로스 브라우징을 구현 해야한다. 개발사 접두어를 통해 다양한 브라우저에서 같은 결과를 내도록 한다

반응형 웹의 3요소

미디어 쿼리, 플루이드 그리드, flexible img

선택자

하위 선택자 : 부모요소에 포함딘 모든 하위 요소에 스타일 적용
자식 선택자 : 부모 바로 아래 자식 요소에만 적용

CSS selector 동작원리

브라우저가 html/css를 DOM 형식으로 변한시킴
DOM에서 document 내용과 style 결합
브라우저가 DOM 의 내용을 보여줌

CSS cascading system

CSS가 우선순위를 가지고 있음에서 유래
선택자 우선순위 : !important > inline style > id > class > tag name
마지막에 지정된 스타일이 우선 적용

반응형과 적응형 웹

반응형 웹 : 전적으로 클라이언트에서 변화를 처리함
적응형 웹 : 서버에서 웹에 접근하는 디바이스를 체크하여 디바이스에 최적화 된 마크업을 호출

px em

px : 세밀한 제어, 정렬 유지에 좋다
em : 상대적인 크기로 1em = 현재 글꼴 크기

@media속성

all print speech screen

모바일 우선 전략

모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대한 유효성 검사를 받을 필요가 없고 모바일 환경에서 더 뛰어난 성능을 발휘함

CSS 적용 우선순위

html element 내
style tag 내
link를 통한 외부 파일

w3c box iebox

content box 기준, borderbox기준

위치요소

static : 기본위치
absolute : static을 제외한 부모 속성을 기준으로 움직임
relative : 자신의 원래 위치에서 지정한 위치만큼 떨어짐
fixed : 특정 위치 고정 스크롤 해도 안사라짐

자식 중앙 정렬

부모 : position : absolute
자식 : position : relative top : 50% left : 50%
Flex box and Grid system

자바스크립트

AJAX

브라우저에서 페이지 이동 없이 자바스크립트를 통해 HTTP REQUEST를 보내고 그 응답을 받아 처리할 수 있는 기능

상호 작용성이 좋아짐
서버에 대한 요청이 줄어듦
동적 페이지 북마크가 어려워짐
JAVASCRIPT 비활성화시 작동하지 않음

JSON

자바스크립트 객체를 문자열로 표현.

서버 ⇒ 브라우저로 정보를 보낼 때 JSON 파일(stringify)로 보내고 브라우저는 이를 자바스크립트로(parse) 파싱함

익명함수와 함수 즉시 호출

함수가 인자로 활용되거나 콜백함수로 사용될 때 일회성인 경우 익명함수가 사용된다.

(function(){ //익명함수 };)(); //즉시호출

SCOPE

var : function 단위 스코프를 가짐 재선언 가능
const : 블록 단위 스코프를 가짐 재선언 및 재할당 불가능
let : 블록 단위 스코프 변수 재선언만 가능

객체 지향 프로그래밍

데이터 처리 과정 루틴을 하나의 독립된 루틴으로 바라봄으로서 재사용성을 증가시킨다.

참조투명성 x, 상태 변경 가능

추상화
- 다형성 :
  - overloading : 같은 기능의 함수에 같은 이름을 부여
  - overriding : 상속으로 받은 함수를 그대로 사용하지 않고 새로 만들어 사용
캡슐화 : 보호가 필요한 객체 내용을 해당 객체 내용의 함수로만 접근 가능하게 함
상속가능

함수형 프로그래밍

함수의 응용을 강조, 데이터 처리를 함수의 계산으로 취급하여 동시성 작업을 안정적으로 한다

동기 함수와 비동기 함수

동기함수 : 블로킹, 명령문이 순서대로 진행된다.
비동기함수 : 요청과 응답의 결합이 비동기적이라 나중에 응답해도 됨

콜백함수

요청한 작업이 끝나면 실행되어 결과를 활용가능

callback 함수가 중첩되면 callback hell이 발생되기도 함

Promise 함수

순차적이지 않은 비동기 함수의 실행 순서를 제어

callback 대신 Promise 함수를 사용했을 때의 장점
- callback hell에서 벗어날 수 있음
- .then() 을 이용하여 가독성 좋은 연속적인 비동기 코드를 작성가능
- Promise.all()을 통해 병렬 비동기 코드를 작성 가능
- callback 함수를 제 때 실행하지 못하거나 변수 전달 실패 등이 없음
단점
- ES2015 이전 브라우저에서는 polyfill을 통해 로드해야 함

호스트 객체와 네이티브 객체

호스트 객체 : 빌트인 또는 네이티브 객체에 포함되지 않은 사용자에 의해 생성된 객체 ⇒ js는 빌트인 및 네이티브 객체 구성 후 호스트 객체를 해석
네이티브 객체 : 브라우저 혹은 구동 엔진에 내장되어 있는 객체 DOM이 이에 해당 ⇒ 구동앤잔 별 사용성이 달라서 크로스 브라우징 문제를 바랭시키기도 함

undeclared vs...

undeclared : 이전에 var, const등을 사용하여 생성되지 않은 식별자에 값을 할당할 때 생성
undefined : 변수는 생성되었으나 값이 할당되지 않은 것
- 검사 : type of foo === 'undefined' foo === undefined
null : null 값이 명시적으로 할당

.this 객체

함수 스코프 내에서 자동으로 설정되는 특별한 식별자.

함수를 호출하는 방법에 의해 결정된다.

함수 호출 시 new ⇒ 완전히 새로운 객체
apply(동적호출) 또는 call(정적호출)을 통해 호출 ⇒ 인수로 전달된 객체
함수를 메서드로 호출 ⇒ 함수가 프로퍼티인 객체
자유함수 ⇒ 전역객체
화살표 함수 ⇒ 주변 scope로 this를 받는다.

프로토타입 상속이 이루어지는 법

객체의 프로퍼티에 접근할 때 해당 객체의 프로퍼티가 없으면 js는 그 프로퍼티의 참조에 해당하는 prototype 또는 prototype의 prototype을 보고 프로퍼티 정의를 찾을 때까지 이를 반복한다. 이는 고전적인 상속과 닮아 있으나 실제론 상속보다 위임에 가깝다

forEach와 Map

둘 다 배열의 요소를 반복하지만 forEach는 값을 반환하지 않고 map은 새로운 배열을 반환하며 원본 배열을 변경하지 않는다.

호이스팅

스코프를 정의할 때 순서와 상관 없이 선언부에 대한 해석 처리를 최우선시 하는 것

document load와 DOM Content Loaded의 차이

document load : DOM을 비롯한 모든 asset이 로드된 후 발생
DOM Content Loaded : 초기 html 문서가 완전히 로드되고 나면 파싱 후 발생

attribute와 property

attribute : HTML 마크업에서 정의
property : DOM에서 정의

클로저 함수

다른 함수의 스코프에 있는 변수에 접근 가능한 함수

장점
- 원하는 시점에 내부 클로저 실행 가능
- private변수를 가질 수 있음

JSONP의 동작

크로스 도메인 이슈에 의해 ajax 요청이 허용 되지 않아 우회용으로 많이 쓰임 ⇒ script 태그를 통해 callback 쿼리 매게 변수를 요청함

고차함수

다른 함수를 매게 변수로 사용ㅎ여 대이터를 처리하거나 함수를 반환하는 함수 (ex : forEach, filter)

이벤트 루프

callback stack을 모니터하고 stack queue에서 수행할 작업이 있는 작업이 있는지 확인하는 단일 스코프 루프

'front-end > html&css' 카테고리의 다른 글

[css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element) (0)	2020.01.31
[css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기 (0)	2020.01.30
[html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 (2)	2020.01.23
[CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 (0)	2020.01.22
[html] form 태그 공부 (0)	2019.08.18

프론트엔드 개발자 면접 질문 모음