프론트앤드 면접 정리(CS&웹 지식, 작성중)

L·2023년 4월 7일
프론트앤드
1

프론트앤드 면접 정리

목록 보기
2/2

✔ UI 구현을 위해 사용하는 HTML, CSS, Javascript의 각각의 역할에 대해 설명해주세요.

  • HTML은 HyperText Markup Language 의 줄임말로, 브라우저가 읽을수 있는 XML 형태의 마크업 언어를 말한다. 기본적인 웹문서의 틀을 구성하고 있다.

  • CSS는 Cascade Style Sheet의 줄임말로, HTML 언어를 구성하고있는 각 틀마다 색깔, 위치, 너비 등을 조정해주는 역할. Grid, Flex등을 이용해 레이아웃 구성을 할수 있고, media Query를 이용하여, 반응형 처리 웹 페이지 처리도 가능하다.

  • Javascript은 마크업의 이벤트 제어와 비동기제어를 통한 외부 통신같은 역할을 한다. jQuery나 React등의 라이브러리를 이용하여, 이벤트 제어, 마크업 동적 생성 및 제거등의 기능을 간편하게 이용할 수 있다.

✔ 반응형 웹사이트를 개발할 때 고려해야 할 사항에 대해 설명해주세요.

  • 기기(PC 모니터, 테블릿, 스마트폰)의 환경에 맞게 다르게 보여주는 웹 사이트를 말한다.
  • 반응형 웹사이트를 개발할 때 고려되어야할 사항
    1. 각종 기기에 외부스팩 및 해상도 정보 필요
    2. 기기에 따른 Grid와 box들을 어떻게 해야할것인가?
    3. 기기에 따른 Media Query, 각종 요소들의 높이와 너비, 폰트, 뷰포트 설정등이 고려.

✔ 주소창에 google.com을 입력하면 일어나는 일

  1. 브라우저는 해당 도메인에 맞은 IP가 있는지 확인하기 위해 DNS 서버에 요청. 이전에 캐싱된 기록이 있다면 요청없이 해당 IP를 받아옴. 만약에 캐싱된 기록이 없다면, 가까운 DNS서버부터 시작해서 원하는 IP주소를 찾을때까지 DNS서버 탐색을 계속한다.

  2. 브라우저는 TCP/IP 프로토콜을 이용 URL 정보와 함께 서버에서 리소스를 요청한다. 이때, TCP는 3 way handshake 과정을 통해 연결 및 데이터를 수신받고 ,4 way handshake를 통해 연결을 종료한다.

  3. WAS 미들웨어(ex.tomcat)을 이용하여 동적인 콘텐츠를 제공하는 파일 처리와 DataBase 연동 요청 처리를 한다.

    • 동적인 파일 : 서버에 있는 파일들을 스크립트로 가공되어 처리하는 과정을 거친 파일을 말함.(JSP, PHP, ASP.net 등)
    • 정적인 파일: 서버에 미리 저장되어 있는 파일을 그대로 전달 되는 파일을 말함.(JS,HTML,이미지 파일등)

  4. WAS에서 작업한 결과와 웹 서버에 저장된 파일들을 상태코드 값과 함께 브라우저에게 돌려준다.

    🔍참고

✔ CSR과 SSR에 대해 설명해주세요.

  1. CSR(Client Side Rendering)
    • 서버에서 단순히 html 파일만 가져오고, 브라우저는 서버에 JS파일을 다운로드 요청을 한 다음, 요청한 JS파일에서 랜더링을 처리하는 방식.
    • 장점
      • 최초 랜더링 완료 시, 이후 페이지 처리 비용이 줄어드는 장점.(필요한 내용만 변경)
    • 단점
      • 처음에 html은 비어져있는 상태라 SEO(Search Engine Optimizier)을 적용에 제한있음.
      • 서버에서 요청하는 JS파일의 사이즈가 커질수록 첫 화면을 볼수 있는 시간이 오래걸림.(로직,라이브러리 소스코드 등). (처음에는 페이지가 실행이 되지않은것 처럼 보일수가 있음)
  2. SSR(Server Side Rendering)
    • 서버에서 필요한 데이터적용과 스크립트처리가 완료된 HTML파일을 클라이언트에게 반환하여 보여주는 방식.
    • 전통적인 랜더링 방식.
    • 장점
      • 최초 페이지 로딩이 빠름.
      • 서버에서 랜더링된 html파일을 가지고 있기 때문에, 효율적인 SEO에 용이.
    • 단점
      • 페이지 이동 시 깜빡거리는 이슈
      • 사용자가 많은 페이지에선 서버 과부하가 일어날 수 있음.
      • 동적 처리할수 있는 스크립트파일을 받는 시간이 오래걸릴때는, 해당 요소 클릭시 기능을 수행 못할수가 있음.

✔ SPA에 대해 설명해주세요.

  • Single Page Application의 줄임말로, 단일 페이지에서 데이터 변경만으로 페이지 처리를 하는 방식.

  • 기본적으로, 스크립트 파일을 한번만 받고, 페이지 이동(a링크 클릭)시 새로고침 이동이 아닌 링크와 관련해서 필요한 데이터만 받아서 깜빡임 없이 변경된 곳만 새로 그림.

  • 장점

    • 전체적인 랜더링을 하는것이 아닌 필요한 것만 랜더링을 하기때문에, 깜빡임 이슈가 없음.

  • 단점

    • CSR 방식으로 동작하니, 최초 실행 속도가 느리고, SEO를 적용 받는것에 제한이 있음.

    🔍참고

✔ 쿠키(Cookies), 세션저장소(sessionStorage)와 로컬저장소(localStorage)에 대해 설명해주세요.

  • session, local storage는 html5에서 새로 추가된 사용자 개인 브라우져에서만 사용가능한 web api저장소.
  • key:value 형태로 저장되는데 value는 무조건 문자열 형태로 들어감.
  • 저장 용량은 브라우져별로 다르지만 최대 5MB정도 저장이 가능.(session storage)
  • session storage와 local storage의 차이점
    • session storage는 브라우져 종료시, 데이터가 전부 소멸
    • local storage는 사용자가 직접 비우는 행위를 하지않는이상 반영구적으로 남아있는것이 특징.(크롬의 시크릿 창에서 실행시 종료시 삭제)
  • cookie는 브라우져와 서버의 통신간에 항상 전달되는 문자열 형태데이터 목록.
  • 쿠키를 설정하기 위해서는 서버 응답 헤더에서 Set-Cookie에 쿠키값을 저장. 이후 브라우져는 서버와 통신할때 항상 쿠키값을 가지고 있게됨.
  • key=value 형태로 저장되며 &구분자로 이어서 저장이 가능.
  • 인코딩 문자열을 포함해서 최대 4KB까지 저장이 가능.
  • expired와 max-age를 통해 유효일자와 유효시간 지정이 가능하며, 만약에 지정하지않을때는 세션처럼 브라우져 종료시 사라진다.

✔ CORS

Cross Origin Resource Sharing의 줄임말로 해석하자면 교차출처(다른 도메인) 리소스 공유이다.

  • 기본적으로 브라우저는 동일한 출처(같은 도메인)에서 자원을 공유하는 정책을 사용한다.(SOP, Same Origin Policy)
  • 하지만, 다른 도메인의 자원을 활용한 개발이 흔하기 때문에, 특정 도메인에 대해서는 예외로 두어 CORS정책을 지킨 리소스 요청을 허용할 수 있게 처리.

    예를 들어 A.com에서 image.png를 요청할때, 요청하고자하는 서버의 도메인이 A.com이면 SOP 정책에 의거하여, 이미지를 받아을수 있다. 하지만, 서버의 도메인이 다른 경우에는 서버로 부터 이미지를 받을수 있지만 브라우저에서는 CORS정책의 위배되어 실제로는 이미지를 사용할수 없다.

  • 다른 출처 구분 기준은 어떻게❓ ➡ scheme + host + Port 가 일치해야함.
    • http://data.go.kr != https://data.go.kr
    • http://data.go.kr != http://data.go.com
    • http://data.go.kr:8080 != http://data.go.com:8081
    • https://data.go.kr/data/1 = http://data.go.kr/category/1
  • CORS는 요청하는 서버에서 응답을 내릴때 Access-Control-Allow-Origin Header 에서 브라우져에서 요청을 보낸 Origin 과 비교 후, 허용할지 아닌지를 결정.
  • 보통은 Access-Control-Allow-Origin를 * 로 입력하여 도메인에 상관없이 접근을 허용하게하지만, 보안을 위해서는 특정 도메인을 명시하는것이 좋다.

    🔍참고

✔ HTTP와 HTTPS의 차이

  • http
    • Hypertext Transfer Protocol 의 약자
    • 클라이언트와 서버간의 통신 규격 프로토콜을 말한다.
    • 80번 포트를 사용
    • 사용자가 요청하면 서버는 요청 결과를 텍스트 형태로 교환해준다.
    • 암호화 되지않는 평문 데이터를 전송하기 때문에, 중간에 패킷을 가로채서 그 데이터가 중간에 노출될 가능성이 있다.(ex.프록시 서버를 통한 가로채기)
  • https
    • Hypertext Transfer Protocol Secure의 약자
    • http 처럼 클라이언트와 서버간의 통신규격 프로토콜
    • http 위에 단점을 극복하기위해 클라이언트 요청 및 서버의 응답을 하기전 SSL인증서를 이용하여 텍스트를 암호화하여 교환하는 방식이다.
    • 옛날에는 데이터를 교환하기전 암/복호화 과정이 있기때문에 속도가 느리다는 단점이 있었지만, 지금은 속도의 차이는 거의 없다.
    • 독립된 인증 기관(CA)에서 SSL/TLS 인증서를 획득하기위한 비용이 필요하다는 단점이 있지만, 무료 인증서도 존재.(Let's Encrypt,SSL for Free 등)

    🔍참고

✔ 블로킹, 논블로킹

✔ 동기, 비동기

✔ 자바스크립트는 싱글스레드이면서 왜 비동기 방식으로 돌아가는지 설명하세요

  • setTimeout,ajax(XMLHtttpRequest) 등 비동기 소스가 동기식으로 돌아가면, 해당 소스가 완료될때까지 아래에 내용은 실행 되지않는다.
  • 자바스크립트는 setTimeout,ajax(XMLHtttpRequest) 등 비동기 소스 실행을 지원하는 webAPIs가 해당 부분을 실행하게 된다.
  • webAPIs가 실행하고 나서 이벤트 루프가 돌면서 테스크 큐로 들어간다.
  • 콜스택의 쌓여있는 실행 내역이 없을때 이벤트 루프가 돌아가면서 테스크 큐의 콜백함수를 콜 스택에 넘겨준다.
  • 콜백함수는 전부 실행 후 콜스택에서 제거한다.

    🔍참고

📚 면접 문제 참고

profile
L
이전 포스트

프론트앤드 면접 질문 정리(Javascript)

0개의 댓글