Hopefully Helpful!

After spending quite a lot of time finding a way to share the cookies for sessions between the client and multiple servers, I noticed that simply cookies cannot be sent to places with a different domain. If we were able to access and modify the cookies of servers from Google or Facebook, this would be a huge problem for security reasons. I thought this wouldn’t be a problem if we run many servers and maintain one session using cookies. I should’ve done research about it before designing the project, and tested the session before we decided to run 3 servers, but I got to learn the valuable lessons! Following this hurdle, I decided to store the session id associated with the user’s email to the database, Google Datastore in our project, and check if the session id from the client is matched with the one in the database every time before the endpoints in the app are called. By doing this we can validate if the session or the user is valid. This workflow is expensive as we have to make a network call from the client to the database. If we were using cookies, this could be done in the server storing the session info.

1. A user log in to the website. The access token (session id) from OAuth provider is stored in the database and sent to the client. The session id is stored in the browser as a cookie and expired in 1 hour.
2. When a client wants to access user data, the endpoint, GET /session, is called to receive the status if the session is valid, and an email address and session id are sent to the server.
3. With the email address from the client, the server access database and looks up the matching address and session id.
4. If email address or session id is not found, the server sent 401 status. The serve sends 200 status only if there’s email address and session id matched with the ones from the client.

This workflow is not ideal and very expensive, and there’s so much room for improvement. I’ll keep working on the authentication and session workflows to make the app more efficient and simple.

For the capstone project, my team is working on a web application, Software Engineering Quiz, and my job is to implement user authentication workflow and the dashboard page fetching data from the servers built by other team members. One of the many challenges was finding a way to manage the data across the web pages and components. Once a user logged in to the website, we wanted to store the user data such as id, name, email address, and the status of authentication so we can use these for endpoints and show the components only visible to an allowed user. Since I wanted to practice React hook skills, I started looking at Context API, a built-in hook for state management. Context API provides a way to pass data through the component tree without having to pass props down manually at every level. However, I ran into a problem that every time the component fetching user’s data is rendered, the value for the status of authentication is refreshed and there was a moment in the cycle that the value was initialized to the default. Because adding more complex conditional statements wasn’t ideal, I researched the different ways to update the statuses so the app won’t need to care about it until the user logs out of the application.

There are three forms for doing that, cookies, local storage, and session storage. Local and session storages were introduced in HTML5 and have key-value pairs in the storage. The difference between them is the persistence of data. Data in local storage won’t be removed until the user manually delete it. However, the session storage will be automatically deleted once the tab or the window of the browser is closed. Local storage will fit the automatic login and session storage will fit the one-time login. With these storages, a user can’t set the expiration time to be terminated. A cookie can only store 4kb of data but can set the time to expire. To check if the user is authenticated, the cookie will be the best option because cookies are sent to the server every time with the request. And the server will check if the cookie is valid to access data. My next job would be to implement this authentication communication between multiple servers and a single client.

In this week’s blog, I want to log the process of the capstone project I’m working on with my team. The project we are building is a Software Programming Quiz web application and has been going well. This web app allows a user to create a new quiz set with customized questions of various types such as true/false, multiple-choice, and free form. Even though the target user would be an employer who wants to send out a set of quizzes to potential candidates to evaluate their knowledge on a topic, this app can be used by anyone with different purposes.

As a team of three, we split the tasks into three parts, generating quizzes, sending the quiz to a candidate, and user authentication. Each part has its own server running on Google Cloud Platform written by Node and Express. In the previous class, Cloud Development, we weren’t allowed to use any libraries assisting authentication and authorization and had to understand the interactions between the server and the cloud. Dealing with tokens and codes for validation was fun but painful.

In the capstone project, PassportJs, authentication middleware in Express, is doing all these jobs alone. It’s very simple, well-integrated with Google OAuth, and sets a session easily. A big blocker to solve is to send the session and cookie to the browser when using the deployed server. I’m hoping I can fix this issue before the midpoint assignment.

As always, working with ReactJs is so fun and this is the best time to practice using hooks. Wiring up the client to my own server is kind of sweet and gives me good opportunities to grasp Rest API and internet protocols. I’m hoping the knowledge will benefit my future career as a software engineer.

** No spoilers, no worries!

The drama Squid Game has been the most successful series on Netflix. As a Korean who sometimes watches K-dramas, I was easily exposed to the trailer of the show and had been looking forward to watching it as soon as it was released. I consumed the whole episode on my single weekend day after it was revealed to audiences.

Like most people, my favorite episode is 6, Gganbu. To be honest, I hadn’t been heard about the term, gganbu until the old guy kindly explained it to the main actor. I was born in the late 80s in South Korea and am only familiar with half of the games such as ddakji, green light red light, and sugar candy game, which I played a lot in childhood.

As the old man stated, gganbu is a buddy who shares their assets or anything to win the games with the other mates as a team. Alright, but where did this term come from?? I started digging the web to find the origin of the word and noticed that everyone has different opinions on this topic. While there’s no definite answer to this, I want to bring some valid ideas of how it originally came from.

The first candidate is “Jazz Combo” which is a small jazz band. Back in the 1950s, Korean wars broke out, and the U.S. deployed the army to Korea to support South Korea in the war. Eighth United States Army started to be stationed, and the military band was a part of it. There could be occasional performances by the band exposed to people in the town, and it’s possible they watched the plays performed by jazz ensembles also called jazz combo. Currently, some regions have a variation of gganbu that is a ggambo, ggambu or cambo.

The second strong opinion is the Chinese word, Kwan Po Ji Gyo (管鮑之交) which stands for extremely close friendship. This four characters idiom is so famous that everyone knows if they finished their mandatory formal education. So, the theory is the first two characters somehow changed to gganbu and are broadly used by kids.

For me, I think the former idea is more reliable as there are a lot of modern Korean words that are root in a foreign language like English. And the different versions of the word such as cambo back up the assumption that combo is the true origin. Regardless of all these facts, I’m happy that I can use this term whenever I want to insist on a close relationship to my friends. Would you be my gganbu?

It’s time to get a new monitor! While my old monitor is doing just fine, I feel like having another one so I can improve my productivity and stop finding the right virtual desktop of so many. My current setting is two monitors including a laptop and an external monitor. By having an additional monitor, I would be able to put all chat and email apps (Slack, Teams, Discord, Outlook, Gmail chrome window…), which would hopefully help me to not get lost in the stacks of applications. Even though searching the app with Alfred which is a great alternative to Spotlight on Mac makes a transition quickly, typing the keyboard is quite a lot of work. Therefore, I’m getting a new monitor.

The major requirements of the candidates include an IPS panel, 4K resolution, and a display bigger than 27inch. After filtering the results on Amazon with these options, I ended up comparing two LG’s monitors, 32UN880-B and 27UP850-W. Let’s explore these monitors a bit.

32UN880-B		27UP850-W
31.5 inch	Size	27 inch
2020	Year	2021
140	PPI	163
2 x HDMI 1.4 1 x DisplayPort 1.2 1 x 3.5 mm Audio Out 2 x USB 3.0 (Type-A) 1 x USB (Type-C)	Connectivity	2 x HDMI 2.0 1 x DisplayPort 1.4 1 x 3.5 mm Audio Out 2 x USB 3.0 (Type-A) 1 x USB 3.0 (Type-C)
Height Pivot Tilt Swivel Extend/Retract	Stand	Height Pivot Tilt
60W	Power Supply	96W
160W	Max Power Consumption	185W
$546.99	Amazon Price(10/7/2021)	$549.13
$699.99	Retail Price	$549.99
No (November)	In stock	Yes

Despite the lower power supply and older versions of HDMI/DP ports, I would go with 32UN880-B. This monitor has a bigger screen and versatile stand. 5 inches is huge in the display world and the monitor arm is a game-changer when you want to use your desk more flexibly.

YAAAASSS, I got a new iPad. I couldn’t resist Apple’s education discount and AirPods giveaway, which I ended up buying an iPad Air with a fancy digital pencil. For the past few months, I had been telling myself you don’t need an iPad and you would only be watching Youtube videos wasting my life time. The truth is the most useful videos I’ve ever watched are definitely from Youtube.

Before I had this lovely machine, I entirely relied on typing whenever I had to express my thoughts and even feelings in the digital world. But now, I can utilize a pencil which is a tool that I’ve missed for a long time. I can literally write and draw anything on the flat display. I’m already so excited about the creative and bright future I will make with the pen.

For the second half of this post, I would like to brainstorm what I can do with the tablet. The first thing I can think of is displaying a music sheet. Well, this is huge. Since the space on the piano is mostly exclusive to papers, I had to print out the sheet. If I ran out of printer paper, I drove all the way down to Target. And, I can escape from stretching out that thick old piano book. iPad will be a good alternative to the old ways.

The diary should be written by hand, is my theory. I wouldn’t consider my short memo typed by keyboards as an official diary. With this being said, it’s time to write the real one. My handwriting would display not just my thoughts and content, not emotions that wouldn’t be delivered with emojis and parentheses. In the future when I look back at my writings, I hope I can touch and feel the texture of the place where I was.

Next blog, I will try to introduce helpful resources and ideas that I collect from the internship I’m currently working at. I believe that blogging is one of the best ways to give a present to myself in the future. See you!