잡서칭 3일차(2021-12-24)
1️⃣ Pair Coding & Skill Interview
Pair Coding
🗣 페어 분께서 선정한 코딩 문제를 받아 모의 면접을 진행했습니다📹
🔗 [프로그래머스] - 나누어 떨어지는 숫자 배열
문제 풀이 코드
function solution(arr, divisor) {
// 🗣 코딩 전
// 주어진 배열 arr의 요소들이 주어진 숫자 divisor로 나누어 떨어지는 숫자들을 모아 오름차순으로 정렬하는 문제입니ㅏㄷ.
// case 1. arr의 각 element 중 divisor로 나누어 떨어지려면 arr % divisor === 0
// case 2. 예외) 배열에 -1 담아 반환
// 🗣 코딩 중
let answer = [];
// 주어진 배열 arr의 길이만큼 반복하여 연산
for(let i = 0; i < arr.length; i++){
if(arr[i] % divisor === 0){
answer.push(arr[i])
}
}
// 예외 처리) answer의 길이가 0이면 -1 push 후 반환
if(!answer.length) {
answer.push(-1);
} else {
// 배열 answer의 요소가 하나 이상 존재할 경우, 오름차순으로 정렬
// sort 메소드 사용
answer.sort((a, b) => a - b);
}
// answer를 반환
return answer;
}🗣 이 문제 풀이의 시간 복잡도는 O(N)이 됩니다. 왜냐하면, 배열 arr의 길이가 증가하면, for 반복문 실행 횟수가 늘어나기 때문입니다.
Skill Interview
🗣 페어 분께서 선정한 기술 면접 질문을 받아 모의 면접을 진행했습니다📹
👨🏼🏫 예상 문제
모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점을 설명해주세요.
답안
문제점
브라우저가 자바스크립트를 로딩할 때, HTML PARSING이 중단되는 문제가 생깁니다.
심지어, 모든 자바스크립트 파일을 브라우저에서 한번에 로딩하려면 그만큼 중단 시간이 길어지게 됩니다. (블록 모드)
사용자 입장에서 원하는 페이지를 보기 위해서 대기해야 하는 시간이 길어질 수밖에 없습니다. 그만큼 사용자에게 웹사이트에 문제가 있다고 인식하게 만들고, 좋지 않은 유저 경험을 제공하는 결과를 초래하게 됩니다.
원인
이러한 문제가 생기는 이유는 두 가지를 들 수 있는데, HTML PARSING이 중단되는 시간이 발생한다는 것과, 브라우저가 JS파일을 동기적으로 로딩한다는 점입니다.HTML 파싱 작업과 JS파일 로딩 작업이 동기적으로 처리되면 시간이 오래 걸릴 수밖에 없습니다. HTML 파싱은 언어를 해석해서 DOM TREE를 구성하는 작업을 뜻합니다. 이 작업이 선행되어야 자바스크립트 파일이 정상적으로 DOM을 조작할 수 있습니다.
SCRIPT 태그
HTML에 JavaScript를 적용하려면 <script> 태그를 이용합니다.
브라우저가 HTML을 파싱하는 과정에서 <script> 태그를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다.
이렇게 HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 다운받고 실행합니다.
<script> 태그가 적용되는 위치에 따라서 실행 결과가 달라집니다.
브라우저가 HTML 문서의 코드를 위에서 아래로 해석하기 때문입니다.
위치 이슈
<head> 태그안에 JavaScript를 추가하면, HTML parsing을 하다 <script> 태그를 읽는 즉시, HTML parsing을 멈춥니다. 자바스크립트 파일을 fetching(script download) 및 실행(executing)한 뒤 HTML parsing을 다시 시작합니다. 자바스크립트 파일의 크기가 크다면, 그만큼 로딩시간이 길어지게 됩니다. 심지어, 파일에 DOM 요소를 조작하는 코드가 포함되어있으면, BODY 태그를 읽기도 전이기 때문에 DOM 요소에 접근하는 시도로 인해 예기치 못한 이슈가 발생할 위험이 있습니다.
대안
대안으로 <body>태그 안에서 </body> 가 끝나기 전에 SCRIPT 태그를 위치시키는 방법이 있습니다.
HTML 파싱이 중단되는 이슈를 최소화할 수 있지만, JS 파일의 크기가 너무 크거나, 브라우저가 JS파일에 대한 의존도가 높은 경우 로딩 시간이 길어질 위험이 있습니다.
비동기
결국, 자바스크립트 파일을 로딩 작업이 '동기적'으로 처리되는 문제를 해결해야 로딩 시간을 줄일 수 있습니다. 해결 방안으로 이 작업들을 비동기 처리하는 방법이 있는데 script 태그에 async 속성을 넣는 방법과, defer 속성을 넣는 방법이 있습니다.
async
async 속성은 브라우저가 DOM을 빌드하는 것과 스크립트 로드하는 것을 동시에 처리하도록 합니다. 그래서 HTML 파싱 과정에서 DOM 빌드 작업이 중단되는 위험을 피할 수 있지만, 앞서 말했듯이, JS 파일 로드가 완료되면, 바로 그 파일이 실행됩니다. JS파일이 실행되면 HTML 파싱이 또 중단되기 때문에, 사용자에게 화면을 표시하기까지의 시간을 완벽하게 최소화한다고 보기 힘듭니다.
defer
이런 async의 한계에 대한 방안이 defer 속성이 포함된 script를 사용하는 방법입니다. 이 방법을 사용하면, script 파일이 DOM 구성이 끝나고 난 다음에야 실행이 되기 때문에 defer는 script가 DOM에 접근할 수 있도록 보장해줍니다.
피드백
👤
References
