인프런 커뮤니티 질문&답변

fe님의 프로필 이미지
fe

작성한 질문수

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

firebase admin 코드 추가

thunder client로 get 요청시 무한로딩

해결된 질문

작성

·

1.1K

0

안녕하세요. thunder client로 get 요청시 무한로딩이 됩니다.

localhost:3000/api/hello에 대한 요청이 되지 않습니다.

다른 open api 요청을 쏴봤는데요. 그건 됩니다.

혹시 원인이 무엇일까요?

스크린샷 2023-04-23 오후 4.16.00.png개발 환경은 실행중입니다.

폴더 구조입니다.

스크린샷 2023-04-23 오후 4.18.07.png

 

아래는 코드입니다.

// hello.ts

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

import { NextApiRequest, NextApiResponse } from 'next';
import FirebaseAdmin from '@/models/firebase_admin';

export default function handler(_: NextApiRequest, res: NextApiResponse) {
  FirebaseAdmin.getInstance().Firebase.collection('test');
  res.status(200).json({ name: 'John Doe' });
}

 

// firebase_admin.ts

import * as admin from 'firebase-admin';

interface Config {
  credential: {
    privateKey: string;
    clientEmail: string;
    projectId: string;
  };
}

/** 싱글톤 패턴을 이용해서 어디서든 같은 인스턴스를 불러낼 수 있도록 한다. */
export default class FirebaseAdmin {
  public static instance: FirebaseAdmin;

  /** 초기화 여부 */
  private init = false;

  /** 인스턴스를 반환하는 메서드 */
  public static getInstance(): FirebaseAdmin {
    if (FirebaseAdmin.instance === undefined || FirebaseAdmin.instance === null) {
      /** 초기화 진행 */
      FirebaseAdmin.instance = new FirebaseAdmin();
      /** 환경을 초기화한다. */
      FirebaseAdmin.instance.bootstrap();
    }
    return FirebaseAdmin.instance;
  }

  /** 환경을 초기화할 때 사용할 메서드 */
  private bootstrap(): void {
    /** 등록되어 있는 앱의 갯수가 0이 아니어야 앱이 존재함을 의미한다. */
    const haveApp = admin.apps.length !== 0;
    if (haveApp) {
      this.init = true;
      return;
    }

    /** config를 활용해서 초기화한다. */
    const config: Config = {
      credential: {
        /** process.env.로 환경변수에 접근하여 각 값들을 받아온다.
         * 각 갑들은 undefined일 수 있으므로, 값이 없을 경우 빈 문자열을 할당한다.
         */
        projectId: process.env.projectid || '',
        clientEmail: process.env.clientEmail || '',

        /**
         * privateKey는 원래 개행이 들어간 여러 줄 짜리 텍스트인데, 반환할 때는 json에서는 그렇게 표현할 수 없기 때문에 한 줄이 된다.
         * 그 한줄짜리 json을 원래대로 개행이 들어가도록 임의로 다시 개행문자를 넣어주는 것이다.
         */
        privateKey: (process.env.privatekey || '').replace(/\\n/g, '\n'),
      },
    };
    admin.initializeApp({ credential: admin.credential.cert(config.credential) });
    console.info('bootstrap firebase admin');
  }

  /** firestore를 반환 */
  public get Firebase(): FirebaseFirestore.Firestore {
    if (this.init === false) {
      this.bootstrap();
    }
    return admin.firestore();
  }

  public get Auth(): admin.auth.Auth {
    if (this.init === false) {
      this.bootstrap();
    }
    return admin.auth();
  }
}

답변 1

1

totuworld님의 프로필 이미지
totuworld
지식공유자

안녕하세요 fe님.

 

코드 상으로는 안될 이유가 없어보이네요.

올려주신 스크린샷보면 package-lock.json이 보이더라고요. npm 과 yarn을 같이 쓰신듯해요.

package-lock.json 삭제하시고, node_modules 폴더도 삭제한 뒤
yarn 으로 패키지 재설치 하신 뒤에 실행해보시겠어요?

 

 

그리고 브라우저로 localhost:3000 진입은 되는지도 체크 부탁드립니다.

fe님의 프로필 이미지
fe

작성한 질문수

질문하기