-
section 1 면접준비코드스테이츠 43기 2023. 1. 11. 14:08
💁♀️일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고 JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
✔️페이지가 처음 로드되면, html과 css가 동시에 pasing되고 html은 dom을 만들고 css는 cssom을 만들게 된다. 그런데 script를 중간에 위치시키면, html은 dom생성을 중지하고 script가 실행된다. 그 밑에 있는 html코드들이 로딩되지 못하기 때문에 브라우저가 렌더링하는 것을 방해할 수 있는 것이다. 렌더링이 오래걸리면 사용자가 빈 화면을 쳐다보게 될 수도 있다. css를 head에 위치시켜야 하는 이유는 head가 아닌 곳에 위치시키면 브라우저에서 점진적 렌더링을 금지하고, 사용자가 빈 화면을 쳐다보게 만든다. First Meaningful Paint 를 방해함(사용자에게 의미있는 콘텐츠가 그려지는 첫순간)
<--
async : 웹 페이지 파싱과 외부 스크립트 다운로드가 동시에 진행된다. 스크립트는 다운로드가 완료되면 실행된다.
defer : 웹 페이지 파싱과 외부 스크립트 다운로드가 동시에 진행된다. 스크립트는 웹 페이지 파싱이 끝나면 실행된다.
https://ui.toast.com/fe-guide/ko_PERFORMANCE 성능 최적화란?-->
💁♀️event.preventDefault 메서드는 언제 왜 사용하는지 설명해주세요
✔️event.preventDefult는 해당이벤트의 브라우저의 기본도작을 실행하지 않도록 지정하는 것입니다. 예를 들어, 영어만 입력가능한 곳에 사용자가 한글을 입력했을 경우 이를 막기 위해 사용됩니다. 예를 들어 submit이벤트는 자동으로 새로고침을 하기때문에 이를 막기 위해 사용할 수 있습니다. event.stopPropagation과 비교하면, stopPropagation은 상위 엘리먼트로부터의 이벤트 전파(이벤트 버블링)을 막기위해 사용합니다. JS에서 이벤트는 가장 하위 뎁스의 엘리먼트부터 실행되고 상위로 전파되기때문에, 상위엘리먼트에서 발생한 이벤트가 하위 엘리먼트 이벤트결과에 영향을 미치는 경우가 있습니다. 이런경우 사용하게 됩니다.
<---innerHTML은 HTML엘리먼트의 컨텐츠자리에 직접 삽입할 수 있다 스트링으로 작성해도 화면에 파싱돼서 보여지기도 함 스크립트태그를 삽입할 수 있기 때문에 해킹의 위험이 있음!
textcontents는 텍스트로 보여줌(파싱x)--->
💁♀️스코프에 대해서 설명해주세요. ->스코프에 의해서 문제가 생길만한 상황을 설명하는 것도 좋음. 용어들을 많이 사용하면 공격당하기가 좋다(호이스팅을 말하면, 호이스팅은 무엇인가요???) 물론 꼬리질문 잘 대답하면 점수를 잘 받을 수 있음! 즉 어려운 용어 많이 사용하지 말고 기본적인 용어로 간결하게 설명할 것.
✔️스코프는 변수 접근 규칙에 따른 유효범위 입니다. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다. 가장바깥쪽의 스코프는 전역스코프이고, 전역의 반대말은 지역스코프입니다. 지역스코프에 선언한 변수는 지역변수, 전역스코프에 선언한 변수는 지역변수입니다. 지역변수는 전역변수보다 더 높은 우선순위를 가집니다. 스코프는 두가지 종류가 있는데, 하나는 블록스코프로 중괄호를 기준으로 범위가 구분됩니다. 다른 하나는 함수스코프입니다.(화살표함수는 블록스코프로 취급됩니다.) 이때 var로 선언한 변수는 블록스코프를 무시하고(화살표함수제외) 함수스코프만 따릅니다. 사용하지 않는 것이 좋습니다.
<--Strict Mode는 브라우저가 보다 엄격하게 작동하도록 만들어줍니다. 앞서 언급한 것처럼 "선언 없는 변수 할당"의 경우도 Strict Mode는 에러로 판단합니다. Strict Mode를 적용하려면, js 파일 상단에 'use strict' 라고 입력하면 됩니다. (따옴표 포함)
함수의 중괄호->함수의 바디라 부름-->
💁♀️CSS box model에 대해서 설명해주세요.
✔️css박스모델은 html요소를 하나의 사각형으로 가정하고 어떻게 디자인적으로 표현하는 것입니다. 하나의 박스는 콘텐츠영역, 안쪽 여백인 패딩영역, 테두리영역, 바깥여백인 마진 연역 네개의 영역으로 이루어집니다. 콘텐츠는 텍스트나 이미지가 들어가는 실질적인 내용 부분입니다. 박스사이징의 기본값은 콘텐트 박스이고, 콘텐츠 영역의 크기는 콘텐츠 너비와 콘텐츠 높이 입니다. 패딩은 내용과 테두리 사이의 간격입니다. 테두리는 내용과 패딩 주변을 감싸는 테두리이고, 마진은 테두리와 이웃하는 요소사이의 간격입니다. 패딩과 마진은 눈에 보이지 않습니다.
💁♀️<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
✔️<ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용합니다. ul 요소에 속하는 각 아이템을 li요소로 사용합니다. li 요소와 ul요소의 의미에 맞게(시멘틱하게)HTML을 작성하는 것이 좋습니다.
💁♀️얕은 복사와 깊은 복사에 대해서 설명해주세요.
✔️
'코드스테이츠 43기' 카테고리의 다른 글
section1 과제 아고라스테이츠 만들기 (0) 2023.01.12 Section 1 회고 (0) 2023.01.11 [JAVASCRIPT] 원시자료형과 참조자료형 (0) 2023.01.02 TIL 2022.12.31.(이번주) (0) 2023.01.01 [2022.12.29] TIL javascript 배열 함수들 (0) 2022.12.29