[면접질문연습] 1

박상훈·2022년 7월 19일
CSSDOMJavaScripthtml
0

면접질문대비

목록 보기
1/3
post-thumbnail

한문장 요약 + 자세한정보 or 경험 으로 문장을 작성하고 두괄식으로 말할수있게 작성해보자

HTML

1. 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, 
  JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
  
2. <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?

3. id 속성과 class 속성의 차이에 대해서 설명해주세요.

  1. 코드는 위에서 아래로 훑어 내려오기 때문에, 헤드 부분에서 바디 요소로 읽어지게 됩니다.
    이렇게 되면 HTML 과 CSS 정보가 먼저 불러와 집니다.
    그렇기에 사용자는 HTML 과 CSS 로 이루어진 정적이지만 모양은 완성되어있는 홈페이지를
    먼저 인식 시킬 수 있습니다. 이후 추가로 javascript가 DOM 에서 만나 처리되어집니다.

    만약 JS가 상단에 존재 한다면 컴퓨터는 HTML 해석을 멈추고 파싱을 막은후
    script요소를 먼저 실행시키게 되는데 이때
    빈화면이 출력되거나 HTML , CSS요소가 없는 홈페이지등을 먼저 볼 수 있게되는데
    이럴경우 사용자는 홈페이지가 느리다고 생각하거나, 다른곳으로 이동,새로고침 하는등 불필요한 경험을 할 수 있습니다.
    이런 경험들이 UX경험에 방해를 주기도 합니다.
    자식요소를 상단,하단에 둘지는 자신이 보여주고싶은 홈페이지 형태에 따라 구성 할 수 있습니다.

    (리액트 에서 redux , native 등 이러한 방식의 차이를 적용하고있는걸로 알고있지만 ,
    이부분은 아직 정확히몰라 공부해야될꺼같다.)

  2. li 요소는 목록 아이템을 보여주기 위한 요소입니다.
    그렇기에 목록을 담아주는 ul 요소가 필요하며 li는 그안에 자식이 되어야합니다.
    ul(ol,menu)이 없어도 화면상 문제는 없지만 시맨틱구조 를 지킴으로써 홈페이지 표준기준을 지키고,
    그에따라 다른 개발자들과 협업을 하여도 코드를 쉽게 이해하고 분석할 수 있게 해줍니다.
    (시멘틱구조가 정확히 설명이좀 힘든거같음)

  3. id와 class는 유일성에 차이이며, id는 한 문서내에서 한 번만 사용이 가능하지만, class는
    여러 요소의 복수 요청이 있을때도 사용가능합니다.

    id는 중복되어 있으면 웹표준에 어긋나며 협업 동료와 검색엔진에 혼란을 야기 할 수 도있습니다.
    그렇기에 getElementById는 있어도 getElementsById 는 없는 이유입니다.

    클래스는 중복사용이 가능하기때문에 공통된 요소들에 중복된 이름을 주어 동일한 특성을 주고싶을때 사용 하는등의 장점이 있습니다.

CSS

1. CSS box model에 대해서 설명해주세요.

2. 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)

3. 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
|  글쓴이 | 빈칸  | 공유 |
+--------+------+------+

1.모든 HTML 요소는 box 형태의 영역을 가지고 있으며 이것을 box model이라고 합니다.
HTML의 모든 엘리먼트는 width(너비)와 height(높이)를 가지는 사각형 박스이며 안쪽에서 부터 바깥쪽으로 content(컨텐츠) -> padding(패딩) -> border(보더) -> margin(마진)으로 구성되어 있습니다.

콘텐트(Content): 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.
패딩(Padding): 테두리 안쪽에 위치하는 요소 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명이다.
테두리(Border): 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.
마진(Margin): 테두리 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명하며 배경색을 지정할 수 없다.

2.
1번째 방법으로 flexbox를 사용하며 로그인 폼 컴포넌트를 감싸는 부모요소를 만들고
그안에 display:flex 를 주고 , justify-content:center, align-items:center를 부여합니다.
이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에 HTML 요소 배치에 주의해야 한다.

2번째 방법으로 postion을 사용합니다.
부모요소에 position:relative를 주고, 로그인폼에 position:absolute;를 준다음
로그인폼멩 left: 50%; transform: translateX(-50%); 를 부여해줍니다.

3.

div.author-container{border : 1px dot black 을 말하는건가 ?? }

JavaScript

1. 스코프에 대해서 설명해주세요.
2. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.

3. 원시 자료형과 참조 자료형에 대해서 설명해주세요.

4. 얕은 복사와 깊은 복사에 대해서 설명해주세요.

  1. 스코프는 범위를 뜻하며, '변수에 접근할 수 있는 범위'라고 할 수 있습니다.
    JS에선 스코프는 '전역 (Global) 과 지역(Local)' 두종류가 있습니다.

    전역스코프는 말그대로 전역 어디에서 선언 되어있어 어느곳에서도 해당 변수에
    접근 할 수 있습니다.

    지역스코프는 해당 지역에서만 접근할수 있어 지역을 벗어난곳에선 접근 할 수 없습니다.
    지역 스코프의 예로 함수 스코프가 있으며 함수내에서 선언 된 변수는 그 함수안에서만 접근할 수 있는것이 지역스코프라고 볼 수 있습니다.

    블록스코프는 함수스코프로 감살때 {} 중괄호안에 감싸져있는 부분을 블록이라하여 블록스코프라고합니다.

    var를 사용하면 지역변수,전역변수를 구분없이 접근할 수 있는경우가 생기기도하여, let,const사용을 지향하며 이는 호이스팅 관련에서도 확인할 수 있습니다.

  2. 배열과 객체는 참조 자료형이기 때문에 변수에 값 자체가 아닌 주소를 할당 합니다.
    const 키워드로 선언 및 할당을 하더라도 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있습니다.
    이런 상황에서 const를 쓰는 것은 오히려 권장되는데
    변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있으며 보다 깔끔하고 안정적인 코드를 작성할 수 있다.

  3. 원시 자료형
    자바스크립트에서 객체가 아니면서 method를 가지지 않는 6 가지의 타입
    string, number,bigint, boolean, undefined, symbol, (null)
    원시 자료형은 모두 하나의 정보, 데이터를 담고 있음
    값 자체에 대 한 변경이 불가능하지만, 변수에 다른 데이터를 할당가능
    원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고,

    참조 자료형
    원시자료형이 아닌 모든 것
    배열(Array)과 객체(object), 함수(function)이 대표적
    참조 자료형이 할당될 때는 보관함의 주소(reference)가 담김

  1. 얕은 복사(Shallow copy) vs 깊은 복사(Deep copy)
    얕은 복사
    객체의 실제 값이 아닌 원본과 같은 reference(참조값,주소값)를 공유하는 복사입니다. 그 결과 원본이나 복사본 중 하나를 수정했을 때, 수정하지 않은 원본 또는 복사본 객체 또한 수정이 됩니다.
    깊은 복사
    참조값이 아닌 인스턴스 자체를 새로 복사하여 아예 실제값을 복사하는 것 , 원본과 같은 reference를 공유하지 않는 복사이다. 그 결과 원본이나 복사본 중 하나를 수정하더라도, 수정하지 않은 원본 또는 복사본 객체는 영향을 받지 않는다.
    자바스크립트에서, 기본적으로 내장된 object-copy oprator(spread syntax, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), Object.create())는 깊은 복사를 하지 않고 얕은 복사를 한다.
    ( 출처: https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy )
    ( 출처: https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy )

DOM

1. innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.

2. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
  1. InnerHTML과 textContent는 둘 다 자기 자신과 자식 요소들의 텍스트 뿐만 아니라 스크립트와 스타일링 정보까지 가져온다는 공통점이 있습니다.

    하지만 innerHTML은 HTML 전체 내용을 반환하기 때문에 HTML 요소들을 입력해서 직접 변경할 수 있습니다. 따라서 복잡하지 않은 코드에선 편리할 수 있으나 이런 점으로 인해 xss공격에 취약하고 복잡한 코드를 가공하기 힘들다는 단점이 있다.

    반면에 textContent는 html을 제외하고 가져오기때문에 xss공격의 위험이 없고 복잡한 코드도 가공하기 쉽습니다. 따라서 다수의 개발자들은 성능과 보안에 강점이 있는 textContent의 사용을 지향합니다.


  2. 이벤트를 명시적으로 처리하지 않는 경우 함수의 기본 Default 값으로 실행되는 것들을 막아주어야할때 사용하고 있습니다.
  • a tag를 클릭했을 때 지정된 href 링크로 이동하지 않게 하고 싶을 때
  • form 내의 submit 역할을 하는 버튼을 클릭했을 때, 새로 실행하지 않게 하고 싶을 때
profile
박상훈
다들 좋은 하루 되세요
다음 포스트

면접후기

0개의 댓글