쥬니어 프론트엔드 면접 준비

TigerStoneV·2022년 4월 20일
면접
0
post-thumbnail

(내 지식을 공유해주께.. )

프론트엔드 면접 예상 질문이고 그에따른 답을 적어 보았다.

🤓 홈페이지가 보여지는 순서

  • 브라우저 렌더링
    • 주소창에 주소를 입력해 서버 찾기.
    • DNS가 연결해줄 곳을 찾음
    • 서버에서 html 파일을 클라이언트에게 보냄
    • 중간에 css를 로드하는 link, style 태그를 만나면 DOM 생성 중지.
    • 만들어진 DOM 과 CSSOM 은 렌더링을 위해 렌더 트리로 결합.
    • script 태그를 만나면 css 와 동일하게 js 코드를 실행하기 위해 파싱 중단
    • 여기서 script 태그를 만날때마다 파싱을 중단하는 문제를 script 태그 뒤 defer 속성을 붙여줌으로써 해결할 수 있다.
      • async : html 파싱, js 파일로드가 동시진행
      • defer : dom 생성이 완료된 직후, js파싱과 실행이 진행된다.

🤓 var let const 차이

  • 간단하게 설명을 하자면
    • var 변수
      • 재할당 가능 재선언 가능
    • let 변수
      • 재할당 가능 재선언 불가능!
    • const 상수
      • 재할당 불가능 재선언 불가능!
  • var이 기본적으로 쓰였는데 변수명을 실수로 적거나 코드가 길어지는 상황에서 오류가 잦아 es6부터 let과 const가 나왔다. let 사용 권고!

🤓 호이스팅이란 ?

  • 호이스팅이란 var변수 선언문이나 function 선언문 등을 해당 스코프의 머리로(선두) 로 옮긴것 처럼 동작하는 특성을 이야기한다
  • 함수 선언문은 코드를 구현한 위치와 관계없이 맨위로 호이스팅이된다.
  • 함수 표현식은 아니당
  • 우선순위 : 변수선언 > 함수 선언

🤓 함수 선언식과 함수 표현식

  • 함수 선언식

  • function sum(a,b) {
    return a + b
    }

  • 함수 표현식

  • const sum = function(a,b) {
    retunr a + b
    }

  • 차이 호이스팅! 선언식은 호이스팅이 되지만 할당을 진행하는 표현식에서는 호이스팅이 되지 않는다!

  • 선언식 같은 경우 전체적인 호이스팅이 일어나지만 표현식 같은 경우는 선언문만 상단으로 호이스팅이 진행됨으로 쓰일수 없다.

🤓 클로저란 ?

  • 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.
  • 자바스크립트는 함수 안에 함수를 선언 할 수 있는데 이럴때 외부함수와 내부함수가 있고 외부함수에 있는 변수에는 내부함수가 접근이 가능하다. 근데 중요한건 외부함수가 종료(리턴)이 되도 접근이 가능한 매커니즘을 클로저라고 부른다.
  • 함수 내에서 변수를 정의하고 사용하면 클로저라고 하는데 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게된다

🤓 Padding과 Margin의 차이

  • 마진은 바깥의 공간

  • BoxModel

  • border
  • 패딩은 안쪽의 공간.
  • content
  • 패딩은 안쪽의 공간.
  • border

  • BoxModel

  • 마진은 바깥의 공간

box-sizing

  • box-sizing 의 디폴트 값은 content-box인데
    이것은 무조건 width 의 값이 content의 값만 포함이 되는데 box-sing의 값을 border-box로 지정하게 되면 width값 안에 padding과 border 까지 포함된다.
  • 이것으로 초반에 설정해 놓았던 width값이 더 늘어나거나 하는 참사를 막을 수 있다.

🤓 SCSS의 사용 이유 설명

  • 우선 가장 중요하는 이유는 편의성이다.
  • 기본 CSS 를 사용하다보면 자식요소 부모요소 계속해서 의미없는 셀렉터 들이 늘어나게 되는데 그것을 막고 변수를 만들거나 반복문 등 여러가지로 쓰일 수 있다. 즉 재활용성이 높다.

🤓 Position 사용 방법

  • 사용자에게 제일 중요하게 생각하는 것은 디자인이다. 디자인을 아무리 잘뽑아준다고 하더라도 프론트엔드 개발자가 그것을 배치를 못하면 안된다고 생각한다.
    position에는
    • static : 디폴트 값이다. 원래 있어야하는 위치에 배치된다.
    • relative : 요소를 원래 위치에서 벗어나게 배치할 수 있게 되는데 상대적 배치를 하는 것이다.
    • absolute : 가장 어려운 absolute 인데 relative는 상대적인 배치와는 다르게 absolute는 body를 기준으로 배치할 수 있다고 생각된다. 해서 주의사항은 부모요소에 relative를 넣어주어야한다.
    • fixed: 고정된 위치에 배치하는 것이다. 기준은 vh이다
    • sticky : 최근에 추가된 속성값인데 스크롤링 시에 효과가 나타난다

🤓 Get과 Post 차이점

  • Get 과 Post는 http method이다.
  • get은 가져온다는 개념.
    • Read And Retrieve(검색) , 쿼리스트링
    • 서버에서 어떤 데이터를 가져와서 보여줄때 사용한다.
    • 어떠한 값이나 내용, 상태 등을 바꾸지 않는 경우 사용된다.
    • 암호화에 취약 , 즉 내용이 다 쿼리스트링으로 보임
  • post는 수행한다는 개념이다.
    • Write and Modify
    • 서버상의 데이터 값이나 상태를 바꾸기 위해 사용한다.
  • 예시 {게시판}
    • 글의 내용 혹은 목록을 보여주는 경우 GET
    • 내용을 저장하고 수정할때 POST

🤓 flex

  • 기존의 방식보다 레이아웃의 가변적 배치, 정렬 ,순서 등을 유연하게 구현할 수 있는 강력한 기술이다.
  • 속성 :
    • 컨테이너에 적용하는 속성
      • display: flex;
        • div의 경우 display가 block이여서 상하정렬 이지만 flex로 변경하면 좌우 정렬이 된다.
      • flex-direction: row;
        • 정렬 방향을 정하는 것인데 row는 default 다
        • column은 세로축으로 정렬하는 것이다 .
        • reverse는 반대 방향으로 정렬하는 것이다.
      • flex-wrap:nowrap;
        • 요소의 크기가 커져서 옆으로 삐져나올때 wrap 처리를 하면 하단으로 순차적으로 배치된다.
      • justify-content:flex-start
        • 메인축 방향으로 아이템들을 정렬하는 속성이다.
        • center를 많이 쓴다.
      • align-items : stretch
        • 수직축 방향으로 아이템들을 정렬하는 속성이다.
        • center를 많이쓴다

🤓 Ajax

  • 비동기식 자바스크립트와 xml
  • 비동기란? 웹페이지를 리로드하지않고 데이터를 불러오는 방식이며 결국 서버에 요청을 한 후 프로그램이 멈춰 있는게 아니라 계속해서 작동은 한다는 의미
  • 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할수 있는 통신 기능
  • 단점) 비동기 통신을 무리하게 요청할 경우 과부하가 걸릴 수 있고 히스토리가 관리되지 않으며 페이지 이동없는 통신으로 보안상의 문제가 있다.

🤓 restful

  • HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
  • HTTP Method(POST, GET, PUT, DELETE)를 통해
  • 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미함.

🤓 Event Loop란 ?

  • 이벤트 루프는 테스크가 들어 오기를 기다렸다가 들어오면 이를 처리하고. 테스트가 없는 경우에는 잠드는. 끊임없이 돌아가는 자바 스크립트 내의 루프이다.
  • js는 싱글스레드 언어이다.

🤓 Event Bubbling?

  • 이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.
    <-> 반대되는 개념으로 Event capture가 있다

🤓 single Thread 와 muliti Thread 설명

  • 싱글 쓰레드는 순차실행으로 파일a를 다운받고 b를 다운받고 c를 다운받는 예를들어 일차선 도로라고 생각이 된다면
  • 멀티쓰레드는 병행실행으로 메인 쓰레드 밑으로 각각의 A,B,C 쓰레드가 있고 a,b,c 를 동시에 다운로드 받는다
  • 자바스크립트는 EventLoop가 싱글스레드 이기 때문에 싱글스레드 언어라고 부른다.
  • 멀티쓰레드로 사용 할 수 있는 방식은 웹 워커가 있다.
  • 웹워커는 멀티쓰레드 기능을 지원하며 워커가 생성될 때마다 자바스크립트를 실행할 수 있는 고유스레드를 생성하여 속도를 향상시킬수 있다.

🤓 SPA중 현재 자신이 쓰는 것 장단점 설명

  • 현재는 React를 공부하고있으며 React는 Javascript Library 이다.
  • Component 기반 구조로 자동차의 부품을 만들어 붙인다고 생각한다.
  • Virtual DOM: 직접적인 DOM에 접근이 아닌 가상의 돔을 만들어 이벤트가 발생할 때마다 VirtualDOM을 만들고 전후 상태를 비교후 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선 할 수 있다.
  • Props , State:
    • Props 부모 컴포넌트에서 자식컴포넌트로 전달해주는 데이터를 말하고 쉽게 읽기전용 데이터라고 생각한다. 자식컴포넌트에서는 전달받은props를 변경할수 없고 최상의 부모 컴포넌트만 변경이가능하다.
    • State 컴포넌트 내부에서 선언하며 내부의 값을 변경할 수 있다. 동적인 데이터를 다룰때 사용하며 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용이 가능하고 각각의 state 는 독립적이다.
  • jsx : javascript에서 확장한 문법이며 리액트에서 UI 관련 작업을 할때 시각적으로든 속도던 도움이 많이된고 에러 및 경고메시지를 표시할 수 있게 해준다.

🤓 React 와 Vue 와 Angular 간단 설명

  • 리액트
    • javscript Library
    • facebook에서 제작됨.
    • 가벼움
    • 자유도가 높음
    • (단) 자유도가 너무 넓어 자칫 헷갈릴 수 있고 mvc 프레임워크에 사용자 인터페이스를 통합하는 방법이 어려움.
  • 앵귤라
    • 비교적 리액트와 뷰보다는 어려움
    • 마이너한 느낌.
    • 양방향성 데이터 바인딩
    • (단) 어렵고 문서가 적음 즉, 생태계가 조금 부족하다
  • 뷰
    • 공식 문서로 빠른 러닝커브를 가질 수 있고 배우기 쉬움.
    • 작은크기
    • 대규모 확장.
    • (단) : 자원이 부족하고 과도한 유연성의 위험이 있고 영어문서의 부족이 있다.

🤓 Arrow 함수 사용 적합성

  • Arrow 함수는 es6 부터 적용되는 함수이다.
  • 일반함수는 function name(){} 로 작성되지만
    Arrow 함수는 name() => {} 사용이 가능하다.

  • this

    • 함수 실행시에는 전역 객체를 가르킨다.
    • 메소드 실행시에는 메소드를 소유하고 있는 객체를 가르킨다
    • 생성자 실행시에는 새롭게 만들어진 객체를 가르킨다.

  • arrow 함수 사용 안할때

    • 화살표 함수는 자신을 둘러 싸고 있는 상위 환경의 this를 그대로 계승하려는 Lexical this를 따르기 때문에 문제가 생기는 경우에는 사용하지 않는걸 권고한다.
    • method
    • prototype
    • 생성자
    • addEventListener의 콜백 함수

🤓 this 사용방법

  • this는 Javascript 예약어로 수행하는 주체가 되는 인스턴스를 지칭하는 자기 참조 변수 이다.
  • 상황에 따라 this가 지칭하는 대상이 다를 수 있다.
  • this binding: 바인딩이란 변수와 값을 연결하는 과정인데 this바인딩은 this와 this가 가르킬 객체를 바인딩하는 것이다.
  • 유형으로는
    • 1.전역 this
      • console.log(this) // Window
    • 2.일반함수 this
      • 일반 함수 내부에서의 this도 window 객체이다.
    • 3.메소드 this
      • 호출하는 주제가 일반 함수의 경우 window, 메소드 경우에는 객체 내부에 포함된 함수기 때문에 해당 객체가 this에 바인딩이 된다.
    • 4.이벤트 핸들러 this
      • 이벤트를 받는 html 요소를 바인딩 한다.
    • 5.생성자 this
      • 새로 생성하는 인스턴스가 this에 바인딩이 된다.
    • 6.명시적 바인딩 this
      • call, apply, bind로 원하는 객체를 바인딩 할 수 있다.
    • 7.arrow function this
      • 여기서의 this는 자신을 감싼 정적 범위를 가르킨다. 일반함수와 동일하게 전역에서 호출되는 경우 전역 객체를 가리키는건 동일하지만 명시적 바인딩이 무시되는게 차이다.

🤓 각오

🤓 Front End 직무 선정 이유

🤓 앞으로 방향성 및 발전 방법

🤓 등등등

  • 추후 본인이 면접 보는 회사에서 자신이 할 수 있는 역할이나 임무

🤓 드리고 싶은 말

여기에 있는 답안들은 제가 생각하기에 급히 지식을 우겨 넣는거라고 생각합니다.
다들 좋은 곳에 취업하기 위해 엄청난 포트폴리오와 노력들을 갈아넣고 나온 결과물이 취업이겠지요.
그래도 여러분들은 잘 할 수 있습니다!
여태까지 그랬던것처럼 급하게 생각하지 않으며 천천히 조금씩이라도 어제보다 더 나은 오늘을 만들어 가며 하루하루 열심히 해봅시다! 다들 화이팅입니다.!

  • ps 질문 내용은 제가 취직할때까지 계속해서 수정해보겠습니다. 많은 자료들을 간단하게 요약한 것이니 완전하진 않습니다!
  • Lexical Environment 질문..
  • Front-end
  • es6 부터 바뀐 문법 설명

참조:
https://realmojo.tistory.com/300
https://velog.io/@carrotsman91/this
https://bluayer.com/25
https://www.daleseo.com/css-position/
https://velog.io/@tigerstonev/JavaScript-%EC%84%A0%EC%96%B8-%EB%B0%A9%EC%8B%9D%EA%B3%BC-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85
https://realmojo.tistory.com/109
https://velog.io/@songyouhyun/Get%EA%B3%BC-Post%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%A5%BC-%EC%95%84%EC%8B%9C%EB%82%98%EC%9A%94
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
https://studiomeal.com/archives/197

profile
TigerStoneV
개발 삽질하는 돌호랑이
이전 포스트

React-Inflearn Study

다음 포스트

React 기초

0개의 댓글