JavaScript Code-Refactoring(코드 리펙토링) 을 해보자

 

오늘도 여느 날과 같이

 

개발하던 중 문득 코드를 봤는데

흠....

function addWishList(gdsId){
	const like = document.getElementById('like'+gdsId);
	if(like.classList.contains('on')){
		if(confirm('즐겨찾기를 취소 하시겠습니까?')){
			console.log('찜하기 취소');
			const url = "<c:url value='/product/addWishList.do'/>";
			fetch(url,{
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					gdsId: gdsId
				})
			}).then(response => {
				if(response.ok){
					return response.json();
				}else{
					throw new Error('찜하기 취소 에러');
				}
			}).then(json => {
				console.log(json);
				if(json.result == 'success'){
					like.classList.remove('on');
				}
			}).catch(error => {
				console.error('찜하기 취소 에러:', error);
			});
			like.classList.remove('on');
		}
	}else{
		if(confirm('즐겨찾기 추가 하시겠습니까?')){
			console.log('찜하기');
			const url = "<c:url value='/product/addWishList.do'/>";
			fetch(url,{
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					gdsId: gdsId
				})
			}).then(response => {
				if(response.ok){
					return response.json();
				}else{
					throw new Error('찜하기 에러');
				}
			}).then(json => {
				console.log(json);
				if(json.result == 'success'){
					like.classList.add('on');
				}
			}).catch(error => {
				console.error('찜하기 에러:', error);
			});
			like.classList.add('on');
		}
	}
 }

 

 

똑같은 코드가 너무 반복되는 느낌을 받았고 뭔가 이쁘지가 않았다

 

그래서 반복된  코드를 한번 줄이고 로직도 손좀 보고 내 코드 이쁘게 성형을 좀 시켜줘볼까 해서 코드 정리를 해봤다

 

이게 나름 코드 리펙토링 아니겠는가?

 

먼저 가장 큰 중복은 fetch를 손봤고 confirm 도 하나의 함수로 통합했다

 

그리고 if 문 안에 like.classList.contains('on') 이렇게 길게 들어가 있으니까 

 

가독성이 좀 떨어지는거 같아서 이것도 수정했다

 

그리고 class 에 직접 on 붙였다 제거 했다 하는것도 복잡해 보여서 classLsit.toggle 매서드를 활용하여 좀 더 짧게 만들었다

 

그리고 confirm 메세지도 사실상 문구가 '취소' or '추가' 이 차이기 때문에 합쳐 보았다

 

이로써 정리한 코드는 

 

function addWishList(gdsId){

	const like = document.getElementById('like' + gdsId);
	const isOn = like.classList.contains('on');
	const action = isOn ? '취소' : '추가';
	const confirmMessage = `즐겨찾기를 ` + action + `하시겠습니까?`;

	if (confirm(confirmMessage)) {
		let url = '';
		if(isOn){
			url = "<c:url value='/product/deleteProductWishData.do'/>";
		}else {
			url = "<c:url value='/product/addProductWishData.do'/>";
		}

		fetch(url, {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ gdsId: gdsId })
		})
		.then(response => {
			if (response.ok) return response.json();
			throw new Error(`즐겨찾기를` + action + `실패`);
		})
		.then(json => {
			console.log(json);
			if (json == 'true') {
				like.classList.toggle('on', !isOn);
				alert(`즐겨찾기를 ` + action + `하였습니다.`);
			}else if(json == 'login'){
				if(confirm("로그인 후 이용 가능한 서비스입니다. \n로그인 페이지로 이동하시겠습니까?")){
					// 로그인 페이지로 이동
					location.href = "<c:url value='/cmm/login.do' />";
				} else {
					return ;
				}
			}
		})
		.catch(error => {
			alert(`즐겨찾기를 ` + action + `하는 중 오류가 발생하였습니다.`);
			console.error(`즐겨찾기를 ` + action + ` 에러:`, error);
		});
	}

}

 

 

오호 코드를 반이나 줄일 수 있었자나?

 

예전 같았으면 아 뭐 동작만 하면 되는거 아닌가! 라는 마인드였지만

 

이런 작업을 해보니 동작도 잘 하고 코드도 깔끔하면 나중에 내가 수정할 일이 생겨서

 

아 이게 어떤 코드였지? 하고 코드를 분석할 때 훨씬 빠르게 하고 그러면 또 업무 효율이 올라가는거 아니겠는가

 

라는 생각으로 바뀌었다

 

지금부터라도 반복되는 코드들은 좀 개선을 해나가야 겠다