[사전캠프 5주차] Github으로 배포하기

다시 정리, type="module"이 붙는 순간 onclik 작동 안함.

 

이유?

• 모듈은 엄격 모드(strict mode)로 실행: type="module"을 지정하면 스크립트는 자동으로 엄격 모드(strict mode)로 실행됨. 엄격 모드에서는 변수 선언 없이 변수를 사용할 수 없으며, 암시적인 글로벌 변수 선언이 제한됨. .
• 모듈 스코프: 일반적으로 type="module"을 사용하면, 그 스크립트 파일 내의 변수와 함수는 전역 범위(global scope)에 추가되지 않고, 그 모듈 안에서만 유효한 모듈 범위(module scope)에 갇힘. 예를 들어, HTML에서 <button onclick="myFunction()">과 같이 정의했을 때, myFunction은 전역 범위에 있어야 하는데, 모듈 스크립트 안에 정의되면 전역 범위에 노출되지 않기 때문에 버튼 클릭 시 함수가 인식되지 않음.

 

      $(document).ready(function () {
        let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let temp = data["temp"];
            $("#tem").text(temp);
          });
      });

<script type="module">을 사용하면 $(document).ready(function ()를  사용할 필요가 없음.

원래는 다 로딩이 되면 위 함수를 실행하라는 의미로, ready를 사용했지만, type을 module로 바꾸면서 HTMl문서를 모두 파싱한 후 스크립트를 실행함.

 

<script type="module">로 로드된 스크립트는 자동으로 defer 속성을 가진 것처럼 동작 

defer는 브라우저가 HTML 문서를 모두 파싱한 후 스크립트를 실행하게 해줌.

즉, DOM이 준비된 후에 모듈 스크립트가 실행.

 

반면, <script> 태그의 기본 동작은 HTML을 파싱하는 도중에 스크립트를 동기적으로 실행. 이를 방지하기 위해 일반적으로 jQuery에서 $(document).ready(function () {...})를 사용해 DOM이 완전히 준비된 후에 코드를 실행하는 방식을 사용.

 

---

  $("#save-btn").click(async function () {
    let image = $("#image").val();
    let comment = $("#comment").val();
    let title = $("#title").val();
    let star = $("#star").val(); //select 태그에서 value 가져오면, 선택된 해당 option의 value값을 가져옴.

    let doc = {
      image: image,
      comment: comment,
      title: title,
      star: star,
    };

    await addDoc(collection(db, "movies"), doc);
    alert("기록 완료");
    window.location.reload();
  });

  let docs = await getDocs(collection(db, "movies"));
  docs.forEach((doc) => {
    let row = doc.data();

    let image = row["image"];
    let comment = row["comment"];
    let title = row["title"];
    let star = row["star"];

    let real_star = "⭐";
    let temp_html = `
      <div class="col">
      <div class="card">
        <img
          src="${image}"
          class="card-img-top"
          alt="..."
        />
        <div class="card-body">
          <h5 class="card-title">${title}</h5>
          <p class="card-text">${real_star.repeat(star)}</p>
          <p class="card-text">${comment}</p>
        </div>
      </div>
    </div>
    `;
    //별 이모지를 해당 option 값만큼 곱해서 표현하고 싶었는데, 파이썬처럼 문자열 곱하는 방식이 지원되지 않는 것 같음.
    // 그래서 repeat() 매서드를 사용해서, 문자열을 반복해서 표시할 수 있었음.

    $("#cards_will_be_appended").append(temp_html);
  });

 

 

복습:

 

addDoc(collection(db, "컬랙션 이름"), 객체 변수) : 컬랙션 안에 데이터 추가하기

getDocs(db,"컬랙션 이름"): 해당 컬랙션에서 데이터 가져오기

---

HTTP/HTTPS: 웹에서 데이터를 주고받기 위한 프로토콜

 

HTTP와 HTTPS의 주요 차이점

	HTTP	HTTPS
보안성	평문 전송 (암호화 없음)	암호화된 데이터 전송 (SSL/TLS 사용)
포트 번호	기본적으로 포트 80 사용	기본적으로 포트 443 사용
속도	빠름 (암호화 작업 없음)	조금 느림 (암호화 및 SSL 핸드셰이크 필요)
인증서	필요 없음	SSL 인증서 필요
데이터 보호	데이터 가로챔에 취약	데이터 보호 (중간자 공격 및 도청 방지)

 

 

• 보안: 개인 정보나 금융 정보 같은 민감한 데이터를 보호하기 위해 HTTPS가 필수. HTTP는 암호화되지 않기 때문에 보안성이 매우 떨어짐.
• 신뢰성: HTTPS는 SSL 인증서를 통해 웹사이트의 신뢰성을 보장. 사용자는 이 웹사이트가 가짜가 아니라 신뢰할 수 있는 서버임을 알 수 있음.
• SEO: 검색 엔진(예: 구글)은 HTTPS를 사용하는 웹사이트를 더 우선적으로 노출.

 

참고로,

SEO (Search Engine Optimization)

SEO는 웹사이트가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지하도록 최적화하는 방법.

 

검색 엔진(구글, 네이버, 빙 등)은 사용자들이 입력한 키워드에 가장 적합한 결과를 보여주기 위해 복잡한 알고리즘을 사용. SEO는 이러한 알고리즘을 이해하고, 웹사이트를 그에 맞게 최적화하는 과정.

 

 

 

SEO의 주요 요소는 크게 세가지임.

1. 온페이지 SEO(On-Page SEO):
   • 웹사이트 내부의 콘텐츠와 구조를 최적화하는 작업
   • 주요 전략:
     • 키워드 최적화: 사용자가 자주 검색하는 키워드를 조사하고, 이 키워드를 웹사이트의 제목, 본문, 메타 태그, 이미지 설명 등에 자연스럽게 포함시킵니다. 
       • HTML에서 title을 신경 써주어야하는 이유!! 어플리케이션과 제일 관련있는 제목으로 넣어줘야함.
       • 요즘은 검색엔진이 body 내부까지 검사해서, h1 태그 확인을 많이 함. 
     • 콘텐츠 품질: 고품질, 유용한 콘텐츠를 제공하여 사용자의 체류 시간을 늘리고, 검색 엔진의 신뢰얻기.
     • URL 구조: 검색 엔진이 페이지를 쉽게 이해할 수 있도록 간결하고 명확한 URL을 사용하는 것이 중요.
     • 모바일 최적화: 모바일 기기에서도 잘 보이고 빠르게 로드되도록 웹사이트를 설계해야함.
2. 오프페이지 SEO(Off-Page SEO):
   • 웹사이트 외부에서 이루어지는 SEO 작업으로, 주로 백링크를 통한 권위 증대가 중요.
   • 주요 전략:
     • 백링크: 다른 신뢰할 수 있는 웹사이트에서 자신의 웹사이트로 링크를 걸어주는 것. 백링크가 많고 품질이 좋을수록 검색 엔진에서 높은 신뢰도를 부여받음.
     • 소셜 미디어 활동: 소셜 미디어에서 웹사이트 링크를 공유하거나 브랜드 인지도를 높이는 활동도 중요한 오프페이지 SEO 전략.
3. 기술적 SEO(Technical SEO):
   • 웹사이트의 코드 및 서버 관련 최적화 작업.
   • 주요 전략:
     • 사이트 속도: 페이지 로딩 속도가 빠를수록 검색 엔진에서 더 높은 점수를 얻을 수 있음.
     • 사이트맵 제출: 검색 엔진에 웹사이트의 사이트맵(XML)을 제출하여 더 효율적으로 크롤링되도록 함.
       • XML은 데이터를 구조화하고 저장하는 데 사용하는 마크업 언어. HTML처럼 태그로 데이터를 감싸서 구조화하지만, HTML은 주로 웹 페이지의 디자인과 구성에 초점을 맞추는 반면, XML은 데이터를 효율적으로 전송하고 저장하는 데 초점이 맞춰져 있음.
       • 크롤링은 검색 엔진(예: 구글, 네이버)의 웹 크롤러(또는 스파이더)가 웹사이트의 페이지를 자동으로 탐색하고 데이터를 수집하는 과정. 웹 크롤러는 웹사이트에서 페이지 링크를 따라가면서 페이지의 콘텐츠, 구조, 메타데이터 등을 분석함.
       • 크롤링의 작동 방식:
         1. 웹 크롤러가 사이트를 방문: 검색 엔진의 웹 크롤러(구글의 경우 Googlebot)가 웹사이트의 첫 페이지(홈페이지)를 방문.
         2. 페이지 분석 및 인덱싱: 크롤러는 해당 페이지의 콘텐츠를 읽고 분석. 이 과정에서 텍스트, 이미지, 메타태그(제목, 설명) 등 여러 요소를 파악해 데이터베이스에 저장(인덱싱).
         3. 링크를 따라 탐색: 그 페이지에서 발견된 링크를 따라 웹사이트의 다른 페이지를 방문하여 같은 과정을 반복. 이를 통해 사이트 전체를 크롤링하게 됨.
     • SSL/TLS 인증서 사용: HTTPS를 통해 보안 연결을 제공하는 것은 SEO 점수에 긍정적인 영향을 줌.
       • 암호화 프로토콜: TLS는 SSL보다 더 강력한 암호화 알고리즘을 사용하여 데이터를 보호. 최신 TLS 버전은 AES(Advanced Encryption Standard)와 같은 강력한 암호화 알고리즘을 적용.

---

<추가적인 내용> 

 

1) 페이지 검사(개발자 도구) 안에 들어가서 display:flex; 이용 시 옆에 뜨는 타일모양 flex 아이콘 누르면 페이지에 바로 적용되어서 보여짐. 거기서 코드 긁어와서 쓰면됨.

---

2) hidden 처리시 display: none;말고

(ex) document.getElementById("random-number").style.visibility = "hidden"

이런 식으로 visibility 사용해도 됨.

 

정리하자면, display: none 과 visibility: hidden 모두 요소를 안보이게 하는 방법들임.

하지만, 차이가 있음!!!

 

1. display: none;

• 동작 방식: 요소를 화면에서 완전히 제거. 요소가 DOM(Document Object Model)에 존재하지만, 공간을 차지하지 않고 렌더링되지 않음.
• 공간 차지 여부: 해당 요소는 공간을 차지하지 않으며, 다른 요소들이 그 자리를 차지하게 됨.
• 포인터 및 이벤트: 요소가 완전히 사라지기 때문에, 해당 요소에 이벤트나 포인터가 작동하지 않음.

특성:

• 화면에 아예 보이지 않고, 해당 요소가 없어진 것처럼 작동.
• 레이아웃에 영향을 미침. 즉, 해당 요소가 차지하던 자리는 없어지고, 그 자리에 다른 요소들이 자리잡음.

2. visibility: hidden;

• 동작 방식: 요소를 안 보이게 하지만, 요소가 여전히 DOM 상에서 공간을 차지.
• 공간 차지 여부: 요소가 보이지 않지만 여전히 그 자리에 공간을 차지하고 있음. 요소가 원래 자리에 그대로 남아있으며, 다른 요소들이 그 자리를 침범하지 않음.
• 포인터 및 이벤트: 요소는 보이지 않지만 여전히 이벤트 핸들러가 작동할 수 있음. 예를 들어, click 이벤트나 cursor: poitner 등은 여전히 해당 요소에서 발생할 수 있음.

특성:

• 화면에는 안 보이지만, 요소가 차지하던 공간은 그대로 남아있습니다.
• 레이아웃에는 영향을 주지 않으며, 요소의 공간을 유지한 채로 보이지 않게 처리됨.

---

3) Foreach(리턴 값 없이 순회만함), map(새로운 어레이 리턴)

 

---

배포란?

소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정.

코드 작성부터 테스트, 실행 파일로 변환하여 인터넷에 공개하고 업데이트하는 과정.

(만든 작업물을 외부에 공개하는 일로, 모든 사람들이 링크로 내가 내놓은 서비스를 볼 수 있음. )

---

Github(공용 저장소 제공) 주요 기능

1) 코드 버전 관리

2) 협업 가능

3) 웹 호스팅(인터넷에 올리는 것) 가능(공개적으로 배포)

4) 다른 개발자글과 코드, 프로젝트, 라이브러리 공유 가능

 

 Github Pages에서 배포 가능!

 

정적 웹 페이지란?

실시간 변경되는 내용은 없고 HTML, CSS, JavaScript 등으로 이루어진 단순한 웹 페이지를 의미

 

 

https://dongeul24.github.io/jiflix/

지플릭스