I feel like it's too late to write a review in 2021 when I finished the program in August 2020, but since the 4th selection is underway, I feel like if I don't post it now, I will never publish it. Therefore, most of the information released on the Internet will be brief, and I will focus on the things I was curious about when I applied.
Woowa TechCamp is a program for aspiring programmers to intern for the summer at Woowa Brothers, a tech unicorn company that operates λ°°λ¬μλ―Όμ‘±, like Uber Eats in Korea, to study development and programming in the industry. The number of interns is 30, and the competition ratio is approximately 43 to 1.
No shoes allowed - aka Sushi Bar Lounge. First come, first served.
π Selection Processβ
Applicationβ
Seven hundred characters in Korean per question.
- Describe what you consider to be the virtues of a developer, and in light of this, what do you think makes you a good fit to work as a developer?
- Please describe why you want to participate in Woowa TechCamp.
- Describe your way of learning programming outside of the curriculum.
- Describe a time when you faced difficulties in collaboration and what you did to overcome them.
First-round coding testβ
It was a typical coding test. I remember solving them in JavaScript, and I had a lot of coding test practice at the time due to Programmers Summer Coding Contest and Woowa TechCamp, so the difficulty level was manageable. There were four questions in total, and 150 minutes were given.
Second-round coding testβ
The project was to develop an admin tool to perform a specific function on the provided VS Code web platform. The basic boilerplate, build setup, and CI/CD were pre-implemented, so I was able to get up and running quickly as described in the README, and I had to implement three core features on top of that. I was not allowed to use any external libraries and had to make do with vanilla JS. The time was long, 4 hours, but I didn't have enough time. I'm not going to describe the detailed problem strategy because the person involved said I can't share it... π
Interviewβ
Due to COVID-19, the interview was conducted online for 30 minutes. Since it was not a developer recruitment interview, I felt the interviewer needed to ask me deep technical questions. Still, I mainly asked whether I have good programming basics, whether I am ready to learn at UteCam, and whether I will be a good camp member. In my case, I mentioned this technical blog in my application, and they asked me for more information about [one post] (/w/4BB66F).
Competitionβ
I was also curious about the competition rate, which I later found out was as follows.
- 1300+ total applicants (43x)
- 500+ (17x+) who passed the paperwork and 1st coding test
- 90 people passed the second round of coding tests (3x)
- Interview and finalize 30 interns
π« Training Processβ
- OT period (Duration: Three days)
- Mini-project: Implementing a web server without Express, HTTP.
- Keywords to study: Node.js, JS OOP, asynchronous programming, async cafe, HTTP specification, HTTP basics.
- My team GitHub
- My blog post
The so-called tiny house where the OT took place. It is located in the sleeping room.
- Login App (1 week)
- Requirements
- Utilize only vanilla JavaScript.
- Implement authentication directly without an authentication system such as Passport.
- Implement DB directly with a file system without using a commercial DB.
- Keywords to study: HTML, CSS, CSS Layout, Express.
- Our team GitHub
The so-called big house became the home of Woowa TechCamp. It is located 12 seconds away from Seoul Mongchontoseong Station.
- Trello App (2 weeks)
- Requirements
- Utilize only vanilla JavaScript.
- Set up and utilize Webpack by yourself
- You need to implement drag & drop without the HTML Drag and Drop API, using event bubbling, event capture, and event delegation.
- Study keywords: Webpack, ES Module, DOM API, Templating, Fetch-Promise pattern, JS Event Delegation, DBMS, MySQL, SQL Syntax.
- Our team GitHub
The cafe on the 18th floor of Big House and the view of Olympic Park from the restaurant.
- Bankbook App (2 weeks)
- Requirements
- Utilize only vanilla JavaScript.
- Build a single-page application using vanilla JavaScript and the History API.
- Implement CI/CD without any commercial solution.
- Implement OAuth.
- Draw graphs using SVG and Canvas.
- Study keywords: Observer Pattern, ERD, OAuth, Passport, State Management, Immutability, Transactions, Shell Scripts, CI/CD, CSS Animations & Optimizations (requestAnimationFrame & requestIdleCallback), SVG, Canvas.
- Our team GitHub
We often did pair programming. This is the code you see now...
- Full E-commerce App (3 weeks)
- Requirements
- Utilize Vanilla React.
- Utilize AWS VPC
- Utilize S3 image storage.
- Utilize Elastic Search, Logstash, and Kibana (ELK) combination.
- Study keywords: React Hooks, AWS VPC, React Router, React Context API, React useReducer, AWS IAM, AWS S3, React Test Codes (Jest, Enzyme, ...), Elastic Search, Logstash, Kibana, ELK.
- Our team GitHub
β¨ Good pointsβ
First, we were paid about 1,500,000 won monthly for activities and equipment (MacBook Pro π» and monitor π₯).
A 2019 MacBook Pro 16-inch i9 was loaned to everyone. It had 16GB of RAM, a 1TB SSD, and a Radeon 5500M 4GB GPU. At the time of the 2020 camp, it was the highest-spec MacBook Pro available without a CTO. 15 monitors were issued, one per two person. The monitors were ThinkVision QHD monitors. I thought we'd run out of monitors, but we had plenty.
π¨βπ» What the heck is good (beginner) code?β
// Load the right sidebar activity history
async function addActivityLogToActivityLogList() {
let activityLogList = document.getElementById('activity-log-list')
activityLogList.classList.add('activityLog')
activityLogList.innerHTML = ''
let userList = await api.User().getAllUsers()
userList.reverse()
console.log('There are currently [', userList.length, '] users.')
userList.forEach((user) => {
let activityLog = document.createElement('li')
activityLog.classList.add('activityLog')
let date = new Date(moment(user.created_at).format('YYYY-MM-DD HH:mm:ss'))
activityLog.innerText = user.userId + 'joined on ' + date + '.'
activityLogList.appendChild(activityLog)
})
}
The original version of this code is here.
Uh... this isn't reviewable at all; who wrote this?
This is the feedback on my code that appeared on the screen during code review time on the afternoon of Friday, July 25, at the end of the second project. At the time, I thought I had handled the extreme time pressure well and created a page that worked well. But hearing this blunt assessment was a shock. It didn't show in writing, but something froze in me.
On the train ride home that day, I had a lot of thoughts. When I took a moment to calm down and think about it, I realized that it wouldn't have been a good camp if it was just a camp that said, Yes, we all did well and did an excellent job. They say a problem set is only as good as the problems you get wrong. So I remember vowing to make the most of what I could do and absorb as much as I could for the rest of the month.
As a junior interested in programming, you often hear things like "clean code, good patterns". The problem with this is that as a beginner, you've heard it so many times that you're just mechanically repeating it by rote, and you do not have a realistic sense of what's good or what's bad. If we go back and look at the code above,
- The code is doing two things at once. It's getting information and displaying it. This makes the code more dependent. Dependencies can lead to much math when you need to replace some code.
- The file mixes logic and views and could be more readable.
Based on your advice, I paid much attention to this development pattern in my third project. I made a mini-project out of some of the parts of my third project, and you can probably get an idea of what it looks like.
π· Dunning Kruger Sledding Hutβ
It's a bit of a clichΓ©, but I was able to experience the peak of stupidity firsthand. Of course, I never thought that I knew everything, but I dared to think, "Sure, I'll have to work at it, but maybe I'll be able to keep up with it to some extent?" because I've done some projects in JavaScript before.
Woowa TechCamp was very challenging. The goal of the original curriculum was to impose constraints on each project and then work around those constraints in the next project. For example, implementing authentication without Passport.js and then using Passport.js in the next project to quench that thirst. But on the flip side, this process happened every week or two, which meant that when we were getting to grips with the previous technology, we'd jump to the next one and experience the steep learning curve again.
I experienced Dunning Kruger's sledding hill at WoowaTechCamp. Unfortunately, I had to work hard to follow along because I needed to be a JavaScript whiz.
π What is knowledge in the internet age?β
I also thought a lot about what it means to know in the age of search. If we're talking about programming, I've found an answer to this. It's a concept called GSPH, which stands for Googling Session Per Hour. A Googling Session is a deep search that lasts longer than 5 minutes. So, for example, if you can't remember the name of a JavaScript property function and you're done Googling in 2 minutes, that's not a Googling Session, but if you can't remember the name of OAuth and you're looking at a document for 10 minutes, that's a Googling Session.
If you have no more than (roughly) 3 Googling Sessions in an hour while working on a task, you know the concept, so doing short searches in between jobs doesn't directly indicate that you don't see the idea. However, if you have to look it up for every detail of your work, it's a sign that you still need to work on it.
πΎ Libraries β Alien Technologyβ
Frameworks and libraries are often treated like alien technology. Of course, well-known frameworks and libraries are a set of proven, efficient code. Still, it can be dangerous to think of them as alien technology you can't get away from and take the approach of delegating all your worries to them.
In particular, the underlying technology of web libraries is plain JavaScript, which we can also write. It was constantly emphasized throughout the camp that we should rely on something other than external libraries blindly. Still, we should know how they work and the potential pitfalls, so we should study them carefully enough to implement them similarly if necessary.
Libraries are not Protoss π½ tech; they are Terran π§βπ§ tech.
An example is the left-pad incident in 2016. An 11-line library called left-pad
was deleted from npm, which caused a domino effect of dependencies and made a transpiler called babel
unavailable. Isn't this also a case of over-reliance on a simple code that can be written quickly?
If you're a hobbyist developer, you might be thinking, "Eh, babel is a really trusted library used by hundreds of thousands of people, I should spend my time worrying about the safety of my code," but if you're an organization that can lose a lot of money if a service goes down for half an hour, you need to keep in mind that libraries are not some unknown alien technology, and they're not something we should be celebrating, but they are services that can be compromised at any time.
π₯³ Fun stuff.β
π§© Crawling the Woowa image serverβ
I needed many Woowa's B-mart images when building my last B-mart service. I had pictures in the photo section to make it look like an app. Utilizing my previous experience, I scraped the image resources on Woowa's server (with their permission).
Technically, this isn't a "hack of the Woowa server" because the images are on the CDN (open web). The problem is that these endpoints and the image stock values behind them must be visible.
http://CDN.baemin.com/random/random/1abcde23-some-long-alphanumeric.jpg
The final image CDN URI looks like this, and when you connect to it, you get the picture.
It wasn't just a shallow crawl using a CSS selector with a B-mart webview, nor was it a shared resource server, so it took quite a bit of effort. To keep it simple, I eavesdropped on the iOS Woowa app communication to get the endpoint and image address, and with a little CTF, I got a list of image addresses. Then, I scraped about 1,000 images, icons, sound effects, etc., from that image server and shared them in a private repository for other campers.
π’ Whirlwind Company Historyβ
We were able to hear behind-the-scenes stories of Korean companies. For example, a game company uses binary dumps instead of RDBs because the hundreds of thousands mass-produce items; a game DB field was manipulated by someone to clone an item worth hundreds of millions of won, and DB access rights management has been rigorous since then; a hotel company's developers can view all members' personal information, so for a while, developers were able to view celebrity membership information at will; the chairman of a search company told them to "make it one second faster than the competition"... It was a fascinating story for me who is interested in the corporate ecosystem.
β‘οΈ Synergy Γ Synergy = Synergy3β
The best part was meeting the other Woowa TechCampers. I understood a little bit about what it means to have great coworkers. Most notably, I would like to mention jhaemin.
At the beginning of every project, he gives me a design brief. However, they are only recommendations, and the actual implementation is free, meaning it's purely up to the campers to tweak the design to improve usability and aesthetics. At first, I thought this was a design that was mandatory to follow, but it wasn't. In the end, everything was free and open, as if to subtly imply that good coworkers are those who find things to do. Whether it was improving the design, adding features, or, conversely, removing something, there was a lot of power and responsibility.
In terms of the design ethos of the front-end developers, I was influenced by my fellow camper [jhaemin] (https://github.com/jhaemin). I learned much from watching him build usable web apps with his solid design scheme. You'll see what I mean when you see two sites that blew me away.
I was so inspired that I tried to improve the design from the 3rd BankSalad project. I thoroughly revised the plan like this. β
What I like about my design is that it takes full advantage of the widescreen by dividing the screen elements into three columns and that the activity history pane on the right works independently, so you can freely move to the calendar, stats, and payment methods and still keep the contents of the right pane. Similar to Slack?
You can also check out the [vanilla JavaScript pseudo-React](https://velog.io/@naamoonoo/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%94%B0%EB%9D%BC%ED%95%98%EB%A0%A4%EB%8B%A4-%EB%B0%94%EC%A7%93%EA%B0%80%EB%9E%91%EC%9D%B4- %EC%B0%A2%EC%96%B4%EC%A7%84-%EC%9D%B4%EC%95%BC%EA%B8%B0-2%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0) naamoonoo, pigrabbit, who perfected Elastic Search over the weekend, dnacu, who was literally god in React, younho9, who implemented SPA structure and singleton pattern in JS, 0407chan, who systematically implemented data access strategy, Jenny, who finished the design structure overnight, etc... There was so much to learn that I can't even begin to write it all down here...
π¬ Miscellaneous and Conclusionβ
- This was my first experience with deep collaboration using Git and GitHub. As a solo developer, I don't often utilize git's
branch
andcheckout
features. I think GSPH<3 was a great introduction to Git collaboration. - I really liked the in-between lectures. In the talks held every Wednesday, I saw interesting things about the development and operation of Woowa Service, especially Lecture by Developer Kim Min-tae.
- It was great to be able to experience company life indirectly. I can't believe I can experience corporate life at 19!
- The older siblings were very understanding. I could feel that they cared about me. We had a lot of recreational activities in between, but it was a shame that the recreational activities were reduced due to COVID-19.
- It was a really valuable experience and I learned a lot of new things. I'm disappointed I didn't get to go deeper if I had a better foundation. But, on the other hand, it's a great asset for my future journey.
- Of course, I won't be perfect right away. I've been feeling the gap between my ideals and reality lately. Still, if we set our compass to our ideal destination, we will reach it one day π§.
π More resources
Woowa brother's official materials
July Recap
- (Woowa TechCamp 3rd) At the midpint of the Camp
- 2020 Woowa TechCamp (3rd) July Recap
- [Woowa TechCamp 3] 2nd PairProgramming End & Recap π
- The basics were important
- I'm a Steamed-Developer (Woowa TechCamp 3rd Week 4 Recap)
- 3 Reasons Why You Should Try Woowa TechCamp
- Second Project - Todo List Developer
- Growing up with Woowa TechCamp
- Retrospective on coming to Woowa TechCamp and the last four weeks
- What makes a good coworker?
- [Junior developer's 'skills that I don't have, and should have'](https://velog. io/@tnk2u/%EC%A3%BC%EB%8B%88%EC%96%B4-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EC%83%9D%EA%B0%81%ED%95%98%EB%8A%94-%EC%84%B1%EC%88%99%ED%95%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90)
August Recap.
Tech-related
- Woowa TechCamp 3rd Study Blog
- GitHub Organization Auth for CI
- Context API, LifeCycle API, Component Docs, Component, Design Pattern, Redux
- Getting started to import...
- Git Shortcuts
- Github Actions + CodeDeploy + EC2 Auto Deploy
- Image Lazy Loading
- Iterm
- React Application Architecture - No one told me, so I shoveled it myself
- TIL_20200715
- TIL_20200802
- TIL_20200816
- TIL_20200817
- TIL_20200824
- Let's be more productive in VS Code
- Applying alias IntelliSense in VSCode
- Creating a Calendar with VanilaJS
- Creating a boilerplate with Webpack - 1 (webpack, babel setup)
- [NPM] semantic versioning
- cookie parser
- express.json() vs express.urlencoded()
- webpack + express project deployment with Heroku MySQL (Heroku mysqlμ°λνΈ)
- create a todo list with mouse event only (feat. event delegation)
- Implementing drag and drop with mouse event
- woowahan-ORM A very light promise-based Node.js ORM for MySQL
- Technical Interview Preparation
- Tech Doc: GraphQL
- Drag and Drop Animation
- It's so hard to replicate React
- How does React work - Diffing
- Drag & Drop implementer using mouse events
- Improving the Category (somewhat?)
- Goodbye, Passport
- How did the motorcycle fly?
- Custom Elements
- Coupang Category Menu Awkward Improvement(?) Review
- Deploying to the project GitHub page
- Front-end Dev Setup
Image Source
- Dunning Kruger Effect
- Miranda (sitcom)
- MBC Infinite Challenge
- StarCraft II: Legacy of the Void Opening Cinematic