JS
클래스를 사용할때 클래스를 사용할 때 내부의 상태값을 숨겨두고, 외부에서 함수(메소드)만을 통해 상태를 업데이트하는 것. == 캡슐화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="counter.js"></script>
<script src="main.js"></script>
</head>
<body></body>
</html>이 상태에서는 js파일이 전역화되었기때문에 counter.js에 포함된 함수를 main.js에서도 실행할 수 있고, counter.js에 적혀진 변수의 값을
main.js에서 변경할 수 있다. 이러한 상황은 에러에 치명적이라 모듈을 사용하는 것이 현명하다.
자바스크립트파일별로 각각 캡슐화하는 것 == 모듈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="counter.js"></script>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>export default functionName()-> import functionName from '/pages/main.js';
export default는 메서드를 딱 하나만 가져오기때문에 import상에 이름을 바꿔줘도 상관이 없다.
export default functionName()-> import {functionName} from '/pages/main.js';
이름을 변경하고싶다면 as로 이름을 변경해줄 수 있다. ->
import { increase as increase1 } from './counter.js';
Firebase
firebase에서 기본적으로 제공해주는 함수가 뭔줄 알아야, 튜터님이 제공해준 코드들이 잘 이해갔을텐데.. 구별하기가 너무 어려웠다.
그래서 얽히고 얽힌 import와 export에 뚜드려맞고 파일을 갈아엎기 수번째... 시도하다가
결과적으로 구별을 쉽게할 수 있는 방법을 깨달았는데, 파이어베이스 공식홈페이지에 나와있는 문서를 통해 잘 대조해보며 분별하는 방법이다. 머리깨지도록 코드를 분석했더니 비동기부분만 좀 공부해보면 튜터님의 코드의 대부분이 이해갈 것 같은 경지에 도달했다..한줄알았는데 아니었음.
'내일배움캠프[4기_Reac트랙] > TIL' 카테고리의 다른 글
| 내일배움캠프 React트랙 19일차 회고 (2022.11.24) (1) | 2022.11.24 |
|---|---|
| 내일배움캠프 React트랙 18일차 회고 (2022.11.23) (1) | 2022.11.24 |
| 내일배움캠프 React트랙 16일차 회고 (2022.11.21) (1) | 2022.11.22 |
| 내일배움캠프 React트랙 15일차 회고 (2022.11.18) (0) | 2022.11.21 |
| 내일배움캠프 React트랙 14일차 회고 (2022.11.17) (1) | 2022.11.17 |
