190218 TIL 쪽지시험 && promise, fetch && 네트워크 (쿠키, 세션)

Feb 18, 2019 » 1막, TIL (Today I Learned)

쪽지시험

https://gist.github.com/developersoom/8e37bef9fac55235f9b4db902a4ad8fd

0218 쪽지시험

closure 와 스코프관계를 설명해보세요.

closure 정의 
함수 반환했을 때 변수 원래 접근할 수 없는데 계속 접근할 수 있는 상황이 생기는 것 
책의 내용을 줄줄 쓰는 것 보다는 개개인의 경험에 기반한 코드를 써주는 것이 좋음
   
클로져 현상으로 module 패턴을 활용하여 private && public 하게 활용할 수 있음 

prototype 의 동작방식에 대해서 설명해보세요.

자바스크립트 전체 구조가 Object로 이루어져 있다.
   
뭔가를 얘기할 때 이게 뭔지도 설명해야되지만 쓰면 뭐가 좋은 지 얘기해 주는 것도 필요함 (경험 기반!)
-> 메모리 효율성의 장점이 있다는 것을 언급 && 상속 흉내낼 수 있다. 
   
ES6 class는 결국 prototype을 쓴 것 
   
Function.prototype
Object.create 기억하기 
   
** 리액트 최신 버젼이 이제 class를 안 쓰고 있음.. 거의 function 으로만 구현. 함수형 프로그래밍 지향. hook method 활용. component. 

event delegation이 무엇인가요?

div > p > span 구조일 때,
   
p 내의 span이 여러개일 수 있다. 근데 만약 span에 addEventListener 여러개 달면 브라우져가 이벤트 모니터링을 하기 때문에 비효율적. 이럴 때 부모에 걸 수 있음.
   
보통은 버블링 많이 사용.
addEventListenr의 기본값이 false..?? 
   
이벤트 객체에서는 클릭 지점을 알 수 있음 event.target. so, event.target.tagName 이 span, p인지 판별하여 활용할 수 있음. 
   
document에 event 걸어서 모든 이벤트를 document에 걸어놔도 한번만 됨ㅋ
   
버블링 & 캡쳐링 현상이 왜 나왔고, 우리가 이걸 활용해서 이벤트 델리게이션을 어떻게 쓸 수 있는지를 설명할 수 있어야함
   
이벤트 전파를 막는 방법도 알아보세요.

비동기가 연속되어 있는 경우에 어떤방식으로 처리하세요?

비동기는 JS의 핵심! 
   
비동기 제어: promise 패턴 공부, async & await 알아두세여.

본인이 하는 JavaScript 디버깅방법에 대해서 설명해보세요.

console.log는 쓰지 마세요 
소스 코드의 수정 없이 쓰는 게 가장 좋습니다. 
   
크롬 개발자 도구의 break point를 걸 수 있는 여러 방법들이 있습니닷
Ajax 갈 때도 멈추게 할 수 있고... 콜스택을 이용해서 추적해 나갈수도 있음. 
이미 배포된 소스에 대해 디버깅할때도 이렇게 하면 됨.
   
크롬 developer 이런거 구독해서 최신 내용을 follow up 하세요.
디버깅은 넘나 중요합니다!! 

계속 돌아가는 캐로셀UI의 구현 원리에 대해서 설명해보세요.
```
뭐.. 
좋습니다. (생략)
```
getElmentById , getElementsByClassName 메서드 중 어떤 것이 더 빠를까요? 그 이유는?
```
ID가 감지되면 바로 탐색을 멈추기 때문에 빠름.
유일무이한건 아님ㅋ
```
NodeList의 결과를 Array에 있는 reduce메서드를 사용할 수 있나요? 방법은?
```
Array.from 이나 spread operator 사용
```

Event 객체에 대해서 설명해보세요.

이벤트가 발생했을 때 생기는 객체
이벤트 핸들러에 들어오는 정보값이 이벤트 객체임
   
target ...
   
event 객체에 모든 정보가 들어있음. 
어떤 element가 클릭됐는지
   

Ajax요청시 크로스 도메인 문제를 어떻게 해결할 수 있나요?

Ajax를 이해하고 크로스 도메인을 이해하는 것이 좋음
실무에선 하나의 도메인으로 작업을 안함..
js는 도메인이 다르면 통신이 안됨(웹이 강력하게 막아둠)
    
JSP은 비표준인데 자주 쓰임
CORS를 알아두세여. 근데 이거 굉장히 어려움... 어떠한 조건에서 사전 요청을 먼저 보내는 경우가 있음. HTTPmethod 중에 option 이라는 게 있음.(서버에 미리 다녀옴. 사전 점검) 고거까지 이해하고 있으면 어떠한 경우에 freeflight?? 이 생기느냐... 까지 이해하면 실무까지 커버하는 레벨!
    
먼저 보안을 공부하세요!! 왜 보안적인 문제가 있는지... 웹의 특성.. 

iteration protocol에 대해서 설명해보세요.

native에 iteration protocol 있는 거 뭔지 알고 계셈 
iterator protocol, iterable protocol 구분
    
함수형 프로그램의 지연실행까지 설명할 수 있으면 아주 좋습니다. 

script 태그안에 defer나, async 속성에 대해서 설명해보세요.

main page 뒤에 바로 나오는 것 
html와 js가 원래 직렬로 하나씩 처리됨
DOM을 막지 않는 것이 중요함!!! 화면을 그릴 수 있게 DOM 부터 빨리 만드는 게 중요. 
js 다운 받느라 DOM 못 그리면 망하는 것 so js 실행을 미뤄야함 -> 그래서 body 태그 닫히기 직전에 script 넣
    
defer나 async를 header에 두면 이 문제 해결됨
async는 병렬로 처리가능
but 이 경우에 js에서 dom 활용하면 오류 뜰수도 있음 
    
1. DOM Tree 만드는거
2. 어떤 경우에 script가 DOM 로딩 방해하는지
3. 어떠한 경우에 초기 로딩속도가 느려지는 지
    
공부해보세욥 

웹사이트의 초기 로딩속도를 더 빠르게 하기 위해서 무엇을 해야 할까요?

file merge
js 파일을 비슷한 거끼리 grouping 하여 배포 (HTTPrequest횟수 줄이기)
난독화 (도구가 해줍니다.)
    
HTTP tool을 쓰면 뭐가 좋아여? 
- 병렬로 처리함
- 성능 개선 

SET과 Array 자료구조의 차이점은 무엇인가요?

객체를 쓸거면 특별한 이유가 아니면 map을 써보시고
배열을 쓸거면 set을 써보세여
    
그래야 써볼 수 있는 경험이 생김 
    
Set이 Hash table기반으로 생긴거라서 유니크함. 이런걸 같이 공부하시면 좋아욥  
    
Set의 add같은 메소드들도 알아두세여. for-of으로도 돌릴 수 있음

커링으로 동작하는 코드를 간단하게 보여주세요.

커링은 메소드 체이닝과는 다른거에여 
    
partial application
부분적으로 어떤 인자값을 가지고 있는 함수를 만드는 거에여
    
커링은 사실 A+B를 통해 완성된 것을 만드는 거에여... 여러 조합이 있을 수 있음... (뭔말임..)
부분부분해서 합치는 것..
    
function의 bind가 사실 커링임
커링은 함수를 반환하는 함수를 반환하는 함수를 만들 수 있다..? 
    
dynamic하게 뭔가 완성할 때 쓸 수 있다... 
    
몰라도~~ 됩니다~ 지금은~~~ 

최근 가장 깊게 공부하고 있는 부분은 무엇인가요? 그 부분에 대해서 간단하게 설명해보세요.

하나를 깊게 잘하는 모습이 중요합니닷...
실무에서도 뭔가 깊이있게 학습하는 사람을 원합니다. 이런 사람이 품질좋은 어플리케이션을 만들 수 있다고 믿기 때문에...

브라우저 호환성 이슈가 있는 최신의 native method를 어떻게 실제 서비스에서 사용할 수 있나요?

IE, opera, firefox, safari 같은데서 파일을 띄워보세요.
오류 확인해보시고~ 각 브라우져의 디버거 프로그램도 써보세욥.
    
경험차원에서 그런 시도 자체도 좋음 
    
요새는 Edge 기준으로 많이 작업합니다. 
    
폴리필 원리 많이 알아두세요. 폴리필의 장점도 알아두세여. 폴리필 라이브러리를 뻈는데 원소스를 수정안해도 됩니다. 
Barbel 연동을 꼭 해서 경험도 해보세여

fetch API

keywords

POST 요청
Content- type
URL Routing
Response
Status : 200, 302, 404, 501
error 처리

요청을 network 보낼때 GET, POST 이용

POST 요청: 댓글, 글쓰기, 로그인

POST로 데이터를 보낸다? 어떻게 보낼 수 있을까? contents.type?? 폼 전송..??

사용자가 입력한 데이터를 서버로 보낼 수 있어야된다.

서버에서 받은 데이터를 parsing할 수 있어야한다. key:value형태건 뭐건..

구분자를 둬서 데이터를 파싱할 수 있게 형태를 보내줘야됨.

기본적으로 폼이 있음. ex. input box (-> key: value, ID: dddd)

폼 전송 -> URL 인코딩하여 서버로 날라감 -> 컨텐츠 타입을 보고 HTTP 표준에 맞게 파싱함

서버는 컨텐츠 타입부터 분석함. JSON 이네? JSON으로 분석해

웹에서 자원의 기본은 무조건 URL임. 서버에서는 URL기준으로 라우팅함(URL을 파싱). URL은 고유한 키값.

같은 URL인데 GET과 POST로 날라옴.

REST API..

네트워크 핵심은 에러처리!

catch를 통해서 오류처리를 잘해야함

에러가 어려운 이유는 비동기 때문일수도

서버가 주는 400 에러

fetch API의 error handling을 공부하세여

네트워크는 예상 불가한 일이 많기 때문에 error 처리를 잘해야함. side effect 관리.

폼이 submit 되면 (ex. 회원가입후 화면 하얘짐) 서버에서 HTML templating 해서 보내줌

네트워크

authentication(인증) / authorization (권한)

<세션 기반의 인증>

- HTML header안에 쿠키가 있음. cookie~ 서버와 클라이언트 간 데이터 주고받을 때 쿠키안의 정보 활용할 수 있음 

  기록한 것을 쿠키에 넣어서 브라우져가 계속 갖고 댕김. httpRequest에도 쿠키가 따라감 (비밀번호 같은 보안의 문제가 있을 수 있음 ! ) 

  기록 = 고유한 세션ID

- TLS (old = SSL) 로 암호화 

- HTTPS 는 구간의 대해 전부 암호화 

- 쿠키 들여다 보려면 application tab - cookie

- XSS공격

- 세션아이디 저장은 어디에? DB 에… 

- 세션아이디 만료일 있음. timeout 값 설정해둠 - 유효한지 아닌지 확인해야함 

- Http = stateless (상태를 기억 안함 / 서버입장)

- 세션은 상태를 보관해야하므로 데이터를 기억하기 때문에 굉장히 안 좋은것. (stateful)

- 쿠키에 정보를 담는 것은 없는 방식이라고 생각하세요!!!!!!!! 

- 모든 요청에 따라 세션 정보를 파악해줘야함(session validation)

- 요새 stateless의 인증방법이 나오고 있음. 세션을 서버에서 기억하지 않는 방식 !  <- SPA덕분에 생길 수 있음 (single-page-application) 

— 토큰이라는 것이 있음….

— API 요청을 할 때 토큰을 줌.. 서버는 그 토큰을 인증하는데, hash 방식으로 인증함(전자…인증?)

— 토큰은 서버에서 만드는데, 이때 개인키를 줌. 그 키가 맞아야 인증해쥼…. 

— 토큰을 훔쳐다 쓸 수 있나…?ㅎ… (취약점) 그럼 토큰을 어디에 저장? 쿠키에다가 저장할 수도 있고, local storage에 할 수도 있음 

— 재사용 못하게 하려면 토큰 유효기간을 짧게하면 됨….