Today 요약
- 과제
- 자바스크립트 강의
1. What I Learned?
1.1 과제
파이어베이스
파이어베이스는 구글이 개발한 백엔드 서비스 플랫폼입니다. 파이어베이스는 다양한 클라우드 서비스 및 도구를 제공하여 애플리케이션을 빠르게 개발하고 운영할 수 있도록 도와줍니다.
파이어베이스는 실시간 데이터베이스를 제공하여 실시간으로 데이터를 동기화하고 애플리케이션 상태를 업데이트할 수 있게 해줍니다. 또한 사용자 인증을 위한 간단한 API를 제공하며, 이메일, 비밀번호, 소셜 로그인 등 다양한 인증 방법을 지원합니다. 그리고 클라우드 스토리지를 통해 파일 및 미디어를 안전하게 저장하고 관리할 수 있고 호스팅을 사용하면 웹 사이트를 배포하고 관리할 수 있습니다.
SPA가 무엇인지와 간단 샘플 SPA 구현
SPA는 Single Page Application의 약자로, 웹 애플리케이션을 개발하는 방법 중 하나입니다.
SPA는 한 개의 웹 페이지로 시작하여 사용자와 상호작용할 때 페이지가 다시 로드되지 않고 동적으로 콘텐츠가 업데이트되는 웹 애플리케이션을 의미합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>샘플 SPA APP</title>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
}
header {
background-color: #333;
color: white;
padding: 16px;
text-align: center;
}
nav {
background-color: #444;
padding: 16px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 16px;
}
#content {
padding: 16px;
}
</style>
</head>
<body>
<header>
<h1>SPA APP</h1>
</header>
<nav>
<a href="#" onclick="navigateTo('home')">Home</a>
<a href="#" onclick="navigateTo('about')">About</a>
<a href="#" onclick="navigateTo('contact')">Contact</a>
</nav>
<div id="content"></div>
<script>
const navigateTo = (page) => {
const content = document.getElementById('content')
if (page === 'home') {
content.innerHTML = `
<h2>Home</h2>
<p>This is HomePage</p>
`
history.replaceState({}, 'Home', '/')
} else if (page === 'about') {
content.innerHTML = `
<h2>About Me</h2>
<p>This is AboutPage</p>
`
history.replaceState({}, 'About', '/about')
} else if (page === 'contact') {
content.innerHTML = `
<h2>Contact Me</h2>
<p>This is ContactPage</p>
`
history.replaceState({}, 'Contact', '/contact')
}
}
window.addEventListener('popstate', () => {
const path = location.pathname
if (path === '/') navigateTo('home')
else if (path === '/about') navigateTo('about')
else if (path === '/contact') navigateTo('contact')
})
navigateTo('home')
</script>
</body>
</html>CSR과 SSR에 대해
일단 두 가지 방식을 간단하게 설명하면 서버 사이드 렌더링은 초기 페이지를 서버 측에서 렌더링하여 완전한 HTML을 생성하고, 이를 클라이언트에게 제공합니다. 이후 요청이 있을 때 서버는 해당 페이지의 데이터를 추가로 제공하거나 업데이트합니다. 반면에 클라이언트 사이드 렌더링은 초기 페이지를 클라이언트에 로드하고, 이후 페이지 내용을 클라이언트 측에서 자바스크립트를 사용하여 동적으로 렌더링합니다. 서버는 초기 HTML과 필요한 데이터만 전달하며, 이후 렌더링은 클라이언트에서 수행합니다. 따라서 두 방식의 장,단점에 대해서 말해보자면, 서버 사이드 렌더링은 초기 페이지를 렌더링 시켜서 보내주기 때문에 SEO 최적화가 가능하고 사용자가 빠르게 콘텐츠를 볼 수 있습니다. 하지만 서버에서 많은 일을 처리할 수 있기 때문에 부하가 높아질 수 있습니다.
반면에 클라이언트 사이드 렌더링은 초기 로딩시 페이지가 비어 있으므로 SEO 최적화가 힘듭니다. 또한 자바스크립트 다운로드와 렌더링 시간이 걸릴 수 있어 사용자가 초기 페이지를 보는 시간이 오래 걸릴 수 있습니다.
1.2 자바스크립트 강의
if else 리팩토링
오늘은 If else 두 번째 강의다. 첫 번째 예제로 if else를 flat하게 객체로 가져가는 방법에 대해 먼저 소개한 다음, 조금 더 복잡한 예제를 다루었다.
첫번째 예제
const getClickCode = (page, keyword) => {
let code
if (page === 'city') {
if (keyword === 'title') code = 'cit'
else if (keyword === 'more') code = 'cim'
else if (keyword === 'tab') code = 'cib'
} else if (page === 'country') {
if (keyword === 'title') code = 'cot'
else if (keyword === 'more') code = 'com'
else if (keyword === 'tab') code = 'cob'
} else if (page === 'sight') {
if (keyword === 'title') code = 'sit'
else if (keyword === 'more') code = 'sim'
else if (keyword === 'tab') code = 'sib'
}
return code
}위와 같은 If else 구문이 있다면, 문자의 조합으로 flat하게 가져갈 수 있다. 일단 역시 먼저 객체로 nested하게 변경해보자.
const clickCodes = {
city: {
title: 'cit',
more: 'cim',
tab: 'cib'
},
country: {
title: 'cot',
more: 'com',
tab: 'cob'
},
sight: {
title: 'sit',
more: 'sim',
tab: 'sib'
}
}그렇게 되면 이제 다시 한 번 아래와 같이 줄여볼 수 있다.
const clickCodes = {
city_title: 'cit',
city_more: 'cim',
city_tab: 'cib',
country_title: 'cot',
country_more: 'com',
country_tab: 'cob',
sight_title: 'sit',
sight_more: 'sim',
sight_tab: 'sib'
}
const getClickCode = (page, keyword) => clickCodes[page + '_' + keyword]
console.log(getClickCode('city', 'tab')) // cib
console.log(getClickCode('country', 'title')) // cot
console.log(getClickCode('sight', 'more')) // sim