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

[ 서진 ] #5

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[ 서진 ] #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
531efa3
fix: header 이름 수정
se0jinYoon Nov 7, 2023
c84240a
feat: 계산기 로직 구현
se0jinYoon Nov 7, 2023
e979985
fix: click 이벤트 구현 변경, input태그 아이디 값으로 접근
se0jinYoon Nov 7, 2023
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
14 changes: 7 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,23 @@
</head>
<body>
<header>
<h1>혜인이의 계산기</h1>
<h1>서진이의 계산기</h1>
</header>
<main>
<section>
<input type="number" />
<select name="calculate">
<input type="number" id="userInput1"/>
<select name="calculate" id="operationType">
<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="userInput2"/>
<h2>=</h2>
<h3>정답</h3>
<h3 id="answer">정답</h3>
</section>
<button>결과는?</button>
<button id="resultBtn">결과는?</button>
</main>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/main.js"></script>
Copy link
Member

Choose a reason for hiding this comment

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

엇 혹시 main.js는 왜 생겼지? 혹시 compile한 건가용,,,??????????
그냥 yarn dev 실행하면 되었을텐디!! 어케된건지 궁금해!

Copy link
Author

Choose a reason for hiding this comment

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

PR에 남겨두었는데 !
main.ts:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.

이 에러가 계속 떠서 대체 왜 ..... 이런건가 하고 찾아보다가 계속 구글링 하다가 main.ts를 연결할 때 에러가 발생하는 것이라 컴파일 완료된 main.js파일을 연결하면 에러가 발생하지 않는다는 글을 보고 .. 그렇게 해결했습니다만

지금 생각해보니 내가 CRA에 익숙해져 있어서 npm run start로 켰었나 ..? 그래서 저런 에러가 와장창 발생했던 건가란 합리적 의심중 ..

</body>
</html>
36 changes: 36 additions & 0 deletions src/main.js
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

호오오옥시 이 파일의 정체가 왜 생겼는지 알 수 있을까? 내가 vite로 만든 ts라서 굳이 컴파일 과정같은게 필요없었을텐디!

Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
var userInput1 = document.getElementById('userInput1');
var userInput2 = document.getElementById('userInput2');
var operationType = document.getElementById('operationType');
var answer = document.getElementById('answer');
var resultBtn = document.getElementById('resultBtn');
function getResult() {
var firstInput = Number(userInput1.value);
var secondInput = Number(userInput2.value);
var operator = operationType.value;
var result = calculate(firstInput, secondInput, operator);
answer.innerText = result.toString();
}
function calculate(firstInput, secondInput, operator) {
var result = 0;
switch (operator) {
case "sum":
result = firstInput + secondInput;
break;
case "sub":
result = firstInput - secondInput;
break;
case "mul":
result = firstInput * secondInput;
break;
case "divide":
if (secondInput !== 0) {
result = firstInput / secondInput;
}
else {
throw new Error('0으로 나눌 수 없습니다 ^0^');
}
break;
}
return result;
}
resultBtn.addEventListener("click", getResult);
39 changes: 39 additions & 0 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const userInput1: HTMLInputElement = document.getElementById('userInput1') as HTMLInputElement;
const userInput2: HTMLInputElement = document.getElementById('userInput2') as HTMLInputElement;
const operationType: HTMLSelectElement = document.getElementById('operationType') as HTMLSelectElement;
const answer: HTMLElement = document.getElementById('answer')!;
Copy link
Member

Choose a reason for hiding this comment

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

요거 ! 머야! 진짜 많이 생각한게 느껴진다ㅠㅠㅠ 스터디에서 안 다뤘던거 같은데!
! 는 undefined나 null이 될 수 없음을 의미하는 표시라구 생각하시면 됩니다! -> 알고 있겠찌만 ❤️

Copy link

Choose a reason for hiding this comment

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

허억 이렇게 연산자로 제한해서 이후에 null값이 들어오는 예외처리를 안해줘도 되겠구나!

const resultBtn: HTMLButtonElement = document.getElementById('resultBtn') as HTMLButtonElement;

function getResult():void {
const firstInput: number = Number(userInput1.value);
const secondInput:number = Number(userInput2.value);
const operator:string = operationType.value;

const result:number = calculate(firstInput, secondInput, operator);
Copy link
Member

Choose a reason for hiding this comment

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

굳굳!!! 하나하나 타입 넣어준 거 너무 죠아요!!

answer.innerText = result.toString();
}

function calculate(firstInput:number, secondInput:number, operator:string):number {
Copy link
Member

Choose a reason for hiding this comment

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

요거 인터페이스로 만들면
interface CalculatorInput { firstInput: number; secondInput: number; operator: string; }
그래서 정리하면,

Suggested change
function calculate(firstInput:number, secondInput:number, operator:string):number {
function calculate(firstInput, secondInput, operator): CalculateInput{

let result:number = 0;
switch(operator) {
case "sum":
result = firstInput + secondInput;
break;
case "sub":
result = firstInput - secondInput;
break;
case "mul":
result = firstInput * secondInput;
break;
case "divide":
if (secondInput !== 0) {
Copy link
Member

Choose a reason for hiding this comment

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

예외처리 굳!

result = firstInput / secondInput;
} else {
throw new Error('0으로 나눌 수 없습니다 ^0^');
}
break;
}
return result;
}

resultBtn.addEventListener("click", getResult);