모아이

docker로 mysql띄우고 Next.js로 연결해보기(prisma)-3

모_아이 — Wed, 29 May 2024 17:49:07 +0900

저번에 docker로 띄운 mysql을 next.js 프로젝트에 연결해서 테이블을 만드는 것까지 진행해 봤다.

그렇다면 간단하게 next.js에서 입력폼을 만들어보자
컴포넌트 폴더를 따로 만들어서 제작했다.

컴포넌트 세팅

먼저 app폴더 바로 아래 있는 page.tsx 파일에 기본적으로 되어 있는 세팅들을 삭제하고 시작하자.
global.css에 있는 css 들도 다 삭제 했다. tailwind를 사용할 예정이라 @tailwind ~ 부분은 삭제하지 말자

// app/page.tsx


export default function Home() {

  return (
    <main className="min-h-screen flex flex-col justify-center items-center space-y-10"></main>
  );
}

다 삭제하고 입력 폼과 띄울 투두 리스트만 가운데로 오도록 세팅했다.

그럼 투두를 만들 입력 폼과 데이터를 받을 TodoForm.tsx과 PostList.tsx를 만들어보자

여기서 components폴더는 어디에 만드나? 할 수 있는데 app디렉토리 안에 만들어도 되고 app외부로 나와서 루트에서 만들든 상관은 없다.
다만 주의할 점으론 app 폴더에 만들경우 현재 Next.js는 라우팅을 자동으로 해주는데 우리가 만든 components폴더 또한 라우팅 될 수 있다(물론 page.tsx를 만들지 않을 경우 엑세스 하진 않는다)
그래서 app폴더 안에 components폴더를 만들고 싶은 경우 앞에 _를 붙여서 라우팅 되지 않도록 만들어주자
_components라고 폴더를 만들어줄 경우 Next.js에서 이를 인식하고 라우팅을 하지 않는다

// components/TodoForm.tsx

export default function TodoForm() {
  return (
    <form
      className="flex flex-col justify-center items-center rounded shadow-md  bg-sky-200 p-5 space-y-3"
    >
      <input type="text" name="title" className="p-2 rounded" />
      <input type="text" name="content" className="p-2 rounded" />
      <button className="p-2 bg-slate-300 w-24 rounded ">submit</button>
    </form>
  );
}

간단한 모양으로 만들었고 만들어진 모양을 보면

어떤 효과도 입히지 않은 정말 간단한 form 입력창이 하나 만들어졌고 다음으로 PostList또한 간단하게 만들어보자

// components/PostList.tsx

export default function PostList() {
  return (
    <div className="w-3/5 flex flex-col items-center space-y-5">
      <div className="p-5 bg-slate-100 w-full rounded shadow-lg flex flex-col space-y-2 ">
        <h1 className="font-bold text-xl">Title : title부분</h1>
        <p>내용 부분</p>
        <span className="text-slate-500 text-sm">Create : 만든날짜</span>
      </div>
      <div className="p-5 bg-slate-100 w-full rounded shadow-lg flex flex-col space-y-2 ">
        <h1 className="font-bold text-xl">Title : title부분</h1>
        <p>내용 부분</p>
        <span className="text-slate-500 text-sm">Create : 만든날짜</span>
      </div>
    </div>
  );
}

일단은 목록이기에 2개를 붙였고 list가 불러질 땐 하나로 돌릴 예정이다.

일단 완성된 화면을 확인하면

이렇게 아주 간단한 입력창과 todo 창이 완성된 걸 확인해 볼 수 있다

Server

그럼 이제 Next.js 의 server action을 통해 prisma에 접근해야 하는데 이는 공식문서를 참고하자

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

LIST불러오기(getTodos)

일단 Next.js를 사용하며 "use client"를 통해 클라이언트 컴포넌트를 나누듯이 "use server"를 통해 서버에서 동작하도록 만들 수 있다.
각 함수 내부에서 사용해도 되지만 나는 루트 폴더에 server폴더를 만들어 server에 관련된 부분들을 해당 폴더에 넣을 예정이다
server폴더 안에 actions폴더를 만들어 post.ts란 파일을 만들어 투두리스트를 불러오는 함수와 추가하는 함수를 구현해보자

그 전에 이전에 만들었던 /lib/prisma.ts에 작성한 쿼리 client 부분을 지우고 새로 clinet라는 폴더를 만들어서 clinet.ts란 파일에 새롭게 적자.
이전에 production 상태등을 고려해서 작성했고 정상적으로 작동하지만 typescript가 제대로 동작하지 않는 경우가 있어 일단 수정했다

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

export const prisma = new PrismaClient();

혹시 import가 안된다면 npm install @prisma/client로 직접 설치해주면 해결된다!

그리고 이를 이용해 todolist를 불러오는 server action 함수를 만들어보자

//@server/actions/post.ts

"use server";

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

export const getTodos = async () => {
  const todos = await prisma.post.findMany();

  return todos;
};

여기서 prisma.post.findMany()가 무엇인가? 궁금한데.. prisma는 우리가 이전 client/client.ts에서 만들었던 new PrismaClient 객체로 우리가 schema로 만들었던 모델들이 모두 포함 되어 있다
그리고 자체적으로 주어지는 쿼리들이 존재하며 우리가 만들었던 post로 접근할시 prisma에서 만들어놓은 많은 데이터 쿼리들이 존재하는데 상황에 맞춰 공식문서를 찾아보며 사용해보면 된다.

https://www.prisma.io/docs/orm/prisma-client/queries

나는 이곳에서 전부 찾아와주는 메서드인 findMany()를 사용했다. 이는 SELECT * FROM post와 동일하게 동작한다.
그리고 docker에 올라가 있는 mysql에서 받은 리스트들을 return 해주고 이를 화면에 뿌려주면 된다.

// @components/PostList.tsx

import { getTodos } from "@/server/actions/post";

export default async function PostList() {
  const todos = await getTodos();

  return (
    <div className="w-3/5 flex flex-col items-center space-y-5">
      {todos.map(({ id, title, content, createdAt }) => (
        <div
          key={id}
          className="p-5 bg-slate-100 w-full rounded shadow-lg flex flex-col space-y-2 "
        >
          <h1 className="font-bold text-xl">Title : {title}</h1>
          <p>{content}</p>
          <span className="text-slate-500 text-sm">
            Create : {createdAt.toLocaleString()}
          </span>
        </div>
      ))}
    </div>
  );
}

코드 부분은 끝났고 mysql에 대강 todolist 몇개를 강제로 insert해서 띄워보자

MySQL Workbench에 들어가서 입력 시키고 db를 확인해보니 잘 들어간 걸 확인할 수 있다

insert into Post (title,content)
values('test2','Todo테스트2입니다');

insert into Post (title,content)
values('test3','Todo테스트3입니다');

-- ....some code

select * from Post;

잘 들어간 걸 확인했으니 그럼 화면에도 정상적으로 뜨는지 확인해보자.
우리가 만든 컴포넌트들을 page.tsx에도 잘 넣었다면 무사히 뜰것이다.

import PostList from "@/components/PostList";
import TodoForm from "@/components/TodoForm";

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col justify-center items-center space-y-10">
      <TodoForm />
      <PostList />
    </main>
  );
}

코드도 잘 들어갔고? 화면도 잘 뜬다.

굉장히 쉽게 완성됐고 이제 todo를 작성할 수만 있다면 완성이다.

Todo 추가하기(addTodo)

아까 작성하던 @server/actions/post.ts로 돌아가서 addTodo 함수를 완성해보자

// @server/actions/post.ts
"use server"

// ...

export const addTodo = async (formData: FormData) => {
  const title = formData.get("title");
  const content = formData.get("content");
  if (title instanceof File || content instanceof File || !title || !content)
    return console.error("Please enter the title and content");
  await prisma.post.create({ data: { title, content } });
};

이후 form에 가서

// @components/TodoForm.tsx
import { addTodo } from "@/server/actions/post";

export default function TodoForm() {
  return (
    <form
      action={addTodo}
      className="flex flex-col justify-center items-center rounded shadow-md  bg-sky-200 p-5 space-y-3"
    >
      <input type="text" name="title" className=" p-2 rounded" />
      <input type="text" name="content" className=" p-2 rounded" />
      <button className="p-2 bg-slate-300 w-24 rounded ">submit</button>
    </form>
  );
}

form태그의 action 부분에 우리가 작성한 addTodo함수를 집어 넣으면 완성된다.
addTodo 함수를 잠깐 살펴보자면 이는 form태그에서 action을 사용한다면 매개변수 부분에서 FormData가 들어오게 되고 이는 get을 이용해서 데이터를 꺼내야 한다.
이때 데이터를 꺼낼때 이름은 각 input의 name값으로 정해지니 name을 잘 맞춰주자
데이터를 꺼낸 후 바로 타입을 살펴보면 FormDataEntryValue | null라는 타입이 각각 title과 contetn에 붙어있을 것이다.

이를 바로 prisma.post.create를 사용해 생성시킨다면 타입 관련한 에러가 나오게 되는데
이는 우리가 schema.prisma에서 선언한 타입들을 그대로 가져오기 때문에 string과 충돌나는 것이다.

이를 타입 네로잉 즉 타입을 string으로 좁히기 위해 각각 title과 conetent는 File타입이고 null인지 체크해서 맞다면 함수를 더이상 진행하지 않고 return하도록 했다

그리고 무사히 if문 쪽을 통과한다면 title과 content는 string타입만 남게되고 이를 통해 우리가 설정한 타입 그대로 prisma.post.create의 data로 각각 넘겨줄 수 있게 된다.

실행을 해보면

새로운 값들을 넣은다음 제출버튼을 누른 후 데이터가 db에 들어갔는지 워크벤치로 가서 확인해보자

select * from Post;

로 쿼리를 적어 확인해보니

무사히 db에 도착한 것 같다!

화면도 새로고침을 해보니

변경된 데이터를 받아 띄워주는 걸 확인할 수 있다.

지금 페이지들은 서버 컴포넌트들로 즉각적인 변화가 일어나지 않기 때문에 새로고침을 해줘야 하는데 이부분은 Next.js를 공부하면서 더 수정해보자.

일단 글의 목표인 Next.js 기반으로 Prisma, ServerAction, docker, My SQL을 활용해서 로컬에서 돌아갈 간단한 웹 페이지와 서버, db를 연결시키는 테스트를 해봤다.

추가적으로 어떤 걸 더 해볼지는 개인 적으로 하나씩 해보면 좋을 것 같은데 나는 tRPC를 활용해서 server action과 함께 묶어보려고 한다.

docker로 mysql띄우고 Next.js로 연결해보기(prisma)-2

모_아이 — Mon, 13 May 2024 17:11:44 +0900

이전 글에서 docker를 이용해 mysql을 띄웠고 이후 workbench를 이용해 데이터 베이스에 쉽게 접속할 수 있도록 만들었다.

그럼 이제 이를 실제로 코드상에서 사용해보려 하는데 Next.js와 Prisma를 이용해서 만들어보려고 한다.
이를 통해 prisma의 사용법을 간단하게 보고 특히 Next.js의 Server action을 잘 익혀볼 수 있을 것 같다.

프로젝트 설정

npx create-next-app@latest

를 통해 간단한 next-app을 만든다. 이름은 sql_test로 만들었다.

성공적으로 sql_test가 설치 되었다면 추가적으로 prisma를 설치하자

cd sql_test
npm i prisma --save-dev
npx prisma init --datasource-provider mysql

혹시 sql_test 폴더가 아닌 바깥쪽에서 설치할 까 cd sql_test도 넣었다.
무사히 잘 설치 했다면 sql_test폴더 안에 prisma라는 폴더가 생긴 걸 확인할 수 있다

이때 주의 할 점으로 만약 git으로 해당 프로젝트를 올릴 생각을 하고 있다면 방금 prisma와 함께 생긴 .env파일을 되도록 git remote 에는 올리지 말아야 하는데 .gitignore에 들어가서 .env를 추가하자.
그럼 git의 추적이 끊어진 걸 볼 수 있다

prisma 폴더 안에는 schema.prisma라는 파일이 하나 같이 생성되어 있는데 내부를 살펴보면

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

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

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

이렇게 만들어져 있다. Prisma클라이언트를 생성하고 아래는 db를 연결하는데 mysql이며 url부분은 env()를 통해 .env파일에 접근 하여 DATABASE_URL을 가져온다.

나는 .env와 DATABASE_URL을 만든적이 없는데 어떻게 된걸까? 프로젝트 루트 폴더에서 잘 살펴보면 .env파일이 만들어져 있고 내부를 살펴보면

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="mysql://johndoe:randompassword@localhost:3306/mydb"

이렇게 존재하는 걸 확인할 수 있다.
url의 형식은 내가 사용하는 데이터베이스마다 형식이 다르니 각자 참고해서 넣어보자 MySQL같은 경우는 아래와 같다.

mysql://USER:PASSWORD@HOST:PORT/DATABASE

임으로

USER : 데이터베이스 사용자의 이름
PASSWORD : 데이터베이스 사용자의 비밀번호
PORT : 데이터베이스 서버가 실행중인 포트(일반적으로 MySQL의 경우 3306이다)
DATABASE : 데이터베이스 이름

우리는 저번에 만든 걸 넣어본다면

DATABASE_URL="mysql://dev:1234@localhost:3306/test"

가 될 것이다.

이러면 Prisma가 데이터 베이스에 접근할 수 있도록 성공적으로 작성했다. 이따가 테스트를 통해 잘 들어가는지 확인을 해보자

내가 넣고 싶은 건 간단하게 제목과 내용을 가진 글목록이고 이를 테이블로 만들어 보고 싶다.


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

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

model Post {
  id Int @id @default(autoincrement())
  createdAt DateTime @default(now())
  title String @db.VarChar(255)
  content String?
}

Post라는 테이블에 다음과 같은 컬럼을 만든다

id : Int타입이며 @id역할을 하고 @default기본적으로 autoincrement자동 증가하게 해준다. 즉, 자동적으로 증가하는 아이디가 붙을거란 것
createdAt : 생성 날짜인데 DateTime 타입이며 기본적으로 now현재 시간으로 넣을것이다

등 아래 title과 content는 찾아보며 유추 가능할 것이라 생각한다.

이렇게 prisma를 작성하고 다시 명령어 창으로 돌아와 아래의 명령어를 입력해주면?

npx prisma migrate dev --name init

우리가 작성한 prisma 모델이 올라가게 되고 migration기록이 db에 함께 저장되게 된다!

우리 프로젝트에도 새로운 폴더와 파일이 생성되는데

prisma/migrations/2024...(마이그레이션시간)/migration.sql

이 만들어지게 된다. 이 내부를 확인해보면

CREATE TABLE `Post` (
    `id` INTEGER NOT NULL AUTO_INCREMENT,
    `createdAt` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
    `title` VARCHAR(255) NOT NULL,
    `content` VARCHAR(191) NULL,

    PRIMARY KEY (`id`)
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

'이처럼 되어 있는데 우리가 아까 prisma 파일에서 선언한 model을 prisma가 자동적으로 sql문으로 변경하여 데이터 베이스 서버에 날려주는 것이다.

고로 데이터 베이스를 확인하러 workbench로 들어가보면?

내가 설정한 model이 다 그대로 들어간 걸 확인할 수 있다. 여기까지 오면 굉장히 신기하고 또 재밋게 느껴졌다.
그럼 이 다음에는 클라이언트 쪽에서 무언가를 할 수 있어야 하는데..

여기서
공식문서에 따르면 prisma@client를 새로 설치하라고 나오는데 설치하지 않고도 사용할 수 있었다. 아마 자동 설치되는 부분이 있는 것 같다.
그러면 아래의 설치를 따라하지 않고 한번 진행해보자

npm install @prisma/client

데이터 베이스 쿼리

데이터 베이스에서 데이터를 읽고 쓰기 위한 쿼리 작성을 시작할 수 있는데
일단 prisma 의 인스턴스를 생성해 줘야 한다

lib/prisma.ts라는 파일을 만들어 아래의 코드를 추가해주자

// lib/prisma.ts
import { PrismaClient } from "@prisma/client";
declare global {
  let prisma: PrismaClient | undefined;
}
const client = prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") prisma = client;
export default client;

이는 prisma@client를 따로 import 하지 않고 전역적으로 사용하기 위해 작성된 코드로 declare global을 통해 글로벌 변수속 prisma를 선언, 이후 client를 만들어 만약 전역 변수 prisma가 없다면 새로운 prisma@client를 가지도록 하였고 아니라면 기존 글로벌 변수에 있는 prisma를 사용하도록 한다.
이때 만약 노드의 상태가 프로덕션이면 client는 prisma 전역변수에 할당하여 동일화 시킨 후 client는 export하여 전역적으로 사용할 수 있게 한다.

이를 통해 다른 곳에서 client를 통해 prisma가 제공하는 데이터베이스 쿼리를 사용할 수 있게 된다.

이는 다음 글에서 Next.js의 server action과 더불어 함께 다뤄보자

Reference : https://www.prisma.io/ , https://www.yujiseok.blog/post/nextjs-server-actions

docker로 mysql띄우고 Next.js로 연결해보기(prisma)-1

모_아이 — Mon, 13 May 2024 15:06:37 +0900

제목만 보면 뭔가 되게 많아 보이는데 실은 별거 없다.

docker를 이용해서 가상 컨테이너로 mysql 서버를 만들고 Next.js와 prisma를 사용해서 쉽게 mysql에 내가 원하는 타입과 결과를 넣어보려고 하는거다.

docker와 next.js의 server action, prisma를 연습하기 위해 한번 실행해 봤다.

본 작성글은 window 환경에서 작업한 작성물입니다.

docker로 mySQL 컨테이너 올리기

먼저 docker가 있어야 하지 않을까? 해당 링크로 가서 docker를 먼저 설치하자

https://www.docker.com/get-started/

무사히 설치가 됐다면 cmd 창을 열자 git bash나 window powershell도 괜찮습니다.
저는 window powershell에서 실행했습니다.

docker pull mysql:8.0

먼저 입력해주자. 하나씩 살펴보면 docker는 docker명령어들을 실행하기 위한 것이고 우리가 라이브러리 설치하려 할 때 앞에 npm을 붙여 npm을 사용하는 것과 같다.
pull은 다운로드 받는 걸 뜯하고 mysql:8.0은 어떤걸 다운 받은 건가 이다.
npm install mysql:8.0 과 똑같이 생각하자.
이때 mysql만 해도 되는데 뒤에 :8.0은 뭐지? 할 수 있는데 이건 mysql workbench를 사용하는데 있어 버전을 맞추기 위해 뒤에 버전을 따로 tag한 것이다.
이는 이따 다른 명령어들을 실행할 때도 주의해서 작성해주자
무사히 mysql:8.0이 설치 되었다면 한번 확인해보자

docker images

를 입력시 내가 다운 받은 이미지들을 전부 띄우는 것으로 입력히 아까 다운받은 mysql이 떠야한다.

위처럼mysql이란 이름과 tag부분에 8.0으로 들어가 있으면 성공적으로 mysql:8.0버전으로 이미지가 설치 된 것이다.

이후 컨테이너를 설정해서 올려야 한다.

컨테이너와 이미지의 차이점은 docker 공식문서나 여러 블로그들을 참고해서 한번 알아보자.

docker run -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=dev --name mysql_test mysql:8.0

docker run :도커로 실행하겠다
-d :detach모드의 약자로 컨테이너가 백그라운드에서 실행된다 생각하면 된다. 우리가 어떤 다른 작업을 한다해도 docker container는 계속 올라가서 유지되고 있다는 것
-p <호스트 포트> <컨테이너 포트> :p 3306:3306`으로 포트를 서로 연결한다.
-e : 컨테이너에서 사용할 환경변수를 설정한다. 우리가 개발 할 때 .env파일에 비밀 변수들을 추가하는 것이라 생각하면 된다
여기선 MYSQL_ROOOT_PASSWORD라는 이름의 환경변수를 dev로 저장했다.
이는 이따 컨테이너에서 mySQL에 접속할 때 사용할 비번을 설정하는 것!
--name <container name> 컨테이너의 이름을 설정한다. 우리가 만든 컨테이너는 mysql_test이다
mysql:8.0 컨테이너를 어떤 이미지를 사용해서 띄울건지로 우리는 mysql:8.0으로 컨테이너를 띄웠다

여기서 한번 궁금할텐데 port는 왜 3306이어야 할까 한다.
https://www.cbtnuggets.com/common-ports/what-is-port-3306
이 페이지를 참고해보자!

이후 컨테이너가 정상적으로 생성되고 돌아가고 있는지 확인하려면

docker ps -a

를 입력해서 확인 해 보자.

정상적으로 떠있는 걸 확인할 수 있다.

이때 STATUS부분을 확인해 보면 되고 UP이면 컨테이너가 올라가 있다. 즉, 사용할 수 있다는 뜻이고 멈추고 싶다면 docker container stop [컨테이너ID]를 입력해주자
입력 후 다시 docker ps -a를 작성해보면 방금과 동일하게 뜨지만 STATUS부분이 EXITED로 변경된 부분을 확인 할 수 있다

다시 docker를 올리고 싶다면 run이나 start를 쓰면 되는데 run은 attach모드가 디폴트이고 start는 detached모드가 디폴트이니 우리는 detached모드를 부여했음으로 start를 쓰자
docker start mysql_test를 입력해주고 다시 docker ps -a를 입력하면 정상적으로 STATUS가 UP으로 바뀐 걸 볼 수 있다.

mySQL 컨테이너에 접속하여 설정하기

무사히 컨테이너가 올라갔다면 이제 접속해서 권한 설정을 해보자

docker exec -it mysql_test bash

이는 docker exec가 컨테이너에 특정 명령을 실행할 수 있는 명령인데 이를 이용해서 컨테이너에 접속 할 수 있다.
뒤에 -it는 본래 -i -t 의 명령어로 표준 입력 활성화와 컨테이너와 연결되지 않더라도 표준 입력을 유지한다. TTY모드로 Bash를 사용하려면 해당 옵션을 사용하라고 되어 있다. 상호 입출력과 bash를 사용하기 위해 넣는다고 간단하게 일단 생각하고 넘어가자.

이후 컨테이너 이름을 적어주고 뒤에 bash를 사용해 bash환경으로 실행하자

그러면 이제 창에 명령 입력 부분이 이렇게 변할 것이다.

현재 상태는 컨테이너에 접속하였고 bash 명령어들을 입력할 수 있게 되었다.
그러면 mysql에 접속해보자

mysql -u root -p

를 입력시

이렇게 비밀번호를 입력하라고 나오는데 우리가 위에서 환경변수로 만든 MYSQL\_ROOT\_PASSWORD 에 입력한 값을 넣자.

키보드로 입력하는데 화면에 아무것도 안나온다고 걱정하지 말자. 보안상 나타나지 않는 것이고 작성되고 있음으로 정확한 비밀번호를 입력하고 엔터로 입력시 무사히 mySQL에 접속 된 걸 확인할 수 있다.

여기서 mysql -u root -p 부분은 보통 우리가 root의 경우 관리자 계정이고 관지라 계정으로 접속한다는 뜻으로 이해하자

위와 같은 화면이 뜰 경우 성공적으로 접속했다.
그럼 항상 관리자 모드로 접속 할 수는 없으니 우리가 사용할 유저 하나를 만들고 권한을 부여하자

CREATE USER 'dev'@'%' IDENTIFIED BY '1234';

mysql문법을 사용해서 입력해주고 끝에 꼭 세미콜론(;)은 잊지말고 작성해주자.mysql의 기본임으로!
CREATE USER 유저를 생성하겠다 'dev' dev란 이름으로 이때 '%'외부에서 접근을 허용 하겠다.
이후 뒤는 비밀번호 설정이다.

이렇게 권한을 부여한 dev란 유저를 만들었다. 그럼 잘 만들어졌는지 확인해 보고 싶은데 어떻게 할까?

use mysql;
select host,user from user;

이렇게 입력시 mysql이라는 기본적으로 mysql이 가지고있는 데이터베이스로 접근할 수 있고 이후 select문을 사용해서 user 부분을 가져올 경우

이렇게 내가 만든 `dev`를 확인할 수 있다

물론 현재는 유저만 만든것이기에 따로 권한이 없어 mysql 작업을 못하니 이제 권한을 부여해보자
다시 입력창에

GRANT ALL PRIVILEGES ON *.* TO 'dev'@'%';

이 명령어는 dev에게 모든 권한을 부여했음을 뜻하며 권한을 따로따로 설정별로 주고 싶을 경우 mySQL문서에서 찾아서 권한을 따로 부여할 수 있도록 연습해보자.
이후 우리는 꼭 root가 아닌 dev로 mysql에 접속할 수 있다.

quit
mysql -u dev -p

quit를 통해 mysql에서 나온 뒤 다시 mysql -u dev -p를 입력해서 내가 만든 유저로 무사히 접속 되는지 확인해보자.

만약 접속한 컨테이너 환경에서 나오고 싶을 경우 명령어 exit를 입력시 나올 수 있다

그럼 우리가 테스트 할 데이터 베이스를 하나만 만들고 컨테이너에서 나와보자
mysql -u dev -p로 다시 mysql에 접속하고

CREATE DATABASE test;

를 통해 test라는 데이터 베이스를 만들고 잘 만들어 졌는지 확인해보자

show databases;

아래 보면 test라고 무사히 database가 만들어진 걸 확인해 볼 수 있다.
그럼 아까 mysql데이터 베이스에서 user를 찾았던 것처럼 test라는 데이터베이스에 접속하려면 어떻게 해야할까?

use test

로 test데이터 베이스에 접속할 수 있다!

이로써 docker 컨테이너를 이용해서 mysql 서버를 하나 만들어 보았다. 그럼 마지막으로 mysql workbench에만 한번 등록을 해보고 끝내보자

mySQL workbench에 등록하기

먼저 mySQL workbench는 다운로드 하자. mySQL홈페이지로 들어가 설치 하면 된다.
https://dev.mysql.com/downloads/workbench/

무사히 실행이 완료 되었다면 아래와 같은 화면일 텐데 My SQL Connections부분에 + 버튼을 눌러 데이터 베이스를 연결해보자

+버튼을 클릭할 경우 아래와 같은 창이 나올텐데 순서대로 입력해주자

connection name은 내가 만들었던 db이름으로 적어주고(본인이 우너하는 대로 적어도 상관없긴 하지만 맞춰서 적어줘야 직관적이다!)

Hostname은 docker로 올렸기 때문에 localhost를 작성해주고 port는 mysql 포트인 3306 그대로 두고

username은 아까 우리가 만든 user의 이름인 dev를 집어 넣는다.

Default Schema는 우리가 기본으로 사용할 스키마를 고르는 것으로 아까 만든 test라는 이름의 database를 적어넣어서 기본적으로 workbench에서 mysql_test라는 데이터베이스에 접속시 test 데이터베이스로 들어갈 수 있도록 한다

이후 바로 들어가는게 아닌 password 부분은 Store in Vault를 통해 비밀번호를 입력하자!
클릭할 시

이런 창이 나오는데 아까 우리가 아까 도커 컨테이너의 mysql에 들어가서 CREATE USER 하면서 같이 적었던 비밀번호를 입력해주자

OK를 누른 뒤 우측 하단의 Test Connection으로 정상적으로 연결 되었는지 확인해보자!

Successfully로 뜰경우 성공적으로 연결된 것이니 ok누르고 다시 우측 하단 ok를 눌러서 무사히

이러한 데이터베이스가 생겼는지 확인해보자! 더블클릭 할 경우 우리가 잘 만든 mysql_test 서버에 들어왔고 test 데이터베이스가 default로 되어 있는 걸 확인 할 수 있다

여기까지 모두 성공했다면 무사히 docker를 통해 mysql서버를 컴퓨터로 띄울 수 있었고 데이터베이스도 사용할 수 있게 된 것이다.
그러면 다음 글에서 next.js 와 prisma 를 통해 데이터 베이스에 접근하고 사용할 수 있는지 테스트 해보자!

Reference: https://mungto.tistory.com/328

Ember -Tutorial (Service & Form input)

모_아이 — Mon, 29 Apr 2024 15:48:03 +0900

Service

엠버의 서비스는 애플리케이션이 동작하는 동안 유지되는 숫자 개체이며 애플리케이션의 다른부분에서 사용할 수 있다.
번역 본이라 조금 이상한데 여러개의 컴포넌트에서 service1을 사용할 수 있다는 뜻.

예시로 로그인이라는 서비스를 통해 로그인 페이지에서 로그인 서비스로 로그인을 보낸뒤 사용자 페이지에서 받을 수 있도록 할 수 있다.
개념적으로만 보면 전역 상태가 생각되는데 한번 사용 예시를 봐봐야 겠다

먼저 service를 만드려면 동일하게 emberCLI로 만드는데


ember g service shopping-cart

이러면 app/services/shopping-cart.js 파일이 하나 만들어 진다


// app/services/shopping-cart.js

import Service from '@ember/service'

export default class ShoppingCartService extends Service {
  itemList = [
  {name: '1'},
  {name: '2'}
 ]
}

일단 shopping-cart라는 service에 itemList라는 더미 데이터를 만들어 놓는다.
이후 controllers/cart.js로 가서 서비스를 주입한다

현재 보고 있는 ember tutorial은 2022 영상이지만 현재 2024 docs에선 변경점이 있다
service를 import할 때 2022 영상에선 import {inject as service} from '@ember/service'처럼 사용하는 걸 볼 수 있는데

inject를 as를 통해 변경해서 사용한다.

하지만 최근 docs를 보면 업데이트 되었는지 component에서 사용할 때 import {service} from '@ember/service'로 사용되고 있다.

여기까지 import에 대한 얘기이고 사용에 관해서는 데커레이터를 사용하면 된다

// controllers/cart.js

export default class CartController extends Controller {
  @service shoppingCart;

  //...somecode
}

그리고 shopping-cart에서 선언한 더미데이터를 쓰기 위해 template으로 가서

//...some code

{{#each this.shoppingCart.itemList as |item|}}
  //...some code
{{/each}}
///...some code

이렇게 사용하면 된다.

만약 service를 사용할 때 파일 이름이 아닌 현재 컨트롤러 안에서 내가 이름을 재정의 하고 싶다면 service 데커레이터 사용하는 부분을 @service shoppingCart 에서 @service('shopping-cart') cart; 로 변경 해주면 된다.

이는 함수 부분도 service class 내에서 선언한뒤 사용부분에서 데커레이터를 통해 가져오고 똑같이 사용하면 된다.

Form Input

우리가 하나의 input창을 가지고 있고 이걸 변경하고 싶다.

예시로 장바구니에 상품이 있고 상품 개수를 수동으로 조절할 수 있는 input이 있는데 작성해보자

<!-- cart.hbs -->
{{#each this.shoppingCart.itemList as |item|}}
  <input type="number" value={{item.count}} {{on "input" (fn this.updateItemCount item)}}/>
{{/each}}

이후 controllers/cart로 이동해서 @action하나를 추가한다.

//controllers/cart.js

//...some code
@action
updateItemCount(item, event) {
  const count = event.target.value;
  item.count = count;
}

여기서 전달되는 item은 input에서 보내는 item이며 2번째 매개변수인 event는 말그대로 이벤트이다.
따라서 js 기본적으로 실제 값 얻는 방식을 그대로 사용하면편한데 event.target.value 사용하면 된다.
이후 전달받은 item의 count를 현재입력된count로 변경하면 된다.

이때 주의할 점으론 tracked되고 있는 놈은 itemList로 ember는 itmeList 내부의 count가 변경 되었는지 확인할 수 없다.
따라서 itemList에 들어갈 item을 하나의 class로 만들고 거기서 count를 @tracked를 사용해 트랙킹 하고 이를 itemList에 들어갈 item들을 모두 new Item을 통해 각각의 item의 count가 추적되고 있다면 값의 변함을 트랙킹하고 이를 실제로 웹에 반영한다.
이를 통해 총 합을 구하는 부분에서도 연관된 부분이 @tracked되어 같이 업데이트 되기 때문에 잘 고려해서 만들어보자

우리가 주의할 점은 updateItemCount를 사용하는 부분에서 우리는 인자로 item 하나만 넘겼는데 class에서는 event 매개변수가 추가로 있다.
이를 통해 on도우미를 사용하고 이벤트를 호출하는 경우 기본인수로 event가 전달된다.

Ember -Tutorial (Helper & custom Helper)

모_아이 — Mon, 29 Apr 2024 13:55:38 +0900

Helper

ember에는 helpler라는 개념이 있는데 이는 이전 글에서 action을 사용할 때 이용했던 on,fn 등이 이런 helper에 해당된다

그런데 한가지 다른게 보이는데 on을 사용할 때는{{}}안에서 사용했고 fn은 ()안에서 사용됐다
이는 최상위 수준에서의 도우미가 {{}}로 시작하기 때문이다.
{{helper1, (helper2 ... (helper3 ....))}} 가장 최상위는 {{}}로 시작하고 이후 중첩되는 도우미들은 ()로 둘러싼다.

Built-in Helper

ember에 내장된 도우미들 몇개만 살펴보자면

{{on
{{concat :여러 문자열을연결하는데 도움이 된다. `class={{concat "active-" @color}}
{{get : 가져오는 것으로 {{get this.product "name"}}. 첫번째 인수는 해당 제품의 객체이고 2번째 인수는 그 객체의 키값이다. 객체의 키값으로 찾는 product.name과 동일하고 뒤에 오는 'name'은 동적으로도 가능하다
{{hash : <Child @user ={{hash firstName="Lee" lastName="Moi"}}처럼 주어진 키와 값 쌍으로 해시를 생성하는 도우미이다. 이는 내부적으로 user = {firstName:'Lee', lastName:'Moi'}와 동일하다.
{{let : {{let (concat this.firstName this.lastName) as |fullName|}} 처럼 사용하면 템플릿 내부에 임시 변수로서 사용할 수 있게 만드는 도우미로 concat도우미를 활용해 이름을 연결하여 LeeMoi라는 문자열을 fullName이라는 이름으로 사용할숭 있게 만드는 것이다.
{{if : 프로그래밍에서 자주 보는 것으로 똑같다 if 조건절로 class={{if this.isRed 'red' 'black'}}이렇게 사용될 수 있다. 이는 this.isRed가 조건이며 red가 true일 때, black이 false일 때 출력되는 값이다.
{{unless : class={{unless this.isRed 'black' 'red}} if와 반대로 조건이 거짓인 경우 첫번째를 반환하고 참일경우 2번째를 반환한다. 우리가 자주 사용한 !를 붙여 false가 true일때를 쓰는 방식. unless도 똑같이 else를사용할 수 있다(열린태그에서)
{{each : React에서 가장 많이 사용했던 map이라고 생각하자 each를 통해 반복을 돌리고 하나씩 꺼내서 렌더링 하는데 도움을 준다
아래 개방태그에서 마지막 예시를 확인해보자

등이 있고 개방태그에서 사용할 수 있는 예시를 하나씩 보면 이해하기 편하다.

주의할 점으로 요소의 attribute 영역에서 사용하는 것을 제외하고 열려있는 구역에서 사용할 시 #과 /을 통해 꼭 표시를 해줘야한다.

{{#let (concat this.firstName this.lastName) as |fullName|}}
  <h1>{{fullName}}</h1>
{{/let}}

{{#if this.isRed}}
  <h1>Red</h1>
{{/if}}

{#if this.isRed}}
  <h1>Red</h1>
{{else}}
  <h1>Black</h1>
{{/if}}

{#unless this.isRed}}
  <h1>Black</h1>
{{else}}
  <h1>Red</h1>
{{/unless}}

{{#each list as |item|
  <h1>{{item.name}}</h1>
  <h2>{{item.description}}</h2>
{{/each}}

여기서 each에 대한 설명을 조금만 더 붙이자면 each를 for와 동일하게 보며 list는 반복을 돌릴 객체이며 as |item|부분은 let을 사용한 부분처럼 반복을 돌면서 나올 하나하나의 item을 item이라는 변수명으로 사용하겠다는 얘기이다.
그리고 꼭 끝났다는 {{/each}}를 집어넣어 마무리 하자

custom helper

사용자 지정 도우미를 만들 수 있는데 이도 똑같이 emberCLI를 통해 만들 수 있다.
또 나오긴 하지만 React에서 custom hook과 같은 느낌이 처음에 강하게 든 개념이다

ember g helper currency

라고 저번에 만들었던 샵과 장바구니에서 가격을 나타내는 데 $가격으로 나타내고 싶은 것을 도우미로 만들어보려한다.
처음 CLI를 입력하면 currency.js라는 파일이 생성되는데 첫 내부를 살펴보면

import {helper} from '@ember/component/helper'

export default helper(function currency(params/*, hash*/) {
  return parmas
}

이렇게 생겼다.

여기서 helper라는 한수에 인자로 우리가 CLI로 만들때 만든 이름인 currency라는 함수를 만들어 넘긴다.
이때 첫번째 인수인 params는 도우미 블록에서 전달되는 매개변수 목록이다.
즉, {{currency 25}}를 작성할경우 params 배열 내부의 첫번째 매개변수로 들어오게 된다.
const [number] = params; 처럼 구조파괴 하여 사용가능하고 이를 통해 number에는 25라는 값이 담기게 된다.

그럼 주석 처리 되어 있는 hash부분은 2번째 매개변수로 무엇일까??

키가 정의되어 helper에게 값을 전달 할 수 있는 해시이다.

이또한 어떻게 사용하는지 바로 보자면 {{currency 25 sign="$"}} 처럼 사용할 수 있는데 이 또한 hash를 구조분해 할당하여

const {sign} = hash를 통해 안에 sign이라는 키값으로 보내진 값 $를 사용할 수 있게 된다!

뭐 기본값을 설정하거나 하는 등의 테크닉은 Javascript를 안다면 충분히 해볼 수 있다.
매개변수를 주지 않고 currency의 함수에서 =등을 사용해 기본값을 설정해서 사용한다면 고정적인 값들을 사용할 수 있게 된다.

근데 꼭 함수 기반으로 해야할까? 이는 함수형 프로그래밍인 Javascript이긴 하지만 ember는 class가 대부분이다
이curreny도 비슷하게 갈 수 있지 않을까??

class helper로 변경

import Helper from '@ember/component/helper'

export default class currency extends Helper {
  compute(params,hash) {
    //...some code
    return /*...some code*/
  }
}

내장되어 있는 compute 메서드를 사용하여 활용할 수 있다.

Ember - Tutorial(Component#2-Tracked,Getter,Actions)

모_아이 — Fri, 26 Apr 2024 15:15:58 +0900

제목에 적어놓은 Tracked, Getter, Actions는 컴포넌트에만 존재하는 것이 아니라 Controller에서 사용된다.

뿐만아니라 관련해서는 현재 튜토리얼 페이지에서 따라해보면 Route에서도 사용되는 것 같다.

Tracked properties & Getter

먼저 컴포넌트의 구성부터 살펴보자면

import Component from '@glimmer/component'
import {tracked} from '@glimmer/trancking'

export default class MyComponent extends Component {
  @tracked firstName = 'Shawn';

  @tracked lastName = 'Chen'

  get fullName() {
    return this.firstName + this.lastName;
  }
}

glimmer에서 import시킨 tracked는 데코레이터로 속성 앞에 작성할 경우 동작한다.
어떤 것에 대한 동작이냐?
간단히 설명하면 React에서 사용했던 useState같은 느낌과 비슷하다.

우리가 React를 사용할 때 상태가 변경됨을 체크하려면 useState를 썼던 것처럼 속성이 변경될 때 알림을 받으려면 @tracked 즉, GIT을 할 때 한번쯤 들었던 것처럼 트랙킹,추적을 해야한다.

이경우 hbs 파일에서

<h1>{{this.fullName}}</h1>

사용했을 때 fullName을 렌더링 해야한다면 일단 처음 만들어질 때 초기화 된 Shawn Chen을 출력할 것이다.
tracked되어 있기 때문에 아마 변경이 된다면 최신 정보를 출력할 것이다.

그럼 최신으로 바꾸기 위해 필요한 Action부분을 살펴보자

Action

import Component from '@glimmer/component'
import {tracked} from '@glimmer/trancking'
import {action} from '@ember/object'

export default class MyComponent extends Component {
  @tracked number = 0;

  @action
  addNumber() {
    this.number = this.number + 1;
  }
}

action데커레이터를 통해서 숫자를 증가시키는 간단한 액션을 추가한다. 이후 template부분에서 보자면

<h1>Number : {{this.number}}</h1>
<button {{on "click" this.addNumber}}>Add</button>

다른 React 등을 보다 보면 되게 생소할 수 잇다. 저게 함수인가?? 뭐지? 하는 느낌이 나도 처음 들었는데 일단 하나씩 살펴보자면..

on부분은 이벤트를 트리거 할 수 있도록 도와주는 ember helper인데 이 부분인데 정확한 설명은 없고 일단 버튼에 이벤트를 트리거 하기 위해선 첫번째로 on이 들어가는 구나를 일단 인식해보자

2번째 인수로 들어간 "click"은 이벤트의 이름을 알려주고 클릭임으로 클릭이벤트를 트리거 한다라고 알려주는 것이다.

그리고 마지막 이벤트는 우리가 정의한 액션을 집어 넣는 것이다.

on을 통해 ember helper를 불러서 ember가 이벤트를 트리거 할 수 있도록 부르고 "click"어떤 이벤트인지 알려주고, this.addNumber실행할 이벤트를 적는 것이다.
onClick={clickHandler}를 on/Click/={clickHandler}react에서 사용된 클릭 이벤트를 저렇게 나눠 쓴다고 생각하면 바로 이해가 온다

그럼 이걸 이전에 만든 컴포넌트들에 적용시키려면 어떻게 해야할까?

똑같이 emberCLI를 이용한다면 만들기 쉽다

ember g component-class product

를 입력할 경우 product의 class가 담긴 app/components/product.js가 생성되게 된다.
해당 파일에서 tracked와 action을 이용해 다양한 함수 처리를 해보고 익혀보자

그렇다면 속성과 인수부분은 어떻게 될까??

Properties & Arguments

여기서 속성은 현재 정의된 변수라 보면 편한데

export default class Child extends Component {
  propA = 1;
}

export default class Parent extends Component {
  propB = 2;
}

클래스와 인수는 상위 구성요소에서 전달된 것이므로 예시로 바로 확인해보자

<!-- parent.hbs -->
<Child @propB={{this.propB}} />

<!-- child.hbs -->
<h1>Child : {{this.propA}}</h1>

<h1>Parent : {{@propB}}</h1>

이렇듯 상위에 있는 parent.hbs에서 Child컴포넌트에게 React처럼 props를 보내고 싶을 때 @를 사용해서 보내면 된다
@뒤에 보낼 prop에 이름을 명시하고 ={{this.propB}}으로 Parent컴포넌트가 렌더링 될 당시 실행될 class Parent에 있는 속성 propB의 값 2를 Child에게 보낸다

이러면 Child.hbs에선 propB라는 이름으로 2라는 값을 받아 사용할 수 있게 되고 그사용되는 부분이 {{@propB}}이다.

React에서 props로 어떠한 값을 보낼대 사용한 <Child data={user} />에서 @와 {}만 더 추가된 느낌이라 크게 어려울 것은 없다.

css에서도 똑같이 동적인클래스를 만들 수 있다
@tarcked된 속성을 변경됨에 따라 클래스를 변경할 수 있는데, 이는 class에서도 똑같이 {{}}를 사용해서 classname을 동적으로 줄 수 있다.
이는 만약 텍스트 샊깔을 바꾼다 했을 때 기본 프로퍼티로는 @tracked color = black;을 설정해놓은 상태다
그리고 변경버튼을 누를 경우 red색깔로 바뀐다고 가정했을 때 변경될 곳에
class="text-{{this.color}}식으로 넣을경우 동적으로 클래스 네임을 변경할 수 있게 된다.

그럼 클릭을 눌렀을 때 어떠한 매개변수나 인자를 받고 싶다면 어떻게 하는게 좋을까?
{{on 'click' this.changeColor}} 이렇게 사용되는 걸 {{on 'click' this.changeColor('red')}} 이렇게 바꾸면 될까?
이때는 함수도우미를 사용하면 인자를 넘겨줄 수 있게 된다

<button {{on "click" (fn this.changeColor "red")}}>ChangeRed</button>

이런 식으로 함수 도우미인 fn을 사용하고 함수명 뒤에 적는 것이 인자로 넘어가게 된다.
여러개라면 {{on "click" (fn this.changeColor 인자1 인자2 인자3)}}으로 넘겨주면 동일하게 동작한다.
주의할 점으론 javascript 함수 법칙에 따라 인자와 매개변수의 위치에 대해 주의하자. 이는 typescript를 쓴다면 명확하게 코딩을 할 때 잡을 수 있는 부분이기도 하다

Ember - Tutorial(Component#1)

모_아이 — Thu, 25 Apr 2024 17:26:22 +0900

Component

재사용 가능한 독립된 모듈로 주로 React를 한번쯤은 다뤄봤다면 아주 흔한 개념이다.
이는 Ember에서도 동일하게 있는데 한번 알아보자

라우터 내부나 다른 컴포넌트 또 그 컴포넌트 안에 컴포넌트 이렇게 React처럼 중첩이 가능하다.

예시

우리가 index route에 있다고 가정했을 때 제품목록 안에 2개의 제품이 있다
그럼 각 제품 카드들의 프로덕트 모양은 동일할텐데 이미지 관련 로직이나 다른 구성들이 동일하게 동작한다면 이는 중복됨으로 하나의 컴포넌트로 처리하는 것이 맞다.

직접적인 전체 코드를 가져오진 않고 component를 어떻게 만들고 어떻게 사용하는 지에대해서 간단하게 다루고 넘어가보자

컴포넌트를 처음 만들때도 동일하게 emberCLI를 사용해 만들 예정이다

ember g component general-container

이러면 app/components/general-container.hbs라는 파일이 생성되게 된다.
이를 통해 general-container.hbs라는 컴포넌트를 만들고 다른 곳에서도 동일하게 컴포넌트를 통해 동일한 로직과 기능을 재사용 할 수 있게 된다.

일단 저번 글에서 만들었던 장바구니로 가는 버튼을 컴포넌트로 만든다면

<!-- app/components/general-container.hbs-->

<LinkTo @route="cart" class="cart_link">
  cart
</LinkTo>

<main class="container mt-5">
  {{yield}}
</main>

이런식으로 추가 하게 됐는데 아까 index에서 사용하던 페이지 모양하고 동일하며 코드 중간을 보면 {{yield}}라는 특이한 게 있다.
이는 쉽게 말하면 React에서 사용하던 {children}과 같은 것으로 외부에서 해당 위치의 구성요소를 직접적으로 컨트롤 할 수 있게 되는 것이다.
이를 통해 공통적인 부분은 두고 나머지 변할 수 있는 부분의 확장성을 고려한 컴포넌트를 작성할 수 있다.

그럼 이걸 어떻게 사용해야 하는가?

우리가 React를 사용할 때는 함수형 컴포넌트를 만들고 이를 export시킨 후 import하여 사용하였는데 ember는 따로 import하는 부분이 존재하진 않는다

<!-- app/templates/index.hbs -->

<GeneralContainer>
  <LinkTo @route="item" @model="1">Product 1</LinkTo>
  <LinkTo @route="item" @model="2">Product 2</LinkTo>
</GeneralContainer>

import도 없이 그냥 코드 자체를 이렇게 작성할 경우 이전에 작성한 코드랑 동일하게 동작하는 것을 볼 수 있다.
작성된 코드를 보면 굉장히 특이한데 component의 파일 명은 general-container인데 사용되는 부분은 <GeneralContainer>로 사용되고 있다.
이를 통해 코드 베이스 내부에 대시 케이스가 있더라도 엠버 구성요소 이름이 어떻게 되어 있는지 알 수 있다.(첫글자는 대글자여야 하고 카멜케이스로 작성해야한다)
이를 통해 item 페이지도 변경하자면

<!-- app/tmeplates/item.hbs -->
<GeneralContainer>
  ITEM :{{this.model}}
  product
</GeneralContainer>

이도 index처럼 동일하게 동작하는 걸 볼 수 있다

그럼 {{yeild}} 말고 React에서 자식 컴포넌트에게 필요한 데이터를 넘겨주던 props방식은 어떻게 사용할까??
이는 Product 상세페이지로 이동하는 링크 컴포넌트도 하나 만들어서 테스트해보자
똑같이 emberCLI를 사용해 component를 하나 만든다

ember g component product

<!-- app/coomponents/product -->
<LinkTo @route="item" @model="1" class="product">
  <div class="product-image">
    <img src="/assets/images/headphone.png" alt="" />
  </div>
  <div class="product-details">
    <h3>title</h3>
  </div>
</LinkTo>

product컴포넌트를 만들다 보니 image가 들어가는 부분이 생기는데 이 부분도 컴포넌트를 하나 만들어보자. 이때의 컴포넌트는 product의 컴포넌트로 사용하기 위해

ember g component product/image

이러면 파일 구조가 components/product/image.hbs로 하나가 생기는데 이러면 똑같이 <Image/> 이런식으로 사요하면 될까?
조금 다르다
일단 product에서 작성한 img태그 부분을 잘라내서 Image 컴포넌트에 옮긴 뒤 실제로 사용할 때는

<!-- app/coomponents/product -->

<LinkTo @route="item" @model="1" class="product">
  <Product::Image />
  <div class="product-details">
    <h3>title</h3>
  </div>
</LinkTo>

이런 식으로 <Produt::Image/> ::를 사용해서 접근할 수 있다

이걸 동일하게 detail 부분에도 사용한다면 emberCLI통해 component를 만들고 Product::Detail을 통해 컴포넌트를 사용할 수 있다

Ember - Tutorial(Router & controller)

모_아이 — Thu, 25 Apr 2024 14:56:07 +0900

라우팅 시스템과 Router와 controller는 밀접한 연관이 있으니 바로 다뤄보는 게 좋을 것 같다.

유튜브 ember tutorial에서 만드는 페이지로 연습을 같이 해보려고 하는데 일단 이전에 만든 필요없는 경로를 삭제해보자

router 삭제

당연하게도 이를 도와주는 emberCLI가 존재하는데


ember destroy route clothes/index && ember destroy route clothes/t-shirt && ember destroy route clothes

clothes경로에는 중첩된 부분이 많기 때문에 중첩된걸하나하나 지워가며 마지막에 가장 큰 경로를 삭제하는 게 좋다.

바로 큰 경로를 삭제해봐야 폴더 내부는 안지워지고 `clothes.hbs`와 테스트 등 `clothes` 경로에 관한것만 지워지지 `clothes`폴더에 있는 중첩된 경로들까지 삭제해주진 않는다.

새 router 추가

이전에 쓸모없는 경로들을 삭제했으니 이제 웹 페이지에 들어갈만한 경로들을 만들자.

먼저 홈페이지인 애플리케이션 인덱스 페이지 경로인 인덱스를 생성하고 장바구니로 쓸 cart부분을 만들자

물론 emberCLI로 만든다

ember g route index && ember g route cart

그리고 cart경로의 경우 실제 경로 이름에선 좀 더 명확하게 해주기 위해서 다룰 파일의 이름은 쉽고 경로 이름은 명확하게 서로 다른 옵션을 사용하기 위해 router.js에서 변경해준다

Router.map(function () {
  this.route('item', { path: 'item/:item_id' });
  this.route('not-found', { path: '/*path' });
  this.route('cart', { path: 'shopping-cart' });
});

이처럼 입력할 경우 경로는 /shopping-cart가 되지만 실제 동작은 cart가 받아서 하게된다

이때 index route는 왜 없나요?? 할 수 있다
이는 index일 경우 default 페이지 역할을 하기 때문에 최상단 application.hbs 와 동일한 뎁스에 index.hbs를 가졌음으로 맨 처음 뒤에 어떠한 추가 경로도 적지 않고 말 그대로 홈페이지에 접속할 경우 이 해당 index.hbs로 접속할 수 있다.
현재 로컬에선 http://localhost:4200으로 접속시 application.hbs의 {{outlet}}부분에 index.hbs가 뜨게 되는 것이다.

Navigate pages

이제 홈페이지로 표현될 index.js에 상품 목록들을 보이게 하고 상품 목록들을 클릭하면 상품 상세보기로 점프 할 수 있게 하려고 한다.

먼저 application.hbs에 있는 코드들을 {{outlet}}을 제외하고 모두 지운 뒤 index.js에서 원하는 목록모양으로 HTML작성한다

<main class="container mt-5">
  <div>Product 1</div>
  <div>Product 2</div>
</main>

일단은 이렇게 작성하였는데 우리가 원하는 건 저 Product 1부분을 클릭했을 때 해당 제품의 상세페이지로 점프하는 것이다.

이를 어떻게 만들 수 있을까?
Next.js로 할땐 Link라는 녀석이 있었는데 ember도 비슷한 놈이 있다

바로 LinkTo이다

그러면 Next의 Link 처럼 href로 경로를 나타내냐? 이건 또 아니고 @route라는 걸 사용한다

<main class="container mt-5">
  <LinkTo @route="item" @model="1">Product 1</LinkTo>
  <LinkTo @route="item" @model="2">Product 2</LinkTo>
</main>

이 경우 제품을 클릭할 때 이동되는 경로는 item이 되고 이동할때 @model="1"을 통해 id값을 넘겨주게 된다

이처럼 LinkTo로 바꾼 페이지 모양은 html변환시 a태그와 동일하다

이런식으로 LinkTo를 통해 각 경로를 이동할 수 있고 .hbs에 원하는hmtl을 작성하여 템플릿을 렌더링 할 수 있다.

이걸 통해 각 cart와 product부분을 만든 후 cart.hbs에서 결제를 시킬 check out이라는 버튼을 한번 만들어보자.

  <button type="button" class="btn btn-success float-right">Check out</button>

이렇게 일단 button 은 만들어 놓고 버튼이 클릭 되었을 때 동작해야할 기능들은 어디에 적어야 할까?
기존 react나 next같은 경우 현재 함수형 컴포넌트들을 통해 같은 함수 스코프 안에 return 상단에 여러 기능들을 하는 함수들을 적어서 onClick에 넣는 식으로 사용했었는데 ember는 좀 모양새도 많이 달랐다

이는 먼저 Route와 Controller를 알아보고 추후에 추가해보자

Router와 Controller

라우터와 컨트롤러의 차이점은 동일한 URL에 대해 작동하고 이름도 같지만 다른 폴더에 존재한다.

Route
- route/cart.js
Controller
- controller/cart.js

이렇게 서로 cart.js라는 같은 이름을 가지지만 각각 Route와 Controller라는 다른 폴더에 존재한다.
둘 다 app 경로 아래에 존재하며 template/cart.hbs를 렌더링한다.

Route에선 controller에 모델을 관여할 수 있으며 다양한 Methods들이 존재하는데 이들을 사용할 수 있다.

한번 다이나믹 라우팅을 사용하는 item은 product LinkTo로 이동할 때 id도 보내는데 이를 어떻게 받을까?
지난 글에서 썼었던? route/item.js를 활용해보자

// app/route/item.js
import Route from '@ember/routing/route';

export default class ItemRoute extends Route {
  model(params) {
    const { item_id } = params;

    return item_id;
  }
}

// app/templates/item.hbs
<h2>{{this.model}} product</h2>

this.model처럼 사용할 수 있는 건데 이걸 통해 routes/cart.js도 변경해보자

import Route from '@ember/routing/route';

export default class CartRoute extends Route {
  model() {
    const items = [{ price: 10 }, { price: 15 }];
    return items;
  }
}

만약 이런식으로 여러 가격을 가지고 있는 상품들이 있다고 생각하고 작성해보았다
그리고 controller를 사용해보려고 하는데 우리는 아직 만들지 않았으니 ember CLI로 만들어보자.

ember g controller cart

이렇게 controller에 cart를 만든후 템플릿에 전달할 몇가지 사용자 정의 속성을 만들어보자

// app/contorollers/cart.js
import Controller from '@ember/controller';

export default class CartController extends Controller {
  subtotla = 0;
  tax = 0;
  total = 0;
}

cart라는 장바구니 페이지에서 사용될 상품가격, 세금, 총 가격을 CartController에 기본적으로 정의하고 templates에 있는 cart.hbs에 가서 정의된 속성들을 사용해보자

 <section class="w-50 ml-auto text-right mb-5">
    <div class="row">
      <span class="col">Subtotal</span>
      <span class="col">{{this.subtotal}}</span>
    </div>
    <div class="row">
      <span class="col">Tax</span>
      <span class="col">{{this.tax}}</span>
    </div>
    <div class="row">
      <span class="col">Total</span>
      <span class="col">{{this.total}}</span>
    </div>
  </section>

여기서 {{this.subtotal}}사용 된 this는 현재 컨트롤러 또는 현재 라우팅을 가리키고 이를 저장하고 앱을 실행하면 표시되는 페이지가

이렇게 표시되는 것을 볼 수 있다.
이 숫자 0들은 우리가 Contoroller에서 정의한 값들이다. 하지만 아직 정적인 값들이니 이 값들을 실제로 관리해보기 위해 route/cart.js로 이동해서 코드를 추가해보자

// routes/cart.js

import Route from '@ember/routing/route';

export default class CartRoute extends Route {
  model() {
    const items = [{ price: 10 }, { price: 15 }];
    return items;
  }

  setupController(controller, model) {
    super.setupController(controller, model);
    const subtotal = model.reduce((acc, item) => acc + item.price, 0);
    controller.set('subtotal', subtotal);
  }
}

이는 먼저 setupController를 통해 컨트롤러 기능을 재정의 하는 메서드를 사용한다.
이때 setupController는 이미 있는 걸로 재정의 할 때 매개변수는 controller,model 을 사용할 것이다.
그리고 super를 사용해 super.setupController()로 상속된 모든 항목이 호출됐는지 확인해본다

이후 subtotal을 계산하기 위해 model을 가져온다. 이때 모델은 위에서 return 된 items가 된다.
이후 controller.set을 통해 controller에서 정의된 subtotal의 값을 변경한다

하지만 컨트롤러가 모델에 직접적으로 엑세스 할 수 있는 걸 발견했으니 굳이 route에서 작업하지 않고 바로 controller에서 작업이 가능하단 걸 깨달을 수 있다.
작업한 결과물을 잘라내서 controller에 붙여넣어보자

// controllers/cart.js

import Controller from '@ember/controller';

export default class CartController extends Controller {
  get subtotal() {
    return this.model.reduce((acc, item) => acc + item.price, 0);
  }
  get tax() {
    return 0.09 * this.subtotal;
  }
  get total() {
    return this.subtotal + this.tax;
  }
}

이처럼 getter를 통해서 각각의 subtotal, tax, total등을 계산하고 정의했고 이는 화면에 똑같이 출력되는 걸 확인해볼 수 있다.

이렇게 controller와 route를 통해서 우리가 사용하는 render에 여러 가지를 동적으로 집어 넣을 수 있게 된다.

Ember - Tutorial(Routing System)

모_아이 — Wed, 24 Apr 2024 17:17:40 +0900

업무 진행을 위해 Ember를 처음부터 배워보고 있는데 단순히 보고 Tutorial 을 따라한 것으로는 부족한 것 같아 정리 차 작성해보려 한다

모든 내용은 Ember 공식문서의 Tutorial과 예전 버전이긴 하지만 2022 ember beginners라는 외국 유튜브를 보고 적절히 섞어 작성하였다.
물론 Test에 관련된 부분은 적당히 제거했다

먼저 tutorial에서 만들어지는 웹사이트는 공식문석에 실제로 netlify를 통해 배포되어 있으니 직접 확인해 봐도 된다
Tutorial완성페이지 확인하기

Ember CLI 설치

먼저 Ember를 쉽게 사용하기 위한 CLI를 먼저 설치 했다

npm install -g ember-cli

설치가 잘 완료되었는지 확인해보자

ember --version

입력시 이런식으로 출력이 잘 되는지 확인해보자

EmberCLI로 새로운 Ember앱 만들기

EmberCLI 명령을 사용해서 새 프로젝트를 사용할 수 있다. create react-app처럼 간단히 만들 수 있는 명령어인데 패턴을 살펴보자면
ember new <project-name>으로 project-name 부분에 원하는 프로젝트 이름을 작성시 자동적으로 만들어 진다.
이때 공식문서에는 나와있는데로 뒤에 --lane en을 통해 앱의 기본 언어를 영어롤 설정시키자. 웹 사이트의 접근성이 향상된다

ember new test-project --lang en

그렇다면 새로 생긴 test-project폴더에 ember 프로젝트가 생긴 걸 확인할 수 있다.
이후 해당 폴더로 이동하여 npm start를 실행할 경우 아주 기초적인 웹사이트가 하나 뜨는 걸 확인할 수 있다
주소는 http://localhost:4200 으로 기본 설정 되어 있다

파일 구조 살펴보기

처음 만들어질 때 파일 구조를 잘 살펴보면 아래와 같이 만들어져 있을 것이다.

test-project
├── .github
│   └── workflows
│       └── ci.yml
├── app
│   ├── components
│   │   └── .gitkeep
│   ├── controllers
│   │   └── .gitkeep
│   ├── helpers
│   │   └── .gitkeep
│   ├── models
│   │   └── .gitkeep
│   ├── routes
│   │   └── .gitkeep
│   ├── styles
│   │   └── app.css
│   ├── templates
│   │   └── application.hbs
│   ├── app.js
│   ├── index.html
│   └── router.js
├── config
│   ├── ember-cli-update.json
│   ├── environment.js
│   ├── optional-features.json
│   └── targets.js
├── public
│   └── robots.txt
├── tests
│   ├── helpers
│   │   └── index.js
│   ├── integration
│   │   └── .gitkeep
│   ├── unit
│   │   └── .gitkeep
│   ├── index.html
│   └── test-helper.js
├── .editorconfig
├── .ember-cli
├── .eslintcache
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierignore
├── .prettierrc.js
├── .stylelintignore
├── .stylelintrc.js
├── .template-lintrc.js
├── .watchmanconfig
├── README.md
├── ember-cli-build.js
├── package.json
├── package-lock.json
└── testem.js

16 directories, 37 files

하나씩 살펴보자면

app 폴더
- 기본 폴더로 우리가 주로 봐야할 소스 파일들이 존재하는 곳이다(templates,components 등)
config 폴더
- 환경 변수가 여기에 설정되는 것과 같은 일부 구성 정보가 포함되어 있다
public 폴더
- 이미지나 일부 문서와 같은 모든 정적파일을 저장하는 공용 폴더
tests 폴더
- 모든 test파일

라우팅 시스템

ember에는 브라우저 URL과 통합되는 라우팅 시스템이 함께 제공된다.
예를 들면 우리가 localhost:4200/cart로 가려 한다면 실제 app/router.js 내부에서 카트경로를 검색 하기 시작한다.

// ...app/router.js

Router.map(function () {
  this.route('cart');
});

이때 찾고있던 관련 항목을 찾으면 전체 앱이 어떻게 구성되어 있는지 빠르게 확인할 수 있도록 사이트맵 역할을 한다
이때 구동되는게 app/routes/cart.js와 app/controllers/cart.js이고 이를 통해 우리가 만든 app/templates/cart.hbs가 템플릿 렌더링을 시작하게 된다.

라우팅에도 여러가지가 있는데

Application route
Basic route
Nested route
Index route
Dynamic route
404 not found route

등이 있다.
하나씩살펴보자

Application route

먼저 ember에는 HCBS의 app/template/application.hbs 으로 시작되는 기본 애플리케이션 경로가 있다
이는 웹 앱의 시작점이기도 한데 최상위에 존재하는 react로 보자면 main이나 next의 최상위 layout이라고 생각하면 편할 것 같다.
모든 곳에서 쓰이는 부분을 이곳에 적용시키면 모두 적용된다.
Tutorial에선 nav-bar를 application.hbs에 적용한 다음 {{outlet}}을 통해 하위 요소들을 렌더링 시킨다.
마치 react 최상위 요소에서 navbar컴포넌트를 넣고 아래에 {children}을 통해 각 페이지들이 렌더링 되도록 하는 것과 같았다

Basic route

기본 경로이다.
ember cli를 통해 만들어 낼 수도 있고 직접 파일을 만들 수도 있는데 ember cli가 편한 방법 같기도 하다.
아직 ember에 대해 부족한 부분이 많아 CLI로 만드는게 좋은것인지 직접 만드는 게 좋은것인지 잘 모르겠지만 일단 Tutorial과 beginner 강의가 알려준대로 따라가보자.

ember g route clothes
// 또는
ember generate route clothes

이렇게 작성할 경우 저절로 template에 관련 파일이 생성되고 app/router.js의 Router.map 함수 안에도 저절로 입력되어 있을것이다.

//...app/router.js
Router.map(function(){
    this.route('clothes')
})

이러면 localhost:4200/clothes로 이동할 경우 app/templates/clothes.hbs 에 입력한 요소들이 출력되게 된다.

Nested route

중첩된 경로로 /clothes/t-shirt와 같이 경로에 경로로 들어가는 경우이다.
예로 현재 clothes라는 옷 경로를 사용중인데 가장 가까운 하위 카테고리로 티셔츠로 들어가야 한다. 이때는 어떻게 구성을 하고 만들어야 할까??
생각보다 간단한데 이전 clothes경로를 만들 때처럼 ember CLI를 사용하면 된다

ember g route clothes/t-shirt

clothes는 이미 만들어져 있고 그에 중첩된 경로를 /를 통해 작성해주면 되는데 이러면 app/tmeplates폴더에 clothes라는 폴더가 생성되게 되고 그안에

그리고 router.js내부 사항도 변경되게 되는데

Router.map(function(){
    this.route('clothes',function(){
      this.route('t-shirt')
    })
})

처럼 변하게 된다.

상위 루트의 복사 기능 내에 루트 설정이 추가되는 것이다.(말이 번역본이라 어렵긴 한데 javascript 문법적으로만 보자면 Router라는 class는 app/router.js 안에서 선언된 클래스로 EmberRouter를 상속받고 있다.
그리고 Router 내부에서는 위에서 얘기했던 config폴더의 환경변수 파일 environment.js에서 locationtype과 rootURL을 덮어 씌우고 있다.

이후 Router클래스의 map메서드를 실행시키는데 map 메서드는 RouterDSL이라는 콜백함수를 받는다. 해당 콜백함수 안에는 route라는 메서드가 존재하고 route메서드는 우리가 연결한 url경로 이름을 첫번째 매개변수로 받고 option(경로 이름과 파일 이름을 서로 다른걸 사용하고 싶을때)과 또 같은 RouterDSL을 콜백함수로 가지는 콜백함수를 옵셔널로 실행할 수 있다.

여기서 중첩 라우팅일 경우 route안에 route로 중첩해서 사용하는 방식으로 this.route를 통해 clothes 경로를 만든뒤 바로 위에서 설명한 옵셔널한 콜백함수를 다시 작성하여 this.route t-shirt를 넣는것이다.

이후 app/templates/clothes/t-shirt로 들어가면 t-shirt에서 작성한 HTML 요소들이 보일 것이다.

Index route

각 슬래시 마다 기본적으로 보여주는 페이지들이 있는데 이를 index를 통해 관리 할 수 있다.
예를 들어 clothes라는 경로로 이동했을 때 물론 clothes.hbs라는 파일 내에서도 작성할 수 있지만 무언가 기본적으로 표시되고 싶은 걸 파일로 나누고 싶다면 index.hbs를 templates/clothes폴더안에 생성할 경우 자동적으로 clothes.hbs의 {{outlet}}부분에 표시된다.
이때 경로를 clothes/t-shirt로 들어갈 경우 index.hbs에서 작성한 요소는 표기되지 않고 t-shirt.hbs에서 작성한 요소만 표기되며
/clothes만 들어갈 경우 clothes.hbs의 {{outlet}}부분에 index.hbs의 요소들이 자동적으로 표기되게 된다

각 라우팅들에서 표시될 수 있는 기본 값이라고 생각하면 편할 것 같다.

Dynamic route

동적 라우팅으로 동적실행 또는 동적 세그먼트이다

주로 사용 되는게 게시물이나 상품의 ID를 경로에 넣는 것이 있다. item/123이면 123번의 item을 보여달라는 것과 같다
지금 item/123의 경우 URL의 마지막 세그먼트 인스턴트인데 한번만들어보자
똑같이 emberCLI를 통해 만든다면

ember g route item

으로 한번 만들어보자 이경우 위에서 router.js 에 새로 만들어지는 것처럼

Router.map(function(){
    this.route('clothes',function(){
      this.route('t-shirt')
    })
    this.route('item')
})

가 생성되는데 조금 변경시켜보자

Router.map(function(){
    this.route('clothes',function(){
      this.route('t-shirt')
    })
    this.route('item',{path:"/item/:item_id"})
})

아까 말했던 옵셔널로 주어지는 인자중에 표기와 이름을 다르게 하는 옵션인자를사용해 {path:"/item/:item_id"}를 통해 실제 url은 item/과 마지막에 :item_id가 동적 세그먼트로 들어올수 있도록 한다

이후 실제로 /items/1으로 경로를 이동해서 실제테스트 해보자.

화면은 잘 뜨는데 그럼 동적 라우팅한 값은 어디서 얻을 수 있을까?

app/routes 폴더로 이동해보면 emberCLI를 통해 generate로 만들 때 함께 만들어진 clothes.js와 item.js가 자동적으로 만들어져 있을 것이다.
이때 item에 대해서 동적으로 받는 것에 대한 모델링이 필요함으로

import Route from '@ember/routing/route'

export default class ItemRoute extends Route {
    model(params) {
      const {item_id} = params;
      return item_id;
    }
}

이렇게 작성하면 이젠 정상적으로 렌더링 되는 것을 확인할 수 있다
그럼 이 모델에서 return한 item_id는 어디서 어떻게 받을 수 있을까? 하고 의문을 가지는데 이는 item.hbs에서 사용할 수 있다

// app/templates/item.hbs
<h1> {{this.model}} </h1>

이렇게 작성할 경우 this.model부분이 아까 return item_id부분이 되게 된다.

이를 살펴볼때 위에서 설명한 ember의 라우팅 부분에서 마지막 hbs파일에 도달해서 렌더링 하기 전에 route폴더와 controller 폴더에서 해당되는 js들을 실행시키고 오는 것 같다.
마치 class형 react를 했을 때 처럼 사용되는 함수들은 route폴더 안의 js파일에 메서드들로 작성하고 실행은 hbs에서 {{this.함수명}}으로 실행시키는 것이다.

이때 주의할 것으로 실제로 에러를 겪었던 부분인데 이름의 중요성이다. item이라는 경로를 사용 했는데 templates에서도 item.hbs여야 하고 routes에서도 item.js 그리고 실행되는 class도 ItemRoute로 대소문자까지 잘 지켜줘야 실행되는 걸 볼 수 있다.
때문에 직접 만들 경우 오타의 문제가 생길지 모르니 emberCLI를 사용하는 게 더 좋은 것 같다는 생각이 든다

404 not found route

우리가 흔히 보는 에러페이지로 next 등에는 404.js사용하는 것처럼 사용할 수 있다.
예를 들어 우리가 지정하지 않은 경로로 사용자가 이동 하였을 때 사용자는 개발자가 아니기에 콘솔창을 확인해 보지 않는다.
이로 인해 비어 있는 페이지가 사용자를 반기게 되고 사용자는 페이지가 로딩중인지 에러가 났는지 전혀 알 수가 없는 상태가 된다.
이러면 유저 입장을 전혀 고려하지 않은 설계가 됨으로 이러한 에러 페이지는 필수라고 생각한다.

ebmerCLI를 통해 만들어보자

ember g route not-found

이후 작성된 경로부분을 수정한다.

Router.map(function(){
  this.route('clothes',function(){
    this.route('t-shirt');
  });
  this.route('item',{path:"/item/:item_id"});
  this.route('not-found',{path:'/*path'});
});

이렇게 저장할 경우 허용되지 않은 URL로 들어간다 하더라도 콘솔 오류는 사라지고 application.hbs에서 작성되어 있는 요소는 그대로 출력되는 것을 확인할 수 있다.

이후 아래엔 not-found.hbs에 작성한 에러임을 알리는 요소들이 출력되는 것을 볼 수 있다.

이에 에러 페이지에 다시 되돌아가는 버튼을 만들어 놓는다면 사용자 측면에서 이 페이지가 에러고 다시 돌아가면 되겠다라는걸 명확하게 보여줄 수 있게된다.

여기까지가 ember에 있는 라우팅 시스템이고 더욱 자세하게 알아본다면 라우팅 시스템 안에 리디렉션과 전환 방지나 재시도 등 여러가지가 있는데 tutorial이 끝나면 또 하나씩 정리 해봐야겠다.

전역 상태관리 툴 없이 Toast만들기(custom hook으로)

모_아이 — Wed, 17 Apr 2024 14:24:17 +0900

Toast 만들기

업무중 atomic component로 사용될 기본 컴포넌트 들을 만들다 Toast의 차례가 왔다
기본적으로 Toast는

이런식으로 어떠한 동작을 했거나 실패 등 여러 상황에서 alert창이 아닌 쉽게 말해 서비스 디자인 등과 맞춰 제작된 자체적인 알림창이라 봐도 무방하다.

React에서 이를 제작할 경우 일단 모든 컴포넌트에서 이 Toast 알림창이 화면에 띄워질 수 있도록 해당 Toast 컴포넌트에 관여 할 수 있어야 한다.

게시판 글이나 뭐 회원가입 버튼이나 각종 여러 군데에서 이 Toast 알림을 띄울 수 있기 때문에 첫번째로 고안한 방법은

Context API와 같은 전역 상태를 활용해서 가장 최상위 루트에서 감싸주는 것이다.

그럴경우 최상위에서 감싸진 ToastContext에서 useToast라는 함수를 내보내게 되고 이는 Toast가 필요한 컴포넌트에서 이 Toast 알림창을 띄울 수 있는 로직을 사용할 수 있게 된다.

하지만 문제점이 하나 생기는데..

다른 라이브러리들은 이 현상을 해결했다고 하지만 Compound component 디자인 패턴등을 사용하다 보니 ContextAPI를 많이 사용했고 이 Toast 또한 ContextAPI로 전역 상태를 감쌌더니 Toast가 뜰때마다 모든 컴포넌트들이 리렌더링 되는 일이 발생했다.

이 때문에 Recoil이나 redux, zustand와 같은 전역 상태관리 라이브러리들이 생겨났다고도 읽었는데 확실히 사용자가 버튼을 연속해서 누를 경우도 있고 그 때는 엄청난 리렌더링이 일어나 성능적으로 매우 부적절하다 생각했다.

이를 고치기 위해선 모든 컴포넌트에 memo를 씌운다면 가능하겠지만... 합리적이지 못하다

어떻게 해결했나?

우선 Toast들을 사용하고 있는 UI 라이브러리들을 뒤졌다.

import해서 사용하고 있는 라이브러리들은 내부적으로 보기가 까다로웠지만 그 중 shadcn 이라는 라이브러리를 찾았는데 manual 부분과 직점 install하면 사용되는 코드를 볼 수가 있어 직접 코드를 분석해봤다.

https://ui.shadcn.com/

shadcn/ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

ui.shadcn.com

shadcn 페이지에 들어가서 docs에 Toast를 살펴보면 알겠지만 shadcn의 Toast를 설치하면 약 3개의 파일을 다운받게 되는데

이렇게 3개의 파일이 만들어지게 된다.

각각 간단히 살펴보면

- Toast는 띄워지는 알림창의 component이고

- Toaster는 알림창이 띄워지기 위한 레이아웃이다

- use-toast는 toast를 각 컴포넌트에서 사용하기 위한 toast 라는 함수와 Toaster에서 관리하기 위한 useToast를 관리하고 있다.

이 shadcn에서 사용되는 방법을 간단히 소개하면

1. <Toaster/>라는 toast 레이아웃을 최상위 루트에서 잡아놓는다. 이는 Toast 알림창이 하나만 뜨게 할것인지 여러개 뜨게 할 수 있을것인지는 직접 CSS와 Toast 상태값을 조절하면 된다.(일단 Shadcn은 Toast를 하나만 뜨도록 만들어놨다)

2. <Toaster /> 내부에서 useToast를 사용하 toasts 즉, 뜨게할 알림창들을 배열로 가져온 다음 map을 돌려 <Toast/>로 화면에 표시한다.

3. use-toast에는 export를 통해 Toaster에 보낼 toasts와 각 컴포넌트에서 사용된 toast함수를 내보내는데 이 toast 함수를 통해 각 컴포넌트에서

toast({
	title:'test',
    description:'test toast'
    })

이러한 함수식을 버튼의 onClieck 과 같은 곳에 실행되도록 하여 use-toast에서의 toast함수를 실행되도록 한다

처음 이걸 봤을 때 이게 그래서 어떻게 전역적으로 상태가 관리된다는 것인가? 궁금할 수 있다.

보통 우리가 자주 보는 custom hook은 각 컴포넌트에서 useCustomHook과 같이 사용할 때 각 컴포넌트 별로 상태들이 만들어지고 각각은 독립적인 상태가 된다 는게 보통 많이 접했을 것이다.

shadcn은 독특하게 hook이 불려질 때 해당 hook파일 자체적으로 변수를 가지고 있도록 파일 즉 해당 모듈에서의 전역변수를 만든다.

그리고 그 변수에 hook이 불릴때마다 만들어지는 state들을 관리할 수 있는 setState들을 배열로 집어넣고 toast라는 함수가 발동할 때마다 이 setState들을 순환하여 모든 state들을 변경할 수 있게 만든다.

이는 해당 hook이 사용된 컴포넌트들만 리렌더링 됨으로 전역적인 리렌더링을 방지할 수 있다.

의문점

그대로 사용하기엔 의문점이 있다.

toast알림창들의 layout으로 잡고 있는 Toaster에서만 리렌더링 되면 안되나? 왜 굳이 배열에 넣고 반복문을 돌리지? 라고 생각이 들 수 있다.

다시 생각해보면 shadcn은 공통적으로 사용할 수 있게 라이브러리로 나온 상황이라 사용자가 <Toaster/>를 루트 한군데에서만 사용한다는 보장이 없다.

그렇기에 <Toaster/>를 컴포넌트별로 분할시켜 사용한다면 각각의 상태를 다 업데이트 해야 하기 때문에 배열로 만들었다 생각하고 내가 만들 Toaster는 루트에서 한번만 관리할 것이기 때문에 쓸데없는 부분은 삭제시키고 새로 만들었다.

ToastLayout.tsx

import { memo } from 'react';
import { useToast } from '../../hooks/useToast';
import { cn } from '../../lib/utils';

const ToastLayout = () => {
  const [toastArr, closeToast] = useToast();

  return (
    <div className='fixed bottom-2 right-2 z-100 flex flex-col'>
      {toastArr.length !== 0 &&
        toastArr.map((toast) => (
          <Toast key={toast.id} closeToast={closeToast} {...toast} />
        ))}
    </div>
  );
};

useToaste.tsx

import { Dispatch, SetStateAction, useEffect, useState } from 'react';

type ToastType = {
  id: number;
  content: string;
  variant?: ColorVariants;
  soft?: boolean;
  className?: string;
};
const TOASTCLOSEDELAY = 3000;
let toastListener: Dispatch<SetStateAction<ToastType[]>>;
let toastId = 0;

type ToastFunctionType = Omit<ToastType, 'id'>;

const openToast = ({
  content,
  variant,
  soft,
  className,
}: ToastFunctionType) => {
  toastId = (toastId + 1) % Number.MAX_SAFE_INTEGER;
  toastListener((prev) => [
    ...prev,
    { id: toastId, content, variant, soft, className },
  ]);
  setTimeout(() => {
    toastListener((prev) => prev.slice(1));
  }, TOASTCLOSEDELAY);
};

const useToast = () => {
  const [toastArr, setToastArr] = useState<ToastType[]>([]);

  const closeToast = (id: number) =>
    setToastArr((prev) => prev.filter((toast) => toast.id !== id));

  useEffect(() => {
    toastListener = setToastArr;
  }, []);

  return [toastArr, closeToast] as const;
};

export { useToast, openToast };

일단 테스트 용으로 만든 Toast이며 <ToasteLayout/>이라는 Toast들이 뜰 공간을 잡아놓고 useToast를 통해 상태를 하나 잡아놓는다

그리고 openToast라는 함수를 통해 각 컴포넌트에서 사용하고 openToast가 실행될 경우 useToast란 파일에서 잡아놓은 toastLitener변수가 Toaster가 가지고 있는 toastArr이란 상태를 업데이트 할 수 있기 때문에 Toaster가 리렌더링 되며 toast가 화면에 나타나게 된다.

이후 적절히 사용되는 Toast에도 memo를 걸어줄 경우 Toast알림창이 뜰경우 리렌더링이 굉장히 최소화 되는 부분을 확인해 볼 수 있다

실제로 toast알림창이 뜰때 화면 우측 하단의 ToastLayout과 새롭게 만들어지고 사라지는 toast들만 리렌더링 되는지 체크해보자

코드에 정답이 없다지만 이렇게 useToast안에 모듈 전역변수를 두는 게 좋은 방식인가? 는 의문이 들기도 하여 추후에 더 좋은 방법이 있다면 실행해 볼만 하다.

아니면 아싸리 전역 상태 관리 라이브러리에서 Toast를 관리하는 것도 훨씬 좋은 방안이라 생각한다.