- This covers the onboarding process of a frontend intern at UniqueGood Company. -
[Greeting]
Hello, nice to meet you! I'm developer Jung Suha, who joined UniqueGood Company as a frontend intern on the product development team. It feels like just yesterday that I was welcomed to UniqueGood Company! But it's already been over two months together.ㅎㅎ There's so much to learn at the company, and I'm personally enjoying my work life so much that time seems to fly by!
I worked on the onboarding assignment with Jiyoon, who also joined as a frontend intern. I'd like to introduce the onboarding process and share what I learned and felt while working on the assignment. I hope you'll enjoy reading it!
[We were welcomed with so much enthusiasm.]
(feat: Is this equipment yours?)
On my exciting first day! When I went to my desk, the UniqueGood welcome kit along with the latest equipment - a Macbook M1 Pro and BenQ monitor - were there to greet me🥰
UniqueGood Company primarily uses Slack and Notion as main work tools! We had time to exchange greetings and receive welcomes using each platform!
When I nervously but excitedly introduced myself on the Slack channel, I received an enthusiastic welcome as shown in the photo! ˗ˋˏ ♡ ˎˊ˗
Writing my TMI on the Notion UniqueGood Wiki
The UniqueGood Wiki is a page that collects TMI and related episodes of UniqueGood members! I filled it with my own TMI and spent time building internal intimacy by reading other members' TMI ㅎㅎ
We received an introduction to our team! Product Development Team
Next on the schedule, I received an introduction to the product development team I would be joining. People who exist between 'business', 'technology', and 'customers'! 🤩 Isn't that really cool?ㅎㅎ
[Onboarding Assignment]
The highlight of onboarding! We received an explanation of the onboarding assignment.
'SNS Frontend Development Using Given SNS API'
Please do reverse planning using the given API documentation, consider appropriate design, and work on the frontend. The API documentation is insufficient, and the API functionality verification is not complete either. It's deployed in a state where only minimal operation has been confirmed. If it doesn't work or differs from expectations, please actively communicate with backend developers (...continued below)
We were given an onboarding assignment to check our reverse planning sense and frontend development abilities, as well as what we know and don't know.
They also wrote down their expectations and what they wanted to see from this assignment, and I think the key was 'Can you communicate proactively and well during collaboration?' They told us that it's important for colleagues and seniors to be well synchronized with your concerns, work direction, and situations.
[In the onboarding assignment, we are both planners and developers!]
We decided to each come up with ideas for what kind of SNS to create! Initially, we received feedback that the planning volume was too large and had to revise our plan.
We got inspiration from the 'Sea Turtle Soup' game we participated in as internal beta testers and decided to implement an SNS where you can play the 'Sea Turtle Soup' game.
⬇️ <Go play real Sea Turtle Soup game> ⬇️
(We didn't know until this point that even our revised plan had a large volume. That's how we came to experience 'self-inflicted disaster'...)
[Backend Collaboration - API-related meetings, requests]
API work was handled by backend developer Hyunwoo.
We checked what APIs were available, tested them, and then held an API sharing meeting. Afterwards, we organized and shared additional requirements, working together with Hyunwoo while discussing. Collaboration was easy thanks to the detailed Swagger UI he created. (Swagger is the best~ Everyone should use Swagger!ㅎㅎ)
[Backend Collaboration - API testing is important!]
While collaborating with the backend, I learned that it's important to test APIs thoroughly! During testing, we found that a request that should clearly fail authentication was returning a normal response, so we asked backend developer Hyunwoo about it.
ㅎㅎ It turned out there was an issue with the authentication part. When I said I would write about this situation in my onboarding retrospective, Hyunwoo asked me to make sure to include an excuse ㅋ_ㅋ (I wrote it for you, Hyunwoo~~)
(By the way, the API we received was apparently the result of backend developers Hyunwoo and Yongtae's onboarding assignment from about a year ago! We'd like to express our gratitude to the backend developers who suddenly found themselves battling their year-old selves ㅎㅎ)
After being welcomed like this upon joining, we were given the onboarding assignment of 'SNS Frontend Development Using Given SNS API'. Let me tell you about our onboarding assignment development process, results, and what we learned and felt!
[Development - Tech Stack, Component Structure, Main Features & Results]
Tech Stack
Project Structure
atoms folder, page folder, components folder > each page folder,
The page folder is largely divided by page units such as quiz list page and quiz detail page. Components used in each page are gathered in components folder > folders named after each page.
Among these, components that are repeatedly used across multiple pages are gathered and managed in the atoms folder.
Pages and Features
Login and Registration
My Page — View my posts and comments
Quiz Creation Page — Writing posts, selecting quiz categories
Quiz List Page — Display quiz titles and category-based color coding
Quiz Detail Page — Common: like feature, comment deletion feature / Author: post deletion feature, ability to mark correct/incorrect answers on comments
[Results - Description of Each Page and Feature]
Quiz Creation Page — A page where you can create your own quiz. You can write a title and content, and select which category the quiz belongs to from 'General, Death, Comic..' to create a quiz.
Quiz List Page — A page where you can view all created quizzes. Infinite scroll is implemented for the quiz list. You can select categories through the top-left button to view lists by category. You can navigate to the quiz creation page through the top-right button. Clicking on each quiz takes you to the quiz detail page.
Quiz Detail Page — Displays the title, content, and category written on the quiz creation page. All users can write comments and like comments. We checked whether the user is the quiz author or not to display the post deletion button. Also, authors can mark comments with YES!, No…, Hmm… these three options. This was a feature designed to capture the characteristics of the 'Sea Turtle Soup' game.
My Page — A page where you can view your own posts and comments. On the left, the user's name and the number of posts and comments written by the user are displayed.
[What I Learned and Felt]
CSS
After finishing the onboarding project, tech leader Yechan gave us an overall CSS review. I learned that CSS should be written considering the document flow from top to bottom and left to right. I also learned how to write CSS that fits the document's meaning and minimizes impact on other components, even when CSS properties perform the same function.
Looking back, we were drawing pictures with CSS in our onboarding assignment. I particularly remember my past self who only thought about placing things well on screen and overused flex. (Excuse me.. are you a flex farmer? It's quite a flex field!)
(Using as many as 8 flex properties on one page... a miraculous layout😱 But? As my current grown self, I can't even imagine it!)
SWR
We thought about how to manage state to reflect API responses on screen in near real-time.
First, we discussed the concerning points with tech leader Yechan, and he suggested Recoil or SWR. After studying Recoil and SWR, we decided to adopt SWR. The experience of adopting technology appropriate for the situation rather than just technology we know how to use was valuable!
We especially wanted changed data to be immediately visible on screen when writing comments and when authors mark comments with (YES, No.., Hmm..). We judged that SWR's characteristic of immediately re-fetching state and updating data using the mutate function was suitable for the 'Sea Turtle Soup' SNS we wanted to create.
Git
We collaborated by creating branches for each task and merging them into master using git. I learned everything from various git commands to conflict resolution methods, branch management, and what makes a good PR.
Let me share about two of the conflicts and problem situations we encountered and how we resolved them ㅎㅎ!
First, there was a case where someone incorrectly rebased from their working branch to the master branch and this was reflected even in the remote branch. In this case, we used git reflog to see the rebase log and identified the specific commit we wanted to return to. We were able to resolve it by using git reset to revert the incorrectly rebased branch and git push --force.
Second, there was a case where we worked on the wrong branch instead of the intended branch and added commits. In this case, we used git switch to move to the target branch we wanted, then safely moved the commits left on the other branch to the desired branch using git cherry-pick.
Although we had hardships and adversity while handling git, backend developer Hyunwoo, who handles git well, actively helped us create a master branch with clean linear logs. (Just god-Hyunwoo✨ light-Hyunwoo✨ thank you ㅎㅅㅎ)
Currently, backend developer Hyunwoo and frontend developer Muhun are hosting a company-wide git study group.🎉 Thanks to the quality lectures including hands-on practice they prepared, we're further improving our understanding and utilization of git.
What we learned through git study
( git remote / git commit --ammend / git add -patch / git diff / git revert / git cherry-pick …)
Wow, that's quite a lot, right?
Finally, schedule estimation..!
We experienced the process of estimating development resources and discussing and persuading about schedules when necessary. When introducing the planning stage earlier, I mentioned 'self-inflicted disaster'. As planners, we overestimated ourselves as developers.
While checking development status, we... intuited that it would be difficult to finish development within the schedule. Therefore, we extended the deadline after internal team sharing and schedule discussions.ㅎㅎ
I once again felt that schedule estimation is indeed difficult. I learned the importance of defining core features and properly prioritizing features. I also learned that when necessary, you should actively discuss and persuade about schedules.
[Conclusion]
To conclude the onboarding assignment, we held a result presentation and retrospective within the team. Tech leader Yechan told us that watching our onboarding, he could see what the saying 'it takes a village to raise a child' means.
Really... I want to express my gratitude to all UniqueGood members who watched over us interns so kindly and helped us with so much affection and interest that I wonder how they can give so much. I will work hard to become a colleague you want to work with more and a colleague you can be proud of. Thank you :)
This has been 'UniqueGood Company Frontend Intern Developer Jung Suha's Onboarding!' Did you enjoy it? Then lastly, we can't leave out our company promotion!
If you found my onboarding process interesting??
If you became interested in UniqueGood Company??
Don't just scream, apply to UniqueGood Company! Join us!
⬇️⬇️ Go directly to job postings ⬇️⬇️
Want to see more posts from the Product Development Team?
⬇️<Go directly to UniqueGood Company Product Development Team Blog>⬇️