프론트엔드의 기초: 변수, 함수, 그리고 모듈

자바스크립트의 기억 장치: 변수 (Variables)

애플리케이션은 끊임없이 데이터를 다룹니다. 사용자의 이름, 장바구니에 담긴 상품의 개수, 로그인 상태 등 무수한 정보가 화면 뒤에서 흐르고 있습니다. 이러한 데이터를 임시로 저장해두는 공간을 변수(Variable)라고 부릅니다. 쉽게 말해 이름표가 붙은 상자라고 생각하면 됩니다.

데이터를 담는 그릇, 변수란?

AI가 작성한 코드를 보면 수많은 변수들이 등장합니다. 변수는 단순히 값을 저장하는 것을 넘어, 코드의 가독성을 높이고 데이터를 재사용할 수 있게 해줍니다. 예를 들어, 웹사이트에 접속한 사용자의 이름을 화면 여러 곳에 표시해야 한다고 가정해 봅시다. 사용자의 이름이 길고 복잡하다면 매번 이름을 직접 입력하는 것은 비효율적입니다. 대신 `userName`이라는 상자(변수)에 이름을 한 번만 넣어두고, 필요할 때마다 그 상자를 열어보는 방식이 훨씬 합리적입니다.

변수를 만들 때는 그 상자에 어떤 종류의 값을 담을지, 그리고 그 값이 나중에 바뀔 수 있는지를 결정해야 합니다. 자바스크립트에서는 변수를 선언할 때 주로 두 가지 키워드를 사용합니다. 바로 `let`과 `const`입니다. 이 둘의 차이를 명확히 아는 것은 매우 중요합니다.

let과 const의 올바른 사용법

과거에는 `var`라는 키워드를 사용하여 변수를 선언했지만, 예상치 못한 버그를 유발하는 경우가 많아 현대의 프론트엔드 개발에서는 거의 사용하지 않습니다. 대신 값이 변할 수 있는 변수에는 `let`을, 한 번 정해지면 절대 변하지 않는 변수에는 `const`를 사용합니다.

AI가 만들어준 코드에서 변수가 어떻게 선언되어 있는지 주의 깊게 살펴보세요. 만약 사용자 정보나 설정값처럼 프로그램이 실행되는 동안 바뀌지 않아야 할 데이터가 `let`으로 선언되어 있다면, 이는 잠재적인 오류의 원인이 될 수 있습니다. 반대로 점수나 타이머처럼 계속해서 변해야 하는 값은 반드시 `let`으로 선언해야 합니다.

반복을 줄여주는 마법의 상자: 함수 (Functions)

변수가 데이터를 담는 상자라면, 함수(Function)는 특정한 동작을 수행하는 '마법의 상자' 또는 '공장'과 같습니다. 재료를 넣으면 미리 정해진 과정을 거쳐 새로운 결과물을 만들어내는 역할을 합니다.

함수가 필요한 이유와 역할

코딩을 하다 보면 똑같은 작업을 여러 번 반복해야 하는 경우가 자주 발생합니다. 예를 들어, 쇼핑몰에서 상품 가격에 할인율을 적용하여 최종 가격을 계산하는 로직을 생각해 봅시다. 상품이 100개라면 이 계산 로직을 100번 작성해야 할까요? 전혀 그렇지 않습니다.

우리는 '할인 가격 계산기'라는 함수를 하나만 만들어두면 됩니다. 그리고 계산이 필요할 때마다 이 함수에 원래 가격과 할인율만 전달하면, 함수가 알아서 계산된 최종 가격을 돌려줍니다. 이렇게 코드를 한 곳에 모아두고 필요할 때마다 불러다 쓰는 것(재사용성)이 함수를 사용하는 가장 큰 이유입니다. AI는 보통 이런 함수들을 잘 만들어내지만, 가끔 너무 크고 복잡한 함수를 통째로 생성하기도 합니다. 이럴 때는 AI에게 "이 함수를 더 작고 단순한 여러 개의 함수로 쪼개줘"라고 요청하는 것이 좋은 바이브 코딩의 팁입니다.

화살표 함수의 등장

현대의 자바스크립트 코드(React와 Next.js 포함)에서는 전통적인 `function` 키워드보다 화살표(`=>`)를 사용한 화살표 함수(Arrow Function)를 더 자주 보게 될 것입니다. 화살표 함수는 코드를 더 간결하게 만들어주는 최신 문법입니다. AI가 생성한 컴포넌트 코드의 대부분이 이 화살표 함수 형태로 작성되어 있으므로, 이 형태에 익숙해지는 것이 중요합니다. 화살표 모양 자체에 특별한 마법이 있는 것은 아니며, 단지 함수를 정의하는 더 짧고 세련된 방식일 뿐입니다.

코드를 나누고 연결하기: 모듈 (Modules)

애플리케이션의 규모가 커지면 모든 코드를 하나의 파일에 담을 수 없게 됩니다. 수천, 수만 줄의 코드가 한 파일에 섞여 있으면 원하는 부분을 찾기도 어렵고, 오류가 발생했을 때 원인을 파악하기도 매우 힘들어집니다.

파일 간의 연결고리, 모듈 시스템

이를 해결하기 위해 우리는 코드를 의미 있는 단위로 쪼개서 여러 개의 파일로 나누어 관리합니다. 이렇게 독립된 파일 하나하나를 모듈(Module)이라고 부릅니다. 프론트엔드 프로젝트를 열어보면 `components`, `utils`, `hooks` 등 다양한 폴더 안에 수많은 파일들이 나뉘어 있는 것을 볼 수 있는데, 이것이 바로 모듈화의 결과입니다.

모듈 시스템을 사용하면 각 파일이 독립적인 공간을 가지게 되므로, 서로 다른 파일에서 같은 이름의 변수나 함수를 만들어도 충돌하지 않는다는 강력한 장점이 있습니다.

import와 export의 이해

파일을 여러 개로 나누었다면, 이제 이 파일들을 서로 연결해 주어야 합니다. A 파일에서 만든 함수를 B 파일에서 가져다 쓰려면 어떻게 해야 할까요? 이때 사용하는 것이 바로 `export`(내보내기)와 `import`(가져오기) 키워드입니다.

• `export`: 내가 만든 변수나 함수를 다른 파일에서 쓸 수 있도록 허락(수출)하는 명령어입니다. 파일의 맨 아래나 함수 선언 앞에 위치합니다.
• `import`: 다른 파일에서 `export`된 코드를 내 파일로 가져오는(수입) 명령어입니다. 보통 파일의 맨 윗부분에 모여 있습니다.

AI가 만들어준 Next.js 페이지 코드를 보면 가장 상단에 수많은 `import` 구문들이 줄지어 있는 것을 볼 수 있습니다. 이는 "이 화면을 그리기 위해 저기 있는 버튼 컴포넌트와, 저기 있는 데이터 가져오기 함수들을 모두 수입해 올게"라고 선언하는 것과 같습니다.

만약 코드를 실행했는데 "Module not found" 또는 "Cannot find module"이라는 에러가 발생한다면, 십중팔구 `import` 하는 파일의 경로가 잘못되었거나 오타가 난 경우입니다. 이런 에러 메시지를 보더라도 당황하지 말고 상단의 `import` 구문들을 꼼꼼히 확인해 보세요.