⬆️ H1 Retrospect

💻 Frontend Developer

As a junior frontend developer, I'm encountering and building up a variety of new tech stacks used alongside React. Here’s a list of the ones I’m working with:

• Framework: Electron, Next.js (13)
• CSS: Emotion, TailwindCSS
• State management: Jotai, Zustand
• Data fetching: SWR
• Testing: jest, Storybook(UI)
• Miscellaneous: ethers.js, Lottie, i18n...

All of these stacks have well-organized official documentation, so I've been studying them, both during work hours and in my personal time. React transitioned from its beta version to the official site in mid-March, aligning perfectly with my React review, so I went through both the old and new versions. I highly recommend Learn React to others—every example is provided with functional components(!), and it explains why the basic Hooks were introduced and needed in a brilliantly structured way. The last section, Escape Hatches, delves into often confusing concepts like Effects and Refs in detail, so I plan to revisit it soon.

⚛️ Electron

Electron is a framework that allows you to develop cross-platform applications (Windows, Mac, Linux) using JavaScript. It’s also the stack I’ve spent the most time with over the past six months. Since joining the P-over project in late March, I’ve been developing a desktop app that enables seamless blockchain node operation on personal devices.

Unlike when developing web apps, working with Electron requires managing multiple processes, which has presented many new considerations. Since Visual Studio Code is a prominent app built with Electron, I've been referring to its source code extensively. I even created a personal repository, vscode-analysis, where I annotate and analyze the code. So far, I've only covered entry points like app.ts and main.ts.

To align with project planning, I personally tested a few features. I tried out auto-update using GitHub Releases (GitHub Link), though the process of code signing for auto-updates proved challenging. For Windows, a certificate must be purchased from a Certificate Vendor authorized by Microsoft, so I couldn't test it. Fortunately, for macOS, our company is already enrolled in the Apple Developer Program, so I was able to obtain a certificate and sign the code.

I also tested some desktop app-specific features (GitHub Link). By experimenting with functionalities mentioned in the official documentation—such as notifications, preventing sleep mode, and Touch ID—I helped set the upper limits of our app’s capabilities in line with its planning.

🖤 Next.js

Reflections on migrating a React project to Next.js [KO]

I had the great opportunity to take on the Over Network landing page project. I was personally seeing the value of Next.js, and since the existing landing page was built with React, I migrated it to Next.js. The timing was perfect as version 13 had just become stable. After some preparation (reading the official documentation and working on side projects), I restructured the project using the App Router in Next.js.

There still seems to be some debate on whether the legacy Page Router or the new App Router is the better structure. However, the App Router appears more suited and convenient for using React's server components. The React and Next.js teams are in close collaboration, sharing a vision for server-side rendering, so there seems little reason not to adopt the latest stable version.

Next.js offers such an excellent developer experience that I plan to continue using it actively. A prime example is next/font, which allows handling fonts at the framework level without needing to download files manually—a common task in frontend work. The Image component also automatically optimizes images, streamlining the process. Beyond coding, services like Vercel, Netlify, and AWS Amplify make deployment a breeze. I used Amplify for this project’s deployment.

💼 Superblock

x.com

X (formerly Twitter)

I began my developer career in January at the startup Superblock, which is building a blockchain mainnet called Over Protocol. Since last year, I’ve wanted to dive into the blockchain scene and actively build within it, and I’m grateful to have the opportunity to do so with Superblock.

🔎 OverScan

As part of my onboarding, I worked on the cards displaying chain status (e.g., gas price, total transaction count, congestion) and assembled these cards on the main page. To improve the user experience while data loads, I implemented a skeleton using CSS animations to create a loading bar effect. I also studied Ethereum’s event logs and considered how to best present various Solidity data types within OverScan.

✏️ Traces of my study on encoding and decoding Event Logs

Let's say we have a function like the one in the photo and receive arguments as shown in the table. After encoding, a straightforward decoding process would yield the following results.

In the Data table, values corresponding to (address, uint256[], bool)[] will be present. For composite types like tuples and arrays, the data includes information on how far back the data is stored.

Looking at the hex value at the top, the number 32 indicates that the array's values are stored one position behind. The second value, 1, represents the length of the array.

Another hex value appears, signifying that the tuple's values are also stored one position back. When we break down this tuple, we have address, uint256[], and bool. Since address and bool are elementary types, their values are directly shown: (0x9378368ba6b85c1fba5b131b530f5f5bedf21a18, 1(true)).

For uint256[], being a dynamic type, it includes the location of the data, represented by 0x60. The number 8 indicates the length of the array, followed by eight actual values.

🖥️ P-over

• I studied the Electron framework and organized some of the official documentation's content for my reference.
  • Electron으로 커스텀 가능한 Features [KO]
  • Security in Electron
  • Processes in Electron
• I participated in the design and implementation of the app architecture.
• I completed the prototype (alpha version) that allows running a local node and syncing data from external testnets.
• Based on my study of blockchain node clients (Execution & Consensus) and validator clients, I am currently implementing features with a goal of launching in September.

📄 Over Network Landing Page

Over Protocol | Lightweight Full Node

Over is a truly decentralized layer 1 blockchain providing lightweight full nodes. Everyone will be able to run a node and become a validator on their PCs at home.

Over Protocol

• I migrated the React project to Next.js 13.
• I worked on the mobile app and the P-over landing page.

🧑‍🎓 사내 스터디

I’ve been conducting a design pattern study with fellow developers at the company once a week, and it’s nearing completion. It has been personally beneficial to step back from product development and familiarize myself with the patterns commonly used in object-oriented programming. Each pattern presented in the book had its pros and cons. The advantages mostly included reduced dependencies between objects and easier structuring, while the downsides often involved increased code complexity.

When I was using React alone, there weren't many elements where I could apply design patterns. (For frontend-specific patterns, patterns.dev has great resources.) However, during the study, I joined the P-over project and became more familiar with Node.js. Given that one of Node.js's main features is its event-driven architecture, I found myself frequently using the Observer pattern.

⛓️ Blockchain

I remember vividly stating during my Superblock interview that blockchain can serve as an infrastructure to reduce the trust costs of society as a whole. While that narrative remains largely unchanged, my understanding of how that infrastructure operates (technically) has deepened through direct product implementation. For instance, I can break down the vague expression “running a node” into more specific terms, such as “executing an Execution client like geth and a Consensus client like Prysm simultaneously with specific configurations.”

Fortunately, the protocol developers at my company organized the environment and configuration needed to run a node client, allowing me to set up my own small private network on my MacBook and observe the events of The Merge. Last year, I researched Ethereum upgrades and the Beacon Chain as part of my academic activities (Ethereum Upgrades and Lido Finance[KO]), but it’s during the current phase of implementing the validator dashboard that I feel I’m finally grasping these concepts. Technical implementation has been incredibly helpful in clarifying previously vague ideas.

Additionally, I’ve been able to study various areas within blockchain as they relate to my work. With OverScan, my focus has been on the state of the blockchain, while with P-over, I’ve concentrated on nodes and validators.

• FLP Impossibility and Consensus Algorithms
• Transaction states (success, failed, pending, replaced, etc.) @OverScan
• In-depth analysis of Event Logs @OverScan
• Differences between Full Node, Archive Node, Light Node, and Validator Node @P-over
• Geth's Full Sync vs. Snap Sync @P-over
• Node structure and setup required to become an Ethereum validator @P-over
• Geth JSON-RPC API & Beacon Node API @P-over

x.com

X (formerly Twitter)

I’m also active as an executive member of the KAIST Blockchain Society, Orakle. In August, we’ll have a final presentation summarizing our activities for the semester, and in winter, we’re planning a signature event for our society. Additionally, in collaboration with Xangle, I contributed two articles that lightly blend blockchain and economics.

• The impact of the Consumer Price Index (CPI) on Bitcoin prices [KO]
• Changes that will occur with the introduction of Central Bank Digital Currency (CBDC) [KO]

⬇️ Goals/Plans for the second half of the year

📝 Make plenty of records

I'm always aware of the importance of documentation, but it often gets sidelined by other pressing tasks. Now that I have the Twitter Blue badge, I intend to focus on leaving fragmentary records of my daily life and development progress.

🌀 Successful launch of P-over

The first product of Over Protocol, the mobile Over app (Over: Mobile Incentive Testnet App), is set to launch in July. Following this, P-over will officially debut alongside the Over Protocol testnet. While there are still technically challenging aspects to navigate, the development is fast-paced and enjoyable. I hope P-over can play a central role in enabling everyone to become a validator on the blockchain network from the comfort of their homes.

🖤 OverScan + Next.js & React Server Component

Frontend development trends seem to change every six months, making them hard to track. However, one area that leading teams in the scene are all pushing for is server components. Until Next.js 12, server-side rendering often involved fetching data at the page level and then passing it as props to the components that make up the page. In contrast, server components allow data fetching at the component level instead of the page level. Utilizing basic components like Suspense from React 18 makes it much easier to implement skeletons at the component level.

The OverScan project our team is currently preparing also requires data fetching from various components, making server components a perfect fit. I plan to study server components further and hold a presentation to share my findings with the team, aiming to enhance OverScan's performance.