나는 어떻게 30일도 안 되는 시간에 극광을 쓸 수 있겠는가

얼마 전에 나는 그들의 사이트의 보기를 수집하기 위해 개원 프로젝트를 만났다.
나는 나 자신에게 말했다: 너무 멋있어!
저는 실험을 좀 하고 싶습니다. 개인의 도전으로서 저는 이런 것을 창조했습니다. 제 목표는 매우 간단한 도구를 만드는 것입니다. 모든 사람이 부담할 수 있고 너무 많은 노력 없이 설치할 수 있습니다.
내가 이 프로젝트를 집행하기 위해 한 결정을 함께 봅시다!

1. 응용 프로그램 프레임워크 선택

UI 개발의 팬으로서 NextJS 프레임워크를 선택하여 전체 응용 프로그램을 구축했습니다.따라서 몇 번의 클릭만으로 Vercel 프로젝트에 연결하여 배포할 수 있어 배포 관리가 크게 향상됩니다.
Next와 함께 저는 TailwindCSS를 사용자 체험의 틀로 선택했습니다. 저는 디자이너가 아니기 때문에 간단한 브래킷을 만드는 데 큰 도움이 되고 앞으로 이를 풍부하게 할 수 있습니다.

2단계 - 데이터베이스 선택

처음에 저는 MongoDB의 해결 방안을 고려하여 제 데이터 구조가 확대될 수 있다는 걱정을 하지 않으려고 했지만 나중에 저는 최종적으로PostgreSQL을 사용했습니다. 이유는 간단합니다. 좋은 데이터 구조를 정의하고 무엇을 해야 할지 생각하기 쉽기 때문입니다.아마도 미래에 나는 NosQL 데이터 구조의 재구축을 예견할 것이다

3단계 - 데이터베이스 ORM

Laravel Elount을 사용하는 데 익숙하기 때문에 자바스크립트 세계에서 비슷한 해결 방안을 찾고 싶습니다. 저는 Prisma를 만났습니다. 매우 효과적인 차세대 ORM이고 문법이 매우 뚜렷합니다.
그러나 내가 겪은 문제는 각종 테이블과 도형이 채워진 첫 번째 API를 한 걸음 한 걸음 처리하는 것이다. 나는Prisma본기가 많은 집합 함수를 지원하지 않는다는 것을 알 수 있고 원시 검색을 사용해서 이 문제를 해결해야 한다는 것을 자주 발견할 수 있다.파종기에 관해서도 Prisma를 사용하면 파종 파일을 여러 개의 단독 파일로 분리할 수 없기 때문에 어떠한 테스트 데이터도 구성하기 어렵다.
그래서 인터넷 검색을 통해 저는 KnexJS를 찾았습니다. 이것은 Prisma만큼 화려한 ORM이 없지만 제 개인적인 수요에 더 적합합니다.KnexJS는 이 예의 조회와 같이 유창한 조회를 만드는 데 매우 편리하다.

const user = await db("users").where("email", email).first();

4단계 - 인증

인증 정보는 다음 지침을 따릅니다.

NEVER store anything sensitive in localStorage such as JWTs or any other credential for that matter. The purpose of localStorage is to provide user convenience and experience by saving website states and settings.

http -only 쿠키를 통해 관리하는 솔루션을 선택했습니다. 이 쿠키는 사용자 데이터가 있는 JWT를 포함하고 있어 JWT와 관련된 모든 장점을 이용할 수 있지만 XSS 공격은 걱정할 필요가 없습니다.

그리고 너!인증 완료!

5. 데이터 수집

데이터를 수집하기 위해서는 작은 파일이 필요합니다. 모든 페이지에 이 파일을 불러와야 합니다.
이러한 구성에 대해 나는 URL을 호출하고 사용자에게 정보를 제공할 수 있도록 기본 파라미터를 전달하는 IIFE를 사용했다.
Aurora는 전혀 요리를 하지 않았기 때문에 GDPR에 완전히 부합되고 개인 데이터가 없습니다.
추적 파일을 만들 때, 나는 Webpack을 사용했는데, 이것은 이미 NextJS에 나타나고, 설정 파일에 작은 맞춤형 설정을 했다.

const path = require("path");

module.exports = {
  entry: "./tracker/aurora.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "aurora.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

그리고바베타

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

6단계 - 차트 광기

도표에 대해 나는 절대로 미치고 싶지 않다. 나는 React ChartKick에서 가장 간단한 해결 방안을 찾았다.
이 라이브러리는 내가 일반적인 구성 요소를 통해 여러 종류의 도형을 관리할 수 있도록 해 준다.(그중에 많은데, 그때도 나는 사용하지 않았다:D)
그러나 내가 보기에 부족한 것은 전문적인 패널을 통해 통계 데이터를 직접 보는 것이다. 그래서 나는 몇 줄의 CSS와 몇 줄의Dribble에 대한 생각으로 그림을 그렸다. 이것은 일반적인 구성 요소이다. 내가 원하는 방식으로 이 보기를 표시할 수 있도록 허락한다!
이거 봐!

단계 7 - 테스트

이것은 개방적인 절차이다. 나는 지금 Crypress를 배우고 있다.io와 점차적으로 실시하여 생산 환경에 적합한 테스트 세트를 제공한다.

마무리

그렇다면 Aurora에서 얻을 수 있는 혜택을 살펴보겠습니다.

극광은 간단해서 복잡한 지식 없이 시작할 수 있다.

하나의 계기판에 당신의 데이터가 있고 더 많은 GA 무한 메뉴가 없고 단추가 많습니다.

5분 이내에 어플리케이션을 배포하고 추적을 시작할 수 있습니다!

Aurora를 사용하면 두 번의 클릭으로 여러 사이트를 동시에 만들고 관리할 수 있습니다!

그럼 오로라가 완벽한 프로젝트인가요?절대 아니야.그것은 간단한 인코딩 실험에서 탄생했다.할 줄 알아요?
그렇게 지도 모른다, 모든 것은 시간이 필요하다. 누가 알겠는가, 아마도 지역사회는 오로라가 그녀의 가정에 가입하는 것을 환영하고 그녀의 성장을 도울 것이다!
프레젠테이션 보고 싶으세요?
Check this out
연락하고 싶으면 따라와!
다음에 만나요!:)
레나토