Y2K 버그를 겪고 Typescript 이전 하기 #99클럽1일차 #TIL

 
 

벚꽃보고싶다!

---

#99클럽 #99일지 #코딩테스트 #개발자스터디 #항해 #TIL
 

✅ 99클럽 TIL을 참여하는 이유

✅ TypeScript를 배우려는 이유?

✅ TypeScript를 배워보자

✅ Typescript Overview

 

---

 

✅ 99클럽 TIL을 참여하는 이유

 
취업준비생으로서 개발에 전념하고 있다고 하지만, 기술블로그에 글을 많이 작성하질 않으니, 진정성이 없을 수도 있겠네요.😳 제가 1~2학년까지만해도 네이버에서 유사 파워블로거를 하고 검색어를 상단에 올릴만큼 글 작성을 정말 좋아하는 사람이었습니다.
 

게임에 빠져버려,,, 게임 트렌드를 꿰고 있던 지난날... 월간조회수 7만을 2개월만에 도달할줄 알았다면 유튜버도 할걸그랬다 ㅋㅋ

 
 
그러나 컴퓨터학 복수전공을 시작하고, 2년동안 쉴세없이 달려오면서 1시간동안 블로그 글을 작성할 바엔, 다른 활동을 하겠다. 이러면서 제 취미가 사라졌습니다.🥹 4학년 1학기엔 22학점 대외활동 2개, 산학협력으로 주 7일을 바쁘게 살았더니 안면마비가 오더군요.... 살면서 신경과를 처음갔습니다.
 

대학원 가면 생긴다던데,,,

 
한계까지 부딫히면서 4학년 1학기부터 8개 이상의 프로젝트를 완수하면서
 
실제 사용자를 위해 배포해보고
망해보고
콜센터처럼 전화도 받아보고
생각보다 다른 유저플로우에 도움말도 추가해보고
예외처리의 필요성도 느껴보고
자바스크립트 문법 문제도 겪어보고
더 많은 피드백을 받기위해 유료홍보도 해보고
 

아! 나는 프론트엔드다! 어떻게 이렇게 즐기면서 급여를 받을 수 있는 직업이 있지????????

 

추진력하나는 팀원들이 인정하는 편

 
 
이게 적성에 맞다고 생각하고 자연스럽게 지금까지 왔습니다. 굉장히 진취적인 인간인데, 좋은 쪽으로 승화되어 신기술에 막 가슴이 뜁니다. 그럼 프론트죠, 세상은 효율적인 곳으로 너무 빠르게 발전하고 있어요. 그리고 작업에 사용하는 연장인 기술이 이미 개발되어 있을 때마다 신기했습니다.
 

취준스터디에 활발하게 정보공유중입니다.

 
 
지금은 졸업유예로 남는게 시간이지만, 수없이 쏟아지는 채용 공고, 코딩테스트의 압박, 아이폰 업데이트 보다 빠른 리액트 업데이트 등 더이상은 그 좋아하던 블로그를 미룰 수 없다고 생각했습니다. 그러다가 99클럽의 TIL 작성 미션을 발견했습니다. 이 얼마나 환상적인 타이밍인가요.
 

 
 
이미 카카오테크캠퍼스를 위해 코테굴이라는 스터디를 운영중이었는데, 안타깝게도... 문제가 한없이 밀렸습니다. 다른 친구들은 학업으로 바쁘고, 저는 코딩테스트 역량이 부족하니 꾸준하게 문제를 풀고 유지하기가 힘들었습니다. 강제적이라도 외부적인 도움으로 꾸준하게 이어갈 필요성이 있었고 지금 작성하는 코드가 효율적인지도 모호했습니다.
 
https://github.com/2024-cote-gool/cote-gool/tree/main/DingX2

 
이런 와중에 99클럽 코테 스터디를 발견하였고 코테굴 팀원들과 함께 진행중입니다. 이렇게 좋은 프로그램을 운영해주셔서 감사합니다.
 

---

 
그래서 오늘의 TIL(Today I Learned) 학습 키워드 
 

✨ Y2K 버그

✨ Typescript

 
 
 

✅ TypeScript를 배우려는 이유?

 
2024년 1월 1일 0시, HappyNewHere이라는 편지전달 서비스에서 예상치 못한 오류가 발생했습니다.
 

큰일났다

 
한 명의 유저이자 개발자로서 대기하고 있있는데 25일부터 있어야할 달력이 이상했습니다. 당시 개발일정이 촉박해 Redux를 이용한 데이터 패칭에만 집중하고 테스트코드로 대비했지만 2달 전 개발한 달력에서 오류가 생겼습니다.
 

테스트코드 여기가 아니었다.........

 
아... 2달 후에 보는 오류 발생코드는 정말 아찔했습니다. 다른 날짜에도 서비스를 배포할 생각이라 코드 재사용성을 높인다고 정수형 25로 2023-12-25일을 다시 조립해서 코드를 구현한게, 엄청난 여파를 불러왔습니다.
 

let weekDates = Calendar.getWeekDates(25)

 

근데 22일이 뭔데 뜨지???????

 
Y2K 버그를 아시나요? 
 
https://www.youtube.com/watch?v=K60IcPyCTIE&t=2s

 
값비싼 메모리의 비트수를 아끼기위해 1999년도를 99년도로 저장했고, 이게 2000년대가 아닌 1900년도 돌아가 문제가 발생한 가장 유명한 컴퓨터 버그라고합니다. 정말 놀랍게도 이걸 직접 제가 겪었습니다...
 
25일로 날짜를 저장하면,, 어떻게 12월로 저절로 조립이 될까요? 정말 부끄럽게도 12월달 내내 개발하고 1월로 넘어가서야 알았습니다. 서비스도 일주일 뒤에 달력을 공개하니까 그에 해당하는 월의 달력을 사용하면 되겠구나 했던게 , , , 허점이었습니다.

 getWeekDates: (startDay = null) => {
        const today = new Date();
        let day = startDay !== null ? startDay : today.getDate(); // 매개변수로 주의 시작일을 받거나 제공되지 않으면 현재 날짜 사용
...

 
 
문제는 수정하면서도 발생했습니다. 정수형 25로 다시 Date 객체를 만들어 today 변수로 엮여있다보니 정수형과 Date사이에서 정말 비효율적인 코드였습니다. startDay = 25로 들어온다면, 일단 Day는 정수형이고, 
 

today.setDate(day); // 날짜를 제공된 날짜나 현재 날짜로 설정

 
이걸 다시 Date객체로 변경하는데 제공된 날짜부터 문제였으니,,, 1월의 달력으로 설정된 것이죠. 그걸 또 setDate의 Date객체 배열로 만들어서 전달해줍니다. const today = new Date(2023, 11, 25)로 해결할 수 있었습니다.
 
또한 이러한 어지러운 타입 선언으로

  const filteredDate = new Date(selectedDate).getDate(); // 숫자
  const messageDay = messageDate.split("-")[2]; // 문자열

 
개발중에 return messageDay == selectedDate; 이건 가능하고 return messageDay === selectedDate; 이건 안되는 상황에서 다른 타입에 낮아진 코드 안전성이 버그요인으로 보여졌고 아, 타입스크립트를 배워야겠다고 다짐했습니다. Y2K 버그를 예방할 수 있었던 것은, 미리 발견하고 조치를 취한 개발자들이었습니다. 이처럼 로직상의 오류는 막는건 개발자의 시야에 달렸다는 걸 알았습니다.

 

---

 

✅ TypeScript를 배워보자

 
타입스크립트로 프로젝트를 2개를 했지만, 좀 더 꼼꼼하게 공부하고 싶었습니다. 유데미의 해당 강의를 학습한 내용을 정리하려고합니다.
 

---

 

✨ Typescript란✨

타입스크립트 : javascript superset
자바스크립트 언어를 가져와서 새로운 기능과 장점을 추가한 언어
단점 :  브라우저, Node.js가 타입스크립트를 실행하지 못함
 
코드를 작성해서 실행하면 자바스크립트로 변환하는 컴파일러
결국 최종코드는 자바스크립트 코드로 작성됩니다.
 
그렇다면 일반 자바스크립트 코드를 얻고 싶다면, 어떻게 새 기능 추가할까요?
=> 타입스크립트 컴파일러가 새 기능을 컴파일해서 복잡한 자바스크립트로 변환하기에 좀 더 휼룽한 구문으로 작성이 가능합니다.
 
가장 중요한 특징은 타입추가입니다.
 
타입을 추가함으로써 미리 코드에 존재하는 오류를 확인할 기회가 생기며 오류는 브라우저에서 런타임으로 나타나는데 이제 오류 검사가 가능해서 미리 수정이 가능합니다. 이는 기술적 오류는 아니니까 런타임 오류가 발생하지 않겠지만 코드에 논리상 실수가 있는 경우를 해결할 수 있으며 if check 입력값 확인 & 유효성 검사하던 것을 타입스크립트로 바로 가능하게 합니다.
 

const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(input1.value, input2.value));
});

 
 
자바스크립트에서는 입력값 요소의 값을 받으면 항상 문자열입니다. 입력값 타입은 전혀 상관이 없습니다.
 

const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  if (typeof num1 === "number" && typeof num2 === "number") {
    return num1 + num2;
  } else {
    return +num1 + +num2;
  }
}

button.addEventListener("click", function () {
  console.log(add(input1.value, input2.value));
});

 

 

+num1 로 정수형으로 변환하는 꿀팁을 알아냈습니다. powershell에 타입스크립트를 설치하고 using-ts.ts파일을 만들어봤습니다.

 

npm install -g typescript

 

 
!를 붙이면 타입스크립트로 null 예외처리가 가능합니다,
 

 
IDE 상에서 매개변수가 어떤 타입이 불러와지는지 알 수 있으며, 오류를 사전에 방지할 수 있습니다. 그렇다면 해당 타입스크립트 코드를 컴파일러로 자바스크립트 코드로 변환해봅시다.
 

 
 
index.html에 타입스크립트로 적용된 코드를 확인하고 싶다면 주의사항이 있습니다. 타입스크립트는 브라우저에서 실행하지 못하기 때문에 컴파일로 얻은 자바스크립트 코드(using-ts.js)를 import 해야합니다.
 

 

---

✅ Typescript Overview

 

- 타입적용 : 작동 방식을 좀 더 명확하게 적음으로써 원치 않는 불필요한 오류를 예방
- 최신 IDE: 자동완성을 개선, 오류를 컴파일 하기전에 알려줌
- 차세대 자바스크립트의 특정 기능을 확인, 옛날 브라우저에도 문제없이 사용 
- 바벨 : 바닐라 자바스크립트로도 가능한 도구 / 타입스크립트에 이미 내장
- 인터페이스 / 제네릭 :  자바스크립트에선 없지만 오류를 막아주는 기능
- 메타 프로그래밍 기능 : 데코레이터 메타인 이유?
- 유연한 설정 가능 요구사항에 맞게 엄격하게 느슨하게 사용 가능
- 최신 도구 / IDE 사용시 타입스크립트가 아닌 프로젝트에도 사용가능
 

---

 

✅ 강의 개요

알차다!

 

---

 2일차부터 본격적인 강의로 달려봅시다. 강의에서 궁금한 점은 TIL로 작성하며 채워가겠습니다.