- Tech notes
A close look at Next.js rendering: CSR, SSR, SSG, ISR, and Hydration
Notes I put together while studying rendering in ASAP, a study group that meets once a week: the four Next.js rendering methods and Hydration.
- Tech notes
How I fixed the Failed to load module script error
While working on a project in Vanilla JS, I ran into a familiar error message again. Here is what caused it and how I fixed it.
- Tech notes
A close look at React Context
I wanted to take a close look at React Context because many companies that use React seem to make active use of Context when props need to be passed down.
- Tech notes
Browser language and cross-browsing: ko vs ko-KR in navigator.language
While working on a company project, I recently had to build a feature that hides price information only from users in Korea.
- Tech notes
What is JavaScript's event loop? How a single thread handles async work
Before getting into the event loop, I start with Single Thread, a trait of JavaScript, then cover the call stack, Web APIs, and the callback queue.
- Tech notes
Next.js useRouter: push or replace
I learned something useful while building a hook that fetches and manages user information with useEffect(), so I'm writing it down.
- Tech notes
How to view pretty-printed JSON data in Chrome
I wanted JSON data to be formatted when I made API calls in NextJS, so I looked for a Chrome tool and found JSONView.
- Tech notes
A regex to change a date like 20231228 into 2023-12-28
The backend sent dates like '20231228', and I wanted them as '2023-12-28'. I found an easy way to do it with a regex and replace().
- Tech notes
Applying darkMode in Tailwind CSS
First, decide whether darkMode should follow the browser's setting, or whether you build your own button and apply it through a class state.
- Tech notes
Number vs number in TypeScript: why ESLint says to use number
ESLint flagged an error for using Number as a type, so I looked up the difference between Number and number in TypeScript.
- Tech notes
Removing the arrows when a mui TextField has type: number
Removing the arrows when a mui TextField has type: number
- Tech notes
Black box testing and white box testing
In this approach, the tester checks the software's inputs and outputs and confirms that the software works as expected.
- Tech notes
Axios with Credentials and React Infinity scroll
I learned some useful things today and wrote them down: axios leaving out undefined parameters, withCredentials, and an infinite scroll example.
- Tech notes
Customizing react-datepicker's size and position with styled-components
Today I needed a DatePicker at work. Resizing and moving react-datepicker wasn't easy, so I ended up editing its CSS piece by piece.
- Tech notes
Encrypting passwords with crypto-js (SHA256)
At work, the back end asked for passwords to be encrypted when creating members. Our company hashes them with crypto-js, so I practiced it again at home.
- Tech notes
State management with Zustand
Redux-Toolkit was the only state management I had used, until a senior at work said a project used Zustand for global state. It was very simple.
- Tech notes
Reviewing CSS Grid by drawing a Go board
This morning's task at work was centering a set of split buttons, and to do that I had no choice but to use grid.
- Tech notes
Switching from useState to useReducer for user input
I used to manage the information entered at login or sign-up with the useState hook. Here I write about the useReducer approach I learned at work.
- Tech notes
Efficient event management: one listener instead of one per button
While working out, I suddenly started thinking about efficient event management, so I ended up writing some code to try it.
- Tech notes
JavaScript closures: outer scope access and information hiding
A closure is an inner function's access to the context of its outer function. Two examples show how it gives encapsulation and information hiding.
