[TIL] 일단 만드는 Javascript

Yiju Kim·2022년 2월 25일
JavaScript멋사스타트업
0

자바스크립트(Js)를 배워야 하는 이유

  1. 쉽고 재밌게배울 수 있다. 실제 웹사이트 화면에서 결과 확인 가능하다.
  2. 활용범위가 넓다. 프론트엔드와 백엔드 둘다 가능, 안드로이드 iOS 등 다양한 분야에 활용가능
  3. 많은 사람들이 사용하여 라이브러리도 많고 질의응답 사이트가 잘되어있고 기업에도 많이 사용하여 취업에 도움된다.

1. Js 기본 개념

- Js 사용방법

1. HTML 안에 직접 작성

<body>
  
  
  <script>
    
    document.write("hi")
    
  </script>
</body>

HTML은 위에서 아래로 코드를 읽기 때문에 body 태그 끝나는 지점에 script 태그 사이에 넣어서 작성한다.

2. Js 파일 연결

<body>
  
  
  <script src="main.js"></script>
</body>

Js파일을 생성 후 src를 이용하여 HTML과 Js파일을 연결해준다.

- 세미콜론 ; 과 주석 //

<body>
  
  
  <script>
    
    document.write("hi");document.write("nice");document.write("good");
    
    // 아래는 주석입니다.
    // document.write("hi");document.write("nice");document.write("good");
    
    /* document.write("hi");document.write("nice");document.write("good");
    document.write("hi");document.write("nice");document.write("good");
    */
  </script>
</body>

세미콜론은 Js 코드를 구분해주는 역할을한다. 가독성을 높이기 위해 보통은 줄바꿈으로 코드를 구분하지만 한줄에 코드가 적혀있을 때는 세미콜론으로 구분해줘야한다.

단일줄 주석처리는 //로 가능하다. 주석은 코드를 동작시키고 싶지 않을 때 사용하거나 코드설명을 적을 때, 사용한다.
/* */ 안에 코드를 넣으면 구간 주석도 가능하다.

- 변수

변수란, 이름표가 붙은 데이터 상자이다.

var name = "kim"; // 문자형
var num = 10; // 숫자형 (정수: int, 실수: float)
var girlfriend = true; //bool형

document.write(typeof name) // typeof를 사용하면 데이터의 형을 확인 할 수 있다.

최신문법 ES6에서는 var 대신에 let,const를 사용하기도 한다.

변수에 대해 자세히 들어가면 어려워지니 이번 글에서는 이정도만 있다고 알고 가자.

1. 로또번호 추첨기

중복된 숫자 없이 무작위로 6개의 번호를 뽑아주는 로또번호 추첨기를 만들어보자.

1-1. 번호 1개 뽑기

프로젝트를 할 때, 한꺼번에 하려하지 말고 1개부터 뽑아보는 방향으로 시작하는 것이 좋은 선택이다.

Math.random(); // 0이상 1미만의 실수(float)를 무작위로 1개 return 한다.

Math.random() * 45 + 1 // 사칙연산을 사용하여 1부터 45까지의 숫자가 나오도록 한다.

parseInt(); // ()안을 정수로 변환해주는 기능


// 1부터 45의 정수를 무작위로 1개 return 한다.
parseInt(Math.random() * 45 + 1);

1-2. 번호를 배열 구조에 담기

로또 번호는 총 6개, 그렇다면 번호 6개를 뽑기 위해서 이렇게 단순 반복 6개를 해줘야하나?

var ball1 = parseInt(Math.random() * 45 + 1);
var ball2 = parseInt(Math.random() * 45 + 1);
var ball3 = parseInt(Math.random() * 45 + 1);
var ball4 = parseInt(Math.random() * 45 + 1);
var ball5 = parseInt(Math.random() * 45 + 1);
var ball6 = parseInt(Math.random() * 45 + 1);

그렇지 않다. 배열을 사용하여 하나의 변수 안에 여러개의 데이터를 관리 할 수 있다.
우리는 배열에 데이터를 넣는 방법을 배워보자.

var lotto = [];
var num = Math.random() * 45 + 1;
var ball = parseInt(num);

lotto.push(ball); // 배열 맨뒤에 값을 추가

document.write(lotto) // 출력

1-3. 반복문을 사용하여 단순반복 줄이기

- for (특정횟수만큼 실행)

// i = 0 일 때 시작하고 반복문 속 코드를 1회 실행하면 i에 1을 더해서 반복문을 실행하고 i가 6이 되었을 때, 조건을 만족하지 않으니 중단한다.
for (var i = 0; i < 6; i++) {
	lotto.push(parseInt(Math.random() * 45 + 1));
};
document.write(lotto);

하지만 위의 방식으로 로또 번호를 뽑는다면 중복된 번호가 나올 수도 있다.

- while (특정조건만족시 실행)

// 조건을 만족하지 않을 때 까지 아래 코드를 반복한다.
while (lotto.length < 6) {
	lotto.push(parseInt(Math.random() * 45 + 1));
}

.length는 배열의 길이를 알려준다. 위 코드는 배열의 길이가 6개가 되면 기능을 멈춘다.

1-4. 조건문으로 중복값 처리하기

반복문이 다 돌고 나온 결과를 보니 중복값도 그대로 출력되었다면 조건문을 사용하여 중복값은 배열에 추가 하지 않도록 해줄 수 있다.

var num = Math.random() * 45 + 1;

// if (조건) {조건이 참일 때 실행할 코드}
if (lotto.indexOf(num) == -1) { // 즉 lotto 배열안에 num 숫자가 없으면~ 아래코드 실행해주세요
	lotto.push(num); // 배열 맨 뒤에 num 값을 추가해주세요
}

.indexOf()는 괄호 안에 숫자가 존재하면(true) return 숫자의 index(위치), 존재하지않으면(false) return -1

1-5. 로또 번호 오름차순으로 정렬

반복문과 조건문을 끝낸 로또 번호를 오름차순으로 정렬하기 위해 .sort() 를 사용한다.

var ex = [1,2,3,33,22,11]

document.write(ex.sort())

// result
[1,11,2,22,3,33]

.sort()는 사전순으로 정렬이 된다.

따라서 오름차순으로 정렬하기 위해서는 특정 조건을 추가해줘야한다.

.sort((a,b) => a-b) // 다음 조건을 넣어줘야 오름차순이 작동한다.

#Result

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 번호 추첨기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>로또 번호 추첨기</h1>
    <script>
        var lotto = [];
        while (lotto.length < 6) {
            var num = parseInt(Math.random() * 45 + 1); 
            if (lotto.indexOf(num) == -1) {
                lotto.push(num);
            }
        }
        lotto.sort((a,b)=>a-b);
        document.write(lotto);
    </script>
</body>
</html>

HTML/CSS을 이용하여 각자 로또 번호를 디자인 해볼 수 있다.

❗️var 변수와 while문 순서

var lotto = [];
var num = parseInt(Math.random() * 45 + 1);
        while (lotto.length < 6) {
            if (lotto.indexOf(num) == -1) {
                lotto.push(num);
            }
        }
        lotto.sort((a,b)=>a-b);
        document.write(lotto);

위와 같이 num 변수가 반복문 바깥에 있으면 어떻게 될까?

num 변수에 Math.random()이 로또 번호를 할당하고 있다.
while 밖에 num 변수가 있으면 num변수에 할당을 반복하지 않고 한번만 해준다.

만약 번호가 30이 나왔다고 치면, 랜덤 번호 생성은 1회로 끝나고 배열에 30이라는 숫자가 있는지 확인하는 조건문만 반복해서 작동한다.

근데 배열에 30이라는 번호가 있으니 배열에 더 이상 중복 숫자는 추가는 못하고 그래서 while 조건인 배열의 길이가 6이 넘지 못하여 무한 반복된다.

2. 자소서 글자수 계산기

이번 프로젝트에서는 화면을 구성하는 모든 것들에 접근이 가능한 DOM을 다뤄보도록 한다.

DOM에 접근하기 위해서
document.getElementById('id')를 사용할 것이다.

2-1. textarea 값을 가져와 console창에 출력

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자소서 글자수 계산기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
h1 {
margin-top: 30px;
}
#count {
float: right;
}
</style>
</head>
<body class='container'>
<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">안녕하세요 김이주입니다.</textarea>
<span id="count">(0/200)</span>
<script>


</script>
</body>
</html>

다음과 같은 html 문서에서 textarea 태그 안의 입력값을 가져오기 위해서 아래 코드를 사용한다.

// 아이디가 자소설이라는 것의 입력값을 가져온다.
var content = document.getElementById(‘jasoseol’).value;

// console창에 출력
console.log(content);

2-2. .length로 입력값의 길이 구하기

var content = document.getElementById(‘jasoseol’).value;

// 콘솔창에 입력값 길이 출력
console.log(content.length);

2-3. 콘솔창이 아닌 화면에 나타내기

// 위에 HTML 문서에서 span 태그의 id 'count'를 가져와서 그 안에 내용물(innerHTML)을 오른쪽 걸로 바꿔주세요~
document.getElementById(‘count’).innerHTML = ‘(’+content.length+”/200)”

"",''를 이용하여 문자열을 붙여서 작성할 수 있다.

2-4. 함수로 긴 명령어 축약하기

// 지금까지 만든 긴 코드를 함수에 넣어 축약
function count() {
	var content = document.getElementById('jasoseol').value;
	document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};

// 함수 사용 방법
count();

2-5. 이벤트와 이벤트 핸들링

이벤트란, 동작을 말하며 예시로 마우스로 클릭했을 때, 글자가 입력했을 때를 말한다.

이벤트 핸들링이란, 이벤트가 발생하였을 때, 해줄 행동으로 이번 프로젝트에선 글자를 세어주는 코드이다.

- 사용방법

글자를 입력했을 때 이벤트 = onkeydown
이벤트 핸들링 = count() 함수
<textarea 이벤트=이벤트핸들링></textarea>

<script>
function count() {
    var content = document.getElementById('jasoseol').value;
    document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
</script>

2-6. 글자수 제한 두기

if 조건문을 사용하여 일정 글자수가 넘으면 넘어가는 입력값을 자르자.
substring() 기능을 사용하여 구현한다.

글자수를 200글자고 제한하고 싶다면 아래와 같이 코드를 작성하면된다.

if (content.length > 200) { // 만약 글자길이가 200보다 크면
	content = content.substring(0,200); // content를 200글자까지 보여주고 나머지는 잘라주세요~
	document.getElementById('jasoseol').value = content; // 200글자만 보여준 값을 다시 id='jasoseol'의 입력값으로 넣어주세요~
}

#Result

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자소서 글자수 계산기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
h1 {
margin-top: 30px;
}
#count {
float: right;
}
</style>
</head>
<body class='container'>
<h1>자기소개</h1>
<textarea onkeydown = count() class="form-control" rows="3" id="jasoseol">안녕하세요 김이주입니다.</textarea>
<span id="count">(0/200)</span>
<script>
function count() {
	var content = document.getElementById("jasoseol").value;
	if (content.length > 100) {
		content = content.substring(0,100);
		document.getElementById('jasoseol').value = content;
	}
	document.getElementById('count').innerHTML = "("+content.length+"/100)"
};
  
count();

</script>
</body>
</html>

❗️onkeydown = count() == onkeydown = "count()"

그냥 같다고 생각하자.

3. 미니 스타크래프트 만들기

- 미니 스타크래프트 프로젝트 설명

왼쪽에 보라색 드론을 클릭하면 드론이 침을 뱉어 오른쪽 파란색 벙커를 공격하고 HP가 1씩 감소하여 HP가 0이 되면 벙커는 사라진다.

본격적인 프로젝트에 들어가기에 앞서 새로운 개념 jQuery 라이브러리에 대해 알고 넘어가자.

- jQuery

jQuery는 기존의 Js코드가 너무 길어서 사용하기 힘든 것을 보완하여 나온 라이브러리이다.

- jQuery 장점

  1. 간결한 문법으로 사용이 편리
  2. 편리한 API
  3. 크로스 브라우징 해결 ( 모든 브라우져, 모든 버젼간 에러없이 동일하게 기능이 작동한다.)

- jQuery cdn 설치

code.jquery.com에 접속하여 최신 버전 minified 파일을 클릭하여 나온 코드를 복사하여 body 태그 끝나는 지점에 붙여넣는다.
우리가 js 코드를 작성할 때는 jQuery CDN 붙여넣은 곳 아래에 작성해야지 잘 작동한다.

- jQuery 기본문법

$('#id').click(function(){}) #id = 선택자, click = 행위

이전에 배웠던 Js 이벤트와 이벤트 핸들링에서는 선택자의 태그 안에 이벤트 = 이벤트 핸들링을 해줘야하는데 jQuery는 필요없다.

- 익명함수

우리가 함수를 쓰는 이유는 자주 사용하는 코드가 너무 길어 함수로 축약해서 사용하는 것인데, 원할 때 마다 한번 씩 사용하고 싶은데 그 때마다 함수를 만들면 번거로우니 그럴 땐, 익명함수를 사용한다.

익명함수: 한번만 사용할 함수
function(){
	console.log(‘hi’)
}

3-1. 드론에 클릭 이벤트 넣기

우선 침은 미리 보여지면 안되니 #spit의 css 속성에 display: none;을 해주었다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타크래프트</title>
<style>
.background {
position: relative;
background-image: url('background.png');
background-size: 500px 330px;
width: 500px;
height: 330px;
}
#drone {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 60px;
}
#bunker {
position: absolute;
width: 150px;
height: 150px;
top: 80px;
right: 20px;
}
#spit {
display: none;
position: absolute;
top: 140px;
left: 150px;
width: 50px;
height: 30px;
z-index: 2;
}
</style>
</head>
<body>
	<h1 id='hp'>HP: 3</h1>
	<div class='background'>
		<img id='drone' src="drone.png" alt="drone">
		<img id='spit' src="spit.png" alt="spit">
		<img id='bunker' src="bunker.png" alt="bunker">
	</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
  </script>
<script>
여기에 우리 js 코드 작성!!

// #drone에 클릭 이벤트 생성
$('#drone').click(function(){
	console.log('침 발사');
});
  
</script>
</body>
</html>

3-2. 드론 침 이미지 나타나기

어떻게 나타나게 하는지 모르겠다면 무조건 구글링이 답이다. jQuery 홈페이지 "API Documentation"에 가서 검색해보면 함수의 사용 방법이 나와있고 사용 예제도 나와있어 도움이 된다.
우리는 .fadeIn() 기능을 이용할 것이다.

.fadeIn([duratioin],[complete]) []안에 있는 것들은 생략가능


$('#drone').click(function(){
	$('#spit').fadeIn();
});

3-3. 침 발사된 후 사라지게 만들고 발사된 침 원위치 시키기

이번에는 침 발사를 위해 이동하는 기능을 구현할 수 있는 .animate() 기능을 사용하였다.
발사된 후 사라지게 하는 기능은 .fadeOut()
다시 사라진 침 다시 원위치 시키는 기능은 .css를 사용하였다.

.animate(css 속성,[duration],[easing],[complete]) css 속성 넣을 때, {}사이에 넣어야한다.


$('#drone').click(function(){
	$('#spit').fadeIn();
	$('#spit').animate({left:'+=250px'}); // animate({css속성: " 숫자여도 따옴표 안에 들어가야한다. "}) 서서히 움직이게 해준다.
    $('#spit').fadeOut(); // 침 사라진다.
    $('#spit').css({left: '150px'}); // 사라진 침이 원래 자리로 돌아온다.
});

3-4. 벙커에 hp를 깎이게 하자

var hp = 3;
$('#drone').click(function(){
	$('#spit').fadeIn();
	$('#spit').animate({left:'+=250px'});
    $('#hp').text('HP: '+hp) // id=hp인 요소의 text를 ()안에 있는 것으로 바꿔주세요~
    $('#spit').fadeOut();
    $('#spit').css({left: '150px'});
});

근데 위와 같이 코드를 짜고 실행하면 fadeOut 동작이 끝나기 전에 hp가 먼저 깎여서 어정쩡하다.
fadeOut이 완료되고 hp를 깎이게 하고 싶으면 즉, 함수의 동작이 끝나고 다음 순서로 함수를 동작하게 하려면 콜백(call back)함수는 사용한다.

- 콜백(call back)함수

$('#spit').fadeOut(function(){ // fadeOut 종료되면 아래 코드 실행해주세요~
	hp = hp - 1;
	$('#hp').text('HP :' + hp);
});

위 와같이 fadeOut()안에 익명함수를 넣고 그 함수에 대한 코드로 HP 깎이는 코드를 작성하면 된다.

3-5. HP가 0이 되면 벙커를 폭파시키자

조건문 if를 사용하여 간단하게 할 수 있다.

if (hp == 0) {
	$(“#bunker”).fadeOut();
}

#Result

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타크래프트</title>
<style>
.background {
position: relative;
background-image: url('background.png');
background-size: 500px 330px;
width: 500px;
height: 330px;
}
#drone {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 60px;
}
#bunker {
position: absolute;
width: 150px;
height: 150px;
top: 80px;
right: 20px;
}
#spit {
display: none;
position: absolute;
top: 140px;
left: 150px;
width: 50px;
height: 30px;
z-index: 2;
}
</style>
</head>
<body>
	<h1 id='hp'>HP: 3</h1>
	<div class='background'>
		<img id='drone' src="drone.png" alt="drone">
		<img id='spit' src="spit.png" alt="spit">
		<img id='bunker' src="bunker.png" alt="bunker">
	</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="crossorigin="anonymous">
  </script>
<script>
var hp = 3;
$('#drone').click(function(){
	$('#spit').fadeIn();
	$('#spit').animate({left:'+=250px'});
	$('#spit').fadeOut(function(){
		hp = hp - 1;
		$('#hp').text('HP: '+hp);
		if (hp == 0) {
			$("#bunker").fadeOut();
		}
	});
	$("#spit").css({left:'150px'});
});
</script>
</body>
</html>

4. 기념일 계산기

기념일 계산기를 이용하여 연인과의 만난 날짜와 기념일 까지 며칠이 남았는지 계산을 해주는 프로그램을 만들어보자.
프로젝트에 들어가기 전 객체에 대해 짚고 넘어가자.

- 객체 Object란,

key와 value로 구성된 요소
value에는 문자,숫자 값 뿐만 아니라 배열, 객체, 함수까지 들어갈 수 있다. value에 들어간 함수는 "메서드"라고 부른다.

- 객체 출력


위 그림과 같이 객체의 이름.key 값을 이용하여 value값을 출력할 수 있다.
그런데 메서드를 불러 올 때는 모양이 앞서 배운 내용과 비슷한 구조를 띈다.

// Js의 모든 것은 객체이다.
content.length;
document.write();
console.log();

4-1. 우리 며칠 째?

날짜를 계산하기 위해서 자바스크립트 내장 객체를 사용할 것이다.

//1. Date 객체 생성
var now = new Date(); // 오늘을 기준으로 date 객체를 생성하고 now 라는 변수에 저장

//2. 연도를 가져오는 메서드 .getFullYear()
console.log(now.getFullYear());

//3. 월 정보를 가져오는 메서드 .getMonth() 현재 달 보다 1 적게 나온다. 
console.log(now.getMonth());

//4. 일 정보를 가져오는 메서드 .getDate()
console.log(now.getDate());

//5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초(ms)로 표시하는 메서드 .getTime()
console.log(now.getTime());

//6. 특정 일의 Date 객체 생성
var christmas = new Date('2020-12-25');
console.log(christmas);

//7. 특정 ms의 Date 객체 생성 ex) 1000일 언제야 우리?
var ms = new Date(1000);
console.log(ms);

이정도 기능을 익혀둔 체 우리 며칠 째? 인지 알아 보러 가자.

우리 며칠 째 구하는 방법

  1. 지금의 밀리초를 구한다.
  2. 사귄날의 밀리초를 구한다.
  3. 며칠밀리초 = 지금 밀리초 - 사귄날 밀리초
  4. 며칠 밀리초를 일수로 계산한다.
<body>
<h3 id='love'>0일째</h3>
<h4 class="date">2020.6.30</h4>

<script>
  
var now = new Date(); // 현재 date 객체 생성
var start = new Date('2020-06-30'); // 특정 일의 date 객체 생성

var timeDiff = now.getTime() - start.getTime(); // 두 기간의 밀리초 차, 만난 밀리초
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1); // Math.floor()는 정수로 변환, +1을 더한 이유는 사귄날부터 0일이 아닌 1일로 생각하기때문이다.
$('#love').text(day + '일째'); // id=love인 요소의 text를 ()안에 있는 걸로 바꿔주세요~
  
</script>
</body>

4-2.기념일까지 남은 날짜

기념일 남은일수 구하는 방법

  1. date 객체 없으면 객체부터 생성.
  2. 기념일의 ms를 getTime()함수로 구한다..
  3. 기념일 ms - 현재 ms 계산
  4. 남은 밀리초를 일수로 계산한다.
var valentine = new Date('2023-02-14'); // 미래의 발렌타인 date 객체 생성

var timeDiff2 = valentine.getTime() - now.getTime(); // 발렌타인ms 와 현재ms 차
var day = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1); // ms를 일수로 변환
$('#valentine').text(day + '일 남음'); // id=valentine인 요소의 text 변경

4-3. 우리 1000일이 언제야 ?

1000일 ms 구하는게 조금 헷갈릴 수도 있다. 하지만 천천히 논리를 따져가며 생각해보자.

1000일 언제인지 구하는 방법

  1. date 객체 없으면 생성 하지만 생성하기 위해서는 특정날짜 (2023-12-25)나 그 날짜의 ms가 필요하다.
  2. 1000일의 ms = 사귄날 ms + 999일 ( 일수를 ms로 변환해서 더해줘야한다 )
  3. var thousand = new Date(1000일 ms)
var ms = start.getTime() + 999 * (1000 * 60 * 60 * 24);
var thousand = new Date(ms);
thousand_date = thousand.getFullYear()+’.’+(thousand.getMonth()+1)+’.’+thousand.getDate(); // text 바꿔주기 위해 변수에 저장
$('#thousand-date').text(thousand_date);

4-4. 1000일 까지 며칠 남았지?

var now = new Date();
var ms = start.getTime() + 999 * (1000 * 60 * 60 * 24);

var timeDiff3 = thousand.getTime() - now.getTime(); // ms == thousand.getTime() 같다.
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$('#thousand').text(day3 + '일 남음');

Result

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>기념일 계산기</title>
<style>
* {
color: #333333;
}
p {
margin-bottom: 1px;
}
.photos {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#duhee {
width:150px;
height:150px;
object-fit:cover;
border-radius:50%;
margin-right: 30px;
}
#jisook {
width:150px;
height:150px;
object-fit:cover;
border-radius:50%;
margin-left: 30px;
}
#heart {
width:50px;
height:50px;
}
.gray {
color: #a0a0a0;
}
.special-day {
display: flex;
justify-content: space-between;
}
.title {
display: flex;
align-items: center;
}
.days-left {
text-align: right;
}
.date {
text-align: right;
color: #a0a0a0;
}
</style>
</head>
<body class="container">
	<section class='photos'>
		<img id='duhee' src="duhee.jpeg" alt="duhee">
		<img id='heart' src="heart.png" alt="heart">
		<img id='jisook' src="jisook.jpeg" alt="jisook">
	</section>
	<div class='container d-flex flex-column justify-content-center align-items-center mt-3'>
		<h3>두희♥지숙</h3>
		<h3 id='love'>0일째</h3>
		<h4 class="date">2020.6.30</h4>
	</div>
	<hr/>
	<section class='special-day'>
		<h3 class='title'>발렌타인 데이</h3>
		<div class='date-box'>
			<p id='valentine' class='days-left'>0일 남음</p>
			<p class='date'>2021.2.14</p>
		</div>
	</section>
	<hr/>
	<section class='special-day'>
		<h3 class='title'>1000일</h3>
		<div class='date-box'>
			<p id='thousand' class='days-left'>0일 남음</p>
			<p id='thousand-date' class='date'>0000.00.00</p>
		</div>
	</section>
	<hr/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha2569/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
  </script>
<script>
var now = new Date();
var start = new Date('2020-05-17');

// 우리 몇 일째?
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');

// 다음 발렌타인까지 남은 날짜는?
var valentine = new Date('2023-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('#valentine').text(day2 + '일 남음');

// 1000일은 언제인가?
var thousand = new Date(start.getTime() + 999 * (1000 * 60 * 60 * 24));
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);

// 1000일까지 남은 날짜는?
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$('#thousand').text(day3 + '일 남음');
</script>
</body>
</html>

Git hub 코드 공유 / Netlify 배포하기

- 깃헙 시작하기

https://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/ByfwpNJ-K

위 레퍼런스를 참고하여 깃헙에 가입해보자.

- 코드 올리기

터미널에 아래 코드를 순서대로 적는다.

  • 시작하기: git init
  • 유저 이름 설정: git config --global user.name "codelion-jocoding"
  • 이메일 등록: git config --global user.email #####@gmail.com
  • 파일 추가: git add .
  • 메세지 입력: git commit -m "first commit"
  • 보낼 곳 등록: git remote add origin https://github.com/codelion-jocoding/myrepo.git -> 보낼 주소는 아래 사진 참조
  • 보낼 곳으로 코드 전송: git push origin master


본인 Git hub 주소 확인하고 복붙하면 된다.

Netlify로 배포하기

https://goddino.tistory.com/190
아래 레퍼런스를 참고하여 배포까지 마무리 해보자.

🔔 오늘의 소감

드디어 온라인 강의 5일차 한주가 지났다. 오늘 수업은 프로젝트 위주의 수업인데다 게임도 만들어봐서 재밌게 배우면서 들었던 것 같다. 이제 다음주 화요일부터 진짜 시작이다. 주말동안 마음을 다잡고 그동안 배웠던 것을 복습하는 시간을 가져봐야겠다.

profile
Yiju Kim
제로베이스 스쿨 커넥to 프론트엔드 1기
이전 포스트

[TIL] 심화 같이 푸는 파이썬

다음 포스트

[mac] 웹 크롤링을 위한 환경 설정

0개의 댓글