Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[수연] #8

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[수연] #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,30 @@
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/style.css" />
<link rel="stylesheet" href="./src/style.css" />
<title>타입스크립트로 계산기 만들기</title>
</head>
<body>
<header>
<h1>혜인이의 계산기</h1>
<h1>수연이의 계산기</h1>
</header>
<main>
<section>
<input type="number" />
<input type="number" id="num1" />
<select name="calculate">
<option value="sum">+</option>
<option value="sub">-</option>
<option value="mul">x</option>
<option value="divide">/</option>
</select>
<input type="number" />
<input type="number" id="num2" />
<h2>=</h2>
<h3>정답</h3>
</section>
<button>결과는?</button>
</main>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="./src/main.js"></script>
</body>
</html>
34 changes: 34 additions & 0 deletions src/main.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오옷!! 혹시 이 파일은 미리 js로 작성해보다가 남겨진 파일인가요 ~??

현재 html에서 js 파일을 로드 하고 있어서 ts로 짠 코드가 작동이 안 되는 거 같아요 ㅠ.ㅠ

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 혹시 컴파일한건가요?? 이거 vite라 그냥 했어도 됐는데!

Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
var $ = function (selector) { return document.querySelector(selector); };
var $$ = function (selector) { return document.querySelectorAll(selector); };
var num1 = $('#num1');
;
var num2 = $('#num2');
;
var cal = $('select[name="calculate"]');
var resultTag = $('h3');
var btn = $('button');
;
var calculate = function () {
var preNum = parseFloat(num1.value);
var postNum = parseFloat(num2.value);
var result;
switch (cal.value) {
case 'sum':
result = preNum + postNum;
break;
case 'sub':
result = preNum - postNum;
break;
case 'mul':
result = preNum * postNum;
break;
case 'divide':
result = preNum / postNum;
break;
default:
result = "";
break;
}
resultTag.textContent = result.toString();
};
btn.addEventListener('click', calculate);
38 changes: 38 additions & 0 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@

const $ = (selector:string) => document.querySelector(selector) as HTMLElement;

const num1 = $('#num1') as HTMLInputElement;;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

먁 오타생긴 거 같아ㅠㅠ 에러 뜰 거 같은ㄷㅔ!

const num2 = $('#num2') as HTMLInputElement;;
const cal=$('select[name="calculate"]') as HTMLSelectElement;
const resultTag=$('h3') as HTMLElement;
const btn = $('button') as HTMLButtonElement;;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요기도!!


const calculate =()=>{
let preNum = parseFloat(num1.value);
let postNum = parseFloat(num2.value);

let result:number|string;

switch (cal.value) {
case 'sum':
result = preNum+postNum;
break;
case 'sub':
result = preNum-postNum;
break;
case 'mul':
result = preNum*postNum;
break;
case 'divide':
result = preNum/postNum;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

postNum이 0인 예외으 경우도 빼주면 좋을 것 같아요!

break;
default:
result="";
break;
}
Comment on lines +16 to +32
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰하다가 생각해본건데,

switch문 말고, 객체 매핑 방식은 어떤가요 ~??

const operations = {
  sum: (a, b) => a + b,
  sub: (a, b) => a - b,
  mul: (a, b) => a * b,
  divide: (a, b) => a / b,
};

if (cal.value in operations) {
  result = operations[cal.value](preNum, postNum);
} else {
  result = "올바른 연산을 선택하세요.";
}

이런식으로요!
코드가 더 간결해지고, 확장 가능성도 높일 수 있을 것이라 생각했어요 !

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

옴마나,,,, 진ㅉㅏ 갓갓!! 대신에 타스니까 또 여기에 타입 넣는 거를 잊지 않아야 해용!
`const operations = {
sum: (a: number, b: number): number => a + b,
sub: (a: number, b: number): number => a - b,
mul: (a: number, b: number): number => a * b,
divide: (a: number, b: number): number => a / b,
};

let result: number | string;

if (cal.value in operations) {
result = operations[cal.value](preNum, postNum);
} else {
result = "올바른 연산을 선택하세요.";
}
`



resultTag.textContent=result.toString();

}
btn.addEventListener('click',calculate);