개인프로젝트 - 22.10.23 작업일지

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

0. 기획의도

부트캠프 수료 후 기술면접을 준비하면서 직접 공부하고 정리한 답변을 깃허브에 아카이빙하고자 md파일로 작성하던 중, 원하는데로 질문 항목, 또는 꼬리질문 항목으로 이동하는 것이 불편하고 readme 파일이 지저분해 보이며 파일들이 과도하게 많아져, 아예 기술면접 대비와 새로운 기술스택 연습을 겸하고자 웹앱으로 제작하기로 하였다.

1. 환경설정

vscode 익스텐션 추가 설치항목

• Thunder Client

yarn 사용하기

npm i yarn
npx yarn dev // npm run dev

2. Next.js 프로젝트 폴더 구조

2.1 pages 폴더 - 라우팅 규칙 설명

공식문서 링크
Index routes
라우터가 파일명이 index.js 인 경우 자동으로 현재 디렉토리의 루트 경로로 파일을 라우팅 경로를 축약해준다.

• pages/index.js → /
• pages/blog/index.js → /blog

Nested routes
중첩된 경로에 위치한 파일의 라우팅 경로에서 /pages 부분을 생략하여 축약해준다.

• pages/blog/first-post.js → /blog/first-post
• pages/dashboard/settings/username.js → /dashboard/settings/username

Dynamic route segnents
동적으로 변경되는 값을 스퀘어 브라켓([])으로 감싸 해당 파일 안에서 값을 사용하도록 할 수 있다.

• pages/blog/[slug].js → /blog/:slug (ex: /blog/hello-world)
• pages/[username]/settings.js → /:username/settings (ex: /foo/settings)
• pages/post/[...all].js → /post/* (ex: /post/2020/id/title)

pages 폴더/ index.tsx

import { NextPage } from 'next';

const IndexPage: NextPage = () => <>Hello world</>;

export default IndexPage;

타입스크립트를 사용하는 프로젝트이므로 index.js 가 아닌 tsx 파일이다.

pages 폴더/ api 폴더

http 응답을 위한 Next.js API 핸들러를 정의한 파일은 pages 폴더 안의 api 폴더 내부에 위치시킨다. api 폴더 외부에 존재하는 파일들은 전부 html을 반환하기 위한 파일이다. 즉 일반적인 라우팅 경로에 따라 분류한 페이지 컴포넌트들은 api폴더 외부에 위치한다.

3. firebase 셋업

3.1 Firebase 콘솔에서 프로젝트 세팅하기

1. 프로젝트 생성
파이어베이스 콘솔 - 프로젝트 추가(*애널리틱스 옵션 사용하지 않았음.)
2. 비공개 키 생성

1. 프로젝트 설정/ 서비스 계정 탭 이동
2. Admin SDK 구성 스니펫 옵션에서 Node.js 선택
3. 새 비공개 키 생성(키 다운받기)

3. 앱 등록

1. 프로젝트 설정/ 일반 탭 이동
2. 내 앱 → 웹 앱에 Firebase 추가 (</> 모양 아이콘)
3. Firebase SDK 추가
   1. 프로젝트에 파이어베이스 패키지 설치
   2. 파이어베이스 콘솔 화면에서 SDK 추가를 위해 제공된 코드(npm 사용)를 복사해서 프로젝트에 붙여넣기(.env파일 생성 후 환경변수의 값으로 기입 - 3.2항 참고)

4. Authentication 설정 (소셜로그인)

1. Authentication 탭 → 시작하기 → Sign-in method → 구글 선택
2. 사용 설정 토글 on, 프로젝트 지원 이메일 기입 (본인 g메일 주소로 작성하였음.)

5. Firestore 설정 (데이터베이스)

1. Cloud Firestore → 데이터베이스 만들기 → 테스트 모드에서 시작 (추후 기존에 사용했던 보안 규칙으로 업데이트 예정) → 다음
2. Cloud Firestore 위치: asia-northeast3 선택 → 사용 설정

3.2 프로젝트에 환경변수 등록하기

1. 프로젝트 root 경로에 .env 생성
2. env 파일에 환경변수 값 등록

publicApiKey=퍼블릭key
projectId=프로젝트id
FIREBASE_AUTH_HOST={프로젝트id}.firebaseapp.com
privateKey=프라이빗key // 다운받은 비공개 키 json파일에 있는 값을 기입한다.
clientEmail=이메일
PORT=3000
HOST=localhost
PROTOCOL=http

3.3 Firebase Admin 코드 추가

공식문서 링크
1. firebase-admin 패키지 설치

npx yarn add firebase-admin //

2. firebase_admin.ts 파일 생성

// 프로젝트의 root 경로에 models 폴더를 생성하고,
// 그 안에 firebase_admin.ts 파일 생성.
// vscode에서 새 파일을 생성하면서 '만들 폴더명/만들 파일명' 으로 한번에 폴더와 하위의 파일 생성 가능

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();
    }
    return FirebaseAdmin.instance;
  }

  private bootstrap(): void {
    const haveApp = admin.apps.length !== 0;
    if (haveApp) {
      this.init = true;
      return;
    }

    const config: Config = {
      credential: {
        projectId: process.env.projectId || '',
        clientEmail: process.env.clientEmail || '',
        privateKey: (process.env.privateKey || '').replace(/\\\\n/g, '\\n'),
      },
    };
    admin.initializeApp({ credential: admin.credential.cert(config.credential) });
    console.info('bootstrap firebase admin');
  }

  /** firestore를 반환 */
  // tip: 주석 작성 시 애스터리스크 두번 작성 시 코드에 마우스 호버 시 주석 내용 노출
  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();
  }
}