[add]09.30

기록/09.30.md

@@ -0,0 +1,105 @@
+# 리액트 심화
+
+## 객체
++ 객체는 {}안에 key:value 형태로 구성된다.
+
++ {}안에는 여러 쌍의 프로퍼티를 넣을 수 있고, 여러 타입의 데이터를 넣을 수 있다.
+
++ key는 무조건 문자형이다.
++ value에는 모든 자료형이 들어갈 수 있다.
+
+### const로 선언된 객체  
+
+>const로 선언된 값은 재할당 할 수 없다.
+>
+>***but,*** const로 선언된 ***객체***는 재할당 할 수 있다!
+>
+>객체의 프로퍼티는 보호되지 않아서 변경이 가능하다
+
+### 함수
+
+>😎함수도 객체이며 JS에선 함수를 특별한 값(?) 취급을 한다.
+>
+>JS는 ()가 있음연 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력한다.
+>
+>이를 응용하면 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있다.
+>return 값은 기본적으로 undefined를 반환한다.
+
++ 함수 표현식에서 this는 그 함수 자체
+
++ 화살표 함수의 this는 부모를 불러온다
+* 내부변수가 외부변수보다 우선 순위가 높다
+
+### 콜백함수
+
+**함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 한다.**
+
+
+---
+
+## promise
+콜백 헬을 해결하기 위한 방법
+
++ 비동기 연산이 종료된 이후에 결과를 알기 위해 사용하는 객체
++ 프로미스는 생성자 함수를 가지고 만든다 (new)
++ 비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용한다.
+
+```
+const promise = new promise((resolve, reject) => {
+    if(...){
+        ...
+        resolve("성공!");
+    }
+    else{
+        ...
+        reject("실패!");
+    }
+});
+```
+- pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
+- fulfilled: 수행 성공(resolve가 호출된 상태)
+- rejected: 수행 실패(reject가 호출된 상태)
+- settled: 성공 or 실패(resolve나 reject가 호출된 상태)
+
+---
+
+### async, await
+
+promise를 더 편히 쓰게 해주는 키워드
+
+
+---
+
+### 세션 스토리지
+
++ HTML5에서 추가된 저장소. key:value 형태의 저장소
++ 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거가 된다. 
++ 따라서 유지해야되는 데이터들(장바구나, 자동로그인)을 넣기엔 어렵다.
+
+![](https://images.velog.io/images/2_juzzang/post/0c6dae0b-0869-4ea7-bddc-b7b6370599a8/%EC%8B%AC%ED%99%94%202%20%EC%84%B8%EC%85%98%20%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80.PNG)
+
+
+---
+
+### 로컬 스토리지
+
++ 따로 지워주지 않는다면 브라우저를 닫아도 데이터가 제거되지 않는다.
++ 중요한 정보는 넣지 않는게 좋다.
++ 쿠키와 마찬가지로 key : value 형태의 저장소이다.
+
+![](https://images.velog.io/images/2_juzzang/post/aff4e7a2-0bbe-4b4e-906d-c33dbc5aacd9/%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80.PNG)
+
+---
+
+### 그렇다면 토큰은 어디에 저장하면 좋을까?
+
++ 프로젝트의 성향에 맞춰 저장 장소는 그때그때 달라져야 한다.
+
++ 각각 장단점이 있기 때문에 쿠키에 저장하는 경우도, 로컬 스토리지에 저장하는 경우도 있다. 
+
+
+
+---
+## 오늘의 TMI
++ 강의 듣다가 잡생각이 들면 바로 일시정지 눌러라~~~~~!
++