HTML
- 일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- li 요소는 왜 ul 요소의 자식 요소여야만 하나요?
- id 속성과 class 속성의 차이에 대해서 설명해주세요.
1.
CSS link 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)를 향상시키기 때문이다.
script 요소가 body 요소가 끝나기 직전에 위치하는 경우 HTML과 CSS 로딩이 끝난 직후 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있다.
HTML과 CSS의 정보가 담긴 부분이 우선적이고 점진적으로 렌더링되기 때문에 유의미한 정보가 담긴 화면을 유저에게 최대한 빠르게 전달할 수 있다.
웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면 HTML 해석을 잠시 멈추고 script 요소를 먼저 실행한다. 그렇기 때문에 script 요소가 body 요소가 끝나기 직전에 위치하지 않고 그보다 상단에 위치할 경우 HTML 해석이 끝나기 전에 HTML 파싱을 막아 DOM 렌더링을 방해한다.
2.
li,ul에 대해
li 요소는 ul요소 내에서 목록 아이템을 생성하기 위한 요소이다. 따라서 목록을 담는 ul 요소의 자식 요소여야 한다. 결과적으로는 동일하게 나올지라도 li 요소와 ul 요소의 의미에 맞게, 시멘틱하게 HTML을 작성하는 것은 협업을 하거나 다른 개발자가 내 코드를 볼때 가독성을 훨씬 높여준다.
시멘틱하게 써야하는이유 SEO,다른 개발자와의 소통, 기계의 소통
3.
CSS
- CSS Box model에 대해서 설명해주세요.
- 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
- 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
1.
css에 대해
HTML에서 생성하는 모든 요소들은 Box의 형태를 갖고 있다. 이를 box model이라 하며 Box는 content, padding, border, margin으로 구성된다.
2.
중간에 위치시키기 위해서는 flexbox를 사용할 것이다. 로그인 폼 컴포넌트를 감싸는 wrapper 요소가 있다면 그 wrapper 요소에 display 속성값을 flex로 지정하고, justify-content 속성값은 center, align-items 속성값도 center로 지정하면 된다.
이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에 HTML 요소 배치에 주의해야 한다.
3.
- 그리드로 컨테이너에 템플릿 컬럼을 1fr 씩 세칸주면 가로로 일정한 간격으로 나눠짐
- 플렉스 justify-conntent에 space between, flexgrow속성을 0으로 빼면 더 좋은방법일수도있음
- 테이블태그로 테이블아이템을 세칸으로 주어서 나눔
JavaScript
- 스코프에 대해서 설명해주세요.
- 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명해주세요.
- 원시 자료형과 참조 자료형에 대해 설명해주세요.
- 얕은 복사와 깊은 복사에 대해 설명해주세요.
1.
모든 식별자(변수, 함수, 클래스 일므 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되고 이를 스코프라고 한다. 즉 스코프는 식별자가 유효한 범위
2.
배열과 객체는 참조 자료형이기 때문에 변수에 값 자체가 아닌 주소를 할당한다. const 키워드로 선언 및 할당을 하더라도 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있다. 이런 상황에서 const를 쓰는 것은 오히려 권장된다. 변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에 보다 깔끔하고 안정적인 코드를 작성할 수 있다.
3.
4.
얕은 복사
객체의 얕은 복사는 복사한 프로퍼티가 원본과 같은 reference를 공유하는 복사이다. 그 결과 원본이나 복사본 중 하나를 수정했을 때, 수정하지 않은 원본 또는 복사본 객체 또한 수정이 된다.(=같은걸 공유하고 있는 느낌)
깊은 복사
객체의 깊은 복사는 복사한 프로퍼티가 원본과 같은 reference를 공유하지 않는 복사이다. 그 결과 원본이나 복사본 중 하나를 수정하더라도, 수정하지 않은 원본 또는 복사본 객체는 영향을 받지 않는다.
자바스크립트에서는 기본적으로 얕은복사를 한다.
DOM
- innerHTML 메서드와 textContent 메서드의 차이에 대해 설명해주세요.
- event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
1.
innerHTML
InnerHTML과 textContent는 둘 다 자기 자신과 자식 요소들의 텍스트 뿐만 아니라 스크립트와 스타일링 정보까지 가져온다는 공통점이 있다. 이중 차이점은 innerHTML은 HTML 전체 내용을 반환하기 때문에 HTML 요소들을 입력해서 직접 변경할 수 있다. 따라서 복잡하지 않은 코드에선 편리할 수 있으나 이런 점으로 인해 xss공격에 취약하고 복잡한 코드를 가공하기 힘들다는 단점이 있다.
반면에 텍스트콘텐트는 html을 제외하고 가져오기때문에 xss공격의 위험이 없고 복잡한 코드도 가공하기 쉽습니다. 따라서 다수의 개발자들은 성능과 보안에 강점이 있는 텍스트콘텐트의 사용을 지향합니다.
2.
