01 · 공부를 시작한 이유써본 이름인데, 설명하려니 막혔어요

안녕하세요, 레드예요. 동아리에서 이것저것 만들다 보면, 아이코에게 “이런 화면 만들어줘”라고 부탁할 때가 있어요. 나온 화면을 보고 “이 버튼은 좀 더 크게”, “여기엔 사진도 넣자” 하면서 고쳐보는 거죠. 이렇게 AI와 대화하며 코드를 만들어가는 걸 ‘바이브 코딩’이라고 부르더라고요.

화면이 나오면 신나는데, 설명을 읽을 때는 자꾸 멈추게 됐어요. JavaScript(자바스크립트), Node.js(노드제이에스)…. 여러 번 봤으니까 아는 줄 알았거든요. 그런데 각각 무슨 일을 하는지 설명하려니 말문이 막혔어요.

키라리

질문 하나 했는데, 모르는 단어가 세 개 늘었어.

네아도 노트를 펴며 고개를 끄덕였어요. “저도 이름만 보고는 헷갈려요. 어떤 일을 하는지 나눠 적어볼까요?” 그래서 우리 넷이 하나씩 찾아보고, 알게 된 내용을 짧은 영상으로 정리해보기로 했어요. 아이코의 설명을 알아듣고, 내가 원하는 것도 더 잘 설명해보고 싶었거든요.

03 · 코딩에서는 어떤 뜻일까?쓰는 말, 실행하는 환경, 화면을 만드는 도구

① JavaScript는 코드를 쓰는 언어예요

컴퓨터가 할 일을 적으려면 정해진 문법을 따라야 해요. 그런 문법을 갖춘 프로그래밍 언어 중 하나가 JavaScript예요. 아래는 30과 20을 더한 결과를 출력하는 JavaScript 코드예요.

console.log(30 + 20);

② Node.js는 JavaScript를 실행하는 환경이에요

코드를 파일에 적어두기만 해서는 계산이 실행되지 않아요. Node.js는 그 JavaScript 코드를 실행할 수 있는 프로그램이에요. 이런 실행 환경을 런타임이라고 불러요.

만화에서는 코드를 index.js라는 파일에 저장하고 Node.js로 실행했어요. 그래서 글자 출력 창에 50이 나온 거예요. 지금은 명령어를 외우기보다 ‘적는 것과 실행하는 것은 다르다’는 점을 봐주세요.

레드

같은 종류의 이름인 줄 알았는데, 하는 일이 달랐네.

③ React는 화면 만들기를 돕는 라이브러리예요

‘플레이 노트’의 게임 목록을 봐요. 각 항목에 그림, 게임 이름, 클리어 여부가 반복해서 들어가죠. 이것들을 묶어 한 번 만들고, 게임 정보만 바꿔 여러 번 쓸 수 있으면 편하겠어요.

이처럼 나누어 만든 화면의 한 부분을 컴포넌트라고 해요. React는 컴포넌트를 만들고 조합하도록 돕는 라이브러리예요. 라이브러리는 프로그램을 만들 때 가져다 쓰는 코드와 도구 모음이라고 생각하면 돼요.

React가 이런 게임 목록을 완제품으로 주는 것은 아니에요. 어떤 정보를 보여주고 어떤 버튼을 둘지는 우리가 정해서 만들어야 해요.

④ Next.js는 웹앱 구성을 돕는 프레임워크예요

게임 목록 하나를 만들고 나니 ‘내 기록’ 페이지도 필요해졌어요. 목록과 내 기록을 서로 다른 주소로 열고, 페이지 사이를 이동하려면 앱 전체의 구성을 잡아야 해요.

Next.js는 React를 바탕으로 웹앱을 만드는 프레임워크예요. 앱의 기본 구조와 공통 기능을 제공하는 틀이라고 보면 돼요. 여러 페이지를 구성하고 주소에 맞는 화면을 보여주는 일 등을 도와줘요. 웹앱은 브라우저에서 사용하는 프로그램이에요.

네아

게임 항목을 만드는 일과, 여러 페이지를 구성하는 일을 나눠보니 이해돼요.

틀을 사용해도 ‘내 기록에 무엇을 저장할지’ 같은 기능은 직접 정하고 구현해야 해요.

서로 다른 역할의 예시예요. 모든 프로그램에 이 네 가지를 반드시 함께 써야 하는 것은 아니에요.