[AI 웹개발 취업캠프] 7Day - JS 기초(2)

강의

연산자 (operator)

논리 연산자(logical operator)

논리 연산자	설명
&&	모두 참이면 참(논리 AND 연산)
||	하나라도 참이면 참(논리 OR 연산)
!	참이면 거짓, 거짓이면 참(논리 NOT 연산)

제어문 (Control Flow statements)

조건문

조건이 충족할떄만 특정 구문을 실행할때 사용

논리적인 로직을 표현할 때 가장 중심이 되는 구문이다

조건에 들어가는 값은 항상 불리언 연산이 적용된다.

 

if문

if (조건) {
  만약 조건(condition)이 참일 경우 실행할 코드
}

 

if / else 문

x가 양수인 경우 "양", 음수인 경우 "음" 라는 메시지를 출력합니다.

if / else 문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행함

let x = -10;

if (x > 0) {
  console.log("양");
} else {
  console.log("음");
}

 

if / else if / else 문

여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행

let x = 0;

if (x > 0) {
  console.log("양");
} else if (x < 0) {
  console.log("음");
} else {
  console.log("0");
}

 

switch 문

switch문은 변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행

default는 모든 경우에 맞지 않는 경우에 실행

let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

 

삼항 연산자

삼항 연산자를 사용하여 변수 age가 18세 이상인 경우 "성인", 그렇지 않은 경우 "미자"라는 메시지를 출력

let age = 20;
let message = (age >= 18) ? "성인" : "미자";
console.log(message);   // "성인"

 

반복문

기본적으로 특정 구문을 반복할때 사용

 

for 문

0부터 9까지의 숫자를 출력

for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어함

for (let i = 0; i < 10; i++) {
  console.log(i);
}

 

배열 + for 문

배열 numbers와 함께 for문을 사용하여 배열의 요소를 출력

배역의 요소 개수만큼 반복(length) 실행함

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

 

for / in 문

선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달

let numbers = [1, 2, 3, 4, 5];

for (let i in numbers) {
  console.log(numbers[i]);
}

while 문

조건식이 참인 경우에만 코드를 반복해서 실행

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

 

continue문

for문과 함께 continue문을 사용하여 5를 제외한 0부터 9까지의 숫자를 출력

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

 

break 문

for문과 함께 break문을 사용하여 0부터 4까지의 숫자만 출력함

break문은 반복문을 종료

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

 

자료구조(Data structure)

배열(Array)

• [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있다
• 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자.
• 인덱스는 배열의 위치를 가리키는 숫자

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

 

객체(object)

• { key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있다
• key를 기준으로 객체에 있는 value(값)에 접근할 수 있습니다.
• key에 접근하는 방법
  • object.key
  • object['key']

const person = {
	name: '고랑',
	age: 10
};

person.name;
// Print: '고랑'

person['name'];
// Print: '고랑'

 

함수(Function)

기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

---

과제

과제

자바스크립트로 오목게임 만들어보기

승리 판정이 어려워서 다음에 하기로 하고 승리판정 없이 오목게임을 만들었다.

 

코드

// ? 2023년 07월 24일 과제 (1)
// ? 주제 : 자바스크립트로 오목게임 만들어보기
// ? 세부내용
// ? 1. Nodejs와 함께 콘솔창에서 실행되도록 사용자 입출력 도구를 사용한다.
// ? 2. 오목판 사이즈는 30x30으로 고정한 후 정사각형의 형태의 오목판을 만든다.
// ? 3. 사용자 입력 도구에 좌표값 (15,15)라고 입력하여 바둑돌을 둔다.
// ? 4. 흑은 1로, 백은 0으로 표기하여 화면에 흑과 백이 번갈아가면서 두도록 입력 도구가 계속 뜨도록 입력 받는다.
// ? 5. 오목 규칙에 따라 5줄이 먼저 완성되면 “Game over”와 같이 누가 이겼는지 승패를 알리는 출력을 만든다.
// ? 6. 승패가 계속 나지 않을 경우 실행 후 5분이 지나면 자동 종료시킨다.
// ? 제출 방법 : 작성된 js 파일과 추가된 js 파일 그리고 설치된 module을 메모장에 남겨 제출한다.
const readline = require('readline');

// 오목판 크기
const boardSize = 30;

// 오목판 생성
const board = [];
for (let i = 0; i < boardSize; i++) {
  const row = [];
  for (let j = 0; j < boardSize; j++) {
    row.push(null);
  }
  board.push(row);
}

// 현재 턴을 나타내는 변수 (흑: 1, 백: 0)
let currentTurn = 1;

// 콘솔 입력 도구 생성
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// 오목판 출력 함수
function printBoard() {
  for (let row = 0; row < boardSize; row++) {
    let rowStr = '';
    for (let col = 0; col < boardSize; col++) {
      if (board[row][col] === 1) {
        rowStr += '1 ';
      } else if (board[row][col] === 0) {
        rowStr += '0 ';
      } else {
        rowStr += '□ ';
      }
    }
    console.log(rowStr);
  }
  // 현재 턴이 누구인지 표시
  const turnInfo = currentTurn === 1 ? '흑' : '백';
  console.log(`${turnInfo}의 차례입니다.`);
}

// 게임 시작 함수
function startGame() {
  console.log('게임이 시작되었습니다. 좌표값을 입력하세요. (예: 15 15)');
  printBoard();

  // 5분 후 자동 종료 설정
  setTimeout(() => {
    console.log('5분이 지났습니다. 게임을 종료합니다.');

    // 현재 턴인 플레이어를 패배로 처리
    const winner = currentTurn === 1 ? '백' : '흑';
    console.log(`${winner}이 승리했습니다. "Game over"`);

    rl.close();
  }, 5 * 60 * 1000); // ! 5 * 60 * 1000(ms) = 5분

  rl.on('line', (input) => {
    const [row, col] = input.trim().split(' ').map((el) => parseInt(el, 10));

    // 입력값이 유효한지 확인
    if (row < 0 || row >= boardSize || col < 0 || col >= boardSize) {
      console.log('올바르지 않은 좌표값입니다. 다시 입력하세요.');
      return;
    }

    // 이미 돌이 놓여진 자리인지 확인
    if (board[row][col] !== null) {
      console.log('이미 돌이 놓여진 자리입니다. 다시 입력하세요.');
      return;
    }

    // 돌 놓기
    board[row][col] = currentTurn;
    // 턴 변경
    currentTurn = 1 - currentTurn;

    // 오목판 출력
    printBoard();
  });
}
// 게임 시작
startGame();

과제 제출 커밋

과제: js로 오목게임 만들기 · go-tiger/AI-web-camp@d7af261

---

참고한 블로그 주소

Node.js 로 입력 받기(fs모듈, readline모듈)

 

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성되었습니다.