나에게는 기록이 되고, 누군가에게는 도움이 될 수 있도록 여기에 차근차근 기록해볼테니 함께 해보자 !

FontAwesome 설치 !

난 공식문서만 보고 해결할 때 짜릿함을 느끼는데, 그래서 이렇게 친절한 공식문서를 너무 사랑한다 ... 폰트어썸에는 이렇게 프레임워크마다 사용방법이 잘 나와있는데, 내가 사용할 것은 React 기반의 next.js 니까 React로 보겠다 !

1. SVG 코어 설치 yarn add @fortawesome/fontawesome-svg-core 폰트어썸의 핵심 패키지이다.

2. 아이콘 패키지 설치 yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/free-regular-svg-icons 폰트어썸에는 pro가 있고 free가 있는데, 나는 무료 아이콘만 쓸것이기 때문에 free로 설치해주었다. solid랑 regular 두가지가 있는데, 본인이 사용할 것만 다운받으면 될 것 ! 보니까 solid는 속이 꽉 찬 아이콘이고, reqular는 선으로만 그려진 아이콘인듯 하다 !

3. React 구성요소 설치 yarn add @fortawesome/react-fontawesome@latest React에서 사용할 것이기 때문에 React 구성요소 설치까지 하면 필요한 설치는 끝 !

필요한 코드 추가

폰트어썸을 next.js, 그리고 typescript로 쓰려면 몇가지 추가해야할 코드가 있는데, 하나씩 해보도록 하자

// pages > _app.tsx

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

공식문서에 따르면 "폰트어썸은 next.js랑 잘 어울리지만 그냥쓰면 왕큰 아이콘을 보게되니까 이 코드를 추가해서 쓰세연" 이라고 써있다. (아마도?)

아이콘 추가해보기 !

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
...
<FontAwesomeIcon icon={faCalendar} />
  ...

React에서 아이콘을 사용하기위해서는 위와같은 식으로 사용하면 된다 ! <FontAwesomeIcon icon={사용할 아이콘 이름} />

with typescript ?

시키는대로 했는데 또 에러가 났다 ...! index.d.ts(24, 3): The expected type comes from property 'icon' which is declared here on type 'IntrinsicAttributes & FontAwesomeIconProps'

찬찬히 읽어보니 IntrinsicAttributes FontAwesomeIconProps 둘 중 타입 하나 지정해줘 ~ 라는 뜻 같은데 ...

에러를 구글에 쳐보니 이런 해답을 주셨다.

import { IconProp } from "@fortawesome/fontawesome-svg-core";
...
<FontAwesomeIcon icon={faCalendar as IconProp} />
  ...

간단하다 ! IconProp을 불러와서 지정해주면 끝 !

이렇게 뽀짝한 아이콘 불러오기 완료 !

typescript 에러는 해결하는 방법이 여러가지인데, 내가 아직 잘 못쓰다보니까 공식문서에있는 방법으로는 해결하지 못했다 ㅠ 더 좋은 방법이 있다면 다음에 또 수정해볼 것 !

조금 아쉬운점은 github 아이콘같은 브랜드 아이콘의 경우 pro로, 유료 서비스인 것 같았다. 그런애들은 svg파일을 다운로드해서 사용하게 되었다.

아무튼 이제 아이콘들 잘 불러올 수 있으니까 다시 힘내서 꾸며보자 !

Github https://github.com/2wisdom/dear-diary

Reference fontawesome | with react fontawesome | with next-js

저번시간에는 Next.js랑 Prisma를 연결했다 ! 이번에는 next-auth로 kakao 소셜로그인을 구현해보도록 하자. 레쓰기리잇 !

Next-Auth 설치하기

yarn add next-auth

일단 next-auth를 설치 !

그런 다음 pages > api > auth > [...nextauth].ts 를 만들어서 providers에 kakaoProvider를 추가해준다 !

// pages > api > auth > [...nextauth].ts

import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";

export const authOptions = {
  providers: [
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),
  ],
};
export default NextAuth(authOptions);

❗ 처음에 공식문서대로 작성했더니

    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID,
      clientSecret: process.env.KAKAO_CLIENT_SECRET,
    }),

clientId, clientSecret 이부분에 해당 오류가 떴다. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322) 번역기를 돌려보면 'string | defined' 형식은 'string' 형식에 할당할 수 없습니다. 'undefined' 유형을 'string'.ts(2322)' 유형에 할당할 수 없습니다 대충 이런 말인데, undefined 할 수 없기때문에 반드시 보장해주어야한다는 말 ! 그래서 반드시 있어야한다는 뜻의 process.env.KAKAO_CLIENT_ID || '' 또는 process.env.KAKAO_CLIENT_ID! 를 넣어주면 해결 !

kakao 연결

자, 그럼 저 Provider 안에 있는 process.env.KAKAO_CLIENT_ID 와, process.env.KAKAO_CLIENT_SECRET를 넣어줘야하지 않겠는가 ?

일단 kakao_developers에서 앱을 등록해주자 !

추가해줍니다 ! 뭔가 진짜 개발자가 된 기분 ... (코쓱

제품설정 > 카카오로그인에 활성화를 ON 해주고, Redirect URI에 해당 주소를 넣어준다. http://localhost:3000/api/auth/callback/kakao 나중에 배포하게 되면 localhost:3000 쪽에 배포한 URL를 넣어주면 될 것 !

다음은 동의항목에서 카카오로그인 할 때 나오는 동의목록을 설정해준다.

체크하고 나면 이런식으로 예시를 보여준다 ! 난 일단... 닉네임만 쓸것이기 때문에 닉네임만 체크를 해주었다 !

그리고 다른 메뉴에 요약 정보가 있는데, 이곳에 있는 REST API키 가 KAKAO_CLIENT_ID 가 되는것이다 ! 확인해서 넣어주면 된다.

다음은 제품설정 > 보안 메뉴에 가면 카카오로그인 ON을 할 수 있는데, 거기에 나오는 코드를 KAKAO_CLIENT_SECRET 에 넣어주면 된다.

// .env

# next-auth
NEXTAUTH_SECRET = "REST API 키"
KAKAO_CLIENT_ID = "Client Secret 코드"

대충 이런식으로 .env 에 넣어주면 끝 !

버튼 만들기

모든 소셜로그인 버튼에는 해당 회사에서 정해준 디자인가이드가 있다는것을 알고 있었는가 ? 난 이번에 처음 알았다.

카카오 로그인 | 디자인 가이드

위 문서에 가면 어떻게 만들어야한다는 디자인 가이드가 나와있다. 해당 메뉴얼대로 만들어줘야 한다 !

import { useSession, signIn } from "next-auth/react";
import Image from "next/image";
import { KakaoBtn } from "../styles/AuthStyle";
export default function KakaoLogin() {
  const { data: session } = useSession();

  return (
    <>
      <KakaoBtn onClick={() => signIn("kakao")}>
        <Image
          src="/images/kakao_logo.png"
          alt="kakao-login"
          width={20}
          height={20}
        />
        <a>카카오 로그인</a>
      </KakaoBtn>
    </>
  );
}

나는 styed-component로 디자인을 해주었다. 만들어준 버튼에 onClick={() => signIn("kakao") 이벤트를 넣어주면 로그인 만들기 완료 !

제법 깔쌈한 로그인버튼이 만들어졌다 ! 이걸로 kakao 로그인 완료 !

callback URL

내가 기획했던것은 로그인 -> 유저페이지 로그아웃 -> 메인페이지 였는데, React에서는 userNavigate로 했던것을 Next auth에서는 더욱 쉽게 할 수 있다 !

onClick={() => signIn("kakao", { callbackUrl: "/user" })}

onClick={() => signOut({ callbackUrl: "/" })}

signIn과 signOut 모두 callbackUrl 로 간단하게 리다이렉트 할 수 있다 !

배포 후 서버 오류?

지금 만들고있는 페이지를 vercel를 통해 배포하고있었는데, 로컬에서는 잘 되던 로그인이 배포한 페이지에서는 되지 않는것을 확인했다. 이세상에 정말 쉬운게 하나도 없다 ...

찾아보니 해당 서버에러는 next_auth | secret 문서로 해결할 수 있다 !

vercel 환경변수에 암호화하기 위한 키를 넣어줘야 하는데,

openssl rand -base64 32 터미널에 해당 명령어를 쳐주면 암호화 키를 준다. 해당 암호화 키를 vercel 환경변수에 NEXTAUTH_SECRET 의 Value로 넣어주면 해결 !

이걸로 카카오 로그인이 완료되었다 ! 그치만 아직 디테일한 부분이 더 들어가야한다... 로그인 후 마이페이지로 페이지 이동도 넣어줘야하고, 가장 중요한건 세션만료 exp 기간이 너무 길어서 로그아웃을 하지않으면 컴퓨터를 껐다켜도 로그인이 풀리지 않는다...

일단 로그인으로 너무 힘을 빼서 재미있는 기능구현부터 해볼 예정 !

다시 빠이팅해부장 🔥🔥🔥

Github https://github.com/2wisdom/dear-diary

Reference next-auth 공식문서

공식문서를 보고 찬찬히 따라해보기로 했다 레쓰기릿

prisma 설치 & DB연결

npm install prisma --save-dev npx prisma init

위 명령어로 prisma를 설치해주자 !

설치를 했다면 이제 .env 파일에 DB주소를 넣어줘야하는데,

.env파일은 꼭 루트 디렉토리에 넣어주는것과 gitignore 안에 넣어서 내 중요한 DB정보를 깃헙에 올리지않도록 주의하자 !

// .env
DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.ObubJTKrJYcPSkdsWqms.supabase.co:5432/postgres"

공식문서에 "이렇게 작성하세요~" 하고 아주 친절하게 나와있는데도 나같은 새머리는 조금 헤메었기에 ... 자세히 적어보자면

DATABASE_URL="DB종류://username:password@DB주소/database"

나는 mysql을 쓸것이기 때문에 DB종류에 mysql을 넣었다.

이렇게 .env 파일을 만들었으면 연결 완료 !

Schema 만들기

schema.prisma 라는 파일을 만들어주자!

사람마다 prisma 라는 폴더를 만들어서 그 안에 해당 파일을 넣는 사람도 있던데 나는 일단 그냥 루트디렉토리에 넣었다.

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  password  String
  posts     Post[]
}

model Post {
  id        Int        @id @default(autoincrement())
  title     String
  image     String?
  content   String?
  date      DateTime
  author    User       @relation(fields: [authorId], references: [id])
  authorId  Int
}

Prisma | Data model

백엔드는 아직 너무너무 어렵기때문에... 일단 위에 공식문서를 보면서 간단하게 나한테 필요한 정보들로 스키마를 짜보았다 !

npx prisma db push

스키마를 다 짰다면 위 명령어로 prisma db에 푸시를 해보자 ! 뭔가 질문하기도 하는데 읽어보고 y 눌러서 넘어가면 된다.

npx prisma studio

위 명령어를 치면 http://localhost:5555 에 studio가 켜진다! 보면 내가 짠대로 잘 들어와있는것을 확인 ! DB에도 잘 들어와있다 !

Prisma Client 설치 및 생성

Prisma를 사용해서 Next.js 에서 데이터베이스를 엑세스하려면 Prisma Client를 설치해야 한다고 써있다.

yarn add @prisma/client

일단 Prisma Client를 설치해주고 (난 yarn을 쓰기때문에 yarn으로 설치했다)

npx prisma generate

해당 명령어로 스키마 파일이 변경될 때마다 업데이트를 해줘야 한다.

mkdir lib && touch lib/prisma.ts

공식문서 너무 친절... lib 폴더를 만들고 그 안에 prisma.ts 를 만들어주는 명령어다...

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

그리고 그 안에 이렇게 코드를 짜주면 끝...인데?

아니 분명 공식문서에는 저렇게만 써주라고 되어있었다구요 ;ㅅ;

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017) 보니까 빌어먹을 타입스크립트의 타입오류였는데,

깃헙의 개발자들이 이미 멋진 답안을주신게 있어서 쉽게 해결할 수 있었다. 타입스크립트가 global을 몰라서 생긴 오류였다.

23.02.05. 수정! 저대로 수정했었는데 아는 개발자분께서 이슈를 남겨주셨다. 전역변수를 나타내는 global 은 Condition 에 제약을 받으면 안돼서 if절 밖으로 빼야한다고 알려주셔서 다시 수정 !

import { PrismaClient } from "@prisma/client";

let globalWithPrisma = global as typeof globalThis & {
  prisma: PrismaClient;
};

let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!globalWithPrisma.prisma) {
    globalWithPrisma.prisma = new PrismaClient();
  }
  prisma = globalWithPrisma.prisma;
}

export default prisma;

진짜 끝 !

이제 Prisma를 연결했으니 다음시간에는 카카오톡으로 소셜 로그인을 만들어볼것이다 !

누가 내 블로그를 볼지는 잘 모르겠지만 잘못된 정보나 더 좋은 방법이 있다면 꼭 알려주길 바란다 !

Github https://github.com/2wisdom/dear-diary

Reference How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL

라고 … 듣기는 했는데, SSR이란 뭘까? SSR과 같이 이야기되는 CSR은 또 뭘까?

naverD2 어서와,SSR은 처음이지?

요새는 참 똑똑한분들이 정리를 잘 해놓으시는 것 같다. 위의 글이 너무 잘 정리해놔서 내가 적을 건 없다. 너무 좋으니 한번씩 읽어봐보시길.

그렇다면 나는 눈으로 직접 보면서 둘의 차이점을 알아보자.

일단 두개의 비교를 위해 똑같이 Hello, world를 띄우는 두개의 페이지를 준비했다.

하나는 CSR 방식인 일반 React.js로 만들고, (나는 vite로 만들었다.) 다른 하나는 SSR 방식인 Next.js 로 만들었다.

속도 차이

일단 두 페이지의 속도차이를 보자.

SSR은 모든 데이터를 매핑해서 가져온다는 특징으로, 초반 로딩이 느리다고했다.

네트워크창을 보면 로드: 610밀리초로 나오는데,

CSR network

CSR은 확실히 로드:125밀로초로 첫 렌더링은 확실히 빠르다.

document ?

next.js와 react.js 에 각각 document.body 를 치면 어떤 차이가 있을까 ?

왼쪽: SSR(next.js) / 오른쪽: CSR(react.js)

CSR방식인 react에서는 document.body가 정상적으로 호출되지만, SSR방식인 next에서는 오류가 발생한다 !

오류를 읽어보면 document is mot defined 가 뜨는데 그 이유는, 사실 document는 window.document 이다…! (당연한가?)

그래서 CSR인 React에서는 window.document 를 해도 브라우저에서 호출이 된것이기 때문에 호출이 되는 반면, SSR 방식인 Next에서는 서버에서 매핑이 된다하지않았나 ? 서버에서 만들기때문에 window가 존재하지 않는다…!

그래서 (window.)document.body가 오류가 뜨는것이다 !

그럼 next에서는 document를 쓰지 못하는걸까 ? document. 이 필요할 땐 어쩌지?

document가 필요한 시점은 dom이 화면에 나왔을때부터이기 때문에 useEffect로 컴포넌트가 마운트 되고 난 후에 쓰면 호출이 가능하다 !

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    console.log(document.body);
  });
  return (
    <div>
      <h1>
        SSR <br /> hello, world!
      </h1>
    </div>
  );
}

대충 이런식 ?

SEO

Next.js는 SSR로, SEO가 잘된다는 장점이 있다 !

그렇다면 왜? SEO가 잘되는것일까 ?

왼쪽: next.js / 오른쪽: react.js

아까 내가 각각 next.js, react.js 로 hello, world! 를 띄웠다.

그렇다면 각각 두 페이지를 Postman에다가 띄우면 어떤게 나올까?

(페이지 소스보기 Ctrl + U 로도 확인 가능하다.)

Next.js (SSR)

<!DOCTYPE html>
<html lang="en">

<head>
    <style data-next-hide-fouc="true">
        body {
            display: none
        }
    </style><noscript data-next-hide-fouc="true">
        <style>
            body {
                display: block
            }
        </style>
    </noscript>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" /><noscript data-n-css=""></noscript>
    <script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1672325386908"></script>
    <script src="/_next/static/chunks/webpack.js?ts=1672325386908" defer=""></script>
    <script src="/_next/static/chunks/main.js?ts=1672325386908" defer=""></script>
    <script src="/_next/static/chunks/pages/_app.js?ts=1672325386908" defer=""></script>
    <script src="/_next/static/chunks/pages/index.js?ts=1672325386908" defer=""></script>
    <script src="/_next/static/development/_buildManifest.js?ts=1672325386908" defer=""></script>
    <script src="/_next/static/development/_ssgManifest.js?ts=1672325386908" defer=""></script><noscript
        id="__next_css__DO_NOT_USE__"></noscript>
</head>

<body>
    <div id="__next">
        <div>
            <h1>SSR <br/> hello, world!</h1>
        </div>
    </div>
    <script src="/_next/static/chunks/react-refresh.js?ts=1672325386908"></script>
    <script id="__NEXT_DATA__" type="application/json">
        {"props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
    </script>
</body>

</html>

React.js (CSR)

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="module">
        import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx?t=1672322031531"></script>
</body>

</html>

두개를 보면 각 페이지의 html을 반환하는데,

SSR에는 body안에 hello,world가 뜨는 반면, CSR의 html파일안에는 눈씻고 찾아봐도 hello,world는 찾아볼 수가 없다...

이게 왜 중요하냐 !

이게바로 크롤링이기 때문 …!

검색엔진이 크롤링으로 페이지를 긁어갈 때, 이 html 파일을 읽기 때문이다 !

** 내가 이 두 페이지를 웹에 올렸다고 했을 때, 사용자가 hello, world 를 검색하면 SSR로 만든 페이지는 뜨겠지만, CSR로 만든 페이지는 뜨지 않을것이다 !**

그건 곧 서비스의 수익과도 연결되기 때문에 아주 중요하다 !

마무리

뭔가 CS 지식으로 그냥 SSR이랑 CSR은 이런 차이가 있고, SSR은 SEO가 더 잘되고… 이런걸 아는것보다 직접 실험하고 눈으로 확인하니까 뭔가 더욱 흥미가 생기고 잘 이해가 되는 것 같다 !

앞으로 이런 실험들을 많이 해나가면 좋을 것 같다 !