1. 코드 최적화, 가시성
기업협업을 나가면서 admin페이지를 담당하게 되었다. 그 중 nav컴포넌트를 작업하면서 날짜를 구현하는 함수를 만들어야했다. 당장 생각나는 방법대로 적었던 코드는 아래와 같았다.
const formatDate = () => {
const DATE: Date = new Date();
const year = DATE.getFullYear().toString().substring(2, 4);
let month: number | string = DATE.getMonth();
let date: number | string = DATE.getDate();
let time: number | string = DATE.getHours();
let minute: number | string = DATE.getMinutes();
if (month < 10) {
month = "0" + month;
}
if (date < 10) {
date = "0" + date;
}
if (time < 10) {
time = "0" + time;
}
if (minute < 10) {
minute = "0" + minute;
}
return year + "-" + month + "-" + date + ", " + time + ":" + minute;
};21-05-02, 14:00 형태의 날짜를 만드는 함수이다. 작성하고도 굉장히 마음에 들지 않았던 부분이 많았다.
마음에 들지 않았던 부분은 총 3가지였다.
- 변수 let 사용
- if문에 의해 number에서 string으로 바뀌면서 2개의 타입을 지정해줘야 한다.
- 많은 if문
typeScript 사용이 익숙하지 않아서 number 형식에서 string형식으로 바뀌는 것을 생각해서 위와 같이 작성했다.
상수로 선언했다가 if문에서 값이 변하면서 당연히 에러가 났고, 변수로 바꾸게 되면서 이런 코드가 나왔다. 정말로 필요할 때가 아니면 변수 사용을 지양해야 하는데 변수도 쓰고, if문이 4개나 들어가면서 코드 자체의 길이도 길어졌다.
좋은 방법이 없을까 계속 고민하던 중 코드 리뷰를 받고 새로운 방법으로 코드를 작성했다.
const formatDate = () => {
const DATE: Date = new Date();
const year = DATE.getFullYear().toString().substring(2, 4);
const month = DATE.getMonth() + 1 < 10 ? "0" + (DATE.getMonth() + 1) : DATE.getMonth() + 1;
const date = DATE.getDate() < 10 ? "0" + DATE.getDate() : DATE.getDate();
const time = DATE.getHours() < 10 ? "0" + DATE.getHours() : DATE.getHours();
const minute = DATE.getMinutes() < 10 ? "0" + DATE.getMinutes() : DATE.getMinutes();
return year + "-" + month + "-" + date + ", " + time + ":" + minute;
};
분명 같은 기능을 하는 코드이다. 하지만 딱 보기에 어떤 코드가 더 좋아보이냐고 물어보면 나는 아래의 코드를 선택하겠다. 왜냐하면 코드의 가시성도 올라갔고 if문 대신 삼항연산자를 사용함으로써 코드의 길이 자체도 줄었다. 그리고 타입추론에 의해 데이터 형식을 따로 지정해주지 않아도 됐다. 그리고 값이 변하는 것이 아닌 이 함수가 실행될 때만 값을 가져오기 때문에 let이 아닌 const를 사용할 수 있게 됐다.
2. 기본이 중요하다
날짜 형식을 만들기 위해 Date() 생성자 함수를 사용했는데 typeScript를 사용하기 때문에 시작부터 에러가 났다. 구글링을 통해 해결했지만 사실 에러가 나는 이유도 몰랐었다. 분명 공부는 했는데 공부'만'한 것이고 실무에서 쓰려니 바로 기억하지 못했다.
또 getMonth()메소드를 사용하는데 당연히 1~12의 숫자가 나온다고 생각했는데 당연히는 무슨 0~11이었다. 또 삼항연산자도 맨날 쓰면서도 막상 여기서 바로 생각나지 않고 if문으로 해결하려고 했다. 경험부족이라고 변명할 수도 있지만 그냥 기본이 부족하다고 생각했다. 모르는 것도 많지만 아는 것을 잘 쓰는 것도 능력이라는 생각을 하게 되었고, 프로젝트를 시작하면서 자바스크립트 공부에 소홀해졌는데 정신차리고 다시 공부를 열심히 해야겠다라는 다짐을 했다.
