프로젝트에서 보기 →

자바스크립트 기초 입문 강의 30분 완성

태그
교육 javascript 자바스크립트 자바스크립트 기초
시작일
종료일
수정일

https://www.youtube.com/watch?v=E-PzX2mKGUQ

1. 이건 꼭 알아야 한다[^1]

[? 질문] 자바스크립트는 무엇이며, 왜 배우는가[^2]
[= 답] 자바스크립트는 웹에서 **동작(움직임)**과 **논리(규칙/흐름)**를 담당하는 프로그래밍 언어이며, 프론트엔드뿐 아니라 Node.js를 통한 백엔드에서도 사용된다.[^2][^3]

[? 질문] 자바스크립트를 (포함해) 어떤 프로그래밍 언어든 ‘기초’로 무엇을 먼저 잡아야 하는가[^4]
[= 답] 강의는 언어가 달라도 공통적으로 통하는 핵심 뼈대로 변수, 함수, 조건문, 반복문 4가지를 제시하며, 이것만 이해하면 기본 프로그램은 만들 수 있다고 말한다.[^4][^5]

[? 질문] 자바(Java)와 자바스크립트(JavaScript)는 같은 언어인가[^6]
[= 답] 이름이 비슷해 헷갈리지만 완전히 다른 언어이며, “햄 vs 햄스터”, “인도 vs 인도네시아”처럼 ‘이름 일부가 같아도 전혀 다른 대상’이라는 비유로 구분한다.[^6][^7][^8]

2. 큰 그림[^9]

이 콘텐츠는 ‘자바스크립트 기초를 30분 내로 끝내는’ 입문 강의로, 웹 개발 맥락에서 자바스크립트의 역할을 짚은 뒤, 크롬 개발자도구 콘솔을 실습 환경으로 삼아 변수 → 함수 → 조건문 → 반복문 순으로 문법과 개념을 실제 코드로 확인하도록 구성되어 있다.[^9][^10][^11]

  • 자바스크립트는 **HTML/CSS(모양)**와 달리 논리 설계를 담당하며, “클릭하면 팝업을 열어라” 같은 동작 규칙을 코드로 만든다.[^12][^13]
  • 프로그래밍 언어 학습의 공통 핵심으로 변수/함수/조건문/반복문을 제시하고, 이를 자바스크립트 문법으로 구현해보며 감각을 잡게 한다.[^4][^5]
  • 자바스크립트는 문법이 **유연(널널)**해 “세미콜론을 안 찍어도 된다”, “숫자+문자도 알아서 처리한다” 같은 특징이 있지만, 그 유연함 때문에 **특이하고 헷갈리는 동작(밈으로 유명한 사례들)**도 존재한다고 경고한다.[^14][^15][^16]

3. 하나씩 살펴보기[^17]

3.1 도입: ‘물속 코딩’ 농담, 그리고 “자바 ≠ 자바스크립트” 구분하기[^17]

📸 0:00

강의는 “자바스크립트를 코드할 때 물속에서 코딩하는 게 꿀팁”이라는 농담으로 시작한다.[^17] 이어서 “다른 사람이 우는 걸 못 보기 때문에”라는 말로, 자바스크립트가 종종 사람을 울릴 정도로(?) 헷갈릴 수 있다는 밈을 깔고 들어간다.[^18]

곧바로 입문자가 가장 흔히 하는 오해로 자바(Java)와 자바스크립트(JavaScript)를 같은 것으로 착각하는 문제를 짚는다.[^6] 강사는 이를 “완전히 다른 언어”라고 단언한다.[^6]

이 차이를 직관적으로 각인시키기 위해 비유를 연속으로 제시한다.

  • 햄과 햄스터: 둘 다 ‘햄’이 들어가지만 전혀 다른 존재라는 비유로, 이름의 일부가 같다고 같은 범주로 보면 안 된다고 말한다.[^7]
  • “자바 안에 자바스크립트가 있는 줄 알았다”는 식의 착각을 하는 사람도 있다고 언급하며, 이름 유사성이 낳는 오해를 짚는다.[^19]
  • 인도와 인도네시아: 둘 다 ‘인도’가 들어가지만, 지도에서 위치도 다르고 국기도 다르고 대통령/국민도 다르듯 완전히 다른 나라라는 비유로 “자바 vs 자바스크립트”를 재차 강조한다.[^8][^20]

[!NOTE] 비유의 의도
강의는 기술적 비교(문법/역사/런타임 차이)를 길게 설명하기보다, 입문 단계에서 가장 먼저 필요한 “같은 게 아니다”를 빠르게 교정하기 위해 생활 비유를 사용한다.[^6][^8]

3.2 자바스크립트를 배우면 좋은 점: 프론트엔드 + Node.js 백엔드까지[^21]

📸 0:47

강의는 “자바스크립트를 배우면 뭐가 좋냐”를 먼저 말하겠다고 하며, 학습 동기를 제공한다.[^21]

  • 오늘 다루는 범위는 웹의 프론트엔드에서 사용하는 자바스크립트를 중심으로 한다고 말한다.[^21]
  • 다만 자바스크립트가 프론트엔드에만 쓰이는 것이 아니라, 이후(4~5주차에) Node.js를 배우면 백엔드를 만드는 데도 자바스크립트를 사용하게 된다고 안내한다.[^22]
  • 자바스크립트는 “어떤 움직임을 담당하거나”, “논리적인 설계가 가능”하다고 정리한다.[^23]

여기서 HTML/CSS와의 성격 차이를 비교한다.

  • HTML/CSS는 사람의 “모양, 색깔”을 표현하는 **마크업(표현 중심)**에 가깝다.[^12]
  • 반면 자바스크립트는 “논리 설계 가능”하며, “이거면 이거 해라 / 클릭하면 팝업창 열려라” 같은 규칙과 동작을 지시할 수 있어, 이 지점부터 “프로그래밍 언어”라고 할 수 있다고 말한다.[^13][^24]

3.3 오늘의 학습 프레임: 변수·함수·조건문·반복문 4가지만 잡으면 된다[^4]

📸 2:34

강사는 프로그래밍 언어를 배울 때 “이 4가지만 알면 나머지 개념은 따라온다”는 관점을 제시한다.[^4] 이는 자바스크립트뿐 아니라 파이썬, C 등 다른 언어에도 적용되는 ‘기초 뼈대’라고 말한다.[^4][^5]

  • 다룰 4가지: 변수, 함수, 조건문, 반복문[^5]
  • 학습 목표: 자바스크립트에서 이 4가지를 어떻게 쓰는지 배우고, “실제로 웹 프론트 개발에 적용”해보는 것.[^5]

또한 이미 다른 언어(예: 파이썬)를 배운 사람이라면 자바스크립트가 크게 다르지 않아서 더 쉽게 느낄 수 있다고 말한다.[^25] “프로그래밍 언어를 한 번 배웠으면 다른 언어 배우기가 너무 쉽다”는 주장과 함께, 언어 간 유사성을 ‘사투리’ 비유로 설명한다.[^26]

  • 서울말을 잘하면 부산 사투리를 들어도 대략 통하듯, 한 언어(예: 파이썬)를 해봤다면 다른 언어(예: 자바스크립트)도 큰 틀에서 비슷하다는 것.[^26]
  • 다만 한국어와 영어처럼 완전히 다른 급의 차이가 아니라, “서울말과 부산말 차이 정도”라고 표현한다.[^27]

3.4 변수(Variable): “값을 담는 상자”, 콘솔에서 바로 실습하기[^28]

📸 3:44

3.4.1 변수의 핵심 개념: 상자에 값을 담는다[^28]

변수는 “상자 안에 값을 담는 개념”이라고 설명한다.[^28] 파이썬을 해본 사람에게 익숙할 것이라고 덧붙인다.[^29]

3.4.2 실습 환경: 크롬 개발자도구 콘솔(Chrome DevTools Console)[^30]

강사는 크롬 브라우저가 자바스크립트 연습에 좋다고 말하며, 다음 흐름으로 콘솔을 소개한다.[^30]

  1. 웹페이지에서 우클릭 → **검사(Inspect)**를 누르면 개발자도구가 열린다.[^30]
  2. 그 안의 Console 메뉴로 들어가면 입력 커서가 깜빡이는 창이 있고, 여기에 자바스크립트 코드를 입력할 수 있다.[^31]
  3. 웹은 기본적으로 자바스크립트를 기반으로 돌아가므로 브라우저 안에 실행 환경이 있으며, 콘솔에 코드를 입력하면 브라우저가 읽고 실행해준다.[^31][^32]
  4. 나중에 Node.js 같은 별도 실행 환경을 설치하겠지만, “지금 단계에서 문법 연습”은 콘솔만으로 충분하다고 말한다.[^33]

또한 콘솔은 REPL처럼 “입력하고 결과가 나오고”가 반복되는 방식이라고 설명한다.[^34]

3.4.3 var / let / const 그리고 “외우지 말라”는 학습 조언[^35]

자바스크립트 변수 선언 방식으로 var, let, const가 있다고 말하지만, 초반에는 “굳이 외울 필요 없다”고 선을 긋는다.[^35][^36] 파이썬에서 a = 1 하듯이 “그렇게 해도 된다”는 식으로 접근한다.[^36]

여기서 자바스크립트의 특징으로 **자율도(유연함)**를 강조한다.

  • “조금 이상하게 하더라도 자바스크립트가 알아서 해석해서 바꿔서 정상 동작하는 경우가 많다”고 말한다.[^37]

다만 이후 개념 차이를 최소한으로는 보여준다.

  • var/let은 값을 다시 할당(변경)할 수 있다: a = 1 이후 a = 2로 바꾸면 값이 2가 된다.[^38]
  • const는 한 번 정하면 바꾸려 하면 오류가 난다: “이미 설정되어 있는데 바꾸려고 한다”는 식으로 오류가 발생하며, “바뀔 수 없도록” 만드는 선언이라고 설명한다.[^39][^40]
  • 변수가 자주 바뀌면 기존 코드에 영향이 갈 수 있어서 const 같은 개념이 생겼다는 취지를 말한다.[^40]

그리고 입문자에게는 세 가지를 다 완벽히 구분하려고 하기보다 “그냥 a는 이걸로 기억”하는 식으로 부담을 줄이며, 보통 표준적으로는 let을 많이 붙인다고 안내한다.[^41][^42]

[!TIP] 초보 단계 학습 전략: “필요할 때 이해가 박힌다”
강사는 var/let/const 차이, 호이스팅 같은 개념은 겪어봐야 중요성이 와닿는다고 말한다.[^43] “면접 보려면 답해야 하니까 배우는 것”이지, 초보 시절에는 이것 때문에 문제가 생길 일이 거의 없다고도 한다.[^44] 문제가 생겼을 때 “왜 문제지?” 찾다가 “호이스팅 때문이구나” 하고 그때 확 남는다는 경험 기반 조언을 제공한다.[^45]

3.4.4 등호(=)의 의미: ‘같다’가 아니라 ‘대입’이다 / 비교는 ==[^46]

강의는 a = 1을 예로 들며 등호의 핵심을 강조한다.[^34][^46]

  • 프로그래밍에서 =는 “오른쪽에 있는 걸 왼쪽 상자에 넣는다”는 뜻이다.[^46]
  • 수학의 등호처럼 “같다”가 아니며, “같다” 비교는 ==처럼 등호가 두 개여야 한다고 설명한다.[^47]
  • 예: a == 1이면 true, a == 2이면 false처럼 결과가 바뀐다고 말한다.[^47]

또한 대입을 다시 하면 값이 바뀐다는 점을 콘솔 결과로 확인한다.

  • a = 2로 대입하면, 이후 a를 출력했을 때 2가 나온다.[^48]

3.5 함수(Function): 수학적 모델에서 ‘코드 묶음/마법’ 모델로 확장하기[^49]

📸 8:31

3.5.1 함수의 출발점: 수학의 입력-처리-출력[^49]

강의는 함수 개념을 수학의 “인풋 → 펑션 → 아웃풋” 도식으로 시작한다.[^49] 예로 f(x) = x + 3을 들고, x에 1을 넣으면 1이 들어가 계산되어 결과가 나온다는 방식으로 설명한다.[^50]

3.5.2 자바스크립트에서 함수 정의/사용 기본 형태(function 키워드)[^51]

자바스크립트에서는 “먼저 함수를 정의하고 다음에 사용”한다고 안내한다.[^51] 전통적인 정의 방식은 다음 구성이라고 설명한다.

  • function 키워드로 “이건 함수다”라고 선언[^52]
  • 함수 이름 지정(예: myFunction)[^52]
  • 괄호 안에 매개변수(수학의 x에 해당) 지정[^52]
  • 중괄호 안에 처리 로직 작성(예: temp = x + 3) 후 return temp로 결과 반환[^53]

그리고 위의 수학 예시처럼 myFunction(1)을 호출하면 계산되어 결과가 나온다는 흐름으로 연결한다.[^54]

또한 인자를 2개 받는 함수도 가능하다고 하며, f(x, y) = x + y 예시를 든다.[^55] 자바스크립트 코드에서도 add(x, y) 형태로 받아서 x + y를 반환하면 add(1, 2) = 3이 된다고 설명한다.[^56]

3.5.3 프로그래밍 함수는 입력/출력이 없을 수도 있다[^57]

강의는 수학과 달리 프로그래밍에서는 “입력과 출력이 없을 수 있다”고 강조한다.[^57] 자세히 들어가면 유형이 더 나뉘지만, 길어질 수 있으니 “입력도 없고 출력도 없는 경우”를 대표로 보여주겠다고 한다.[^58]

예시로 fly() 같은 함수를 들며:

  • 매개변수가 없고(입력이 없음)[^59]
  • return도 없지만(출력이 없음)[^60]
  • 그래도 함수는 동작하며, 실제 프로그래밍에서 이런 형태가 많이 쓰인다고 말한다.[^61]

이 대목에서 함수 이름/변수 이름(temp, add, myFunction)은 임의로 정한 것이고, 자유롭게 지어도 되지만 기능과 맞게 지어야 헷갈리지 않는다고 조언한다.[^62][^63]

[!IMPORTANT] 함수의 본질 재정의
강사는 “입력/출력이 함수의 핵심이 아니라”, 프로그래밍에서 함수는 “코드를 묶어주는 역할”로 이해해도 좋다고 말한다.[^64]

3.5.4 ‘마법’ 비유로 함수 이해하기: 윙가디움 레비오사[^65]

수학 함수 모델이 어렵게 느껴질 수 있으니, 함수를 “마법”에 비유한다.[^65]

  • “윙가디움 레비오사” 같은 마법 주문 한 줄을 외우면 물체가 떠오르는데, 그 주문 내부에는 실제로는 “대상을 선택한다 / 중력을 없앤다 / 떠오르게 한다” 같은 복잡한 단계가 들어 있을 것이라는 설명이다.[^66]
  • 즉 함수 이름 한 줄 호출은 내부의 복잡한 코드를 감추고, 사용자는 ‘주문’만 실행하면 된다는 관점이다.[^67]
  • 이를 통해 함수를 “어떤 마법이 행해지는 코드의 묶음”으로 이해하면 큰 틀에서 이해한 것이라고 정리한다.[^68]

3.5.5 콘솔 실습: add 함수 만들기, 세미콜론, shift+enter 입력 팁[^69]

강의는 콘솔을 비우기 위해 x 표시를 누르면 청소가 된다고 말하며 실습을 시작한다.[^69]

실습 단계는 다음 순서로 진행된다.

  1. 함수 정의는 function 키워드로 시작하고, 이름을 add로 짓는다.[^70]
  2. 매개변수로 x, y를 넣고 중괄호를 연다.[^70]
  3. 콘솔에서 줄바꿈을 하려면 Shift+Enter를 누르면 그대로 내려간다고 팁을 준다.[^71]
  4. let temp = x + y; 형태로 임시 변수 temp에 결과를 저장한다.[^72]
  5. 코드 줄 끝의 **세미콜론(;)**은 있어도 되고 없어도 되지만, 뒤에 코드를 더 쓸 때 줄 경계를 분명히 하므로 “보통 찍어주는 게 일반적”이라고 설명한다.[^14][^73]
  6. return temp로 결과를 반환하고, 엔터를 치면 함수 정의가 완료되어 “언제든지 쓸 준비”가 된다고 말한다.[^74]

이후 호출 실습:

  • add(1, 3)을 실행하면 x=1, y=3으로 들어가 계산되어 temp=4, return으로 4가 나온다는 흐름을 확인한다.[^75]

3.5.6 화살표 함수(Arrow Function) 언급: 더 간단한 함수 표기[^76]

질문(채팅)에서 화살표 함수를 언급하자, 강사는 “함수를 정리하는 또 다른 방법”이라고 소개한다.[^76]

  • 전통적인 function 방식과 동일한 기능을, add = (x, y) => { ... } 같은 형태로 쓸 수 있다고 말한다.[^77]
  • 이렇게 하면 function 키워드를 안 써도 되어 “더 간단”하다고 설명한다.[^78]
  • 나아가 익명 함수로 함수 이름을 정하지 않고도 정의할 수 있고, 전체를 괄호로 감싸 “바로 실행”하는 형태도 가능하다고 보여준다.[^79]

3.6 콘솔에서의 수정 한계: 이미 실행된 코드는 ‘덮어쓰기’로 대응[^80]

📸 16:27

강의는 크롬 콘솔로 실습할 때의 불편함도 짚는다.[^80]

  • 콘솔은 “이미 실행이 된” 기록이기 때문에, 기존 코드를 ‘그 자리에서 수정’하기가 어렵다고 말한다.[^81]
  • 대신 같은 변수/함수명을 다시 선언하거나 값을 다시 대입하는 식으로 덮어써야 한다고 안내한다.[^82]
  • 이전에 입력한 코드를 다시 불러오려면 키보드 위 방향키를 누르면 이전 코드가 나온다고 팁을 준다.[^83]

3.7 조건문(If): “돈이 5,000원 이상이면 택시”를 코드로 바꾸기[^84]

📸 16:57

3.7.1 조건문이 필요한 상황 설정과 순서도 사고[^84]

조건문을 설명하기 위해 일상 예시를 든다.

  • “돈이 5,000원 이상 있으면 택시를 탄다”는 상황을 가정한다.[^84]
  • 이를 순서도로 표현하면: 시작 → “돈이 5천 이상인가?”를 검사 → 참이면 “택시를 탄다”, 거짓이면 “그냥 지나간다”의 흐름이라고 설명한다.[^85]

3.7.2 자바스크립트 if 문 기본 구조: if(조건){ 실행 }[^86]

프로그래밍 표현은 다음과 같다고 말한다.

  • if (money >= 5000) { rideTaxi(); } 처럼, if 뒤 괄호에 조건식을 쓰고 중괄호 안에 조건이 참일 때 실행할 코드를 넣는다.[^86][^87]

3.7.3 else if / else로 확장: 한 번 더 검사하고, 아니면 다른 실행[^88]

조건이 하나 더 필요하면 else if로 “또 조건을 검사”할 수 있고, 마지막에는 else로 “그 외에는 이것을 실행”하게 만들 수 있다고 설명한다.[^88]

  • 흐름: if 검사 → 거짓이면 else if 검사 → 또 거짓이면 else 실행.[^89]
  • 이런 분기 구조는 “무한정 늘릴 수” 있으며 else if를 계속 붙일 수 있다고 말한다.[^90]

3.7.4 콘솔 실습: money 값에 따라 console.log 출력 달라짐[^91]

실습은 다음처럼 진행된다.

  1. let money = 6000으로 돈을 설정한다.[^91]
  2. if (money >= 5000) { console.log("택시를 탄다"); } 형태로 작성한다.[^92]
  3. 여기서 console.log는 파이썬의 print처럼 메시지를 출력하는 함수이며, “콘솔 창에 출력한다”는 의미라고 설명한다.[^93][^94]
  4. 실행하면 실제 콘솔에 “택시를 탄다”가 찍히는데, money가 6000이라 5000보다 크므로 조건이 참이 되어 내부 코드가 실행된 것이라고 해석한다.[^95]

money 값을 바꿔 조건이 거짓일 때를 확인한다.

  • money = 3000으로 바꾸고 같은 if를 실행하면 “아무것도 출력이 안 된다.”
  • 이유는 money가 3000이라 조건을 만족하지 않아 중괄호 안 코드가 실행되지 않기 때문이라고 설명한다.[^96]

그 다음 else를 붙여 분기 결과를 확실히 만든다.

  • if (money >= 5000) { ... } else { console.log("걸어간다"); } 형태로 작성한다.[^97]
  • money=3000이면 조건이 거짓이므로 else 블록이 실행되어 “걸어간다”가 출력된다고 확인한다.[^98]

3.7.5 중괄호 { }의 의미: “어디부터 어디까지 실행할지 경계”[^99]

질문에 답하며 중괄호의 의미를 설명한다.

  • 중괄호는 “경계를 나누는 것”이며, 조건이 만족했을 때 “어디부터 어디까지 실행할 건지”를 명확히 해준다고 말한다.[^99][^100]
  • 중괄호가 없으면 어느 범위가 if의 실행 대상인지 애매하므로, {부터 }까지가 참일 때 실행할 범위라는 의미라고 정리한다.[^101]

3.8 반복문(Loop): “나무를 10번 찍기”를 for로 자동화하기[^102]

📸 22:14

3.8.1 반복문이 필요한 이유: 같은 코드를 10번 쓰기엔 너무 길다[^102]

반복문 설명의 상황은 “나무를 열 번 찍는다”이다.[^102] 만약 이를 코드로 “나무찍기1 … 나무찍기10”까지 일일이 작성하면 코드가 너무 길고 귀찮으니, 반복되는 작업을 간단히 쓰기 위해 반복문을 사용한다고 말한다.[^103]

3.8.2 순서도 방식의 반복 로직: 조건 검사 → 실행 → 횟수 증가 → 다시 검사[^104]

나무 10번 예시의 흐름을 순서도로 풀어 설명한다.

  • 시작하면 “현재 찍은 횟수가 10번 미만인가?”를 검사한다.[^104]
  • 참이면 나무를 한 번 찍고, 찍은 횟수에 1을 더한다.[^105]
  • 다시 조건 검사로 돌아가고, 0→1→2→… 반복하다가 횟수가 10이 되면 “10 미만” 조건이 거짓이 되어 반복이 끝난다고 설명한다.[^106]

3.8.3 자바스크립트 for 문 구조: 초기값; 조건; 증감식[^107]

강의는 반복문 키워드로 for를 소개하고, while도 있지만 “주로 for만 배워보자”고 한다.[^107]

for 문은 다음처럼 구성된다고 설명한다.

  • for (let i = 0; i < 10; i++) { ... } 형태[^108]
  • 구성요소 3개:
    • 초기값: i = 0 (처음 값을 0으로 설정)[^109]
    • 조건식: i < 10 (언제 종료할지/언제까지 반복할지)[^110]
    • 증감식: i++ (한 바퀴 돌 때마다 i를 1씩 증가)[^111]

강사는 이 부분이 처음 들으면 어렵게 느껴질 수 있다고 인정하면서, i를 “나무를 찍은 횟수”라고 생각하면 이해가 된다고 안내한다.[^112]

또한 실행 순서를 더 편하게 이해하려면:

  • i가 0부터 시작하고
  • 조건을 검사한 뒤
  • 중괄호 안 코드가 실행될 때마다
  • i++가 적용되어 i가 증가하고
  • 다시 조건을 검사하는 식으로 반복된다고 재정리한다.[^113]

3.8.4 “외우지 마라, 검색하고 복사해서 변형해라”라는 강한 학습 메시지[^114]

반복문 형태를 외워야 하냐는 맥락에서 강사는 강하게 말한다.

  • “절대 외우지 말라”, 외우다 보면 흥미가 떨어져 “프로그램 바로 포기”하게 된다는 취지로 경고한다.[^114]
  • 처음 배우면 당연히 까먹는다고 전제하고, 그때는 “자바스크립트 for”를 검색하라고 안내한다.[^115]
  • 검색 결과에서 기본 형태를 보고 “기억이 좀 나면”, 일단 복사해서 붙여 넣고, 거기서 원하는 구조로 변형하는 공부를 하라고 제안한다.[^116]
  • 외우는 것은 “시간 낭비, 낭비”라고까지 표현하며, 실전적 학습 방식을 강조한다.[^117]

[!TIP] 반복문 학습 실전 루틴

  1. 까먹는다 → 2) 검색한다(“javascript for”) → 3) 기본 템플릿을 복사 → 4) 내 문제에 맞게 숫자/조건/출력만 바꾼다.[^115][^116]

3.8.5 콘솔 실습: i를 출력해보면 0~9가 찍히며 10회 반복이 보인다[^118]

강의는 기본 for문을 콘솔에 붙여 넣고, 원하는 대로 조정한다.

  • 반복 범위를 “0부터 10 미만까지”로 두고, 중괄호 안에서 console.log(i)로 i를 출력한다.[^118]
  • 실행하면 콘솔에 0 1 2 3 4 5 ... 9가 출력된다.[^119]
  • 0부터 시작해 9까지 총 10개가 찍힌 이유는, i가 매 반복마다 증가하다가 i=10이 되는 순간 i < 10 조건이 거짓이 되어 반복이 끝나기 때문이라고 해석한다.[^120]

3.8.6 추가: 배열(Array)과 forEach/for...of 류의 반복 감각 소개(“지적 유희”)—forEach/for-of에 가까운 설명[^121]

강의는 “이것만 알아도 되지만”이라며, 추가로 “지적 유희” 차원에서 다른 반복 스타일을 짧게 소개한다.[^121]

  • myArray = [1,2,3,4,5]처럼 대괄호로 여러 값을 담는 변수를 만들 수 있고, 콤마로 값을 구분한다고 설명한다.[^122]
  • 여러 값이 들어있는 것에서 “하나씩 빼오고 싶을 때” for문을 쓸 수도 있지만, 보통은 “이런 식으로 많이 표현”한다며 myArray.forEach(...) 혹은 for (const element of myArray) 류를 연상시키는 형태로 “하나씩 뽑아서 중괄호 안 코드를 실행”하는 패턴을 보여준다.[^123]
  • 이를 “마이 어레이의 요소들을 하나씩 뽑아서” 나무찍기 + 요소를 실행하면 “나무찍기1, 나무찍기2 ...”처럼 동작할 거라고 말한다.[^124]
  • 다만 이 파트는 “약간 어렵다”고 인정하며, “그냥 이런 것도 있다 정도로 봐두면” 나중에 익숙해질 것이라고 한다.[^125]

3.9 결론: 4가지(변수/함수/조건/반복)면 자바스크립트 ‘거의 끝’, 그리고 ‘널널하지만 특이한’ 언어 특성[^126]

📸 28:18

강의는 “변수 함수 조건문 반복문을 이해했다면 자바스크립트는 거의 끝”이라고 말한다.[^126] 물론 더 배울 것은 있지만, 이것만 알면 못 짤 것은 거의 없고, “논리의 전부”라고도 할 수 있다고 강조한다.[^127]

그리고 자바스크립트의 특징으로 다시 널널한 문법을 설명한다.

  • 세미콜론을 찍어도/안 찍어도 잘 동작하는 등 유연성이 있다고 재확인한다.[^14][^15]
  • 파이썬도 자유롭다고 하지만 은근 엄격한 부분이 있는데, 예를 들어 파이썬에서는 숫자(a=1)와 문자(b="안녕")를 a + b로 더하려 하면 타입이 달라서 안 된다고 든다.[^128][^129]
  • 반면 자바스크립트는 a + b를 하면 “문자로 바꾸지 뭐” 하면서 알아서 변환해 실행해버린다고 말한다.[^130]

하지만 이런 “알아서 해주는” 성질 때문에:

  • 웬만하면 실행이 되는데, 오히려 그래서 헷갈릴 때가 있고[^131]
  • 자바스크립트가 알아서 결정하는 비중이 크다 보니 “특이한 점도 있다”고 경고한다.[^132]

3.9.1 “자바스크립트 이상한 동작” 밈 사례들 언급[^133]

강의는 자바스크립트의 특이함을 보여주는 인터넷 짤/밈을 언급한다.

  • NaN(값이 없음/숫자가 아님으로 알려진 값) 같은 것이 등장하고, 타입이 number로 표시되는 등 헷갈리는 사례가 있다고 한다.[^133]
  • 0.5 + 0.1 = 0.6처럼 보이지만, 0.1 + 0.2가 0.3이 “또 아니다”라는 사례를 든다. 이는 소수를 완벽히 표현하지 못하는(부동소수점) 문제라고 짚는다.[^134]
  • 어떤 계산은 기대와 다르게 튀어나오고(예: 91이 90.999…처럼 보이는 류의 당황), 그런데 또 ... - 1 하면 90이 되는 식의 “이상한 점”이 있다고 말한다.[^135]
  • 비교/동등성에서도 A == B가 true라서 “그럼 이거면 이거겠네” 했는데 false가 나오는 밈이 있다고 언급한다.[^136]
  • 문자열 덧셈/형변환으로 2 + 2는 4인데 어떤 경우 +가 문자열 결합처럼 되어 “20”이 나온다든지 하는 짤들이 많다고 한다.[^137]
  • “B + a” 같은 식에서 한쪽이 비어 있거나 NaN이 끼면 결과가 “banana(바나나)”처럼 보이는 유명한 말장난 짤도 언급하며, 머리가 혼란해진다는 감정을 표현한다.[^138]

마지막으로 다시 도입부의 농담으로 돌아가 “물속에서 코딩” 밈을 반복한다.

  • 왜냐하면 “다른 사람이 우는 걸 못 보기 때문”이라는 말로, 자바스크립트가 “쉽지만 널널하지만 특이해서 헷갈릴 때가 있다”는 결론을 농담처럼 마무리한다.[^17][^18][^139]

4. 핵심 통찰[^140]

  1. [h 자바스크립트는 웹에서 ‘모양(HTML/CSS)’이 아니라 ‘논리와 동작’을 담당하는 언어로 소개된다.] 그래서 클릭/팝업 같은 행위 규칙을 만들며, 프론트엔드뿐 아니라 Node.js로 백엔드까지 확장된다.[^12][^13][^22]

    • 실행: 웹을 만든다는 관점에서 HTML/CSS를 배웠다면, 다음 단계는 JS로 “무엇을 언제 어떻게 할지” 규칙을 붙이는 연습을 한다.[^13]

  2. [h 언어 학습의 공통 뼈대는 변수·함수·조건문·반복문 4가지라는 프레임을 제공한다.] 입문자가 ‘전체 지형’을 잃지 않게 하는 안내판 역할을 한다.[^4][^5]

    • 실행: 새 문법을 배울 때마다 “이건 변수/함수/조건/반복 중 어디에 속하나?”로 분류해보면 학습 부담이 줄어든다.[^4]

  3. [m 콘솔(REPL) 실습은 즉시 피드백으로 개념을 잡게 해준다.] 크롬 개발자도구 콘솔에서 코드→결과를 바로 확인하며 변수 대입, 함수 호출, 조건 분기, 반복 출력을 체감하게 구성했다.[^31][^34][^75][^119]

    • 실행: 별도 환경 설치 전이라도 콘솔로 “한 줄씩 확인”하며 감각을 만든다.[^33]

  4. [h ‘외우지 말고 검색→복사→변형’은 특히 반복문 학습에서 강하게 강조된다.] 문법 암기가 흥미를 떨어뜨리고 포기로 이어질 수 있다는 경험적 경고가 포함된다.[^114][^115][^117]

    • 실행:
      • javascript for를 검색해 템플릿을 확보한다.[^115]
      • 초기값/조건/증감만 내 문제에 맞게 바꾼다.[^116]

  5. [m 자바스크립트의 유연함(자동 형변환, 관대한 문법)은 장점이자 함정이다.] 세미콜론 생략 가능, 숫자+문자 처리 가능 등으로 “일단 실행”은 잘 되지만, 그만큼 예측이 흔들리는 특이 케이스(밈)가 많다고 경고한다.[^14][^130][^132][^137]

    • 실행: 이상한 결과를 만나면 “내가 틀렸다”보다 “JS가 자동 변환/비교 규칙을 적용했나?”를 의심하고, 타입/동등성/부동소수점 이슈를 찾아본다.[^134][^136]

5. 헷갈리는 용어 정리[^141]

프론트엔드(Frontend): 사용자가 보는 화면과 상호작용 영역(웹 페이지 UI)에서 동작하는 개발 영역. 이 강의에서는 자바스크립트를 프론트엔드에서 사용한다고 말한다.[^21]
백엔드(Backend): 서버 측 로직/데이터 처리 영역. 강의는 Node.js로 백엔드를 만들 때도 자바스크립트를 사용한다고 언급한다.[^22]
Node.js: 자바스크립트를 브라우저 밖(서버 등)에서도 실행하게 해주는 환경으로 언급된다.[^22][^33]
개발자도구 콘솔(Console): 크롬에서 자바스크립트를 직접 입력하고 실행 결과를 바로 확인하는 창.[^30][^31]
REPL: 입력하고(READ) 실행(EVAL)하고 출력(PRINT)하고 반복(LOOP)하는 방식의 상호작용 실행 형태로, 콘솔에서 “입력하고 결과 나오고”를 반복한다고 설명한다.[^34]
대입(=): 오른쪽 값을 왼쪽 변수(상자)에 “넣는” 것. 수학의 ‘같다’가 아니라고 강조한다.[^46]
비교(==): 값이 같은지 비교하는 연산으로, =가 아니라 ==를 사용한다고 설명한다.[^47]
세미콜론(;): 코드 줄의 끝을 나타내는 표기. 자바스크립트는 생략해도 되지만, 일반적으로 쓰는 편이 좋다고 말한다.[^73]
호이스팅(hoisting): var/let/const 차이와 연결되는 개념으로 잠깐 언급되며, 실제로 문제를 겪어봐야 중요성이 와닿는다고 말한다.[^43][^45]
NaN: “값이 없다/숫자가 아님” 같은 특이 사례를 설명하며 밈으로 언급된다.[^133]
배열(Array): 여러 값을 대괄호 []로 담는 자료 형태로 소개된다.[^122]

참고(콘텐츠 정보)[^142]

  • 제목: 자바스크립트 기초 입문 강의 30분 완성[^142]
  • 채널: 조코딩 JoCoding[^142]
  • 길이: 31분 29초[^142]
  • 링크: https://www.youtube.com/watch?v=E-PzX2mKGUQ[^142]
  • 제공된 타임스탬프 기반 분석 범위: @[00:00] ~ @[31:14][^17][^139]

[^1]: @[02:34] “프로그래밍 언어를 배운다고 하면… 이 4가지만 알면…” 및 전반 구성(변수/함수/조건문/반복문) 소개.
[^2]: @[00:47] “오늘 할 웹의 프론트엔드에 사용할 자바스크립트를 배워 볼 거고요”
[^3]: @[00:53] “노드 JS… 백엔드를 만드는데도 자바스크립트가 사용됩니다”
[^4]: @[02:34] “제가 생각했을 때 이 4가지만 알면…”
[^5]: @[02:51] “변수 함수 조건문 반복문… 실제로 웹프론트 개발에 적용”
[^6]: @[00:07] “자바랑 자바스크립트랑… 헷갈려” / @[00:11] “완전히 다른 언어입니다”
[^7]: @[00:16] “햄과 햄스터의 관계” / @[00:18] “완전히 다르잖아요”
[^8]: @[00:29] “인도와 인도네시아의 차이” / @[00:31] “아예 다른 나라”
[^9]: @[02:29] “자바스크립트 기초 문법을 배워보도록” + 전체 흐름(변수→함수→조건문→반복문).
[^10]: @[03:39] “먼저 변수의 개념”으로 시작해 순차 전개.
[^11]: @[04:04] 크롬 개발자도구 콘솔 실습 도입.
[^12]: @[02:10] “html css는… 모양 색깔… 마크업”
[^13]: @[02:25] “클릭하면 팝업창이 열려라… 논리설계”
[^14]: @[13:53] “세미콜론… 찍어주기도 하고… 안 찍어주기도”
[^15]: @[28:40] “널널한 문법… 세미콜론… 찍어도 안 찍어도”
[^16]: @[29:40]~@[30:53] 자바스크립트 특이함/밈 사례들 언급.
[^17]: @[00:00] “물속에서 코딩” 프로 팁 농담.
[^18]: @[00:04] “다른 사람이 우는 걸 못 보기 때문에”
[^19]: @[00:23] “자바 안에 자바스크립트가 있는 줄 알았다” 언급.
[^20]: @[00:35]~@[00:41] 인도/인도네시아 위치·국기·대통령·국민 다 다름 강조.
[^21]: @[00:47] “자바스크립트를 배우면 뭐가 좋냐”
[^22]: @[00:53] Node.js 배우며 백엔드에도 JS 사용.
[^23]: @[02:01] “어떤 움직임… 논리적인 설계 가능”
[^24]: @[02:20] “자바스크립트부터는 프로그래밍 언어”
[^25]: @[03:04] “파이썬… 기본 개념은… 크게 다르지가 않습니다”
[^26]: @[03:09]~@[03:21] “언어를 한번 배웠으면… 서울말/부산말” 비유.
[^27]: @[03:25]~@[03:30] “한국어랑 영어… 서울말과 부산말 차이 정도”
[^28]: @[03:44] “변수… 상자 안에 값을 담는 개념”
[^29]: @[03:44] “파이썬 들으신 분들은 익숙”
[^30]: @[03:58] “크롬 브라우저… 연습하기 좋게” / @[04:04] 개발자도구 안내.
[^31]: @[04:13] 콘솔 메뉴 / @[04:19] 콘솔 입력창 설명.
[^32]: @[04:26] “입력하면 브라우저에서 읽어서 실행”
[^33]: @[04:33]~@[04:40] Node.js 나중에 설치, 지금은 콘솔로 충분.
[^34]: @[05:06] “입력하고 결과 나오고… 레펠 방식”
[^35]: @[04:40]~@[04:50] “var let const… 굳이 외우실 필요는 없어요”
[^36]: @[04:51]~@[04:55] 파이썬처럼 a = 1도 가능.
[^37]: @[04:59]~@[05:06] “자율도가… 알아서 해석… 정상 동작”
[^38]: @[06:21]~@[06:36] var/let 변경 가능 예시.
[^39]: @[06:36]~@[06:43] const는 바꾸려 하면 오류.
[^40]: @[06:51]~@[06:59] 바뀔 수 없게/영향 방지 취지 설명.
[^41]: @[06:59]~@[07:07] “세 개 다 알아야지”보다 “a=…”로 기억 권장.
[^42]: @[07:13]~@[07:18] “표준… let을 많이 붙입니다”
[^43]: @[07:39]~@[07:52] “호스팅… 개념을 알기 위한…”
[^44]: @[07:52]~@[07:59] “면접… var let const 차이…”
[^45]: @[08:06]~@[08:17] 문제 겪고 찾아보며 호이스팅 이해가 박힌다는 설명.
[^46]: @[05:24]~@[05:37] “등호… 오른쪽을 왼쪽 상자에 넣는다”
[^47]: @[05:42]~@[05:53] “같다 의미는 == … true/false”
[^48]: @[06:01]~@[06:09] a=2 후 출력 2.
[^49]: @[08:31]~@[08:41] 수학 함수(입력-출력) 도식.
[^50]: @[08:48]~@[09:02] f(x)=x+3, x=1 넣어 결과 설명.
[^51]: @[09:09]~@[09:13] “먼저 함수를 정리하고 다음에 사용”
[^52]: @[09:13]~@[09:20] function 키워드/이름/매개변수 설명.
[^53]: @[09:31]~@[09:34] temp 변수, x+3, return temp.
[^54]: @[09:34]~@[09:48] myFunction(1) 호출 흐름 연결.
[^55]: @[10:06] “인자를 두 개 받을 수도”
[^56]: @[10:18]~@[10:33] add(x,y) 예시와 결과 3 설명.
[^57]: @[10:44]~@[10:52] “입력과 출력이 없을 수가 있습니다”
[^58]: @[10:52]~@[11:00] 디테일은 길어 생략, 입력/출력 없는 경우 예고.
[^59]: @[11:11]~@[11:16] fly 함수 입력 없음.
[^60]: @[11:16]~@[11:26] return 없음.
[^61]: @[11:26]~@[11:30] “그래도 동작… 많이 쓰입니다”
[^62]: @[11:35]~@[11:47] temp 이름 임의, 함수 이름 자유.
[^63]: @[11:52]~@[12:05] 기능에 맞는 이름 권장(add는 더하기 기능).
[^64]: @[12:12]~@[12:20] “코드를 묶어주는 역할”
[^65]: @[12:20]~@[12:36] 마법 비유 도입(윙가디움 레비오사).
[^66]: @[12:36]~@[12:43] 마법 내부에 복잡한 과정이 있을 것이라는 설명.
[^67]: @[12:43]~@[12:50] 함수 이름 한 줄에 내부가 포함된다는 설명.
[^68]: @[12:50]~@[12:57] “마법… 코드의 묶음”으로 이해 권장.
[^69]: @[13:03]~@[13:06] 콘솔 청소(x 버튼) 언급.
[^70]: @[13:10]~@[13:27] function add, (x,y), 중괄호 구성 설명.
[^71]: @[13:32]~@[13:37] shift+enter 줄바꿈 팁.
[^72]: @[13:43]~@[13:53] let temp, temp=x+y 작성.
[^73]: @[13:53]~@[14:09] 세미콜론은 있어도/없어도 되나 일반적으로 찍는다.
[^74]: @[14:24]~@[14:54] return temp, 엔터로 함수 정의 완료.
[^75]: @[14:59]~@[15:09] add(1,3) 실행 결과 4 확인.
[^76]: @[15:14]~@[15:22] “화살표 함수… 또 다른 방법”
[^77]: @[15:24]~@[15:47] 화살표 함수로 동일하게 정의 가능 설명.
[^78]: @[15:53]~@[15:59] function 키워드 없이 더 간단.
[^79]: @[15:59]~@[16:23] 익명 함수/바로 실행 가능 언급.
[^80]: @[16:27]~@[16:36] 콘솔에서 수정이 어려움 언급.
[^81]: @[16:36]~@[16:40] “엔터 누르는 순간 실행… 수정 어렵다”
[^82]: @[16:40]~@[16:45] “덮어 써야 됩니다”
[^83]: @[16:45]~@[16:51] 위 방향키로 이전 코드 호출.
[^84]: @[16:57]~@[17:08] “돈이 5,000원 이상이면 택시” 예시.
[^85]: @[17:08]~@[17:22] 순서도(참이면 택시, 아니면 지나감) 설명.
[^86]: @[17:30]~@[17:39] if 문 형태 제시.
[^87]: @[17:39]~@[17:50] if(조건) { 실행코드 } 구조 설명.
[^88]: @[18:55]~@[19:11] else if / else 확장 설명.
[^89]: @[19:00]~@[19:16] “한번 검사하고 또 검사… 거짓일 때” 흐름.
[^90]: @[19:16]~@[19:25] else if 무한정 늘릴 수 있음.
[^91]: @[19:32]~@[19:42] let money=6000 설정.
[^92]: @[19:42]~@[19:54] if 조건식 + 중괄호 안 실행 작성.
[^93]: @[19:54]~@[20:04] console.log는 print와 비슷.
[^94]: @[20:11]~@[20:17] 콘솔에 출력한다는 의미.
[^95]: @[20:21]~@[20:34] “택시를 탄다” 출력 및 조건이 참이라 실행됐다는 해석.
[^96]: @[20:36]~@[20:58] money=3000일 때 출력 없음, 조건 불만족 설명.
[^97]: @[21:02]~@[21:21] else 추가, “걸어간다” 작성.
[^98]: @[21:28]~@[21:41] money=3000이면 else 실행되어 “걸어간다” 출력 확인.
[^99]: @[21:49]~@[21:54] “중괄호는 경계를 나누는 겁니다”
[^100]: @[22:00]~@[22:05] 중괄호 없으면 어디까지 실행인지 모름.
[^101]: @[22:05]~@[22:12] “여기서부터 여기까지를 참일 때 실행” 의미.
[^102]: @[22:14]~@[22:25] “나무를 열 번 찍는다” 반복문 필요성.
[^103]: @[22:20]~@[22:30] 1~10까지 일일이 쓰기 너무 많아 반복문.
[^104]: @[22:30]~@[22:48] 시작→10 미만 검사→참이면 찍기.
[^105]: @[22:55]~@[23:02] 찍은 횟수 1 증가.
[^106]: @[23:06]~@[23:31] 반복하다 10이 되면 거짓으로 종료.
[^107]: @[23:38]~@[23:46] for 소개, while도 있으나 for 중심.
[^108]: @[23:51]~@[24:02] for 뒤에 초기값/조건/증감식 구조 제시.
[^109]: @[24:07]~@[24:15] 초기값 i=0 설명.
[^110]: @[24:15]~@[24:23] 조건식(종료 조건) 설명.
[^111]: @[24:15]~@[24:23] i++ 증가 설명.
[^112]: @[24:02]~@[24:11] 처음 들으면 어렵지만 횟수로 보면 됨.
[^113]: @[24:50]~@[25:06] 실행 순서 이해를 돕는 재정리.
[^114]: @[25:29]~@[25:38] “절대 외우지 마시고… 외우면 흥미 떨어짐”
[^115]: @[25:42]~@[25:51] “까먹… javascript for 검색”
[^116]: @[25:54]~@[26:06] 복사→붙여넣기→변형 학습.
[^117]: @[26:07]~@[26:13] “외울 필요 절대 없고… 시간 낭비”
[^118]: @[26:16]~@[26:22] for문 숫자 조정 + console.log 소개 연결.
[^119]: @[26:29]~@[26:42] 출력 결과 0~9.
[^120]: @[26:48]~@[27:00] i가 증가하다 10이 되면 조건 불만족으로 종료.
[^121]: @[27:02]~@[27:10] “추가적으로… 지적 유희”
[^122]: @[27:10]~@[27:17] 배열 정의(대괄호, 콤마로 값 나열).
[^123]: @[27:34]~@[27:55] 여러 값에서 하나씩 빼올 때 쓰는 표현 소개.
[^124]: @[28:06]~@[28:18] 요소를 하나씩 뽑아 “나무찍기1…5” 실행될 것 설명.
[^125]: @[27:55]~@[27:59] “약간 어렵죠… 이런 것도 있다”
[^126]: @[28:18]~@[28:25] “이해하셨다 하면… 자바스크립트는 거의 끝”
[^127]: @[28:25]~@[28:35] “논리에 전부… 이것만 이해하면 웬만한 건 다”
[^128]: @[28:51]~@[29:06] 파이썬은 숫자+문자 더하기 불가 예시.
[^129]: @[29:06]~@[29:10] 타입 다르면 더하기 안 됨 설명.
[^130]: @[29:10]~@[29:16] JS는 a+b를 문자로 바꾸는 식으로 처리.
[^131]: @[29:21]~@[29:31] “웬만하면 실행… 헷갈릴 때”
[^132]: @[29:31]~@[29:33] “특이한 점도 있어요”
[^133]: @[29:40]~@[29:47] NaN, 타입 넘버 등 밈 언급.
[^134]: @[29:47]~@[29:54] 0.1+0.2가 0.3이 아닌 문제(소수 표현 한계) 언급.
[^135]: @[30:04]~@[30:09] 90.999… 류의 당황/911-1은 90 등 이상 사례 언급.
[^136]: @[30:22]~@[30:28] 어떤 비교는 true인데 연쇄적으로는 false가 나오는 밈 언급.
[^137]: @[30:28]~@[30:28] “2+2=4… 더하기는 20” 같은 문자열 결합 밈 언급.
[^138]: @[30:43]~@[30:53] “B+a… NaN이 들어가서 바나나” 짤 언급.
[^139]: @[31:08]~@[31:14] 물속 코딩 팁 재등장 + “울지 못 보니까”로 마무리.
[^140]: @[28:18]~@[28:35] 4요소만 이해하면 대부분 가능하다는 결론 + 전반 논지.
[^141]: @[00:53], @[04:13], @[05:24], @[29:40] 등 용어가 실제로 등장/설명된 구간들.
[^142]: 사용자가 제공한 메타데이터(제목/채널/길이/링크).

← 프로젝트에서 보기