Memories of technique and life

TECHNICAL

Chuẩn cấu hình eslint, prettier cho react sử dụng typescript

1. Đối với react-app 1.1. Cài đặt thư viện Sử dụng các thư viện sau: eslint: báo lỗi cú pháp và các anti-pattern cho code https://github.com/eslint/eslint typescript-eslint: báo lỗi cú pháp cho typescript sử dụng eslint https://github.com/typescript-eslint/typescript-eslint eslint-plugin-react: báo lỗi cú pháp cho react sử dụng eslint ...

63 months ago

TECHNICAL

Phân biệt gcTime và staleTime trong tanstack (react-query)

1. gcTime gcTime là thời gian data được cached trong tanstack. Sau khoảng thời gian này tính từ lúc bạn lấy nó ra cuối cùng, data sẽ gị garbage collector xoá đi. Ví dụ bạn set gcTime = 5 phút, bạn gọi api lúc 10:00:00, từ 10:00:00 tới 10:05:00, bạn không gọi api đó lần nào nữa thì lúc 10:05:01, data đó sẽ bị xoá khỏi cached. Từ 10:05:01 trở đi, nếu bạn gọi api đó lần nữa, tanstack sẽ gọi api tới backend và cached nó 5 phút tiếp. gcTime dễ hiểu vì nó rất giống với cachedTime thông thường. s...

2 months ago

TECHNICAL

Cấu hình sentry on-premise và upload source map

Sentry là dịch vụ tự động theo dõi và báo lỗi trong source code của chúng ta. Bạn có thể đăng ký sử dụng gói free tại https://sentry.io/pricing/ . Bài này mình sẽ trình bày cách deploy server sentry on-premise và upload sourcemaps lên server on-premise đó. 1. Tạo server sentry on-premise Download source code tại https://github.com/getsentry/onpremise Yêu cầu h...

55 months ago

TECHNICAL

Cách cấu hình multi entry point trong create-react-app

1. Mở đầu Kịch bản là bạn muốn build ra 2 page là tên là rate.html và trade.html trong cùng một project sử dụng create-react-app. Bình thường bạn sẽ phải tạo ra 2 project riêng biệt nhưng bài này sẽ hướng dẫn cách cấu hình webpack để chỉ cần sử dụng 1 project cho cả 2 trang. ...

63 months ago

TECHNICAL

Cài đặt test trong react sử dụng redux và react-router

Để cấu hình test cho một app react thông thường sẽ không mấy khó khăn, nhưng để cấu hình cho một app sử dụng các kỹ thuật như redux, react-router đòi hỏi thêm một số cài đặt cần thiết khác. Giả sử một ứng dụng react sử dụng redux và react-router của bạn có file App.js như sau: // App.js import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { ConnectedRouter } from ...

71 months ago

TECHNICAL

Ví dụ file circleCI 2.0

1. Trong rails version: 2 jobs: test: docker: - image: circleci/ruby:2.6.0-node environment: BUNDLE_JOBS: 3 BUNDLE_RETRY: 3 BUNDLE_PATH: vendor/bundle RAILS_ENV: test RACK_ENV: test - image: circleci/postgres:9.6-ram environment: POSTGRES_USER: test POSTGRES_DB: test POSTGRES_PASSWORD: "" - image: redis steps: - checkout # Which version of bundler? - run: name: Which bundler? command: bundle -v # Restore bundle cache - restore_cache: keys: - project-v1-{{ checksum "Gemfile.lock" }} ...

72 months ago

TECHNICAL

Một vài ghi chú về redux

Store là nơi lưu trữ state, state chính là data của app. Muốn thay đổi data(state lưu trong store) của app, chỉ có cách là trigger reducer. Muốn trigger được reducer, chỉ có cách là dispatch một action nhất định nào đó. Ví dụ: Muốn thay đổi userInfo trong store, khai báo một reducer tên là changeUserInfo. Reducer...

74 months ago

TECHNICAL

Vì sao không nên mutate state và không nên dùng cloneDeep trong react

Mục tiêu của bài này là: Giải thích vì sao lại không nên mutate state. Giải thích vì sao lại không nên sử dụng cloneDeep khi muốn update state. >> Xem thêm về mutate là gì? 1. Vì sao không nên mutate state Ví dụ về mutate state: ...

74 months ago

TECHNICAL

Cách trigger sự kiện change trong react từ trình duyệt

Mở đầu Nếu bạn đã từng tìm cách để trigger sự kiện change từ trình duyệt(browser) và muốn nó gọi sự kiện onChange ở trong project react, bạn sẽ gặp không ít khó khăn vì change event trong react đã được tùy biến lại cho phù hợp với các loại browser khác nhau. Ví dụ ta có một đoạn html như sau: <input type="text" class="myInput"> Hàm onChange trong react sẽ đơn giả...

80 months ago