[CleanCode] 에러 다루기

목차

• [ 유효성 검사 ]
• [ try - catch ]
• [ 사용자에게 알려주기 ]

 

 

[ 유효성 검사 ]

💡 사용자의 입력 값이 유효한지 검증하는 것 

 

💡 유효성 검사는 할 수 있는 모든 곳에서 다 처리하는 게 좋다. 

 

사용자의 입력 => 클라이언트 (HTML, JavaScript) => 백엔드에서 처리

 

사용자와 상호작용 => 사용자의 입력을 받거나 그것을 통해서 무언가 하게 된다.

 

📌 이메일인 경우

- 사용자의 입력이 이메일 포맷에 맞는지 검증한다.

  - 이메일 포맷이 맞는 경우 **그때서야 서버와 통신을 한다.**

 

※ 어떻게 할까? 

-  정규식

-  JavaScript 문법 (문자열 검사)

-  웹 표준 API (Browser API)

 

 

[ try - catch ]

 

try-catch를 사용할 때 가장 많이 실수하는 경우 중 하나가 예상하지 못한 에러가 발생할 수 있는 부분을 try {} 안에 넣지 않는 것입니다. 

 

이럴 경우를 방지하기 위해 try-catch를 사용할 때는 모든 구문을 try에 넣는 것을 추천드립니다. 

 

/**
 * try-catch 
 * ? 예외를 처리한다 ?
 * 프론트엔드 (클라이언트)
 * 사용자의 입력을 받는다.
 * 
 * 개발자 혹은 프로그래머가 모든 에러를 예측하여 처리하기가 어렵고 거의 불가능하다.
*/
 
function handleSubmit() {
    // 중요하지 않다고 생각하는 핸들링 코드 <= 내 생각과 오류 발생을 초래할 수 있음 
    try {
       //  예외가 예상되는 코드 혹은 발생시킬 코드 
    } catch (error) {
       // 예외를 처리하는 코드
 
       /**
        * 1. 개발자를 위한 예외처리 
        * 2. 사용자를 위한 예외처리
        * 3. 사용자에게 사용을 제안
        * 4. 에러 로그
        */
 
       /**
        * 1. 개발자를 위한 예외처리 => 동료 개발자에게 제안을 ~~ TDZ or 나를 위해
        */
       console.warn(error);
       console.error(error);
 
       /**
        * 2. 사용자를 위한 예외처리 => ( 사용자가 볼 수 있다고 생각 )
        */
       alert(error) // < = 이렇게 하면 안됨 
       alert('404', 'not found') // < = 이렇게 하면 안됨 
       alert('잠시만 기다려주세요. 어떤 문제가 있습니다. 다시 시도해주세요') // 좋은 예시
 
       /**
        * 3. 사용자에게 사용을 제안
        */
        history.back(); 
        history.go('안전한 어딘가');
        clear();
        element.focus() // 어딘가로 이동을 시켜서 다시 한번 사용자에게 알려주기
 
        /**
         * 4. 에러 로그 수집 
         */
        sentry.전송() // 에러 발생시 수집해주는 기능 
 
        // 5. 비추천하지만 필요에 따라 다시 호출하는 경우 
        재귀호출()
 
    } finally {
        // 데이터 분석을 위한 로그 
    }
 
}
 
// ⭐️ try-catch를 사용할 때는 모든 구문을 try에 넣자 ⭐️
 

 

[ 사용자에게 알려주기 ]

 

/**
 * 사용자에게 알려주기
 * - 동료 개발자
 * - 내가 만든 앱을 이용하는 사용자
 *   ㄴ 내가 만든 라이브러리 => ex) React
 *   ㄴ 내가 만든 실제 앱 => ex) 간단한 애플리케이션, 계산기 
 */
 
 
function React() {
    // 생성자로 사용하길 바랄 때...!
 
    if(!new.target) {
        throw new ReferenceError('생성자입니다!!');
    }
}
 
 
React();