꾸준히 하면 더 나아지겠지! 🤗
HTML
일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
사용자에게 보여지는 화면의 속도를 더 빠르게 하기 위해서입니다.
사용자가 홈페이지를 들어갈 경우 브라우저 렌더링 엔진이 HTML파일을 먼저 읽게 됩니다. 이 때 HTML파일이 파싱하여 DOM이 완성되게 됩니다. 하지만 화면이 만들어지기 위해선 HTML파일을 파싱한 DOM과 CSS파일을 파싱한 CSSOM이 합쳐지고 난 후에 만들어지게 됩니다. 이 때 CSS<link>태그를<head></head>에 위치시킨다면 HTML과 CSS가 병렬적으로 렌더링 되어 사용자에게 보여지는 화면의 속도가 빨라지게 됩니다. 또한, JS태그를<body>태그가 끝나기 직전에 위치시키는 이유는<script>태그를 만나면 HTML 파싱을 잠시 멈추고, JS에 대한 파일을 다 읽고 난 후에 다시 HTML 파일을 읽기 때문입니다. 이러한 이유로 화면에 그려지는 속도가 느려지기 때문에 맨 뒤에 두는 것이 바람직합니다.
<script> <script async> <script defer> 태그들의 차이점은 무엇인가요?
<script>가 HTML 파싱과 병렬적으로 실행되는지, 절차적으로 실행되는지에 대한 차이점이 있습니다.<script>는 HTML 파싱을 중단하고 해당 스크립트를 바로 실행합니다. 이 때 스크립트 실행이 다 끝난다면, 다시 HTML 파싱이 재개되어집니다.<script async>는 HTML 파싱과 병렬적으로 실행되어지며, HTML파싱이 완료되지 않았어도, 스크립트 실행할 수 있을 때 즉시, 실행되어집니다. 마지막으로<script defer>는<script async>와 유사하지만, HTML 파싱이 끝나야지만 스크립트가 실행되어집니다. 이 태그는 HTML이 파싱이 된 후 스크립트가 실행되어진다는 점에서,<script>태그를<body>태그가 끝나기 직전에 위치시키는 것과 거의 비슷한 효과를 가져옵니다.
<script>- HTML파싱을 중단하고 해당 스크립트를 바로 실행합니다. 이때 스크립트 실행이 다 끝난 후에 다시 HTML 파싱을 재개합니다.<script async>- HTML 파싱과 병렬적으로 실행되어집니다. 또한, HTML 파싱이 완료되지 않았어도 스크립트를 실행할 수 있을 때 즉시 실행되어집니다.<script defer>- TML을 파싱하는 동시에 해당 스크립트를 다운로드 받는다는 점에서<script async>와 동일하지만, HTML 파싱이 끝나야 스크립트를 실행합니다. 스크립트가 여러개인 경우, 스크립트는 페이지에 나타나는 순서대로 실행됩니다. 스크립트가 DOM에 의존적인 경우 유용하게 사용되어지고, HTML이 파싱된 후 스크립트가 실행된다는 점에서
시맨틱 태그(sementic tag) 에 대해 설명하세요.
시멘틱 태그는 브라우저와 개발자에게 명확하게 설명하는 태그를 의미합니다. 예를 들어
<div>와<span>은 무엇을 담고 있는 컨텐츠인지 그 자체로 설명을 하지 못합니다. 하지만<form>과<table>은 각각 제출할 form과 표를 의미하는 컨텐츠입니다. 이러한 시맨틱 태그는 검색 엔진에 유용하게 활용될 뿐만 아니라 시각장애인을 위해 화면 판독기로 페이지를 탐색할 때 중요한 지표로 활용되어집니다.
DOM
개발자도구를 많이 사용하셨다면 주로 어떤 용도로 사용했나요?
개발자 도구에는 주로 Performance, Elements, Styles, Console, application, Network 탭이 있습니다.
여기서 저는 총 4가지의 탭을 주로 사용했습니다. Elements탭과 Styles 탭은 현재 보고 있는 페이지의 HTML과 CSS를 빠르게 변경할 수 있어서 테스트를 자주 이용했었습니다. 그리고 console 탭은 필요한 데이터가 잘 출력되는 지 확인하기 사용하였습니다. 마지막으로 application 탭은 로그인이나 로그아웃 할 때에 저장한 token이 지정한 위치에 잘 저장되는지 확인하기 위해 사용하였습니다.
웹팩과 바벨의 역할에 대해서 설명하세요.
웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러입니다. 이 때 모듈 번들러는 여러 개의 파일을 하나로 합쳐주는 것을 의미합니다. 우리는 개발을 할 때 기능에 따라 코드를 나누어서 이해하기 쉽게 작성합니다. 이때 배포할 때는 자바스크립트 파일이 한번에 다운받을 수 있어야하는데 이 역할을 웹팩이 대신해줍니다. 바벨은 자바스크립트 트랜스파일러입니다. 모든 브라우저가 ES6의 기능을 제공하지 않기 때문에 ES5코드로 변환시키는 과정이 필요하기 때문에 사용되어집니다.
event.preventDefault() 의 역할이 무엇인지 설명하세요.
event.preventDefault는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메소드입니다. 예를 들어 이름을 입력하는 input의 값이 영문만 가능하다면, 사용자가 숫자또는 한글을 입력했을 때 입력되는 것을 막아야합니다. 이 때 이 기능을 주로 사용합니다.
window.requestAnimationFrame(callback) 의 역할이 무엇인지 설명하세요
window.requestAnimationFrame(callback)은 HTML5의 Canvas, SVG 등의 애니메이션 구현을 위해 사용하는 함수입니다. 이 함수는 비동기 함수로, 브라우저가 실행 시기를 결정하며, 스스로 반복해서 호출하지 않습니다.
intersection Observer API가 무엇인지 설명하세요.
intersection Observer API는 target과 root의 교차 발생을 비동기적으로 관찰하는 web API입니다. 메인 thread에 영향을 주지 않고, Callback을 실행하기에 매번 layout을 새로 그려 render tree를 새로 만들지 않기 때문에 브라우저의 성능을 향상시킬 수 있습니다. 주로 무한 스크롤을 구현할 때 자주 사용되는 api입니다.
performance API가 무엇인지 설명하세요.
performance API는 좀 더 정교하게 어플리케이션을 모니터링 할 수 있게 도와주는 API입니다. (추후의 추가작성 예정...)
Bundling이 무엇이며 왜 필요한가요?
번들링은 말 그대로 어떤 것을 묶는다는 뜻을 가지고 있습니다. 자바스크립트로 코딩을 하다보면, 기능에 따라 작업 코드를 여러 파일로 나누게 되는 경우도 있고, npm을 통해 다양한 모듈을 다운 받아서 사용하는 경우도 있습니다. 이렇게 만들어진 여러 개의 파일들을 모둘로 묶어주는 것을 번들링이라고 하며, 웹팩이 대표적인 번들러 예시입니다. 이전에는 각 파일들마다 서버에 요청하였지만, 같은 파일 즉, html, css, js 등의 파일을 묶어서 요청을 받기 때문에 네트워크 비용을 줄일 수 있습니다.
이벤트 위임이 무엇인가요?
이벤트 위임은 상위 노드에서 하위 노드의 이벤트를 제어 하고 싶을때 쓰는 방식입니다. 예를 들어 todoList앱을 사용자가 이용할 때 오늘의 할일을 추가하고, 그 추가된 항목의 일을 완료했으면, 완료했다는 의미로 밑줄을 그어야할 것 입니다. 이 때 이벤트 위임을 활용하여, li태그의 추가된 리스트를 통제할 수 있는 ul태그에 이벤트 리스너를 연결해서 하위에서 발생하는 클릭 이벤트를 감지시켜주도록 사용되어집니다.
이벤트 버블링이란 무엇이며 막을 수 있는 방법은 무엇인가요?
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 이벤트 버블링을 막기 위해서는 이벤트 객체의 메서드인
event.stopPropagation()를 사용하면 됩니다.
JavaScript 기본
스코프에 대해서 설명하세요.
스코프는 변수가 유효할 수 있는 범위로, 일반적으로 중괄호로 감싸진 영역을 의미합니다. 즉, 스코프는 변수의 수명을 결정하고 확인할 수 있는 범위입니다. 스코프는 크게
Local Scope와Global Scope로 나눌 수 있습니다.Global Scope는 어떤 영역에서든 접근이 가능하지만Local Scope중괄호 감싸진 영역에서 접근이 가능하며, 글로벌 스코프보다 우선순위가 높습니다.
클로저에 대해서 설명하세요.
클로저는 내부함수의 변수가 외부함수의 변수에 접근할 수 있는 것을 의미합니다. 즉 클로저 함수 안에서는 지역변수, 외부함수의 변수, 전역변수 모두 다 접근이 가능합니다. 클로저는 변경이 되지 않아야 하지만 해당 값을 읽고 싶을 때 주로 사용되어집니다.
클로져의 사용 예제를 알려주세요.
클로저는 정보를 은닉 즉, 캡슐화가 필요할 때 사용되어집니다. 클로저 함수를 통해서 중요한 데이터가 외부로부터 오염되는 것을 막을 수 있습니다. 뿐만 아니라 템플릿처럼 하나의 함수를 재사용 하고 싶을 때도 사용되어집니다.
변수 선언, 초기화, 할당의 차이점에 대해서 설명하세요.
변수 선언은 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알리는 단계이고, 초기화는 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화하는 단계입니다. 마지막으로 할당 단계에서는 undefined로 초기화 된 메모리에 다른 값을 넣는 것입니다.
호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요.
호이스팅은 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언하는 것을 의미합니다. var의 경우 선언단계와 초기화 단계가 함께 진행되어지지만 let은 선언단계와 초기화 단계가 분리되어 진행되어집니다. 그래서 초기화 이전에 변수에 접근하려고 하면 참조에러가 발생되어집니다. 따라서 호이스팅이 일어나면 참조할 수 없는 일시적 사각지대인 TDZ가 생기게 됩니다.
ES6의 주요 변화점에 대해서 설명하세요.
가장 큰 주요 변화점은 변수의 선언이 var뿐만 아니라 let, const도 가능하다는 것입니다. var는 함수 스코프로 함수내에서 모든 변수에 접근이 가능하고, 변수가 선언되기 전에 코드에서 참조될 수 있습니다. 반면에 let, const는 블록 스코프로 블록 외부에서 접근이 불가능하며 초기화가 되기 전에는 코드를 참조할 수 없습니다. 또한 let은 재할당이 가능하고, const는 재할당이 불가능합니다.
원시 자료형, 참조 자료형
원시 자료형은 변경이 불가능한 값을 의미합니다. 원시 자료형에는 6가지인 string, number, boolean, undefined 등이 있습니다. 이러한 원시자료형은 변수가 할당될 때 메모리 고정 크기로 값을 저장하고, 해당 주소를 참조합니다. 불변성의 특징을 가지고 있습니다.예를 들어 let a는 10의 변수를 만들었을 때 a의 대한 값을 2로 변경하면 새로운 메모리가 생성되고, 그것을 참조하는 주소만 변경되어집니다. 참조 자료형은 변경이 가능한 값을 의미합니다. 대표적인 예시에는 객체, 배열, 함수가 있습니다.
예를 들어 let a에 해당하는 배열을 만들고 let b를 만들어서 a 배열을 선언 했을 때 b에 대한 데이터를 바꾸면 a의 배열 값도 바뀌게 됩니다.
== vs === 의 차이는 무엇인가요?
동등연산자와 일치연산자입니다. 동등연산자는 값에 대한 데이터만 비교해서 문자 10과 숫자 10의 경우에는 일치하다는 결과가 나오게 됩니다. 반면에 일치연산자는 '값'과 '타입'으로 동등함을 비교하기에 앞에 예시의 경우 일치하지 않다는 결과가 나오게 됩니다.
자바스크립트에서 배열의 타입은 무엇인가요?
자바스크립트에서 배열은 object타입입니다. 그 이유는 자바스크립트는 원시자료형을 제외하고는 모든 것이 객체로 이루어져 있기 때문입니다. 배열은 한 개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용되며, 번호인 인덱스를 갖는 특별한 유형의 객체입니다.
undefined와 null 그리고 undeclared의 차이
undefined는 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값으로, 선언 이후 값이 할당되지 않는 상태임을 나타냅니다. null은 변수에 값이 없다는 것을 의도적으로 명시하고 싶을때 사용되어집니다. undeclared 변수의 선언도 할당도 되어있지 않은 상태를 의미합니다.
rest parameters와 spread syntax의 차이는 무엇인가요?
rest parameters는 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수를 의미합니다. 함수로 전달된 인수들의 목록을 배열로 압축할때 사용되어지며, 일반 매개변수와 함께 사용할 수 있습니다. 하지만 배열로 만들어주기 때문에 마지막 파라미터로 사용해야합니다. spread syntax는 뭉쳐있는 여러 개의 값들을 개별적인 값들의 목록으로 만들때 사용되어집니다. 순서가 있는 배열 또는 문자열을 의미하며, 결과는 값의 목록으로 나타나집니다.
깊은 복사와 얕은 복사의 차이에 대해서 설명하세요. 자바스크립트에서 깊은 복사를 하는 방법은 무엇인가요?
깊은 복사는 객체가 중첩되어 있는 상황일 때 내부 객체까지 모두 새로 생성된 것을 의미합니다. 이 때 복사된 A객체와 B객체 중 어느 하나를 수정해도 다른 객체에 영향을 미치지 않습니다. 하지만 얕은 복사는 상위 객체만 새로 생성되고 내부 객체들은 참조 관계인 경우를 의미합니다. 같은 주소값을 가리키기 때문에 복사된 A객체와 B객체 중 어느 하나를 수정하면 다른 객체에 영향을 미칩니다. 자바스크립트에서 깊은 복사를 하는 방법은 재귀함수를 이용하여 복사하거나 lodash()라이브러리를 사용하는 방법이 있습니다.
let, const, var의 차이와 각각의 사용 방법을 설명하세요.
var는 함수 스코프로 함수내에서 모든 변수에 접근이 가능하고, 변수가 선언되기 전에 코드에서 참조될 수 있습니다. 반면에 let, const는 블록 스코프로 블록 외부에서 접근이 불가능하며 초기화가 되기 전에는 코드를 참조할 수 없습니다. 또한 let은 재할당이 가능하고, const는 재할당이 불가능합니다. 요즘에는 var 대신에 let과 const를 주로 사용합니다. 왜냐하면 var의 경우에는 중복된 이름을 선언했을 경우에 오류사항이 나지 않으므로, 배포시에 위험성이 있기 때문입니다.
순수함수란 무엇인가요?
순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 매개 변수를 통해 함수 내부로 전달된 인수에만 의존해 반환 값을 만들며, 매개변수로 전달된 값을 수정하지 않는 함수를 의미합니다.
잘못 작성된 부분이 있을 수도 있습니다! 혹시나 있을 경우 바로 말씀해주시면 감사하겠습니당!
와 정말 감사합니다~