HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
📚
3기 스터디 가이드/
취뽀스터디
취뽀스터디/
질문 답변 페이지
질문 답변 페이지/
천욱 답변

천욱 답변

HTML/CSS

script 태그에서 async와 defer 속성의 차이에 대해 설명해주세요.
HTML5에서 추가된 Web Storage는 어떤게 있고 둘의 차이에 대해 설명해주세요.
LocalStorage, SessionStorage가 있습니다. 둘 다 브라우저에 키-값 형태로 데이터를 저장하고 LocalStorage는 브라우저를 닫아도 데이터가 남는 영구성이고, SessionStorage는 브라우저를 닫으면 데이터가 사라집니다.
<link> 태그를 <head>태그 사이에 위치시키는 이유와 반대로 <script> 태그를 <body>태그 맨 밑에 위치시키는 이유를 설명해주세요.
브라우저는 렌더링 과정에서 html, css, script 세 개를 다운로드 하는데, html 파일을 다운로드 하면서 DOM트리를 형성하고, css파일을 다운로드 하면서 CSSOM트리를 형성한다. 이때 <link>태그를 <head>태그에 위치시키면 html과 css가 병렬적으로 파싱되어 렌더링 과정이 빨라진다. 반면 브라우저가 <script>태그를 만나면 html,css파싱을 잠시 멈추고 script파일을 다운로드 하는데 DOM,CSSOM 트리가 완성되지 않은 상태에서 script파일을 실행시킨다면 렌더링이 오래걸리기도 하고 결론적으로 DOM 조작이 불가능해진다.
 
시맨틱 마크업에 대해 설명해주세요.
시맨틱이란 “의미론적인”의 뜻을 가지고, 마크업이란 HTML태그로 문서를 작성하는 것을 말합니다. 즉, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다..
position과 display의 속성을 아는대로 말해주시고, 차이점에 대해 설명해주세요.
display에는 크게 block, inline, inline-block의 속성이 있습니다. position은 기본값인 static과 relative, absolute, sticky, fixed 등이 있습니다.
 
block, inline, inline-block의 차이점에 대해 설명해주세요.
block : display가 block으로 설정된 요소는 가로 크기가 부모 요소의 100%를 차지하고, 새로운 줄에 위치합니다. block 속성을 기본적으로 가지는 요소는 대표적으로 div, p 등이 있습니다. inline : display가 inline으로 설정된 요소는 다른 요소들과 같은 라인에서 표시되고, 컨텐츠만큼의 크기를 갖습니다. 가로 세로의 크기를 임의로 지정할 수 없습니다. 대표적으로 span이 있습니다. inline-block : block과 inline의 속성을 섞어 놓은 것과 같습니다. block처럼 가로 세로의 크기를 설정할 수 있으면서, 새로운 줄에서 시작하지 않고 다른 요소와 같은 라인에 배치됩니다.
 
Sass에 대해 설명해주세요
Sass는 컴파일 과정을 통해 CSS파일을 생성해주는 CSS의 확장 언어이자 전처리기입니다. SCSS는 Sass의 구문이고 중괄호를 사용해서 CSS속성을 지정하고, Sass는 들여쓰기 문법으로 CSS속성을 지정합니다.
 
 

JavaScript

클로저란 무엇이며, 어떻게 사용될 수 있나요?
외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데 이러한 함수
반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수
함수와 메서드의 차이는 무엇인가요?
호출 방식에 따라 다릅니다. 함수를 호출하는 객체가 있는 경우 메서드라고 하고, 객체가 없는 경우를 함수라고 합니다. show2함수를 호출하는 객체도 존재합니다. 다만, show2의 함수는 전역 범위에서 선언되었기 때문에 window객체로 호출 할 수 있고, 이것은 생략가능합니다.
프로토타입이란 무엇인가요?
모든 객체는 숨겨진 “__proto__” 프로퍼티를 가지며, 이 프로퍼티를 통해 객체 간에 상속 관계를 구현합니다. 이렇게 객체 간에 공유되는 “__proto__” 프로퍼티를 프로토타입이라고 부릅니다.
프로토타입 상속이란 무엇이며, 어떻게 작동하나요?
다른 객체의 특징을 물려받는 것을 말합니다. 즉, 상위 클래스(부모객체)에서 정의된 프로퍼티들을 하위 클래스(자식객체)에서 공유하고 사용할 수 있는 것을 말합니다.
strict mode란 무엇이며, 어떻게 사용될 수 있나요?
잠재적인 오류를 발생시키기 어려운 개발 환경을 만들고, 언어의 문법을 엄격히 적용하여 기존에 무시되던 오류를 발생시킬 가능성이 높거나, 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.
  • 전역에 적용하는것을 피하자
    • strict mode스크립트와 non-strict mode스크립트를 혼용하는 것은 오류를 발생시킬 수 있고 특히 외부 서드파티 라이브러리를 사용하는 경우 라이브러리가 non-strict mode일 수도 있기 때문에 전역에 적용하는 것은 바람직하지 않다.
  • 함수 단위로 적용하는것도 피하자
    • 어떤 함수는 적용하고 어떤 함수는 적용하지 않는것은 바람직하지 않으며 strict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 문제가 발생할 수 있다.
  • strict mode는 즉시실행함수로 감싼 스크립트에 적용하는 것이 바람직하다.
사용법
다음 코드의 결과를 말해주세요.
정답
다음 코드의 결과를 말해주세요.
정답
1
1
위 예제의 실행 결과는 함수 bar의 상위 스코프가 무엇인지에 따라 결정된다. 두가지 패턴을 예측할 수 있는데 첫번째는 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것이고 두번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다. 첫번째 방식으로 함수의 상위 스코프를 결정한다면 함수 bar의 상위 스코프는 함수 foo와 전역일 것이고, 두번째 방식으로 함수의 스코프를 결정한다면 함수 bar의 스코프는 전역일 것이다.
프로그래밍 언어는 이 두가지 방식 중 하나의 방식으로 함수의 상위 스코프를 결정한다. 첫번째 방식을 동적 스코프(Dynamic scope)라 하고, 두번째 방식을 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)라 한다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다. 위 예제의 함수 bar는 전역에 선언되었다. 따라서 함수 bar의 상위 스코프는 전역 스코프이고 위 예제는 전역 변수 x의 값 1을 두번 출력한다.
 
let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
}

obj.show1(); // 메서드
show2();     // 함수
// 함수 단위로 strict mode 적용
function foo() {
  'use strict';

  x = 10; // ReferenceError: x is not defined
}
foo();
var x = 5, result;

result = x++;
console.log(result, x);

result = ++x;
console.log(result, x);

result = x--;
console.log(result, x);

result = --x;
console.log(result, x);
// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6

// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7

// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6

// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // ?
bar(); // ?