Next.js로 사우나로 정돈하고 싶은 기분 정도 기록 앱을 3시간에 만들어

소개

오늘은 내 생일입니다. 기사를 방문해 주셔서 감사합니다.
모처럼이므로 기념으로 자신에게 앱을 선물하기로 결정했습니다.

가바가바 설계이므로 이대로 흉내는 추천하지 않습니다만, 이 정도의 퀄리티이면 3시간으로 만들 수 있습니다.
익숙한 분은 초로 만들 수 있다고 생각합니다.

개요

정기적으로 사우나에 가고 싶어지는 나입니다만, 솔직히 거기까지 가고 싶지 않을까라는 기분의 날이 많습니다.

그래서, 그 날의 사○나이키타이 정도를 가시화할 수 있으면 최고라고 생각해, 만들기로 했습니다.

가고 싶을 때가 100%를 연속하는 것 같으면, 빨리 정돈에 갈 필요가 있어, 그것을 한눈에 파악할 수 있습니다.

그 이름도 사우나 기분 .

URL

누구나 쓸 수 있으므로, 꼭 거칠어 보고 기록해 보세요.
가능하면 정말로 「가고 싶은 정도」를 써 주면 기쁩니다만・・.

사용 기술

Next.js(Vercel)

Chart.js

MySQL 5.6 ( Cloud SQL )

톱 페이지

그런 캘린더와 매일 가고 싶을 때 도넛 그래프로 표시.
달력은 확실합니다.
그냥 달력입니다. 어쨌든 그 사람의 그날의 기분 %를 색별로 표시하도록 합니다.

기분 입력 화면

손 빼기 정도가 엿볼 수 있습니다. New. CREATE.
가고 싶은 정도를 표명합니다.

입력 후

기분과 함께, 아메리칸 스타일의 날짜가, 언제의 투고인가 가르쳐 줍니다(고정).

빠는거리

NextApiHandler

디폴트에서는, typeof parseInt(id) !== 'number' 라고 하는 조건으로, id가 string|string[] 형의 경우 분노됩니다.
분위기에서 ts를 쓰고 있기 때문에 더 좋은 쓰는 방법이 있다고는 생각합니다만, 무리하게 string

변경 전 (기본 get-entry.ts)

get-entry.ts

import { NextApiHandler } from 'next'
import { query } from '../../lib/db'

const handler: NextApiHandler = async (req, res) => {
  const { id } = req.query
  try {
    if (!id) {
      return res.status(400).json({ message: '`id` required' })
    }
    if (typeof parseInt(id) !== 'number') {
      return res.status(400).json({ message: '`id` must be a number' })
    }
    const results = await query(
      `
      SELECT id, title, content
      FROM entries
      WHERE id = ?
    `,
      id
    )

    return res.json(results[0])
  } catch (e) {
    res.status(500).json({ message: e.message })
  }
}

export default handler

변경 후

import { NextApiHandler } from 'next'
import { query } from '../../lib/db'

const handler: NextApiHandler = async (req, res) => {
-  const { id } = req.query
+  let { id } = req.query
+  let newId:string
  try {
    if (!id) {
      return res.status(400).json({ message: '`id` required' })
    }
+    if (Array.isArray(id)) {
+       newId = id[0]
+    }
-    if (typeof parseInt(id) !== 'number') {
+    if (typeof parseInt(newId) !== 'number') {
      return res.status(400).json({ message: '`id` must be a number' })
    }
    const results = await query(
      `
      SELECT id, title, content
      FROM entries
      WHERE id = ?
    `,
      id
    )

    return res.json(results[0])
  } catch (e) {
    res.status(500).json({ message: e.message })
  }
}

export default handler

Next.js with-mysql 템플릿

newId 하지만 절대 이끼 때문에 수동으로 SQL 흘렸습니다.

Error: Cannot read property '0' of null

htps //w w. 음 pmjs. 코 m / Pac 카게 / Ba d-rdsyarn migrate 에 건네주는 방법에 문제가 있었던 것 같아서, 한 번 무효로 했습니다.

handler

import Filter from 'bad-words'
import { query } from '../../lib/db'
    // 省略
    const filter = new Filter(
    const { foo, bar } = req.body
    const results = await query(
      `
      INSERT INTO entries (foo, baa)
      VALUES (?, ?, ?)
      `,
      // [filter.clean(foo), filter.clean(bar)]
      [foo, bar]
    )

요약

with-mysql 템플릿으로 생성하면, 환경 변수만으로 DB에 접속할 수 있다. 디폴트로 CRUD 주위도 자동으로 생성해 주는 편.

캘린더는 보이므로 앞으로 색상을 반영하여 더 현명하게 시각화합니다.

누구나 무한히 쓸 수 있습니다 (인증 주위까지 할 수 없었다).

갖고 싶은 기분은 3시간으로 만들 수 있다

앞으로 좀 더 제대로 손질하려고 생각했습니다. 앱에서도 사우나에서도 더욱 정돈되는 경지를 목표로 할 것 같습니다.
꼭 여러분도 정돈하고 싶은 기분을 남겨보세요!

참고

Create a Next.js App with a MySQL Database That Builds and Deploys with Vercel

【Next.js】 GCP 데이터베이스를 Next.js 프로젝트에 통합하고 싶습니다.

Cloud SQL

사우나이키 타이