어린이 핀테크 앱

토이프로젝트 중 input 값을 가져오기 위해 onChange를 사용했는데 onChange 말고 다른 방법이 무엇이 있는지

onKeyPress - 특정 키를 눌렀을때 이벤트로 적합하다
onInput - input에 값이 변경될 때마다 onInput 이벤트가 발생

구현 중 문제가 input값이 업데이트 될때마다 업데이트 되어 text를 쓰는 과정에서 서버를 계속 불러오고는 성능적으로 좋지않은 효과가 발생

해결방법

1. input값을 가져오는 state를 useEffect의 조건 배열에 넣었는데 이걸 빼고 다른걸로 대처한다 (최종 input값을 따로 상태를 만들어 저장)
2. 입려고가 동시에 업데이트 되지 않고, 최종 입력값만 가지고 활용해본다
   enter 키 또는 등록 클릭시 최종 입력된 input값만 가지고 활용해본다

id 와 class 차이

불러오는 방식

id - #
calss - .

중복 사용

id - 불가능
class - 가능

클래스는 한 요소에 여러개의 클래스명이 적용될 수 있다
id는 한 요소에 아이디만 적용이 가능하다

CORS 란 ?

Cross-Origin Resource Sharing

• 서버가 허용한 클라이언트의 요청에게만 응답 하기위한 방법

• 다른 출처간에 리소스를 공유할 수 있도록 하는 것

서로 다른 출처끼리 정보요청과 반환이 가능하도록 하는게 CORS 다

Session 이란 ?

서버와 클라이언트간 연결이 활셩화 된 상태

• 쿠키는 클라이언트에 정보를 저장
• 세션은 서버에 정보를 저장, 그 데이터에 대한 ID만 암호화된 상태로 쿠키에 부여한다

Session 전달과정

즉, 세션도 결국은 쿠키에 유저 정보를 담아준다

세션인증 방식은 클라이언트에 인증정보를 저장하지 않고, 클라이언트 마다 id를 쿠키에 담아서 클라이언트에 전송을 해준다

즉, 클라이언트의 중요한 정보는 서버에서 관리하게 된다
하지만 세션도 하나의 서버에서만 접속상태를 가지기 때문에 분산을 하기에는 분리하다

Session 단점

• 세션은 서버의 메모리에 세션정보를 저장하고 있다 즉, 서버의 성능이 안좋아지는 결과가 발생
• 세션 역시 쿠키를 사용하고 있기 때무에 쿠키의 한계를 그대로 가지고 있다
  (XSS 공격 등, 세션 id 정보가 담긴 쿠키가 탈취 된다면 개인정보가 유출될 위험이 있다)

Session 과 Token 차이

Token 장점
토큰은 분산환경에 유리하다
만약 서버가 여러대라면 서비스가 수평적으로 확장을 했거나 로드밸런싱이 필요한 경우에는 여러개의 서버에서도 토큰만 있으면 인증이 될 수 있게 해주기 때문에 분산환경에 유리하다

Session 단점
서버에 부담이 많이 간다
만약 사용자가 많이 늘어나게 되면, 더 많은 트레픽을 처리 하기위해 서버를 여러개로 확장하게 되는 경우가 발행하면 세션은 서버에서만 인증해야 되므로, 다른 확장된 새로운 서버에서는 인증을 하지 못하는 경우가 발생한다

Cookie 란 ?

어떤 웹사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터

• 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단
• 해당 도메인에 대해 쿠키가 존재하면, 웹 브라으저는 도메인에게 http 요청 시 쿠키를 함께 전달

쿠키는 삭제하지 않으면 사라지지 않는 특성이 있다
장기간 저장해야 하는 옵션을 클라이언트에 저장하기에 적합하다

쿠키는 <script> 태크로 접근 가능하여 xss 공격에 취약하다(민감한 정보나 개인정보는 담지 않는 것이 좋다)

쿠키는 서버에서 클라이언트에 데이터를 저장하는 방법의 하나다
그러므로 서버가 원한다면 서버는 클라이언트에서 쿠키를 이용하여 데이터를 가져올 수 있다

• 서버는 쿠키를 이용하여 데이터를 저장하고 원할 때 이 데이터를 다시 불러와 사용할 수 있다
• 데이터를 저장한 이후 아무 때나 데이터를 가져올 수 없다
• 특정 조건들이 만족하는 경우에만 다시 가져올 수 있다

filter, map, reduce 무엇인지

map - 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드

filter - 배열 각 요소에 대하여 주어진 함수의 결괏값이 true인 요소를 모아 새로운 배열을 반환하는 메서드

reduce - 배열 각 요소에 대하여 reducer 함수를 실행하고, map과 filter와 달리 배열이 아닌 하나의 결괏값을 반환한다

==, === 차이

==는 Equal Operator이고, ===는 Strict Equal Operator이다

==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.)

===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다.

===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

undefined와 null 의 차이

undefined - 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태이다. 타입을 확인해 보면 'undefined' 이다
null - 변수를 선언하고 'null'이라는 빈 값을 할당한 경우이다. 타입을 확인해 보면 'object' 이다

undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다
즉, undefined는 자료형이 없는 상태이다
따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다

undefined

원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다
이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다, 따라서 undefined 변수의 초기 값은 undefined 원시 값이다

• 값을 할당하지 않은 변수
• 메서드와 선언에서 변수가 할당받지 않은 경우
• 함수가 값을 return 하지 않았을 때

null

원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다
undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다

• typeof undefined는 출력하면 undefined이다.
• typeof null은 출력하면 object이다. 하지만 이는 여전히 원시 타입(primitive value)로, JavaScript에서는 구현 버그로 간주한다.
• undefined == null은 true이다 (느슨한 동등연산자는 type을 비교하지 않으므로 true로 나온다)