Snackgirls Coding Notes · 01
We’ve tried vibe coding.
But what was Node.js again?
A small helping of basics with Red, Nea, Kirari, and AIKO.
Let’s learn four coding terms through a game journal website.
01 · Why we started studyingFamiliar names, but hard to explain
Hi, it’s Red. When we make things in the club, we sometimes ask AIKO to build a screen. Then we look at it and say, “Make that button bigger,” or “Let’s put a photo here.” Building code by talking with AI like this is often called vibe coding.
Seeing a screen appear is exciting, but I keep getting stuck when I read the explanation. JavaScript, Node.js… I thought I knew them because I’d seen the names so often. But when I tried to explain what each one did, I couldn’t.
I asked one question and got three new words I don’t know.
Nea opened her notebook and nodded. “The names confuse me too. Shall we write down what each one does?” So the four of us decided to look them up, one at a time, and turn what we learned into short videos. I wanted to understand AIKO’s explanations and explain my own ideas more clearly too.
New here? Start with these two words
Code is a set of instructions written according to specific rules. Running code means having the computer carry out those instructions.
Today, we’ll start with the difference between the language we write in and the environment that runs the code. Then we’ll meet a few tools for building screens and apps.
02 · Think through a real screenWhat if we made a game journal website?
“I wish I had somewhere to note which games I played and how far I got.” Kirari’s comment gave us an idea for a small website: Play Notes, a place for a game list and short notes. The games and screens here are fictional examples to help explain the concepts.
Instead of starting with the whole site, we looked at code that adds two play sessions: 30 minutes plus 20 minutes makes 50 minutes. Even for this simple calculation, the language we write in and the program that runs it have different jobs.
Running this calculation does not automatically create the web screen in the last panel. Its appearance and behavior need their own code.
03 · What do these terms mean?A language, a runtime, and tools for building screens
① JavaScript is a language for writing code
To tell a computer what to do, we follow a defined syntax. JavaScript is one programming language with such rules. The code below adds 30 and 20 and prints the result.
console.log(30 + 20);Running it prints the number 50. In this example, we interpret that as 50 minutes of play time. The code does not automatically add the word “minutes.”
② Node.js is an environment for running JavaScript
Writing code in a file does not run the calculation. Node.js is a program that can run that JavaScript code. An environment that runs code is called a runtime.
In the comic, the code is saved in a file called index.js and run with Node.js. That is why 50 appears in the text output window. You don’t need to memorize the command yet; notice that writing code and running it are separate steps.
Write the code in JavaScript.
Run it with Node.js.
I thought they were the same kind of thing. They have different jobs!
Can JavaScript run without opening a web page?
A browser, such as Chrome or Edge, is a program for opening web pages. Browsers also have a way to run JavaScript.
Node.js lets you run JavaScript on your computer without opening a web page. It can run on a server too. It does not build a web screen or a game for you automatically.
③ React is a library that helps you build user interfaces
Look at the game list in Play Notes. Each entry repeats the same pieces: an image, a game name, and whether it has been cleared. It would be useful to build that group once and reuse it with different game information.
A part of a user interface built as a unit like this is called a component. React is a library that helps you create and combine components. Think of a library as a collection of code and tools you can use when building a program.
React does not hand you this game list as a finished product. We still decide which information and buttons to include, and build them.
④ Next.js is a framework for organizing web apps
Once we had a game list, we wanted a My Notes page too. To give the list and notes separate addresses and let people move between them, we need to organize the app as a whole.
Next.js is a framework for building web apps with React. It provides a basic structure and common features, helping you organize pages and show the right screen for an address. A web app is a program you use in a browser.
Separating the game entry from the way the pages fit together makes it easier to understand.
Even with a framework, we still decide and implement features such as what to save in My Notes.
Language
JavaScript
Runtime
Node.js
Library
React
Framework
Next.js
These are examples of different roles. You do not have to use all four together in every program.
How are JavaScript and Node.js different?
Let’s watch our first video. It explains the same concepts through making a game.
Language, runtime, tools, and framework.
See where each role appears.
The video also mentions Python, another language for writing code. A Python interpreter is a program that runs Python code. Here too, separate the language from the program that runs it.
Watch Episode 1 on Snackgirls YouTube ↗
Original video · Korean audio.
The next time we meet an unfamiliar tool
Today we looked at roles before names. We write JavaScript and run it with Node.js. React helps us build UI components, and Next.js helps us organize a web app.
Next time I see an unfamiliar name, I’ll ask what the tool actually does first.
I wrote “What job does this do?” in my notebook too. When I get stuck reading AIKO’s explanation, that is where I’ll start.
Small exercises · 3 questions
Tell the four names apart
Think back to writing and running the code, and to the game list. Try these three questions before opening the sample answers.
1. Match the labels
Match JavaScript and Node.js with “a language for writing code” and “an environment for running code.”
Show a sample answer
JavaScript is a language. Node.js is an environment for running JavaScript.
2. Predict the output
What number will the comic’s console.log(30 + 20); print? Think of adding a 30-minute session and a 20-minute session.
Show a sample answer
50. The code prints the number 50; in this example, we interpret it as 50 minutes in total.
3. Find what repeats on the screen
Look at the two game entries in the last panel. What do they have in common? What would you group into a reusable React component?
Show a sample answer
For example, group the game image, name, and clear status into one entry. You can reuse the structure with different game information.
Comments
0No login needed. Edit or delete your comment from the same browser.
All comments 0
한국어 · English · 日本語No comments yet. Start the conversation.