프론트엔드 면접 스터디 준비
HTML
<section>과 <article> 차이
section은 보통 비슷한 특성의 컨텐츠를 담을 때 사용한다.
article은 관련성이 없고 독립적인 내용을 담을 때 사용한다.
예를 들면 뉴스 기사는 하나의 기사마다 독립적인 내용을 담기 때문에 article을 이용하고, 자기소개서는 소개, 연락처 정보, 경력 사항 등 연관된 내용을 담기 때문에 section을 이용
<script> 선언 위치에 따른 변화, 문제점
<head> 안에 <script>가 선언됐을 때
브라우저가 html을 파싱하다가 script 태그를 만나면 파싱하는 것을 멈추고 js 파일을 다운을 받고 실행 후 파싱이 다시 시작된다.
문제점 : 용량이 큰 파일이라면 사용자가 사이트를 보기까지 많은 시간이 소요
<body> 제일 끝 부분에 <script>가 선언됐을 때
브라우저가 html을 다 파싱하고 나서 script를 만나 js 파일을 다운 받고 실행되기 때문에 head에 선언했을 때의 문제점이 해소된다. 즉 사용자가 사이트를 빨리 볼 수 있다.
문제점: 사이트가 js에 의존적이라면 즉, 데이터를 받아와야하는 상황이라면 사이트가 빨리 보여지긴하지만 의미있는 사이트는 아니다. 파일이 다 다운될 때 까지 기다려야 데이터들이 보이는 의미있는 사이트가 보여질 것이다.
<head> 안에 <script async>가 선언됐을 때
브라우저가 html을 파싱하다 script async를 보고 파싱과 동시에 js 파일을 다운받는다. 다운이 끝나면 html 파싱이 멈추고 js 파일이 실행된 후 다시 파싱이 시작된다.
문제점: js에서 querySelector로 html을 조작하려하면 우리가 원하는 요소가 아직 정의되지 않을 수 있다. (뒤늦게 파싱되는 부분이 존재하기 때문)
또 하나의 문제는 여러 js 파일이 존재하고 순서에 의존적이라면 읽는 순서대로가 아니라 다운 받는 순서대로 파일이 실행된다. 만약 b.js의 파일 용량이 가장 작다면 제일 먼저 실행된다.
<script async src="a.js" /> <script async src="b.js" /> <script async src="c.js" />
<head> 안에 <script defer>가 선언됐을 때
브라우저가 html을 파싱하다가 script defer를 보고 파싱과 동시에 js 파일을 다운받는다. html 파싱이 끝나면 다운 받은 파일을 차례로 실행하기 때문에 async를 선언했을 때의 문제점을 해결할 수 있다.
시멘틱 태그 설명
개발자와 브라우저에게 의미있는 태그를 제공하는 것을 의미한다. 예를 들어 <div> 태그는 non-sementic 태그이고, <table>, <article>,<header>,<main>은 sementic 태그에 속한다. 시멘틱 태그는 태그만 보고 대략적으로 들어갈 내용을 유추할 수 있다는 장점이 있다.
JavaScript
JSON
데이터를 직렬화하여 서버와 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷이며 key와 value로 이루어져있는 Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다. 가장 큰 장점은 프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있다는 점이다.
object를 json 형태로 바꿀 땐
JSON.stringify이용
함수나 Symbol은 josn으로 변환 Xlet json = JSON.stringify(['a','b']);
json 형태에서 object로 바꿀 땐
JSON.pasre이용let obj = JSON.parse(json);
ETC
DOM
DOM은 html이나 xml 문서를 나타내는 api이다. 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경을 돕는 역할을 한다. html 요소들을 구조화하기 때문에 브라우저가 HTML 페이지를 인식하는 방식을 의미하기도 한다.
HTML 코드는 DOM이 아니고 내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 된다. DOM은 tree 형식의 자료구조이다.
DOM은 html이나 xml 문서를 객체 모델로 변환하여 프로그래밍 언어로 접근 가능하게 하고, 웹 브라우저에 렌더링할 수 있도록 해주는 인터페이스이다.
마무리 회고
오늘 프로젝트 마크업을 진행했다. 이틀 전에 클론코딩을 한 덕분에 빠르고 나름 수월하게 마크업을 할 수 있었다. 하지만 깃은 여전히 사용을 못한다. 주말을 이용해서 깃을 마스터 해본다..!!!!!
