멋사 프론트엔드 스쿨 1기 - 52일차

서지영·2022년 1월 19일
0
post-thumbnail

오랜만에 재현 강사님께서 웹팩 수업을 하셨고, 시간이 좀 남아 면접질문 대비 모의면접을 하였다.

웹팩 수업은 오늘도 패쓰 하였고..^^
모의 면접에서 질문과 답변을 조금 줍줍하였다. (난 언제쯤 개발면접 보려나.. 소중하게 보관해야지..ㅎㅎ)


★ 면접 대비

  • CSS에서 'C’는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?

    Cascading은 상단에서 하단으로 내려가는 폭포처럼 아래에 부모의 스타일 속성이 자식에게도 영향을 미치는 방식을 말하며, 상속되는 스타일 속성은 따로 스타일을 설정하지 않아도 자식 요소까지 스타일이 적용된다는 장점이 있습니다.
    단, 레이아웃에 영향을 주는 css는 영향을 미치지 않고, 몇몇 버튼태그 같은 태그들이나 padding 같은 스타일들은 스타일이 상속되지 않아 별도의 처리가 필요합니다
    또한, 이를 사용했을때는 모든 HTML Element마다 스타일을 지정해주지 않아도 스타일이 적용 되므로 렌더링 속도가 빨라지고 코드의 양이 줄어듭니다.

  • 프로토타입이란 무엇인가요?

    프로토타입 기반의 언어들은 기준이 되는 객체를 복사해 새로운 객체를 만듭니다. 이때 기준이 되는 객체를 프로토타입이라고 합니다.
    모든 객체는 공통으로 참조하는 공간, 즉 원형이 되는 프로토타입 객체를 가집니다.
    메서드/프로퍼티가 자식 객체에서 정의되었을 경우, 프로토타입의 메소드/프로퍼티가 아니라 자식 객체의 메소드/프로퍼티를 사용합니다.

  • DTD란 무엇인가요?? 만약 없다면 어떤일이 일어나나요?

    DTD란 Document Type Definition으로 문서 형식 정의를 뜻합니다. 보통 문서의 상단에 선언하게 되며 흔히 html에서 의 형식으로 사용합니다.
    이렇게 DTD를 선언하여 이 문서가 어떤 형식을 따르고 있다를 브라우저에게 알려주고 브라우저는 형식에 맞게 렌더링하는 등 올바른 처리를 하게 됩니다.
    만약 DTD가 선언되지 않는다면 작성된 문서는 의도한 형식대로 처리되지 않고 효율성이 떨어지거나 레이아웃이 깨지는 등의 문제가 발생하며 비표준 모드로 렌더링되어 크로스 브라우징이 발생할 수 있습니다.

  • 서버사이드 랜더링과 클라이언트 사이드 랜더링의 차이는 무엇일까요?

    서버사이드 렌더링은 서버에서 데이터를 불러와 HTML을 다 만든 후 한번에 내려주고, 클라이언트 사이드 렌더링은 클라이언트에서 데이트를 불러와 HTML을 클라이언트에서 생성합니다.
    빈 HTML 파일로 시작하여 JS 파일을 불러오면 JS가 DOM을 생성해 화면에 뿌려주는 방식입니다. CSR은 페이지 이동 중 나오는 짧은 흰색화면이 나오지 않습니다.
    이로인해 사용자 경험을 개선할 수 있고, 서버 비용과 렌더링 속도에서 유리하지만, 첫 화면을 보는데 오래걸리고, 검색엔진최적화를 적용하기 어렵다는 단점이 있습니다.


★ 노마드코더 HTML 강의

★ 이론 수업 내용

  • visul studio code는 코드 작성이 잘못되면 빨간색으로 나타내준다.
  • atrribute 값은 항상 "" 큰 따옴표 안에 작성한다.
  • 어떤 태그는 id라는 arrtribute를 가질 수 있다.ex) image, paragraph. header, link...
  • 반대로 src(source)라는 attribute는 모든 태그가 가질 수 있지 않다.
  • 코드 자체에 의미가 부여된 semantic 태그를 잊지 말자.ex) header, navigation, footer...
  • semantic 태그로 코드를 작성 하는 것은 매우 중요하다. 작성된 코드들이 훨씬 더 보기 좋고, 좋은
    프로그래머가 되기 위해서는 필수 사항이다.
  • header, main, footer, navigation, hgroup 등 <>속 태그들은 전부 container이다. 전부 div 태그로 대체 할 수 있다.
  • div 태그는 가장 통용적인 container이다. 대체가 가능하지만, 코드만 보고 어떤 의미인지 파악하기 위해서 semantic 태그를 쓰는 것이다.
  • 모든 태그를 암기 할 필요는 없다. 필요할 때마다 문서를 찾아 적용하면 된다.

웹팩 수업시간에 HTML 인강 듣고 있는 서지영.. 실화세요..??ㅋㅋㅋㅋㅋ (뭐라도 하자..ㅎ)


★ 긍정의 한줄

There aren't always easy, but you just have to keep going and don't let the small stuff bog you down. - Stella Maeve -

삶이 항상 쉽지 않다. 조그마한 것들로 인해 포기하지 말고, 계속 전진하자!!

profile
코딩코딩

0개의 댓글