[ 혜인 ] by hae2ni · Pull Request #1 · TacoSrirachaStudy/Calculator

hae2ni · 2023-11-04T00:25:36Z

제목은 [ 이름 ] 으로 작성해주세요!

🌮 무엇을:

계산기 기본 포맷 개발했습니다.

🌮 어떻게:

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

저번에 js 과제할 때는 쓸까 하다가 안 썻던 getElementById 를 좀더 쉽게 할 수 있는 함수를 만들어 공통적인
부분을 최소화 했습니다.
html요소가 많지 않아, 구분이 쉽게 하기 위해서 일단 거의 모든 요소에게 id값을 부여했고, 이를 dom을 불러오는데 적용했습니다.
첨에 조금 헤맨게, 그냥 아무 생각없이 input 부터 어떻게 해부자! 여서 좀 걸렸는데, 그냥 버튼에 모든 걸 다 부여해서 해결했습니다.
버튼 누르면 input값 바로 없어지는 걸로 했어요,,, 왜냐면 아이폰도 결과값만 보여주니까,,,,,
ts에서 html요소 type 정도만 부여하고 그 외에는 없었는데 그냥 그게 넘 아쉬웠어요, 인터페이스를 안 썻다니! 싶고,, 담 플젝은 더 열심히 구상해보겠슴,,,,,

const resultHere = $("result") as HTMLHeadingElement;

dom요소에 관한 부분도 as 를 이용해서 타입을 부여하였더니 event.target.value 등과 같은 부분에서 ts에러가 나지 않았습니다!

function blockString(inputDom: HTMLInputElement): void {
  inputDom.addEventListener("input", (e) => {
    const input = e.target as HTMLInputElement;
    const changeToNum = input.value.replace(/[^0-9.]/g, "");
    if (input.value != changeToNum) {
      alert("숫자입력하세요");
      input.value = "";
    }
  });
}

저는 input type =text 로 변경ㅎㅏ고, 문자를 입력할 경우 alert가 뜨는 함수도 구현하였습니다. 처음에 typeof 를 썻는데 생각해보니 다 string 처리더군요,,, 그래서 number인 요소들과 입력값을 비교하는 함수를 만들어 처리했습니다.
HTMLDOM을 함수의 parameter로 넘겨주는 걸 생각 못해 좀 헤맷음,,,솔직히 구글링 오져따리,,ㅎㅎㅎㅎ내가 혼자 한 게 별로 없는 것 같은 자괴감!!! 😢

🌮 얼마나:

얼마나 걸렸나요? 30분
어떤 부분이 어려웠나요? html요소 type을 react없이 부여하는 게 첨이라 좀 헤맸티비

🌮 구현 사항:

필수 구현 사항이 완료된 부분의 영상을 첨부해주세요

_2023_11_04_09_52_01_874.mp4

hoeun0723

너무너무 훌륭한 코드여서
에러가 발생할 수 있는 부분에 대한 에러처리에 집중한 코드 리뷰를 했네요..

좋은 코드 작성해주셔서 감사합니다 !!! 🔥😆 많이 배워가요 !!

hoeun0723 · 2023-11-13T16:00:19Z

+
+  switch (selectorOptions) {
+    case "sum":
+      result = num1 + num2;
+      break;
+    case "sub":


시작부분에 입력이 유효한지 확인하고 오류 처리를 추가해주는 것은 어떤가요 ??

if (isNaN(num1) || isNaN(num2)) { result = "숫자를 입력하세요"; } else {

이런식으로요 !!

하지만 필수적인 요소는 아니라고 생각합니다 :)

그러네그러네!! 게으른 나,,

hoeun0723 · 2023-11-13T16:01:08Z

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


DOM 요소를 가져오는데, ID가 존재하지 않아 nul을 반환할 수 있으니, null 체크와 에러처리를 추가해주는 것은 어떤가요 ??

const $ = (selector: string) => { const element = document.getElementById(selector); if (!element) { throw new Error(`Element with ID '${selector}' not found.`); } return element as HTMLElement; };

저는 null 관련 지정을 안 했더니 에러가 무진장 나서 냅다 내 코드에서 null은 발생할 수 없어. 라고 !통해서 지정해두고 넘어갔는데 .... 혠니 코드에서는 따로 null관련 코드가 없는데도 에러 발생 없이 잘 작동했나보군요 ! 신기하네용 .. 뭔가 접근 방식에 따라 null에러가 발생하는 건가 ..?

저만 그랬던게 아니군요...허허 저는 이번주에 배운 | null 을 붙여서 해결했는데, 혜인언니 코드에는 없어서 어떻게 해결했는지 궁금합니당

hoeun0723 · 2023-11-13T16:09:12Z

+  switch (selectorOptions) {
+    case "sum":
+      result = num1 + num2;
+      break;
+    case "sub":
+      result = num1 - num2;
+      break;
+    case "mul":
+      result = num1 * num2;
+      break;
+    case "divide":
+      if (num2 !== 0) {
+        result = num1 / num2;
+      } else {
+        result = "계산 불가";
+      }
+      break;
+    default:
+      result = "";
+      break;
+  }


코드 리뷰를 하다가 생각한건데, switch문이 아닌, 객체 매핑 방식으로 변경해보는건 어떤가요 ~??

const operations = { sum: (a, b) => a + b, sub: (a, b) => a - b, mul: (a, b) => a * b, divide: (a, b) => (b !== 0 ? a / b : "계산 불가"), }; if (selectorOptions in operations) { result = operations[selectorOptions](num1, num2); } else { result = ""; }

이런식으로요!

코드가 더 간결해지고 확장 가능성이 높아질 것이라고 생각했습니다 !!

그그 그렇다면 호은이 코드 리뷰를 적용해보려면 객체를 interface로 만들게 되는 것인가요 ?
혹은 interface로 key-value 타입 지정을 해두고,
const operations의 타입에 만들어둔 interface를 대입하면 되는 것인가 ..?

interface Operations { [key: string]: (a: number, b: number) => number | string; } const operations : Operations { ... }

이렇게 ..? 🥹

moondda · 2023-11-14T08:31:33Z

+function blockString(inputDom: HTMLInputElement): void {
+  inputDom.addEventListener("input", (e) => {
+    const input = e.target as HTMLInputElement;
+    const changeToNum = input.value.replace(/[^0-9.]/g, "");


오 이렇게 하면 잘못 해서 문자가 입력돼도 그냥 생략되는건가용?
ex) 12.a23 => 12.23 이런식으로??

숫자만 입력할 수 있게 숫자를 제외하고""로 바꿔주는거 좋네용!!!

se0jinYoon

꼼꼼한 예외처리 감탄하면서 코드리뷰하고 감니당 !!
많이 배워가요오 💗

se0jinYoon · 2023-11-15T04:22:28Z

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


저는 null 관련 지정을 안 했더니 에러가 무진장 나서 냅다 내 코드에서 null은 발생할 수 없어. 라고 !통해서 지정해두고 넘어갔는데 .... 혠니 코드에서는 따로 null관련 코드가 없는데도 에러 발생 없이 잘 작동했나보군요 ! 신기하네용 .. 뭔가 접근 방식에 따라 null에러가 발생하는 건가 ..?

se0jinYoon · 2023-11-15T04:25:29Z

+      alert("숫자입력하세요");
+      input.value = "";


이런 섬세한 에러처리 넘 좋네용

se0jinYoon · 2023-11-15T04:31:31Z

+  switch (selectorOptions) {
+    case "sum":
+      result = num1 + num2;
+      break;
+    case "sub":
+      result = num1 - num2;
+      break;
+    case "mul":
+      result = num1 * num2;
+      break;
+    case "divide":
+      if (num2 !== 0) {
+        result = num1 / num2;
+      } else {
+        result = "계산 불가";
+      }
+      break;
+    default:
+      result = "";
+      break;
+  }


그그 그렇다면 호은이 코드 리뷰를 적용해보려면 객체를 interface로 만들게 되는 것인가요 ?
혹은 interface로 key-value 타입 지정을 해두고,
const operations의 타입에 만들어둔 interface를 대입하면 되는 것인가 ..?

interface Operations { [key: string]: (a: number, b: number) => number | string; } const operations : Operations { ... }

이렇게 ..? 🥹

rachel5640

똑같이 switch문을 사용해서 구현했는데, 섬세하게 예외처리해준 부분들 보면서 배워가요!!
스장님 언제나 화이팅💛

rachel5640 · 2023-11-15T13:14:30Z

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


저만 그랬던게 아니군요...허허 저는 이번주에 배운 | null 을 붙여서 해결했는데, 혜인언니 코드에는 없어서 어떻게 해결했는지 궁금합니당

rachel5640 · 2023-11-15T13:18:16Z

+    case "divide":
+      if (num2 !== 0) {
+        result = num1 / num2;
+      } else {
+        result = "계산 불가";
+      }


섬세한 예외처리..너무 좋네요👍

SooY2

제가 놓쳤던 부분들을 많이 알 수 있었던... 다음 타스 스터디 때 혜인언니 코드로 설명 한번 해주시면 넘 좋을거같아요🥺 많이 배워 갑니다롱

SooY2 · 2023-11-18T13:49:02Z

+function blockString(inputDom: HTMLInputElement): void {
+  inputDom.addEventListener("input", (e) => {
+    const input = e.target as HTMLInputElement;
+    const changeToNum = input.value.replace(/[^0-9.]/g, "");


숫자만 입력할 수 있게 숫자를 제외하고""로 바꿔주는거 좋네용!!!

SooY2 · 2023-11-18T13:49:50Z

+      result = num1 * num2;
+      break;
+    case "divide":
+      if (num2 !== 0) {


헉 난 완전히 놓친부분... 섬세하다✨

hae2ni added 4 commits November 4, 2023 00:26

[ style ] index.html에 id 추가

8936d3b

[ feat ] calculator 함수 구현

780ee2c

[ style ] input type="text" 로 변경

0201a73

[ feat ] 숫자를 입력하지 않았을 경우 alert 뜨는 함수 구현

ac36bef

hae2ni requested review from binllionaire, hoeun0723, moondda, rachel5640 and se0jinYoon November 4, 2023 00:54

hae2ni self-assigned this Nov 4, 2023

hae2ni added the 계산기프로젝트 label Nov 4, 2023

hae2ni requested a review from SooY2 November 7, 2023 13:45

hoeun0723 linked an issue Nov 7, 2023 that may be closed by this pull request

계산기 프로젝트 구현 내용 #4

Open

hoeun0723 reviewed Nov 13, 2023

View reviewed changes

moondda reviewed Nov 14, 2023

View reviewed changes

se0jinYoon reviewed Nov 15, 2023

View reviewed changes

rachel5640 reviewed Nov 15, 2023

View reviewed changes

SooY2 reviewed Nov 18, 2023

View reviewed changes

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

Conversation

hae2ni commented Nov 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌮 무엇을:

🌮 어떻게:

🌮 얼마나:

🌮 구현 사항:

Uh oh!

hoeun0723 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

se0jinYoon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rachel5640 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SooY2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

hae2ni commented Nov 4, 2023 •

edited

Loading