● 오늘 공부한 것
- 기술면접준비하기
- HTML
일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
페이지가 로드될 때, HTML와 CSS 파일은 동시에 파싱됩니다. 파싱이 되면서 HTML은 DOM트리를 구축하고, CSS는 CSSOM을 구축하게 됩니다. 이런 과정을 통해 first meaningful paint를 함으로써, 유의미한 정보가 담긴 화면을 최대한 빠르게 보여줄 수 있습니다.
만약, <link>태그가 중간이나 마지막에 위치시킨다면, 좋지않은 UX경험을 제공할 수 있습니다.
- css가 적용되지 않은 html 문서를 보여줄 수 있습니다.
- <link>이전의 요소들에 스타일링을 입혀야하므로 재렌더링이 진행됩니다. 이런 경우 리소스 낭비가 생기게 됩니다.
- 스타일이 다시 입혀지는 경우 렌더링을 막아두는 브라우저도 있기 때문에, 사용자는 비어있는 흰 페이지를 보게 됩니다.
HTML은 파싱을 하다가, <script> 태그를 만나게 되면 파싱을 중단하고 script 파일을 실행시킵니다. 이는 DOM트리 구성 방해가 됩니다.
2) 또한 자바스크립트의 역할 자체가, DOM의 요소들을 다루는 것인데, DOM 모두 완성되지 않은채로 DOM을 조작하는 것을 불가능하다. 따라서 <script>는 항상 body요소의 하단에 위치시켜야합니다.
<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
사실상, li태그만 쓰더라도 기능적으로 큰 문제는 없지만 시맨틱 태그에 맞춰 코드를 작성하는 것이, 다른 개발자들이 보기에도 훨씬 이해하기 수월하므로, ul, ol, li태그들은 의미에 맞게 작성하는 것이 좋습니다. 예를 들어, 메뉴판에 음료 목록에 사이다, 콜라가 있지만, 음료목록을 쓰지 않으면 사이다 콜라만 적혀있고 이것의 카테고리가 무엇인지 알 수 없습니다. 따라서 li태그들을 ul태그로 카테고리화한다면 훨씬 이해하기 편할 것입니다.
id 속성과 class 속성의 차이에 대해서 설명해주세요.
id는 고유한 값이고, class는 고유하지 않아도 되는 값입니다. 요소의 id는 단 하나의 값만 올 수 있기때문에 getElementsId가 아니라 getElementId 입니다. 하지만 class는 중복이 되는 값이 있어도 되기 때문에 getElemetsByClassName 인 것입니다.
- CSS
CSS box model에 대해서 설명해주세요.
문서상의 요소들을 시각적인 목적을 위해서, 모든 요소를 하나의 "직사각형 박스"로 여기는 모델입니다. 모든 박스는 아래와 다음과 같은 영역을 가집니다.
- 컨텐츠 영역(Content Area) : 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다.
- 안쪽여백 영역(Padding Area) : 테두리와 컨텐츠 사이의 거리를 이야기합니다.
- 테두리 영역(Border Area) : 테두리 경계(Border Edge)가 감싼 영역으로, 컨텐츠영역, 안쪽여백 영역을 포함해, 영역 바깥의 테두리 선을 이야기합니다.
- 바깥여백 영역(Margin Area) : 테두리 영역을 확장해 요소와 인근 요소사이의 빈 공간, 즉 여백을 이야기합니다.
박스 모델에서는 boder-box라는 개념이 중요한데요, css에서 기본 설정값이 context-box입니다. 한 div에 width 500px을 설정한다고 가정하면, content-box가 500px이기때문에, padding, boder가 더해진다면 500px보다 너비가 더 커질 수 있습니다. 이를 방지하기 위해 boder-box를 활용합니다. boder-box를 활용한다면 boder,padding, content-box를 500px을 기준으로 영역을 나눠 갖게됩니다.
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
대표적인 3가지 방법이 있습니다.
- 로그인 폼 컴포넌트 중 최상위 부모에 margin 값으로 '0 auto' 를 주어 가운데 배치를 합니다.
- 로그인 폼 컴포넌트를 감싸고 있는 부모요소에 display: flex 를 줍니다. 그 후 justify-content : center; 로 값을 설정해줍니다.
- 로그인 폼 컴포넌트를 감싸고 있는 부모요소에 position: relative;를 줍니다. 그 후, top과 left를 부모 요소의 너비와 높이를 안다면, 50% - (너비 / 2) / 50 % - (높이 /2)로 설정해줍니다. 하지만 부모 요소의 너비와 높이를 모른다면, top: 50% , left: 50%를 주고, 자신의 너비와 높이를 다시 역방향으로 오게 하는 방법입니다. ( transform: translate(-50%, -50%) )
간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
flex와 grid, float방식이 있습니다.
- div.author-container에 display: flex;를 주면 가로 정렬이 가능합니다.
- div.author-container에 display: grid; 를 주고, grid-template-colums: repeat(3, 1fr)을 줍니다.
- float: left; 를 자식 요소들에 차례대로 줍니다.
- JavaScript
스코프에 대해서 설명해주세요.
스코프란 변수의 접근범위를 이야기합니다. 예를 들어, 전역 안에 함수가 있습니다. 함수 안에 let a = 1;이라는 변수가 있다면, 함수안에서는 접근할 수 있지만, 전역에서는 함수의 a 변수에 접근할 수 없습니다. 이렇게 전역스코프, 지역스코프로 나뉘게 됩니다. 반대로 let a가 전역에 있다면, 함수내부에는 a 변수가 없으므로 스코프의 상위로 올라가며 변수 탐색을 합니다. 이런 것을 스코프 체인이라 합니다. 또한 스코프는 블록스코프, 함수스코프로 나눌 수 있는데, var같은 변수는 함수스코프에서만 지역스코프로 인정합니다.
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
배열과 객체는 참조형 자료이기 때문입니다. 참조형은 식별자에 메모리 주소를 할당합니다. 메모리 주소는 그 메모리 안의 값을 가르키는데요, 참조형 자료의 메모리 안의 값은 가변될 수 있습니다. 즉 let과 const는 재할당, 재선언을 금지하지만 '불변'을 의미하진 않습니다. 반대로 원시형 자료는 식별자에 메모리 주소가아니라 메모리 안의 값을 할당합니다. 따라서 불변을 의미하며, 재할당을 하면 메모리 값이 바뀌는 것이 아니라, 다른 메모리를 확보하고 그 안에 값을 넣어 바로 식별자에 할당합니다.
원시 자료형과 참조 자료형에 대해서 설명해주세요.
원시형 자료에는 숫자, 문자, 불리언 타입 등이 있습니다. 원시형 자료는 식별자에 메모리 값을 할당하는 것을 말합니다. 따라서 값이 변하지 않으며, 재할당을 하더라도 새로운 메모리를 확보해 메모리 안에 값을 할당합니다. 그리고 식별자는 바로 그 값을 가르기게 합니다. 반대로 참조 자료형은 메모리 주소를 가리키게 합니다. 따라서 값이 변할 수 있습니다. 예시를 들면 원시형 자료는 let a = 1 / let b = a 를 설정합니다. a에 재할당을 해도, b의 값은 변하지 않습니다. 반대로 원시형 자료에서 let a = [1,2,3], let b = a가 있다고 설정합니다. a의 값을 변화시키면 b에도 변화가 생깁니다. 이는 a, b 식별자가 가르키는 주소가 같기 때문입니다.
얕은 복사와 깊은 복사에 대해서 설명해주세요.
복사는 참조형 자료에서 나타날 수 있습니다. let a = [1, [1,2]], b는 a를 복사한 배열입니다. a의 첫번째 요소인 1을 가변시키면 b에서는 변화되지 않지만, a안에 있는 이중배열의 요소들을 변화시키면 b에도 적용이 됩니다. 이처럼 참조 주소를 공유하게되는 것을 얕은 복사라고 합니다. 따라서 이중배열도 변화가 되지 않게 끔하려면 깊은 복사를 할 수 있습니다. Json.parse, Json.stringify, spread 문법, 라이브러리를 통해 깊은 복사를 할 수 있습니다.
- DOM
innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
textContent는 요소 노드 안에 있는, 자식 요소 노드들의 텍스트들을 모두 가져옵니다. 하지만 innerHTML은 요소 노드의 텍스트 뿐만 아니라, 안에 있는 자식 노드들을 모두 가져옵니다. 따라서 innerHTML은 html 마크업을 읽어서 가져오지만, textContent는 텍스트만 가져온다는 것입니다. innerHTML을 사용할 때는 안에 DOM 노드요소들을 변화시킬 수 있기때문에 조심히 다뤄야합니다.
● 끝맺음
- 느낀점
- 뭔가 한달이 너무 순삭돼서 당황스럽다 ㅜ ㅜ
- 약간 씁쓸하기도하다.. 혼자공부할때는 이런 역량이 안됏눈데..
- 수업이외의 학습
- 프로토타입, strict mode, 빌트인 객체 공부하기
- 인터렉티브웹 수업 듣기.. 1시간..
- 내일 스터디 준비!
