Web GIS Application 구축 : GIS Web application 생성

TopOfTheHead·2025년 1월 14일

Udemy학습-WebGIS

목록 보기
2/2
  • Application 개발 순서
    • 1. Setup System and accounts
      。Firebase 활용
    • 2. Build UI
      。Bootstrap 활용
    • 3. Authentication System
      。Firebase : Authentication 기능 사용
      ▶ Firebase에서 계정 생성, 로그인 기능을 담당한다.
    • 4. Homepage

    • 5. Convert website to PWA(Progressive Web Apps)
      。manifest.json , Service Worker 활용.
      Web App :
      。Native App처럼 보이면서 기능 또한 동일하게 구현되지만, Web 기술(HTML, CSS, JS 등)을 활용해서 만들어진 app.
      ▶ 별도의 App파일을 설치하지 않고 브라우저를 기반으로 작동.

      Native App :
      。Mobile 기기에 최적화된 Native 언어( kotlin or Swift )로 개발된 App

      PWA (Progressive Web Apps) :
      。Mobile 기기에서 Native App과 같은 사용자 경험을 제공하는 Web App
      ▶ 전통적인 Web App과 달리 Native App과 유사기능을 제공.

    • 6. POST data
      。Firebase Database , Fetch API

    • 7. Data feed
    • 8. Hosting
  • Application 생성 시 활용할 기술
    • HTML 5
    • CSS 3
    • Javascript
    • Firebase API
      。Firebase를 hosting platform, DB로 활용

      。NoSQL DB를 지원.
    • Mapbox GL JS
    • Bootstrap 4
  • 1. Setup System and accounts
    • Firebase에서 Project 생성하기
      Firebase

      。개발에 사용할 빌드 : Hosting , Authentication , Database , Storage

    • Firebase - Web app에 Firebase 추가
      SDK(Software Development Kit) :
      。SW Development Tool, Library , 문서 Package로서 개발자가 SW 또는 Application을 구축 및 확장 시 사용.
      ▶ 다른 회사에서 구현한 기능을 내 Application에 적용할 수 있도록함.

      。Firebase SDK를 html <body>에 첨부하여 사용.
      ▶ 해당 코드들을 다음처럼 편집하여 첨부
    <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js"
    const firebaseConfig = {
      apiKey: "AIzaSyDKb4qBnJpR7tiBA6VN7FTXTaGQe5zrkLQ",
      authDomain: "photobucketapp-7ef08.firebaseapp.com",
      projectId: "photobucketapp-7ef08",
      storageBucket: "photobucketapp-7ef08.firebasestorage.app",
      messagingSenderId: "524240225788",
      appId: "1:524240225788:web:f18d29d84b722a8f385e79"
    };
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>

    。Firebase에 관한 Javascript 코드를 CDN으로 불러오기.ㅁ
    ▶ <script>에 type="module"를 정의해야한다.

    。html <body> 하단부분에 정의.
    。 Firebase 객체를 초기화하기위해 사용.
    ▶ 해당 Firebase 객체는 사용자의 firebase project에 대하여 고유의 firebase account를 생성 및 제공하기위한 용도로 사용.

    • OpenLayers js,css 추가
      。파일을 다운받아서 <script> , <link>로 import.
    <link rel="stylesheet" href="../openlayers/v10.3.1-package/ol.css">
<script src="../openlayers/v10.3.1-package/dist/ol.js"></script>

    .

    • Bootstrap js, css 추가
    <link rel="stylesheet" href="./bootstrap-5.3.3-dist/bootstrap-5.3.3-dist/css/bootstrap.css">
<script src="./bootstrap-5.3.3-dist/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>

    。bootstrap.bundle.min.js는 <nav>의 popper 역할을 수행.
    ▶ bootstrap.js 와 중복 사용 시 오류가 발생하므로 하나의 js파일만 사용.

    • jQuery 추가
      。jQuery cdn
    <script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>


  • 2. build UI
    。Bootstrap의 UI 디자인을 활용.
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" style="padding-left:10px" href="#">PhotoBucket</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#" style="padding-left:5px">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" style="padding-left:5px">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="padding-left:5px">
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" aria-disabled="true" style="padding-left:5px">Disabled</a>
            </li>
      </ul>
    </div>
  </nav>

    .

    <!-- Jumbotron : start -->
    <div class="jumbotron jumbotron-fluid bg-body-secondary">
      <h1 class="display-4">Photo-Bucket</h1>
      <p class="lead">해당 웹어플리케이션은 이미지 공유용도로 활용됩니다.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="./map.html" role="button">Learn more</a>
      </p>
    </div>
  <!-- Jumbotron : end -->


    。bg-body-secondary를 통해 배경색상 grey로 설정됨.

    <div class="container">
    <div class="row">
          <div class="col-lg-6 col-sm-12 col-md-12 mb-3">
            <div class="style_form">
              <p>로그인</p>
              <form id="sign_in_form">
                <div class="form-group">
                  <label for="InputEmail1">Email address</label>
                  <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="InputPassword1">Password</label>
                  <input type="password" class="form-control" id="InputPassword1" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-primary">Log-in</button>
              </form>
            </div>
          </div>
          <div class="col-lg-6 col-sm-12 col-md-12">
            <div class="style_form">
              <p>회원가입</p>
              <form id="sign_up_form">
                <div class="form-group">
                  <label for="InputEmail2">Email address</label>
                  <input type="email" class="form-control" id="InputEmail2" aria-describedby="emailHelp" placeholder="Enter email">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="InputPassword2">Password</label>
                  <input type="password" class="form-control" id="InputPassword2" placeholder="Password">
                </div>
                <div class="form-group">
                  <label for="InputPassword3">Confirm Password</label>
                  <input type="password" class="form-control" id="InputPassword3" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-primary">Sign-up</button>
              </form>
            </div>
          </div>
        </div>
    </div>

    。추후 email , pw로 로그인할 예정이므로 , <input type="email"> 설정.
    。각 <form>에 id 속성 지정.

    Grid-System
    。lg(lg ≥\ge 992px) 까지는 122=6\frac{12}{2}=6으로 인해 2개 열을 유지
    。sm, md (sm≥\ge 576px , md ≥\ge 768px )까지는 121=12\frac{12}{1}=12를 통해 1개 column 유지.

    Form
    。Form 양식은 Bootstrap에서 참고.
    。Form Styling은 다음처럼 설정.

    .style_form {
  border:2px solid; 
  border-radius:5px;
  padding : 10px;
}
.form-group {
  padding-bottom : 10px;
}

    。css에 style을 지정하여 정의 후 Grid System을 정의한 <div> 내부에 <div class="style_form">으로 정의하여 추가.
    。form-group 의 경우 기존 class에서 추가적으로 styling을 지정.

    • FontAwesome Font Awesome
      。Web상에서 많이 활용되는 Icon을 Vector형태로 제공하는 서비스.
      ▶ Web application 구축 시 Icon을 하나씩 생성하는게 아닌, 코드를 가져다 활용 시 바로 사용이 가능하므로 편리함.
      。Font Awesome CDN :
      <script src="https://kit.fontawesome.com/User번호.js" crossorigin="anonymous"></script>
      .
      FontAwesome/Icon
      。 해당 사이트에서 원하는 icon을 선택 후 icon에 할당된 html tag를 활용.
      ex) <i class="fa-solid fa-camera"></i>


  • 3. Authentication System
    。User의 로그인 여부에 따른 User Condition에 따라 map을 생성하여 표현.
    。Firebase : authentication 기능을 활용
    ▶ Firebase에서 계정 생성, 로그인 기능을 담당한다.
    • 2번과정의 HTML 요소를 <div id="특정 id">를 통해 구분.
      。로그인 과정에서 점보트론, Log in form이 지시되도록 하고, 로그인 후 Map element가 지시되도록 설정.

      。<nav>를 제외한 나머지 요소의 경우 로그인 시 지시가 안되도록 <div id="unlogged">로 감싸서 설정.
      <!-- unlogged -->
  <div id="unlogged" class="mb-4">
    <div class="container-fluid">
      <!-- Jumbotron : start -->
      <div class="jumbotron jumbotron-fluid bg-body-secondary">
        <h1 class="display-4">Photo-Bucket</h1>
        <p class="lead">해당 웹어플리케이션은 이미지 공유용도로 활용됩니다.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
          <a class="btn btn-primary btn-lg" href="./map.html" role="button">Learn more</a>
        </p>
      </div>
      <!-- Jumbotron : end -->
    </div>
    <div class="container-fluid">
      <!-- loggin form start -->
        <div class="row">
          <div class="col-lg-6 col-sm-12 col-md-12 mb-3">
            <div class="style_form">
              <p>로그인</p>
              <form id="sign_in_form">
                <div class="form-group">
                  <label for="InputEmail1">Email address</label>
                  <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="InputPassword1">Password</label>
                  <input type="password" class="form-control" id="InputPassword1" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-primary">Log-in</button>
              </form>
            </div>
          </div>
          <div class="col-lg-6 col-sm-12 col-md-12">
            <div class="style_form">
              <p>회원가입</p>
              <form id="sign_up_form">
                <div class="form-group">
                  <label for="InputEmail2">Email address</label>
                  <input type="email" class="form-control" id="InputEmail2" aria-describedby="emailHelp" placeholder="Enter email">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="InputPassword2">Password</label>
                  <input type="password" class="form-control" id="InputPassword2" placeholder="Password">
                </div>
                <div class="form-group">
                  <label for="InputPassword3">Confirm Password</label>
                  <input type="password" class="form-control" id="InputPassword3" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-primary">Sign-up</button>
              </form>
            </div>
          </div>
        </div>
      <!-- loggin form end -->
    </div>
  </div>
    <!-- Logged -->
  <div id="logged" style="display:none">
    <div id="map"></div>
  </div>

    。로그인 후 지시될 <div id="map">의 map 요소의 경우 style="display:none"을 통해 로그인 과정에서 지시가 안되도록 설정.

     # javascript
var view1 = new ol.View({
  center : [127.0524234,37.5837901],
  projection : 'EPSG:4326',
  zoom : 15,
})
var baseOSMlayer = new ol.layer.Tile({
  source : new ol.source.XYZ({
    url : 'https://api.vworld.kr/req/wmts/1.0.0/45C98863-0CE9-39F9-881C-ED4E6DB5B3EE/Base/{z}/{y}/{x}.png'
  }),
  zIndex : 0
})
var map1 = new ol.Map({
  view : view1,
  layers : [baseOSMlayer],
  target : 'map'
})
    #map {
  width : 100%;
  height : 90vh;
}

    。map을 정의할 Javascript와 CSS

    • Firebase : authentication 활용
      。Firebase 객체는 사용자의 firebase project에 대하여 고유의 firebase account를 생성 및 제공하기위한 용도로 사용.
      。별도의 서버측 코드를 작성할 필요없이 기존 google, facebook등의 로그인 기능을 활용이 가능.
      ▶ html의 <body> 하단에 정의한 firebase sdk코드 하단에 코드를 작성하여 활용.


      Firebase
      。해당 사이트에서 Authentication에 진입하여 로그인방법에서 구글을 사용 설정.
      ▶ email ID와 PW를 활용하여 account를 생성 및 로그인이 가능.

    • firebase : authentication를 정의하는 js파일 생성
      firebase authentication docs
      。해당 사이트에서 Android, Web...에 관한 Authentication 문서를 참조하기
      。Firebase Authentication을 활용하여 사용자가 Application에 로그인 시 Application에 email address와 password를 통한 로그인 기능을 추가하는 method를 정의.

      。$('#elementID') : HTML Page 내 특정 ID의 element를 객체로서 참조.

      。 firebase-auth.js에서의 method를 활용하기 위해 import { getAuth, createUserWithEmailAndPassword,signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"를 선언.

      。해당 js파일은 type="module"를 설정하여 선언.
      ▶ html파일에 불러올 js 파일 내에 import가 선언된 경우, <script type="module">로서 불러와야한다.
      <script type="module" src="./js/authentication.js"></script>

      Authentication.js 코드작성

      • 1. alert function 생성
        。PW와 ConfirmPW가 일치하지 않을때, 틀린 정보로 로그인 시 발생하는 오류를 표현하는 역할 수행.
        。div(element의 ID), type:( success, warning ), msg( message )를 매개변수로 input을 받는다.
        ▶ 이후 error 발생 시 해당 매개변수를 기반으로 <div>를 document.getElementById(ID)를 통해 참조 및 해당 태그요소 내부를 innerHTML을 통해 다음 Bootstrap alert구문을 정의하여 browser에 지시되도록 한다.
      function showAlert(div,type,msg){
  document.getElementById(div).style.display="block"
  var putInDiv = document.getElementById(div)
  putInDiv.innerHTML = '<div class="alert alert-'+ type +' alert-dismissible fade show" role="alert"><strong>Holy guacamole!</strong>'+ msg +' <button type="button" class="close" data-dismiss="alert"aria-label="Close"><span aria-hidden="true">&times;</span></button></div>'
}

      。alert를 표현하기 위해 html문서상에 <div id="sign_up_alert"></div> 입력.
      。type을 통해 "alert-success", "alert-error", "alert-warning"등이 정의 가능.
      。msg를 통해 alert에 지시될 message를 설정.
      。<button> 내부에 onclick="disableAlert()"를 설정하여 close하는 함수 정의하기.

      <script>function disableAlert(){
    document.querySelector("#sign_up_alert").style.display="none"
}</script>
      • 이후 <body> 태그 하부에 다음 <script>를 정의.

        <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>     
          .
        • 태그요소.innerHTML = "text or tag" :
          。HTML 문서 상의 특정 태그요소의 내부내용에 텍스트 또는 tag를 지정.


      • 2. jQuery : submit 회원가입 코드 작성
        。<form>내에 정의된 <button type="submit">를 클릭 시 document를 통해 html element의 id를 참조하여 email, pw , confirmpw를 가져옴.
        ▶ document.querySelector(#id명).value
        。비밀번호를 오기입 시 위에서 정의한 alert function을 작동하는 기능 추가.
      import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
$('#sign_up_form').submit(function(evt){
  evt.preventDefault()
  var email = document.querySelector('#InputEmail2').value
  var Pw = document.querySelector('#InputPassword2').value
  var confirmPw = document.querySelector('#InputPassword3').value
  // 비밀번호 matching 여부 확인
  if (Pw == confirmPw){
  // 회원가입 성공시 발생.
  const auth = getAuth()
  createUserWithEmailAndPassword(auth,email, Pw)
  .then((userCredential) => {
    const user = userCredential.user;
    showAlert("sign_up_alert","success","account created.")
  })
  .catch((error) => {
     // firebase에 의해 설정된 비밀번호 조건이 충족되지 않으면 발생.
    var errorCode = error.code;
    var errorMessage = error.message;
    showAlert("sign_up_alert","warning",errorMessage)
  });
  } else{
     // confirm pw 오기입 시 작동.
    showAlert("sign_up_alert","warning","password is incorrect.")
  }
})

      。userCredential 객체가 createUserWithEmailAndPassword에 의해 성공적으로 생성 시 Promise에 의해 Firebase 상에 해당 user account가 생성 및 showAlert("sign_up_alert","success","account created.")에 의해 alert 표시.


      • 계정이 성공적으로 생성됨.

        • Firebase 회원가입 js 코드
        import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
        • getAuth() :
          。Firebase의 authentication service객체의 instance를 return하는 method
          ▶ 동일한 application 내 getAuth() 호출 시 동일한 authentication instance가 반환.

          。해당 authentication instance를 이용해 Application에 관한 Firebase authentication service를 설정하여 사용자로그인, 로그아웃, 비밀번호 재설정, 인증상태 모니터링 등의 기능을 사용 가능.
          ▶ 해당 Service를 이용 시 Application의 user authentication을 관리할 수 있음.

        • createUserWithEmailAndPassword(auth객체, email문자열, password문자열)
          。새로운 user 계정을 생성하여 userCredential 객체를 생성시 사용하는 method.

        • userCredential :
          。사용자 정보 및 access token등의 자격증명을 포함한 세부정보가 포함된 User 객체.
          。추가적으로 OperationType, providerId와 같은 작업에 대한 metadata를 포함.

          。createUserWithEmailAndPassword(), signInWithEmailAndPassword()에 의해 생성됨.
          ▶ Promise에 의해 성공 시 callback함수에 매개변수로서 userCredential 객체 반환, 실패 시 error 객체 반환.

          。Promise에 의해 createUserWithEmailAndPassword().then(callback함수), signInWithEmailAndPassword().then(callback함수)에서 callback함수 매개변수로서 사용됨.
          ▶ 오류 발생 시 Promise객체.catch(callback함수)의 callback 함수 매개변수 error이 도출.

          userCredential property

          • user :
            。User 객체의 Instance를 반환.
            ▶ 해당 instance는 UID, email, displayName,.. 등의 정보를 포함.

            。onAuthStateChanged()의 callback함수 매개변수로 사용됨.

            user 객체 property

            • uid
              。사용자의 고유 식별자

            • email
              。사용자의 이메일 주소

            • displayName
              。설정된 경우의 사용자의 표시되는 이름

            • emailVerified
              。사용자의 email이 확인되었는지의 여부

            • photoURL
              。설정된 경우의 사용자의 프로필 사진 URL

            • providerData
              。해당 사용자에 연결된 authentication provider에 대한 정보.


          • providerId
            。authentication에 사용되는 provider를 지시하는 문자열
            ex) 이메일/비밀번호 인증의 경우 password

          • operationType
            。작업유형을 지시하는 문자열.
            signIn : 사용자가 로그인하는 경우
            signUp : 사용자가 가입하는 경우,


        • Firebase authentication에서 발생하는 error.code
          • auth/invalid-email
            。email address format이 잘못됨.

          • auth/user-disabled
            。user의 account가 비활성화됨.

          • auth/user-not-found
            。해당 자격증명을 가진 user가 존재하지 않음.

          • auth/wrong-password

          • auth/email-already-in-use

          • auth/too-many-requests
            。시도 횟수가 너무 많아서 계정이 일시적으로 잠겨있음.

          • auth/network-request-failed
            。network 오류 발생.


        • jQuery : submit()
          。HTML의 <form>을 jquery를 이용해 submit() 함수를 사용하여 제출하는 역할을 수행.

          $('#FormelementID').sumbit(function(evt){코드})
          。$('#elementID') : HTML Page 내 특정 ID의 element를 객체로서 참조.

          submit 관련 event

          • evt.preventDefault() :
            。<a href="url">를 눌렀을때 해당 href 링크로 이동하지 않게 할 경우 사용.
            。<form> 내부에 정의된 <button type="submit">을 누를경우, 해당 페이지가 새로고침되는 기능을 제한.


      • 3. Authentication state observer 설정 및 user객체를 가져오는 코드 작성

        Logout 버튼 생성
        。<nav> 태그 내 <ul>태그 내에 정의.
      <li class="nav-item" id="logoutBtn" style="display:none">
              <button href="#" id="logoutBtn1" class="nav-link">Logout</button>
</li>

      Logout 기능 구현
      。onclick="logoutUser()"를 통해 js에서 logoutUser()을 수행하는 함수 구현하기.
      。signOut(auth객체) : auth 객체를 이용해 logout.

      import { getAuth, signOut } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
function logoutUser(){
  var auth = getAuth()
  signOut(auth)
}

      。이후 , onAuthStateChanged의 callback 함수 내부에 다음 구문을 정의
      document.getElementById("logoutBtn1").onclick = logoutUser
      ▶ js 파일은 type=module로서 import 되었으므로, html 문서 내부에서 <button>으로 js의 method를 참조가 불가능하므로, 다음처럼 js파일 내부에서 html요소.onclick=메소드로 임의로 선언하여 활용.


      JS에 onAuthStateChanged 기능 정의
      。authentication state 변경을 firebase가 해당 상태를 catch하여 만약 signIn 상태로 authentication state가 변경된다면, 특정 form을 숨기고 map을 보이는 기능 구현하기.
      。signIn 상태일때, 로그아웃 버튼을 생성
      ▶ 해당 버튼으로 signOut 상태로 변경 시 map을 숨기고 form을 지시하기.

      const auth = getAuth();
// 로그인, 로그아웃에 의해 
// authentication status가 변경 시 자동으로 실행
onAuthStateChanged(auth, (user) => {
  if (user) {
    // 로그인 한 경우
    // 로그인한 user의 email 정보 조회.
    const email = user.email;
    // 로그인 버튼 표시
    document.getElementById("logoutBtn").style.display='block'
    // map 표시
    document.getElementById("logged").style.display='block'
    // 점보트론 & 로그인폼 숨기기
    document.getElementById("unlogged").style.display='none'
    // map 표시
    document.getElementById("logged").style.display='block'
  } else {
    // 로그아웃 한 경우
    //로그인 버튼 숨기기
    document.getElementById("logoutBtn").style.display='none'
    // map 숨기기
    document.getElementById("logged").style.display='none'
    // 점보트론 & 로그인폼 표시
    document.getElementById("unlogged").style.display='block'
  }
});

      。 로그인된 상태인 경우, authentication 객체의 로그인한 user 정보를 포함한 user객체를 retun하면서 조건문의 if 구문이 return.

      。로그아웃된 상태인 경우 로그인한 user 정보가 존재하지 않으므로, user객체는 none으로 설정되면서 조건문의 else구문이 return.

      • 계정 생성시 다음처럼 Mapelement객체.style.display="block"에 의해 map객체가 표현됨.
        • Firebase Authentication state observer 설정 및 user data를 가져오는 코드
        import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, function(user){
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
   	var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var providerData = user.providerData;
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
        • onAuthStateChanged(auth객체, function(user){코드}) :
          。authentication state 변경사항이 발생 시 자동으로 trigger되는 method.
          ▶ 로그인, 로그아웃, 사용자 세션 초기화 후 검색 시 trigger.

          。 callback함수 매개변수의 user 객체의 경우 해당 application의 authentication 객체의 로그인한 user 정보를 포함하는 user 객체를 return
          ▶ 로그인한 user가 없는 경우 (= 로그아웃 한 경우) user = null

        • CSS 코드
          。CSS코드 공부한거
          태그요소.style = "color:속성" :
          。해당 태그요소의 색상을 변경.

          태그요소.style = "display:속성" :
          。해당 태그요소를 숨김.

          태그요소.style.backgroundColor="속성" :
          。글자의 backgroundcolor를 변경.


      • 4. jQuery : submit 로그인 코드 작성
      $('#sign_in_form').submit((evt)=>{
  evt.preventDefault()
  var email = document.querySelector("#InputEmail1").value
  var pw = document.querySelector("#InputPassword1").value
  const auth = getAuth()
  signInWithEmailAndPassword(auth,email,pw).then((userCredential)=>{
    const user = userCredential.user
  }).catch((error)=>{
    var errorCode = error.code;
    var errorMessage = error.message;
    showAlert("sign_up_alert","warning",errorMessage)
  })
})

      。userCredential 객체가 signInWithEmailAndPassword에 의해 Firebase 상에 해당 user account를 조회하여 성공적으로 생성 시 Promise에 의해 application에 로그인됨.

      • Firebase 로그인 js 코드
      import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
      • signInWithEmailAndPassword(auth객체, email문자열, password문자열) :
        。사용자가 email과 password를 활용하여 Firebase를 통해 application에 로그인하는 method.
        。기존의 user 계정을 조회하여 userCredential 객체를 생성시 사용하는 method.
        ▶ Promise에 의해 성공 시 callback함수에 매개변수로서 userCredential 객체 반환, 실패 시 error 객체 반환.
profile
TopOfTheHead
공부기록 블로그
이전 포스트

Web GIS Application 구축 : GIS Web application 생성 2

0개의 댓글