JS

[JS] 코딩 기초 개념

coco030030 2025. 4. 3. 11:42

🔹 변수: 정보를 저장하는 상자

// 변수 만들기
var 이름 = "홍길동";      // 문자열(텍스트) 저장
var 나이 = 25;          // 숫자 저장
var 합격여부 = true;     // 논리값(참/거짓) 저장

🔹 기본 데이터 타입

  1. 문자열 (String): 텍스트 - "안녕", '홍길동'
  2. 숫자 (Number): 정수, 소수 - 5, 3.14
  3. 논리값 (Boolean): 참/거짓 - true, false

🔹 기본 연산자

  1. 산술 연산자: + (더하기), - (빼기), * (곱하기), / (나누기)
  2. 비교 연산자: == (같다), != (다르다), > (크다), < (작다)
  3. 논리 연산자: && (그리고), || (또는), ! (아니다)

🔹 기본 입출력

  1. 입력 받기: prompt("질문") - 사용자에게 정보 요청
  2. 출력하기:
    • console.log() - 콘솔에 출력
    • alert() - 팝업창으로 출력
    • document.write() - HTML 페이지에 출력

문제 해결 접근법: 단계별 코딩

가장 중요한 것은 문제를 작은 단계로 나누는 방법입니다.

단계 1: 문제를 글로 써보기

예시 문제: "숫자를 입력받아 짝수인지 홀수인지 판별하기"

  1. 사용자에게 숫자를 입력받는다
  2. 입력받은 값을 숫자로 변환한다
  3. 숫자를 2로 나눠 나머지를 확인한다
  4. 나머지가 0이면 "짝수", 아니면 "홀수"라고 출력한다

단계 2: 각 단계를 코드로 변환하기

// 1. 사용자에게 숫자를 입력받는다
var 입력값 = prompt("숫자를 입력하세요");

// 2. 입력받은 값을 숫자로 변환한다
var 숫자 = Number(입력값);

// 3 & 4. 짝수/홀수 판별하고 출력하기
if (숫자 % 2 == 0) {
  alert("짝수입니다");
} else {
  alert("홀수입니다");
}

초보자가 자주 놓치는 기본 개념 3가지

1. 형 변환 (Type Conversion)

사용자 입력은 항상 문자열로 받아집니다. 계산이 필요하면 숫자로 변환해야 해요!

var 나이_문자열 = prompt("나이를 입력하세요");  // "25" (문자열)
var 나이_숫자 = Number(나이_문자열);           // 25 (숫자)

// 변환하지 않으면 예상치 못한 결과가 나옴:
console.log(나이_문자열 + 5);  // "255" (문자열 이어붙이기)
console.log(나이_숫자 + 5);    // 30 (숫자 덧셈)

2. 조건식 평가 (Condition Evaluation)

조건식은 항상 논리값(true/false)으로 평가됩니다.

var 점수 = 85;

// 점수 >= 60 은 true 또는 false로 평가됨
var 합격여부 = 점수 >= 60;  // true

if (합격여부) {
  console.log("합격!");
}

// 위 코드는 이렇게 쓸 수도 있음
if (점수 >= 60) {
  console.log("합격!");
}

3. 코드 블록 (Code Blocks)

중괄호 { } 안에 있는 코드는 하나의 단위로 실행됩니다.

if (조건) {
  // 이 안의 모든 코드는
  // 조건이 참일 때만 실행됨
  var a = 10;
  console.log(a);
}

실전 연습: 기초 문제와 해결 방법

문제 1: 두 수의 합 구하기

// 1. 첫 번째 숫자 입력받기
var 첫번째 = prompt("첫 번째 숫자를 입력하세요");

// 2. 두 번째 숫자 입력받기
var 두번째 = prompt("두 번째 숫자를 입력하세요");

// 3. 문자열을 숫자로 변환하기
첫번째 = Number(첫번째);  // 형 변환
두번째 = Number(두번째);  // 형 변환

// 4. 합계 계산하기
var 합계 = 첫번째 + 두번째;

// 5. 결과 출력하기
alert("두 수의 합: " + 합계);

문제 2: 온도 변환하기 (섭씨 → 화씨)

// 1. 섭씨 온도 입력받기
var 섭씨 = prompt("섭씨 온도를 입력하세요");

// 2. 문자열을 숫자로 변환하기
섭씨 = Number(섭씨);

// 3. 섭씨를 화씨로 변환하기 (화씨 = 섭씨 × 9/5 + 32)
var 화씨 = 섭씨 * 9/5 + 32;

// 4. 결과 출력하기
alert("화씨 온도: " + 화씨 + "°F");

문제 3: 합격/불합격 판정하기

// 1. 점수 입력받기
var 점수 = prompt("시험 점수를 입력하세요 (0-100)");

// 2. 문자열을 숫자로 변환하기
점수 = Number(점수);

// 3. 합격 여부 확인하기 (60점 이상)
if (점수 >= 60) {
  alert("합격입니다!");
} else {
  alert("불합격입니다.");
}

코딩할 때 기억해야 할 핵심 원칙 3가지

1️⃣ "계획 먼저, 코딩은 나중에"

문제를 보면 바로 코딩하지 말고, 먼저 종이에 단계별로 적어보세요. 이것을 의사코드(pseudocode)라고 합니다.

2️⃣ "한 번에 한 단계씩"

전체 문제를 한 번에 해결하려 하지 말고, 한 단계가 제대로 작동하는지 확인한 후 다음 단계로 넘어가세요.

3️⃣ "오류는 학습의 기회"

오류가 발생하면 당황하지 말고, 무엇이 잘못됐는지 생각해보세요. 프로그래밍에서 오류는 자연스러운 부분입니다.

문제가 막막할 때 쓰는 자기 질문 체크리스트

코딩 문제가 주어졌을 때 스스로에게 물어보세요:

  1. 무엇을 입력받아야 하나요? (숫자? 텍스트?)
  2. 무슨 계산이 필요한가요? (덧셈? 뺄셈? 비교?)
  3. 어떤 결정을 내려야 하나요? (if문이 필요한가?)
  4. 무엇을 출력해야 하나요? (결과? 메시지?)

'JS' 카테고리의 다른 글

[JS] 조건문과 반복문 🌟  (0) 2025.04.03
[JS] 조건문  (0) 2025.04.03
[js] 자바스크립트 연산자  (0) 2025.04.02
[JS] 데이터 출력/입력의 핵심 개념  (0) 2025.04.02
[JS] 자바스크립트 데이터 입출력 방식📝  (0) 2025.04.02