목차
1. 3번째 모의면접 준비
1-1. 이벤트 버블링
이벤트 위임(delegation)이란? (
사용이유 )답변
이벤트 위임은 하위 요소의 각각 이벤트를 부여하기 보다,상위요소에 이벤트를 등록하여하위요소의 이벤트를 제어하는 방식 입니다.
- 사용이유
하위요소에서 추가,삭제가 빈번하게 일어난다면 매 생성시 마다 이벤트를 반복하여 등록해주어야 합니다.
따라서 이벤트 버블링과 캡쳐링을 활용하여 상위요소에서 하위요소의 이벤트를 한 번에 처리할 때 사용합니다.이벤트 버블링과 캡쳐링, 그 차이는? (
사례, 방지방법)답변
이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때,발생한 이벤트가 상위 요소를 통해 전달되어 올라가는 특성을 말합니다.
이벤트 캡쳐링은 특정요소에서 이벤트가 발생했을 때,발생한 이벤트가 하위 요소를 통해 전달되어 내려가는 특성
- 캡쳐링은 addEventListener()에서 3번째 option 객체에
capture = true설정을 통해 활성화 할 수 있다.
- 비교 (공통점)
- 버블링과 캡쳐링 보두 브라우저에서 감지함
e.stopPropagation()을 통해 이벤트 전파를 막을 수 있다.
- 비교 (차이점)
- 이벤트 전파 방향이 위/아래로 반대임
- 사례
- 버블링
- 캡쳐링
이벤트 위임 관련 사용 경험에 대하여 이야기해주세요. (target.closest)
답변
- 노션의 document를 추가/삭제 구현의 사례
- 상위요소에 걸어주면, 다른 하위요소의 클릭에도 추가,삭제가 일어날 텐데 어떻게 처리?
- target.closest: 자신포함 상위요소 중 원하는 selector 요소를 탐색하여 반환, 없다면 null
- 상위요소의 범위란? (부모 형제들 포함?
X)
(꼬리) currentTarget과 target의 차이점은 무엇인가요?
답변
- currentTaget은 이벤트 전파과정을 거쳐
이벤트가 등록 된 요소를 리턴한다.
- target은 해당
이벤트가 발생한 바로 그 요소를 리턴
(꼬리) 이벤트 전파를 막기 위한 방법은 ?
답변
답변
e.preventDefault()는 html 태그의 고유한 동작을 중단시키는 메소드- a태그의 페이지 이동, submit태그의 자동 input전송등 제한
e.stopPropagation()은 이벤트 발생 시, 자동으로 수행되는 이벤트 전파과정을 중단시키는 메소드- 이벤트버블링, 이벤트 캡쳐링 제한
e.stopImmediatePropagation()- 여러개의 동일 타입의 이벤트가 등록되어있을 때, 이후의 이벤트전파를 막아, 이후 이벤트핸들러 호출이 안되도록 한다.
커스텀 이벤트는 무엇이고 왜 사용할까요?
답변
new CustomEvent(’key’)생성자를 통해 새로운 이벤트를 생성
dispathEvent(’key’)를 통해 해당 이벤트를 실행시킬 수 있다.
addEventListener('key', ()=>do)를 통해, 이벤트를 감지하여 어떤 작업들을 진행할 수 있다.
- new CustomEvent(_)의 2번째 인자로 사용자 속성 값 지정가능
- { detail : { nextUrl : ‘/documentId ’}}
- 사용 사례
- route-change 커스텀 이벤트
- 라우트 변경 필요시 push 함수를 만들어 nextUrl을 인자로 넘기고, ‘route-change’ 이벤트를 dispath함
push(nextUrl)→dispatch(’route-change’)→window.eventListner캐치→history.pushState & onRoute 후속 처리 함수 실행
on 이벤트 등록과 addEventListner 방식의 차이 (링크)
답변
- on방식은 이벤트가 쉐도잉 처리 되기때문에, 마지막에 할당한 핸들러만 작동
- 쉐도잉은 on으로 등록된 이벤트만 처리되고, addEventListener는 정상 작동
- addEventListner는 등록된 모든 핸들러들이 작동됨
1-2. REST API
RESTful(API) 이 무엇인가요?
일반적인 설계규칙답변
REST API란 HTTP를 활용하여 데이터를 주고 받는 하나의 표준적인 API 패턴을 말하고,RESTFul하다는 것은 잘 설계된 API 패턴을 사용하여, API 메세지만 보고도 어떤 데이터 통신을 하는 것인지 누구나 쉽게 이해할 수 있는 상태를 의미합니다.
REST: Representational State Transfer- REST API의 일반적인 설계 규칙 2가지는
- URI는 정보의 자원(resourse)를 표현해야한다는 것
- 자원에 대한 행위는 HTTP Method로 표현하는 것
- 세부 규칙
자원(resouse)는명사로, 대문자보다소문자로 사용자원의 store는복수명사로 사용 (todos, documents)URI에는HTTP Method나동사표현이 들어가면안됨URI에서변수는 resourse를 나타내는고유값이어야 함- 기타
- 하이픈(-) 사용, 카멜케이스 사용 안함
- 마지막 문자 슬패시 안함
REST API의 장단점은 무엇인가요?
답변
- 장점
- HTTP 표준 프로토콜을 사용하므로, 모든 플랫폼에서 사용 가능 (태블릿, 핸드폰 , ... )
- 누구나 쉽게 의도하는 바를 파악 가능
- 소통비용, 설계비용 감소
- 데이터 기반의 접근 방식
/Books에서 GET이 가능하다면/Books에 POST도 가능하다고 가정 할수 있음.- 동사 기반 함수 사용시
GET listBooksByGenrePOST는 어디에?/BooksByGenre?,/Books?,/listBooks? - 따라서 데이터 중심 접근방식을 취하고 그래프를 데이터 중심의 계층 구조로 취급하는 것이 좋습니다.
- 단점
- 표준이 존재하지 않는 다는 것
- HTTP 메소드의 제한적인 속성
- 여러 resoure의 특정 부분을 빼내올 수 없다.(graphQL)
graphQL을 이용한 API 방식과 비교하여 REST API를 설명해주세요.
(링크)
답변
- REST API를 활용할 때, 항상 정의된 모든 데이터를 불러오기 때문에 불필요한 데이터를 가져온다는 문제 해결을 위해 graphQL 등장
- REST API가 가지는 문제점
- 새로운 기능 개발 시, server에서 새로운 API를 만들어야함 (server)
여러엔드포인트 - 불필요한 데이터를 가져온다는 문제 (client)
- 하나의 페이지에서 여러개의 API 요청을 하는 경우가 많아짐 (client)
여러엔드포인트
- GrapgQL의 해결방식
단일 엔드포인트과도한 데이터 요청(over-fetching)방지,- id와 이름만 필요한데 전체 프로필 불러옴
부족한 데이터 요청(under-fetching)방지- 하나의 페이지에서 여러번 API 요청
커스텀 쿼리 형식 사용(SDL)- JSON처리 된 응답 반환되어 다양한 client에서 사용가능
- GraphQl 단점/한계
- client-server 의존성
- 단점
1-3. HTTP / HTTPS
HTTP가 무엇인가요?
답변
HTTP는서버와 클라이언트가 데이터를 주고 받기위한기본적인 통신 규약입니다.비연결성과무상태성이라는 큰 특징을 가지고, 일반적으로80번포트를 통해 데이터를 주고 받습니다.
- 비연결성
- 한 번 데이터 교환 과정이후에 연결을 종료하는 특징
- 무상태성
- 연결이 종료되어, 이전 요청에 대한 상태를 기억할 수 없다는 특징
- 비연결성과 무상태성을 가지고 있어, 인증상태 정보등의 기억을 위해 쿠키,세션, 토큰등의 방법이 등장
모름HTTP 버전의 발전 과정을 설명해보세요. (ver 1.1 ,ver 2.0 ,ver 3)답변
1
HTTP 메소드와 status를 알고 있는만큼 말해주세요.
답변
- HTTP 메소드
GET: 리소스를 조회하고, 가져오는 역할 수행POST: 데이터 전송을 위한 메소드로, 생성을 위해 주로 사용PUT: 전체 데이터의 수정을 위해 사용- (PATCH) 요청데이터만 변경하고, 나머지는 유지하도록 하는 메소드
DELETE: 특정 데이터의 삭제HEAD:GET과 같지만, 메세지의 body를 받지 않는다.OPTIONS: 사용가능한 메소드 요청
- HTTP Status
- 200 (성공)
204: No Content요청 성공했는데, 돌려줄 리소스가 없을 때- 300 (리디렉트)
- 요청을 정상적으로 종료하기 위해 추가 처리가 필요함을 알림
301:검색엔진에 해당 컨텐츠의 URL이 영구적으로 변경되었음을 알림302:임시적으로 URL이 변경되었음을 알림- 400 (클라이언트 에러)
401 : Unauthorized: 인증에 실패함을 알림403 : Forbidden: 접근이 거부됨을 알림404 : Not found:해당 요청에 대한 리소스가 없음을 알림- 500 (서버에러)
503 Unavailable:현재 과부하 혹은 점검중으로 사용불가함을 알림
HTTPS는 왜 등장하게 되었나요?
HTTP 차이점답변
HTTPS는HTTP가 보안에 취약하다는 것을 해결하기 위해 등장하였으며,HTTP에SSL/TLS라는보안용 프로토콜을 조합한프로토콜입니다.
- HTTP 약점
- 평문이므로
도청가능 - 통신상대 확인하지 않으므로
위장가능 → 사용자 인척 - 완전성 증명할 수 없기 때문에
변조가능 → 메세지를 바꿈
- 1.도청 가능의 해결
통신암호화(SSL/TLS 프로토콜)컨텐츠암호화(메세지 body부분 암호화,복호화 코드를 client/server에 작성)
- 2.위장 가능의 해결
- 서버가 위장하는 문제 →
SSL프로토콜에서의 증명서를 통해 해결 - 클라이언트의 위장문제 → 클라이언트에게
증명서를 요구하여 해결
- 3.변조가능의 해결
문제: 정보의 위변조가 없는 정확한 상태임을 확인할 수 없는 문제- 발신된 리퀘스트가 수신된 리퀘스트와 같은지 알 수 없다. (
중간자공격) - HTTP에서는 어렵고 HTTPS의 SSL 방식에서의
완정성보호기능
공개키 암호화 방식과 공통키 암호화 방식의 차이를 알려주세요.
답변
- 공통키 암호의 딜레마
- 암호화한 데이터와, 그를 해석할 수 있는 키를 같이 보내야한다.
- 키도 탈취당할 수 있기 때문에, 데이터 암호화가 의미가 없어지는 딜레마 발생
암호화와 복호화에 같은 키를 사용하는 방식
- 공개키 암호화 방식 (비대칭키)
서로 다른 2개의 키쌍 (총4개)가 존재하며, 각각 비밀키와 공개키를 가진다.
HTTPS 암호화 과정에 대하여 말해주세요. (링크)
- keyword:
SSL,공개키암호화방식(비대칭키),공통키암호화방식,CA 증명서
답변
- HTTPS는 하이브리드 암호 시스템
SSL/TSL 프로토콜이 가지는 장점은 무엇인가요?
답변
SSL은 HTTP의 안정성을 더해주는 보안용 프로토콜이다.
- 클러이언트와 서버간의 안전한 통신로 확립
- 응용계층(HTTP) 전송계층(TCP) 사이에 존재한다.
- 특징
- 암호화: 도청되더라도 내용을 알 수 없도록 암호화
- 인증: 올바른 대상자인지 확인 절차
- 조작검사: 내용 조작이 있는지 체크