모바일 서버를 개발하기 위해서는 인증, 데이터베이스, 푸시 알람, 스토리지, API 등 모든 것을 개발해야 한다. 그러나 이는 매번 새로운 앱들과 별로 차이가 나지 않기 때문에 복잡한 과정들을 매번 개발할 때마다 하는 것은 시간낭비이다.
FireBase는 이 모든 플렛폼을 프로젝트 구축 시 자동적으로 만들어 준다. 또한 서버를 구축하기 위해서 리눅스 명령어를 알 필요도 없으며 도메인을 구입할 필요가 없고 개발하는 동안에는 서버를 구입할 필요도 없다.
FireBase라는 플랫폼을 통해 프론트엔드 개발자와 백엔드 개발자의 경계가 모호해 질 것이며 적은 비용으로 매우 좋은 앱을 만들 수 있을 것이다.
FireBase의 장점 1. 인증 시스템을 지원한다.
인증은 우리가 알고 있는 로그인 하는 부분을 말한다. 이를 직접 서버로 개발할 경우 매우 복잡한데, 그 이유는 인증된 사용자인지 확인하는 세션처리에서 그 세션으로 데이터베이스와 저장소에 접근해도 문제가 없는지 확인하는 보안처리, 비밀번호 찾기, 아이디 찾기, 비밀번호 변경 등등 복잡한 것들을 구현해야 한다. 그러나 FireBase는 이를 모두 제공하고 있다. 2. NoSQl 기반의 3세대 데이터베이스이다.
NoSQL기반 데이터베이스의 Document DB는, 현재 많이 사용되는 오라클이나 MySQL 같은 관계형 데이터베이스보다 빠르고 간편하다. 또한 FireBase는 다른 데이터 베이스들과 다르게 RTSP(Real Time Stream Protocol) 방식의 데이터베이스를 지원하고 있다. RTSP는 말그대로 실시간으로 데이터들을 전송해주는 방식이다. 이 방식을 사용하면 소켓 기반 서버를 만들어서 통신하는 것 보다 훨씬 코드 양이 줄게되어 코드 몇 줄로도 원하는 구성을 만들 수 있습니다. 3. 원격 구성을 지원한다.
원격구성이란 원격으로 앱의 환경 상태를 구성하는 것을 말한다. 앱의 배경화면 테마나 폰트를 바꾼다던가, 업데이트창과 알림창을 띄우고 앱의 환경을 원격으로 구성할 때 사용하는 기능이다. 4. 콘솔을 제공한다.
콘솔이란 쉽게 말해서 서버 관리자 페이지라고 생각하면 된다. 앱의 서버를 만들게 되면 리눅스, FTP, MySQL(데이터베이스), Node.JS 서버 혹은 Spring 서버, 푸시보내기 API만 구축할 것이 아니라 이 모든 것을 관리할 수 있는 관리자 페이지가 필요하다. 리눅스나 데이터베이스, 서버를 다룰 줄 안다면 관리자 페이지가 필요없을 수도 있지만 그렇지 경우를 위해, 그리고 접근 보안을 위해서 관리자 페이지를 만들어야 한다. 그럼 앱을 만들기 위해서 앱개발자 뿐아니라 서버 개발자까지 필요해지는데, FireBase는 이를 지원해주어 그럴 필요 없어지는 것이다. 5. Analytics를 제공한다.
Analytics는 다수의 사용자가 앱을 어떻게 사용하는지에 대한 통계 정보를 가지고 있다. 추적할 수 있는 정보: 앱의 현재 접속자, 오류통계, 사용자 유지율, 고객들의 앱 업데이트 상태, 사용자들이 특정 페이지에 머문 시간, 이벤트 등 이런 데이터들을 수집하면 사용자가 어떤 페이지에서 흥미를 잃었고, 어떤 페이지가 인기가 많은지 등을 찾아낼 수 있으며 맞춤 마케팅을 할 수 있다.
FireBase의 단점 1. 종종 서버의 응답속도가 느려진다.
Firebase로 채팅 앱을 만들었는데 메시지가 늦게 간다던가, Firebase 인증을 성공하고 나서 메인화면에서 데이터베이스에 접근할 때 서버 응답 시간이 조금 지연되는 경우 그 이유는 서버가 해외에 있기 때문에 종종 처리 속도에 지연이 발생된다고 한다. Firebase가 국내에서 많이 쓰인다면 구글이 아시아쪽 서버를 구축해 줄것이며 아마 응답 지연이 해결될 것. 2. Firebase의 데이터베이스인 FireStore(신버전)나 RealTimeDatabase(구버전) 모두 쿼리가 매우 빈약하다.
데이터 검색이 어렵다. (SQL에서는 일반적으로 OR 문이나 LIKE 문을 이용해 데이터검색이 가능한데 이들 모두 존재하지 않는다고 한다.) 그래서 Firebase를 사용하는 사용자들은 모든 데이터를 받아와서 안드로이드 기기에서 필터링해주는 방법을 권장하고 있다.
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyAQQm4daTxv9OyN7P01OBlZmj-CHoCz9Vc",
authDomain: "test-web-1-2527f.firebaseapp.com",
projectId: "test-web-1-2527f",
storageBucket: "test-web-1-2527f.appspot.com",
messagingSenderId: "895953517997",
appId: "1:895953517997:web:c6d73fd3be553f02ce3524"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>
스크롤 된 값 yOffset이 이전에 있는 scroll heigh 값의 합보다 크면 다음 시작
function scrollLoop(){ prevScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++){ prevScrollHeight += sceneInfo[i].scrollHeigh; }
console.log(prevScrollHeight); }
prevScrollHeight = 0;를 하여 prevScrollHeight의 값이 누적되지않게 해준다
주의-메뉴가 차지하는 영역때문에 영역만큼 미리 바뀐다
현재까지 진행된 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>대한민국</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./default.css" />
<link rel="stylesheet" href="./main.css" />
</head>
<div class="loading">
<svg class="loading-circle">
<circle cx="50%" cy="50%" r="25"></circle>
</svg>
</div>
<div class="container">
<nav class="global-nav">
<div class="global-nav-links">
<a href="#" class="global-nav-item">소개</a>
<a href="#" class="global-nav-item">문화</a>
<a href="#" class="global-nav-item">여행지</a>
<a href="#" class="global-nav-item">상품</a>
</div>
</nav>
<nav class="local-nav">
<div class="local-nav-links">
<a href="#" class="product-name">대한민국</a>
<a href="#">개요</a>
<a href="#">제품사양</a>
<a href="#">구입하기</a>
</div>
</nav>
<section class="scroll-section" id="scroll-section-0">
<h1>대한민국</h1>
<div class="sticky-elem sticky-elem-canvas">
<canvas id="video-canvas-0" width="1920" height="1080"></canvas>
</div>
<div class="sticky-elem main-message a">
<p>KOREA<br/>대한민국</p>
</div>
<div class="sticky-elem main-message b">
<p>韓国<br />大韩民国</p>
</div>
<div class="sticky-elem main-message c">
<p>República de Corea<br />República da Coreia</p>
</div>
<div class="sticky-elem main-message d">
<p>สาธารณรัฐเกาหลี<br />République de Corée</p>
</div>
</section>
<section class="scroll-section" id="scroll-section-1">
<p class="description">
<strong>대한민국</strong>
영어 명칭은 Republic of Korea. 남쪽으로는 1,000㎞에 이르며, 북쪽으로는 중국·러시아와 접경을 이루고 있다. 남북한 전체 면적은 영국이나 루마니아와 비슷한 크기이고, 남한은 헝가리나 포르투갈보다는 조금 크고 불가리아보다는 조금 작다.
전 국토의 70％가 산악 지역으로 서해로는 완만한 경사를 이루며, 동해로는 급격한 경사를 이룬다. 또한 국토의 면적에 비하여 강이 많은 편이다. 기후는 사계절이 뚜렷하여 덥고 습한 여름과 춥고 건조한 겨울은 길고, 상쾌하고 청명한 날의 봄·가을은 비교적 짧다. 기온은 겨울에는 영하 15℃로 내려가고, 여름에는 34℃로 올라간다.
한국의 전통적인 종교는 샤머니즘·불교·유교이며, 이들은 역대 국가들의 문화발달 및 사상과 행동에 지대한 영향을 끼쳐 왔다. 그 밖에 근대 이후 고유 종교인 천도교를 비롯해 외래 종교인 기독교(개신교)·천주교를 믿는 인구가 급격히 늘어나고 있다. 주민은 한국인이고 인종적으로는 몽골계에 속하며, 고조선시대 이래로 단일민족으로서 존속하여 왔다.
고조선 이후 고대의 삼국시대, 통일신라와 발해시대, 중세의 고려시대, 근세의 조선시대로 이어져 오던 우리나라는 1910년 일제에 의하여 역사상 처음으로 국권을 상실하고 식민지 지배체제하에 놓이게 되었다. 오랫동안 독립투쟁을 벌여오던 우리 민족은 일본이 제2차세계대전에서 패배함으로써 마침내 광복을 맞이하였다.
그러나 광복과 더불어 승전국인 미국과 소련의 군대가 38선을 경계로 남과 북에 각각 진주하여 군정을 실시하게 됨으로써, 일제로부터 광복은 되었으나 독립을 이루지 못한 채 오히려 남북이 분단상태에 놓이게 되었다. 그러나 독립을 이루고자 하는 한국민족의 열망이 국제연합에 반영되어 1947년 제2차 UN총회에서 UN한국감시위원단 감시하의 남북한 동시 총선거가 제의되었으나, 북한은 이를 극력 반대하였다. 그리하여 1948년 5월 10일 남한만의 총선거가 실시되어 5월 31일 제헌국회가 개설되었다.
제헌국회는 7월 17일 「대한민국헌법」을 제정, 공포하고(제9호 개헌 때부터 대한민국 헌법 전문에 ‘대한민국임시정부의 법통을 계승’했다고 명시) 그 달 20일 초대 대통령으로 이승만(李承晩)을 선출하였다. 그리하여 대한민국은 1948년 8월 15일 국내외에 그 성립을 선포하고 자유민주주의국가의 일원으로서 출발하여 오늘에 이르게 되었다. 국제연합은 이와 같이 성립된 대한민국 정부를 ‘한반도에서의 유일한 합법적 정부’로 인정하였다.
대한민국은 정부를 수립하면서 영토를 한반도와 그 부속 도서로 규정, 대한민국의 통치권이 한반도 전체를 통할함을 선포하였다. 그러나 하나의 정치공동체로서의 실제 행정영역은 북위 38°선 이남으로 한정되다가 1953년 휴전 이후에는 휴전선 이남으로 바뀌었다. 휴전선을 경계로 한 현재의 행정영역은 한반도 총면적 22만 258㎢의 약 45％인 9만 9720㎢이다.
대한민국의 수도는 서울특별시이며, 행정적으로는 서울특별시, 1개 특별자치시, 6개 광역시, 1개 특별자치도, 8개 도로 구분되어 있다. 총인구는 1988년에 4197만 5000명이었으나 2015년 현재 5061만 7045명이며, 인구밀도는 1988년에는 423명/㎢이었으나 2010년 현재 485명/㎢이다.
대한민국의 국어는 한국어이며, 문자는 한글 전용을 원칙으로 하되 꼭 필요한 경우에 한하여 한자를 병기하고 있다. 통화는 원화(won貨)이며, 국기는 태극기(太極旗), 국가(國歌)는 애국가, 국화는 무궁화이다.
</p>
</section>
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem sticky-elem-canvas">
<canvas id="video-canvas-1" width="1920" height="1080"></canvas>
</div>
<div class="sticky-elem main-message a">
<p>
<small>애국가</small>
안익태
</p>
</div>
<div class="sticky-elem desc-message b">
<p>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<div class="pin"></div>
</div>
<div class="sticky-elem desc-message c">
<p>애국가(愛國歌)는<br /> ‘나라를 사랑하는 노래’라는 뜻</p>
<div class="pin"></div>
</div>
</section>
<section class="scroll-section" id="scroll-section-3">
<p class="mid-message">
<strong>대한민국 인구</strong>
<br />
대한민국의 인구는 2022년 기준 대략 5,161만 명으로,
<br />
아시아 13위, 세계 28위에 해당
</p>
<canvas class="image-blend-canvas" width="1920" height="1080"></canvas>
<p class="canvas-caption">
1945년~1948년 분단 당시에는 13도 체제를 유지하고 있었으나, 70여 년의 긴 세월 동안 분단되고 남북의 행정구역의 변동이 있었던 관계로 남북통일 시 광역급 행정구역이 더욱 늘어날 것으로 전망된다. 분단 당시 존재한 13도는 경기도, 강원도, 충청남도, 충청북도, 전라남도, 전라북도, 경상남도, 경상북도, 황해도, 평안남도, 평안북도, 함경남도, 함경북도이다.
한반도 남쪽 바다(남해, 동중국해)에 있는 제주도는 대한민국에서 가장 큰 섬이다. 울릉도 및 독도와 영종도, 서해 5도, 강화도는 전략상 요충지로 간주된다.
거제도, 남해도, 진도, 완도, 추자도, 거문도도 있다.
반도 지형으로, 서쪽은 중국, 북쪽은 북한, 동쪽은 일본에 둘러싸여 있고, 아래쪽은 멀리 대만과, 더 아래쪽으로는 동남아 국가 등이 있다.
</p>
</section>
<footer class="footer">
220124110, 정성주
</footer>
</div>
<script src="js/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>대한민국</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./default.css" />
<link rel="stylesheet" href="./main.css" />
</head>
<body class="before-load">
<div class="loading">
<svg class="loading-circle">
<circle cx="50%" cy="50%" r="25"></circle>
</svg>
</div>
<div class="container">
<nav class="global-nav">
<div class="global-nav-links">
<a href="#" class="global-nav-item">소개</a>
<a href="#" class="global-nav-item">문화</a>
<a href="#" class="global-nav-item">여행지</a>
<a href="#" class="global-nav-item">상품</a>
</div>
</nav>
<nav class="local-nav">
<div class="local-nav-links">
<a href="#" class="product-name">대한민국</a>
<a href="#">개요</a>
<a href="#">제품사양</a>
<a href="#">구입하기</a>
</div>
</nav>
<section class="scroll-section" id="scroll-section-0">
<h1>대한민국</h1>
<div class="sticky-elem sticky-elem-canvas">
<canvas id="video-canvas-0" width="1920" height="1080"></canvas>
</div>
<div class="sticky-elem main-message a">
<p>KOREA<br/>대한민국</p>
</div>
<div class="sticky-elem main-message b">
<p>韓国<br />大韩民国</p>
</div>
<div class="sticky-elem main-message c">
<p>República de Corea<br />República da Coreia</p>
</div>
<div class="sticky-elem main-message d">
<p>สาธารณรัฐเกาหลี<br />République de Corée</p>
</div>
</section>
<section class="scroll-section" id="scroll-section-1">
<p class="description">
<strong>대한민국</strong>
영어 명칭은 Republic of Korea. 남쪽으로는 1,000㎞에 이르며, 북쪽으로는 중국·러시아와 접경을 이루고 있다. 남북한 전체 면적은 영국이나 루마니아와 비슷한 크기이고, 남한은 헝가리나 포르투갈보다는 조금 크고 불가리아보다는 조금 작다.
전 국토의 70％가 산악 지역으로 서해로는 완만한 경사를 이루며, 동해로는 급격한 경사를 이룬다. 또한 국토의 면적에 비하여 강이 많은 편이다. 기후는 사계절이 뚜렷하여 덥고 습한 여름과 춥고 건조한 겨울은 길고, 상쾌하고 청명한 날의 봄·가을은 비교적 짧다. 기온은 겨울에는 영하 15℃로 내려가고, 여름에는 34℃로 올라간다.
한국의 전통적인 종교는 샤머니즘·불교·유교이며, 이들은 역대 국가들의 문화발달 및 사상과 행동에 지대한 영향을 끼쳐 왔다. 그 밖에 근대 이후 고유 종교인 천도교를 비롯해 외래 종교인 기독교(개신교)·천주교를 믿는 인구가 급격히 늘어나고 있다. 주민은 한국인이고 인종적으로는 몽골계에 속하며, 고조선시대 이래로 단일민족으로서 존속하여 왔다.
고조선 이후 고대의 삼국시대, 통일신라와 발해시대, 중세의 고려시대, 근세의 조선시대로 이어져 오던 우리나라는 1910년 일제에 의하여 역사상 처음으로 국권을 상실하고 식민지 지배체제하에 놓이게 되었다. 오랫동안 독립투쟁을 벌여오던 우리 민족은 일본이 제2차세계대전에서 패배함으로써 마침내 광복을 맞이하였다.
그러나 광복과 더불어 승전국인 미국과 소련의 군대가 38선을 경계로 남과 북에 각각 진주하여 군정을 실시하게 됨으로써, 일제로부터 광복은 되었으나 독립을 이루지 못한 채 오히려 남북이 분단상태에 놓이게 되었다. 그러나 독립을 이루고자 하는 한국민족의 열망이 국제연합에 반영되어 1947년 제2차 UN총회에서 UN한국감시위원단 감시하의 남북한 동시 총선거가 제의되었으나, 북한은 이를 극력 반대하였다. 그리하여 1948년 5월 10일 남한만의 총선거가 실시되어 5월 31일 제헌국회가 개설되었다.
제헌국회는 7월 17일 「대한민국헌법」을 제정, 공포하고(제9호 개헌 때부터 대한민국 헌법 전문에 ‘대한민국임시정부의 법통을 계승’했다고 명시) 그 달 20일 초대 대통령으로 이승만(李承晩)을 선출하였다. 그리하여 대한민국은 1948년 8월 15일 국내외에 그 성립을 선포하고 자유민주주의국가의 일원으로서 출발하여 오늘에 이르게 되었다. 국제연합은 이와 같이 성립된 대한민국 정부를 ‘한반도에서의 유일한 합법적 정부’로 인정하였다.
대한민국은 정부를 수립하면서 영토를 한반도와 그 부속 도서로 규정, 대한민국의 통치권이 한반도 전체를 통할함을 선포하였다. 그러나 하나의 정치공동체로서의 실제 행정영역은 북위 38°선 이남으로 한정되다가 1953년 휴전 이후에는 휴전선 이남으로 바뀌었다. 휴전선을 경계로 한 현재의 행정영역은 한반도 총면적 22만 258㎢의 약 45％인 9만 9720㎢이다.
대한민국의 수도는 서울특별시이며, 행정적으로는 서울특별시, 1개 특별자치시, 6개 광역시, 1개 특별자치도, 8개 도로 구분되어 있다. 총인구는 1988년에 4197만 5000명이었으나 2015년 현재 5061만 7045명이며, 인구밀도는 1988년에는 423명/㎢이었으나 2010년 현재 485명/㎢이다.
대한민국의 국어는 한국어이며, 문자는 한글 전용을 원칙으로 하되 꼭 필요한 경우에 한하여 한자를 병기하고 있다. 통화는 원화(won貨)이며, 국기는 태극기(太極旗), 국가(國歌)는 애국가, 국화는 무궁화이다.
</p>
</section>
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem sticky-elem-canvas">
<canvas id="video-canvas-1" width="1920" height="1080"></canvas>
</div>
<div class="sticky-elem main-message a">
<p>
<small>애국가</small>
안익태
</p>
</div>
<div class="sticky-elem desc-message b">
<p>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<div class="pin"></div>
</div>
<div class="sticky-elem desc-message c">
<p>애국가(愛國歌)는<br /> ‘나라를 사랑하는 노래’라는 뜻</p>
<div class="pin"></div>
</div>
</section>
<section class="scroll-section" id="scroll-section-3">
<p class="mid-message">
<strong>대한민국 인구</strong>
<br />
대한민국의 인구는 2022년 기준 대략 5,161만 명으로,
<br />
아시아 13위, 세계 28위에 해당
</p>
<canvas class="image-blend-canvas" width="1920" height="1080"></canvas>
<p class="canvas-caption">
1945년~1948년 분단 당시에는 13도 체제를 유지하고 있었으나, 70여 년의 긴 세월 동안 분단되고 남북의 행정구역의 변동이 있었던 관계로 남북통일 시 광역급 행정구역이 더욱 늘어날 것으로 전망된다. 분단 당시 존재한 13도는 경기도, 강원도, 충청남도, 충청북도, 전라남도, 전라북도, 경상남도, 경상북도, 황해도, 평안남도, 평안북도, 함경남도, 함경북도이다.
한반도 남쪽 바다(남해, 동중국해)에 있는 제주도는 대한민국에서 가장 큰 섬이다. 울릉도 및 독도와 영종도, 서해 5도, 강화도는 전략상 요충지로 간주된다.
거제도, 남해도, 진도, 완도, 추자도, 거문도도 있다.
반도 지형으로, 서쪽은 중국, 북쪽은 북한, 동쪽은 일본에 둘러싸여 있고, 아래쪽은 멀리 대만과, 더 아래쪽으로는 동남아 국가 등이 있다.
</p>
</section>
<footer class="footer">
220124110, 정성주
</footer>
</div>
<script src="./main.js"></script>
</body>
</html>
.local-nav-links .product-name { margin-right: auto; font-size: 1.4rem; font-weight: bold; } 우선순위가 밀려 글씨가 안커지므로 local-nav links.을 붙여 구체적인 클래스를 설정해 주어 우선순위를 높여 준다
