1.일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 <body> 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- CSS <link> 태그를 <head> 태그 사이에 위치시키는 이유는 css <link>태그를 <body> 뒷부분에 사용할경우, HTML을 렌더링 한 후 CSS를 렌더링하기 시작하기 때문에, 랜더링이 총 두번 진행된다. 두번의 렌더링으로 낭비가 심하고 사용자에게 UX적인 측면에서 좋지 않다.
- JS <script> 태그를 <body> 태그가 끝나기 직전에 위치시키는 이유는 브라우저는 <script>태그를 만나면 HTML 파싱을 잠시 멈추고 <script>를 다운로드하고 실행한다. 이 경우 사용자에게 화면이 보여지기까지 시간이 늦어지기 때문에 , HTML요소를 모두 파싱한뒤에 자바스크립트 파일을 다운로드하고 실행할 수 있도록 <body> 태그 맨 뒤에 <script>태그를 두는 것이 좋다.
1. <script> <script async> <script defer> 태그들의 차이점은 무엇인가요
📣 <script> 을 만나면, HTML 파싱을 중단하고 해당 스크립트를 즉시 다운로드 받고 실행한다. 스크립트 실행이 완료되면 HTML 파싱을 재개한다.
📣 <script async> 는 HTML을 파싱하는 동시에 해당 스크립트를 다운로드 받는다. 그리고 HTML 파싱이 완료되지 않았어도 스크립트를 실행할 수 있을 때 즉시 실행한다.
📣 <script defer>는 HTML을 파싱하는 동시에 해당 스크립트를 다운로드 받는다는 점에서 <script async>와 동일하지만, HTML 파싱이 끝나야 스크립트를 실행한다. 스크립트가 여러개인 경우, 스크립트는 페이지에 나타나는 순서대로 실행된다. 스크립트가 DOM에 의존적인 경우 유용하게 사용된다. 또한 HTML이 파싱된 후 스크립트가 실행된다는 점에서 <script> 태그를 <body> 태그가 끝나기 직전에 위치시키는 것과 거의 비슷한 효과를 가져온다.
1. 시맨틱 태그(sementic tag) 에 대해 설명하세요.
시맨틱 태그는 자신의 목적과 의미를 브라우저와 개발자에게 명확하게 설명하는 태그를 말한다. 가령 <div> 나 <span>은 자신이 무엇을 담고 있는 컨텐츠인지 그 자체로 설명하지 못하는 반면, <form>, <table> 은 자신이 각각 폼과 표를 담당하는 컨텐츠라고 설명한다.
'어떻게 보여져야 하는가'는 CSS의 영역이며, HTML은 채워질 데이터를 나타내도록 코딩해야 한다. 따라서 그 자체로 데이터를 나타내는 시맨틱 태그를 적절히 사용하는 것이 중요하다.
시맨틱 태그를 사용할 때의 장점은 다음과 같다.
- 검색 엔진은 시맨틱 태그를 페이지의 검색 랭킹에 사용할 중요한 지표로 활용한다.
- 시각 장애인을 위한 화면 판독기로 페이지를 탐색할 때, 시맨틱 태그가 중요한 지표로 활용된다.
- 의미 없는 <div>를 클래스와 함께 무더기로 사용하는 것보다, 적절한 시맨틱 태그를 사용하는 것이 개발할 때 더 편하다.
**DOM**
1. 개발자도구를 많이 사용하셨다면 주로 어떤 용도로 사용했나요?
개발을 할 때는 주로 Performance, Elements, Styles, Console, application, Network 탭을 사용합니다.
초기렌더링 속도, 응답 대기 시간, 애니메이션 속도 등을 확인하기 위해서 퍼포먼스 탭을 사용했고, Elements 및 Styles 탭은 html, css를 수정하기 위해 사용했습니다. 또한 network탭에서는 네트워크 응답코드 등을 확인하기 위해 활용했으며 application 탭은 storage, cookie 등을 확인하기 위해 사용했습니다.
1. 웹팩과 바벨의 역할에 대해서 설명하세요.
웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이고, 바벨은 자바스크립트 트랜스파일러입니다.
여러 개의 모듈을 하나의 파일로 통합시켜주는 도구를 모듈 번들러라고 하며 웹팩은 정적 모듈 번들러로 웹 페이지에서 자바스크립 파일을 여러번 다운받지 않게 하고, 모듈 단위로 개발할 수 있게 합니다.
트랜스파일러는 하나의 언어로 작성된 소스코드를 비슷한 수준의 다른 언어로 변환하는 것을 말하며 구형 웹 브라우저에서도 사용할 수 있게 하기 위해 사용합니다.
웹팩
- 웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이다. 모듈은 우리가 작성한 자바스크립트 소스코드와 우리가 사용한 라이브러리들이다. 번들러는 의존성 있는 모듈을 하나의 파일로 통합시켜주는 도구이다. 우리 코드와 라이브러리들을 하나로 통합시키는 모듈 번들러가 필요한 이유는 다음과 같다.
- 웹페이지에서 자바스크립트 파일을 여러번 다운로드 받지 않게 하기 위해
웹 페이지를 로드할 때마다 각각의 모듈을 따로 다운로드 받는다면 네트워크 병목 현상이 일어날 수 있다. 그래서 각기 다른 자바스크립트 파일을 하나로 만들어, 한번에 다운로드 받을 수 있게 한다.
- 모듈 단위로 개발할 수 있게 해준다.
만약, 자바스크립트 파일 하나에 모든 코드를 담는다면 유지보수 하기 굉장히 어려울 것이다. 우리는 기능에 따라 코드를 모듈화 하여 우리가 이해하기 쉽도록 코드를 구분해 가독성과 유지보수성을 효율적으로 개선할 수 있다. 그리고 코드를 배포할 때는 자바스크립트 파일을 한번에 다운로드 할 수 있도록 웹팩이 코드를 하나로 합쳐주기 때문에, 모듈화로 인한 네트워크 병목 현상을 걱정할 필요가 없다.
바벨
- 바벨은 자바스크립트 트랜스파일러이다. 트랜스파일러는 하나의 언어로 작성된 소스코드를 비슷한 수준의 다른 언어로 변환하는 것을 의미한다.
- 구형 웹 브라우저에서도 사용할 수 있게 하기 위해
자바스크립트는 다양한 웹브라우저에서 사용되며, 웹 브라우저에서도 각기 다른 자바스크립트 엔진을 사용한다. 이 엔진들은 각기 다른 자바스크립트 버전을 지원한다. 가령 V8 엔진은 ES7을 지원하고, 차크라 엔진은 ES5까지만 지원한다고 가정하자. 만약 우리가 ES7 문법을 사용한다면 차크라 엔진은 우리가 작성한 자바스크립트 코드를 읽지 못하고 에러를 뱉어낼 것이다.
모든 자바스크립트 실행 환경에서 정상적으로 동작하게 하기 위해서는 바벨을 사용해 최신 자바스크립트 문법을 레거시 문법으로 변경시켜주어야 한다.
1. event.preventDefault() 의 역할이 무엇인지 설명하세요.
preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다.
<a>,<input>,<textarea>의 기본 동작을 막을 수 있습니다.
특정 이벤트가 트리거되면, 해당 이벤트에 수반되는 디폴트 액션을 취소시킵니다.
예) checkbox 요소의 디폴트 액션은 checkbox가 토글링 되는 것입니다. 만약, checkbox 요소의 click 이벤트 콜백함수에 preventDefault()를 선언하면, checkbox를 눌러도 checkbox가 토글링 되지 않습니다.
1. window.requestAnimationFrame(callback) 의 역할이 무엇인지 설명하세요.
canvas, svg 등의 애니메이션을 구현하는데에 사용되며 실제 화면이 갱신되어 표시되는 주기에 따라 함수를 호출해줍니다. setInterval과 비슷하지만 timestamp 값이 콜백함수의 인자로 넘어오며 timestamp는 밀리세컨드 단위의 시간값이기 때문에 복잡한 물리학 공식을 이용해 애니메이션을 구현해야할 때는 부드러운 UI를 위해 이 메소드를 사용하는 것이 좋습니다.
