Kakao Story FE Team Reveals How to Reduce Redux Dependencies Using 'File Variables'

The Kakao Story FE Development Team revealed their know-how on introducing the File Variable concept to reduce excessive dependencies on Redux during web service expansion and managing it safely on both client and server sides. Since Redux can lead to reduced readability due to complex flows and difficulties in tracking immutability, they adopted a strategy of separating states unrelated to change tracking or UI re-rendering into file variables.

Definition of File Variables and Client-Side Usage

File variables are ES6 global variables accessible only within a specific module, managing state without the boilerplate of Redux actions and reducers. For example, when determining mobile status (isMobile), they apply a singleton pattern that parses the User-Agent only upon first reference to optimize performance. However, note that initialization is impossible in SSG environments due to the absence of the window object, and variables are reset when the page reloads during hard navigation.

Data Leakage Risks on the Server Side and AsyncLocalStorage

When using file variables on the server, all users share the same module (context), posing a risk of personal information leakage where the first user's data is exposed to all subsequent users. To resolve this, they utilize AsyncLocalStorage, supported in Node.js 16.4 and above. AsyncLocalStorage maintains an independent storage context for each request, preventing data sharing issues between users.

Integrated Client-Server Management

They abstracted file variables through a UserAgent class to ensure the same value is referenced on both server and client. On the server, values are stored using AsyncLocalStorage, and the server-calculated values are injected into the client's window object via _document. On the client, the value is retrieved from the window object upon first reference and initialized using the singleton pattern, allowing a consistent value to be used via a single getIsMobile() function regardless of the environment.