[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 16일차
🍊 JS
1. JavaScript
BOM(Browser Object Model)
- 윈도우 객체: 객체 window는 모든 브라우저에서 지원됨
- (HTML DOM) 문서 개체도 창 개체의 속성
let w = window.innerWidth;
let h = window.innerHeight;
console.log(w);
console.log(h);
window.document.getElementById("header"); // 같음 👇🏻
document.getElementById("header");
JS 스크린
// 개체 window.screen는 창 접두사 없이 쓸 수 있음.
document.getElementById("demo").innerHTML = "Screen Width" + screen.width;
document.getElementById("demo").innerHTML = "Screen Height" + screen.height;
// Windows 작업 표시줄과 같은 인터페이스 기능을 제외한 방문자 화면
document.getElementById("demo").innerHTML = "Available Screen Width" + screen.availWidth;
document.getElementById("demo").innerHTML = "Available Screen Height" + screen.availHeight;
쿠키
- 쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 조각
- 서버에서 클라이언트로 전송되어 브랑저에 저장, 같은 서버에 요청할 때마다 클라이언트에서 서버로 전송
- 주로 사용자 인증, 세션 관리, 개인화 등을 위해 사용
- 클라이언트에서 수정 가능, JS를 사용하여 조작 가능
캐시
- 캐시는 웹 페이지, 이미지, 스크립트 등의 리소스를 저장하는 임시 저장소
- 웹 페이지를 요청할 때 브라우저는 해당 페이지의 리소스를 서버에서 다운로드하여 캐시에 저장
- 같은 페이지에 다시 접근할 때 브라우저는 캐시된 리소스를 사용하여 서버에 다시 요청하지 않고 페이지를 빠르게 로드
- 웹 페이지의 로딩 속도를 향상시키고 네트워크 트래픽을 줄이는 데 도움
- 브라우저에서 관리, 일정 시간이 지나면 자동으로 만료
- 클라이언트에서는 캐시의 내용을 직접 수정할 수 없음
2. 과제 - Momentum(랜덤 배경, 인사, 시계)
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum</title>
<link rel="stylesheet" href="./css/style.css">
<script defer src="./js/main.js"></script>
</head>
<body>
<main>
<div>
<h1 id="time"></h1>
<h3 class="greetings"></h3>
</div>
</main>
</body>
</html>
CSS
body {
background: url("https://source.unsplash.com/random/?nature") no-repeat center fixed;
background-size: cover;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center
}
main div {
padding: 100px;
border: 5px solid #fff;
backdrop-filter: blur(10px);
}
JS
// 시계
const time = document.getElementById('time');
function getTime() {
const date = new Date();
const hours = String(date.getMinutes()).padStart(2, "0"); // padStart(길이, 왼쪽부터 채워넣음)
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0")
time.innerText = `${hours}:${minutes}:${seconds}`;
}
getTime();
setInterval(getTime, 1000);
// 시간에 따라 인사말 처리
const greetingWords = document.querySelector(".greetings");
function paintGreeting() {
const date = new Date();
const time = date.getMinutes();
let greetingWord = "";
if (0 <= time && time < 5) {
greetingWord = "Good day";
} else if (5 <= time && time < 9) {
greetingWord = "Good morning";
} else if (9 <= time && time < 17) {
greetingWord = "Good afternoon";
} else {
greetingWord = "Good evening";
}
greetingWords.innerHTML = `${greetingWord}`;
}
paintGreeting();
결과
Morning
Afternoon
3. 회고
요번에는 JS로 장바구니 만들기 및 실시간 채팅, 할일 목록 만들기를 했는데
jQuery만 쓰다가 JS로 직접 다 만들어보려니까 생각보다 어려웠다.. 더위먹어서 머리가 잘 안굴러간건가?😂
그래도 한번 해보니까 다음부터느쉽게쉽게 했던거 같음 !! 이번 과제는 (랜덤배경 + 인사말 + 시계) 만드는거였는데,
생각보다 쉬웠다. 이어서 다음 과제에는 (할 일 목록 + 내 위치 날씨) 인데 이번에 배운걸로 하면 그렇게 어렵진 않을지도?
일단 저 세 가지만 하긴 했는데 처음에 회원이름? username입력 부분이 있어서 그것도 해야하는지..요..?
그렇다면 다음 과제 할때 추가해보도록 하겠다ㅎㅎ 이번 과제도 성공적?!
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
Leave a comment