[인스타그램클론코딩] 삽질 후기 - navigation.navigate, sendGrid 메일전송

오늘은 2일간의 개발 삽질에 대해서 작성해 보려고 합니다.

 

[undefined is not an object (evaluating 'navigation.navigate') 오류]

문제 상황 : Login 버튼을 누른 후 서버의 requestSecret 모듈을 호출하여 이메일을 받은 후 Confirm 화면으로 넘어가야 한다. 그러나 계속해서 "Check your email box" 오류가 발생했다.

원인 : navigation 컴포넌트가 undefined 된 컴포넌트였기 때문이다. navigation 컴포넌트가 undefined 되었는데 navigaion.navigate로 화면 이동을 하려고 하니 오류가 발생했던 것이다.

undefined is not an object (evaluating 'navigation.navigate')

const handleLogin = async ({navigation}) => {
        const { value } = emailInput;
        const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        if(value === ""){
            Alert.alert("Email cannot be empty");
        }else if( !value.includes("@") || !value.includes(".")){
            return Alert.alert("Please write an email");
        }else if(!emailRegex.test(value)){
            return Alert.alert("This email is invalid");
        }

        try{
            setLoading(true);
            const {
                data: { requestSecret }
            } = await requestSecretMutation();

            if(requestSecret){
                Alert.alert("Check your email box");
                navigation.navigate("Confirm");
                return;
            }else{
                Alert.alert("Account not found");
                navigation.navigate("Signup");
            }

            
        }catch(e){
            console.log(e);
            Alert.alert("Can't log in now");
        }finally{
            setLoading(false);
        }
    }

 

문제 해결방법 : navigation 컴포넌트를 handleLogin 함수가 아닌 export default 에서 props로 받아오고 { } 중괄호로 객체분리 기능을 사용하여 navigation 컴포넌트를 정상적으로 받아왔다.

참고한 해결방법 글 : stackoverflow.com/questions/52904853/navigation-navigate-is-not-a-function

export default ({navigation}) => {
    const emailInput = useInput("");
    const [loading, setLoading] = useState(false);
    const [requestSecretMutation] = useMutation(LOG_IN, {
        variables: {
            email: emailInput.value
        }
    });


    const handleLogin = async () => {
        const { value } = emailInput;
        const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        if(value === ""){
            Alert.alert("Email cannot be empty");
        }else if( !value.includes("@") || !value.includes(".")){
            return Alert.alert("Please write an email");
        }else if(!emailRegex.test(value)){
            return Alert.alert("This email is invalid");
        }

        try{
            setLoading(true);
            const {
                data: { requestSecret }
            } = await requestSecretMutation();

            if(requestSecret){
                Alert.alert("Check your email box");
                navigation.navigate("Confirm");
                return;
            }else{
                Alert.alert("Account not found");
                navigation.navigate("Signup");
            }

            
        }catch(e){
            console.log(e);
            Alert.alert("Can't log in now");
        }finally{
            setLoading(false);
        }
    }

 

 

 

[SendGrid API Key 사용하여 이메일 보내기]

 

문제 상황 : SendGrid를 사용할 때 아이디, 비밀번호만 사용하여 API를 호출하였다. 하지만 내 계정의 보안단계를 높이면서 더이상 아이디, 비밀번호만으로는 API를 호출할 수 없었다. 아래와 같이 API Key를 사용하거나 2FA보안을 해제하라고 나와있다.

 

해결방법 : API Key를 발급 받고, API 호출시 Key를 넣어서 호출하였다. SendGrid 계정에서 API Key는 직접 발급 받을 수 있다.

export const sendMail = (email) => {
    
    const options = {
        auth: {
            //api_user: process.env.SENDGRID_USERNAME,
            //api_key: process.env.SENDGRID_PASSWORD,
            api_key: process.env.SENDGRID_APIKEY
        }
    };

    const client = nodemailer.createTransport(sgTransport(options));
    return client.sendMail(email);
};

 

위와 같이 하여 이메일이 정상적으로 송신될 수 있도록 하였다.

 

찾는데 시간이 걸렸지만 재미있는 삽질 경험이었다 ㅎㅎㅎ