2024/02/26
일지 기록#
info
2024/02/23 작업 코드리뷰 후 리팩토링에 관하여
[ 2024/02/26 ]
🧐 Problem#
기존에 작성한 코드가 매우 가독성이 떨어지고 만약 다른 사람이 보았을 때 코드의 흐름을 다 따라가야만 알 수 있도록 작성되어있다는 피드백을 받았다.
👀 Analysis#
기존에 존재한 조건에 부합하는 경우에 내가 구현한 부분을 따로 함수로 생성하여 함수를 호출하도록 리팩토링 하면 될 것 같다. 또 그 함수 안에 특정 행위를 의미하는 경우가 있다면 그 부분도 따로 함수로 생성하면 된다.
🌈 Solution#
너무 적나라하게 코드를 공개할 수는 없지만 예시를 들자면,
리팩토링 전 코드
if (조건에 부합하는 경우) { const data = 조건 ? message : messageInfo; const array = messageInfo.array;
if (array?.message?.length > 0 && data.type !== '케이스') { const message = JSON.parse(array.message[0]); if(message.view?.id === '케이스') { const contents = message.view.body.contents; const findContents = contents.find((item: any) => item.type === '케이스' && item.data?.textType === textType)?.text; const findText = contents.find((item: any) => item.type === '케이스')?.text; this.message = findContents || findText; }}this.newMessage = new MessageModel({ id: this.id, ...meesageInfo });}
위 코드를 보면 조건에 부합하는 경우 모든 라인의 코드를 실행하도록 작성되어있다.또한 message 가 data에 들어가는 경우는 사실 그 하위 if 문 코드는 실행되지 않아도 되는 로직이다.따라서 message 가 data 라면 바로 messageModel 을 return 하도록 구현하고, messageInfo 가 data 일 경우에만 로직을 수행하도록 수정하면된다.> 리팩토링 후 코드```jsxif (조건에 부합하는 경우) { this.message = this.getData(message);}getData(message: any): MessageModel { const { message, messageInfo } = message; if(data 가 message 일 경우) { return new MessageModel({ id: this.id, ...message }); } const { array } = messageInfo; if(array?.message?.length > 0 && messageInfo.type !== '케이스') { const message = JSON.parse(array.message[0]); if(message.view?.id === '케이스') { const contents = message.view.body.contents; const text = this.findTextByType(messageContents, '케이스') || this.findText(contents); return new MessageModel({ id: this.id, ...messageInfo, message: text }); } } return new MessageModel({ id: this.id, ...messageInfo });}이렇게 해당 함수를 호출할 수 있도록 따로 함수를 생성해준다.
이 함수 안에서도 findTextByType , findText 함수를 호출하여 특정 행위에 대한 함수는 따로 생성해준다.
findTextByType(contents: any[], textType: string): string | undefined { return contents.find((item: any) => item.type === '케이스' && item.data?.textType === textType)?.text; }
findText(contents: any[]): string | undefined { return contents.find((item: any) => item.type === '케이스')?.text;}🎯 Outcome#
이렇게 코드를 작성하게 되면 가독성도 좋아지고 다른 개발자가 유지보수를 해야할 경우 코드의 흐름에 대해 파악하기 더 쉽다.
👼 Reflection#
함수명에 get 을 이용하여 getXXXXX 함수를 생성하게되면 return 값을 정확히 명시해주는것이 좋다.
처음에 void 로 지정했다가 다시 리뷰를 받으면서 수정하였다.