[TIL] 내일배움캠프 React 과정 2024.04.17

김형빈·2024년 4월 17일

TIL 내일배움캠프

내일배움캠프

목록 보기

2/81

오늘 한 일

웹 개발 강의 4주차
웹 개발 강의 5주차
CS 핵심 쏙쏙 1주차

오늘의 강의 정리

CS 1강 (CPU와 메모리)

오늘의 문제 해결

웹 개발 강의 4주차를 듣기 시작하면서 firebase를 적용하였다. firebase를 적용하기 위해서는 다음과 같은 코드를 변경해야했다.

<script type="module">

위 코드를 적용하면서 onclick과 같은 동작을 동적인 코드로 바꾸어야 했고, 그래서 type="module"의 역할이 궁금해졌다.

모듈이란?

한 개의 파일

모듈의 핵심 기능

엄격 모드(use strict)로 실행된다.

	<script type="module">
 		a = 5; // 에러
	</script>

모듈은 자신만의 스코프를 갖는다.

	<script type="module">
  		// user는 해당 모듈 안에서만 접근 가능합니다.
  		let user = "John";
	</script>

	<script type="module">
 	 	alert(user); // Error: user is not defined
	</script>

모듈의 브라우저 특정 기능

지연 실행

모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML 문서가 완전히 만들어진 이후에 실행된다.
스크립트 상대적 순서가 유지된다. 문서상 위쪽의 스크립트부터 차례로 실행된다.

		<script type="module">
 			alert(typeof button); // 모듈 스크립트는 지연 실행되기 때문에 페이지가 모두 로드되고 난 다음에 alert 함수가 실행되므로
 			// 얼럿창에 object가 정상적으로 출력된다. 모듈 스크립트는 아래쪽의 button 요소를 '볼 수' 있다.
		</script>

		<script>
 			alert(typeof button); // 일반 스크립트는 페이지가 완전히 구성되기 전이라도 바로 실행된다.
 			// 버튼 요소가 페이지에 만들어지기 전에 접근하였기 때문에 undefined가 출력되는 것을 확인할 수 있다.
		</script>

인라인 모듈 스크립트도 비동기 처리할 수 있다.

모듈 스크립트에선 async 속성을 인라인 스크립트에도 적용할 수 있다.

			<!-- 필요한 모듈(analytics.js)의 로드가 끝나면 -->
			<!-- 문서나 다른 <script>가 로드되길 기다리지 않고 바로 실행된다.-->
			<script async type="module">
				import {counter} from './analytics.js';

				counter.count();
			</script>

외부 오리진(도메인이나 프로토콜, 포트가 다른 오리진)에서 스크립트를 불러오려면 CORS 헤더가 있어야 한다.

		<!-- another-site.com이 Access-Control-Allow-Origin을 지원해야만 외부 모듈을 불러올 수 있다.-->
		<!-- 그렇지 않으면 스크립트는 실행되지 않는다.-->
		<script type="module" src="http://another-site.com/their.js"></script>

중복된 외부 스크립트는 무시된다.

src 속성값이 동일한 외부 스크립트는 한 번만 실행된다.

			<!-- my.js는 한 번만 로드 및 실행된다. -->
			<script type="module" src="my.js"></script>
			<script type="module" src="my.js"></script>

type="module" 없이 firebase를 사용한다면?

<head>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
  
  <script>
      const firebaseConfig = {
        본인 설정 내용 채우기
      };
    
      firebase.initializeApp(firebaseConfig);
  </script>
</head>

문제점

firebase의 데이터는 비동기로 받는다.
- 결과값을 받기 전에 내부 소스코드가 작동되어 필요한 데이터가 들어오지 않을 수 있다.

해결 방법

<script>에 defer 속성을 넣는다
<body> 태그의 마지막에 <script>를 넣는다.
<script type="module">을 활용한다.

type="module"을 적용한 코드

<head>
  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
    import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
    import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
    import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


    const firebaseConfig = {
        본인 설정 내용 채우기 
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);
  </script>
</head>

장점

높은 안정성과 보안성
- 자바스크립트 라이브러리를 사용한다는 것을 알 수 있다.
- 하나의 파일에 관리하기 때문에 유지 및 보안에 유리하다.
지연 실행
- 비동기로 데이터를 호출하는 문제를 해결할 수 있다.

단점

모듈 레벨 스코프
- 모듈은 자신만의 소코프가 존재하기 때문에 동적으로 함수를 작성해야 한다.

참조: https://ko.javascript.info/modules-intro

오늘의 느낀 점

오늘은 웹개발 종합반 강의를 마무리 하고 CS 핵심쏙쏙 강의를 듣기 시작했다. 웹개발 종합반 강의에서 type="module"을 사용하여 firebase를 사용하는 이유가 궁금했는데 생각보다 다른 방식과의 차이점을 찾는게 생각보다 어려웠다. 인터넷으로 찾아보고, 튜터님께도 물어봐서 라이브러리를 사용하는데에 있어 type="module"을 사용하는 장점을 겨우 이해할 수 있었다. CS 핵심쏙쏙 강의는 이론만 듣는 강의다 보니 조금 더 졸린 감이 있었다... 그래도 면접에서 CS 역시 중요한 질문으로 나올 수 있는만큼 더욱 집중해서 듣도록 노력해보자!