[JS] 나름 리팩토링 1탄 - 배열로 바꾸기

하나의 조건문에

여러가지 조건이 들어가 true/false 체크하는 방식에서 

자바스크립트 배열을 이용하기 ! 

 

 

안녕하세요. 곧 만3년 되는 백엔드 개발자 입니다!

점점 연차가 쌓이면서

클린코딩, 좋은코드, 리팩토링 등

관심이 많아지고 있는데요-

 

시간적 여유가 있을때에는

좋은 코딩을 하려고 노력중 입니다.
(회사가 si이다보니 쉽지가 않습니다 ㅠ____ㅠ)

 

그래서,

오늘 소소하게 고쳐본 

자바스크립트 리팩토링 소스를 공유 해보려고 합니다.

 

문제점이 있다면 꼭! 댓글로 알려주세요 👀

 

---

🔍 배경

 

JS(자바스크립트)에서 파일 업로드를 할 때,

원래 jpg와 jpeg만 업로드 할 수 있게 파일 유형 체크를 하고 있었다.

 

클라이언트가 png와 html 파일도 추가로

유효성 체크를 할 수 있게 해달라고 해서

소스를 수정하게 되었는데,

 

사실 아래와 같은 코드처럼 image/png , text/html만 추가하면 되는데 

(그러면 더 쉽고 간편하게 작업을 끝냈을 것이다.)

 

그렇게 소스를 수정하게 되면

소스가 너무 길어지게 되고, 길어지면 눈에 잘 들어오지도 않고,

나중에 또 변경사항이 있을거 같아서

 

유지보수를 하기 조금 더 쉬운 쪽으로 코드를 수정을 해야겠다고 생각이 들었다.

 

---

🔍 JS 리팩토링 과정

 

 

위의 코드는 원래 체크했던 방식이다.

 

 

👉🏼 첫번째 코드는

file의 type이 해당 값들과 일치하지 않으면 알림을 띄워주고 리턴처리를 해주었다.

 

 

👉🏼  두번쨰 코드는

file 이름을 소문자로 바꿔주고,

끝나는 문구가 jpg 또는 jpeg로 끝나지 않으면 알림을 띄어주고 리턴처리를 해주었다.

 

 

 

 

위의 코드는 내가 수정한 코드이다.

 

 

상수(const)로 체크해야할 값들을 배열에 담았다.

 

그리고

위에 선언한 배열에 일치하지 않는 값이 없으면 includes 사용

알림을 띄워주고, 리턴처리를 해주었다.

 

그 다음 코드는 조금 더 복잡한데 

file 이름을 소문자로 변경해주고 toLowerCase() 사용

 

slice() 를 해주기 위해서,

file이름에서 마지막 마침표 ' . '의 인덱스를 찾아주고, lastIndexOf 사용

lastIndexOf 함수 : 주어진 문자 또는 부분 문자열을 뒤에서 찾아서 해당 위치의 인덱스를 반환해준다.

 

-1을 해준다음, 빼기 연산

 

>>> 0 로 정수로 변환해주고,

논리 오른쪽 시프트 연산자로, 부호 없는 정수로 변환하는 역할을 한다. 

즉, 음수로 변환되는 경우를 방지하기 위해 사용된다.

 

2를 더해주었고, 더하기 연산

 

위의 결과로 나온 인덱스를 활용하여

잘라주면 파일명의 .이후의 갯수만큼 잘라주기 때문에

내가 원하는 .이후부터의 파일 명을 가지고 올 수 있다.

 

위 결과를 가지고 위에 선언한 배열에 일치하지 않는 값이 없으면

알림을 띄워주고, 리턴처리를 해주었다!

 

---

 

👀 주절 주절 TIME 👀

 

언뜻보면 이 코드가 더 어렵다고 생각할 수도 있겠지만

(생소한 함수 사용이라던지...)

 

내가 작성한 코드보다 더 좋은 코드가 있겠지만 !

우선 처음에 하던 방식으로 수정하는 것 보다는

이 코드가 좀 더 유지보수 하기도 좋고, 

 

또한 if문(조건문)에 너무 많은 조건이 붙어있으면

아무리 쉬운 코드라고 해도 읽기가 힘들어질 수 있다고 생각한다 ㅎㅎ