들어가기 운영체제의 서비스에 접근하기 위한 인터페이스를 위해 os 가 제공하는 서비스이다. 사용자가 kernel level로 바로 접근하면 문제가 발생할 수 있으니 하나의 안정장치인 셈이다. 시스템 콜 1. kernel에 접근하기 위해 필요한 기능. 2. kernel이 제공하는 기능 중에 사용자가 사용할 수 있는 기능을 모아놓은 것. 언어로 비유한다면? => 라이브러리 / 함수 대부분의 운영체제는 kernel mode와 user mode가 구분돼 있다. 이런 상황에서 시스템 콜은 user mode에서 kernel mode로 들어가는 것이다. user mode & kernel mode 가 무엇인지 궁금하면 클릭 [ 운영체제 ] 커널 / 커널모드 & 유저모드 들어가기 컴퓨터 과학에서 커널 (kernel)은 ..
📌 운영체제란? 운영체제 : Operating System 1. 하드웨어 자원들을 관리하는 프로그램들의 집합. 2. 응용프로그램들을 위한 시스템 서비스 제공자. ( system service provider ) 3. 하드웨어와 응용프로그램들을 이어주는 연결부. 하드웨어의 관리뿐만 아니라 응용 프로그램을 위한 서비스도 제공하는 시스템 소프트웨어이다. 이 서비스를 통해 뭘 할 수 있지? => 이 서비스를 통해 응용프로그램은 하드웨어를 활용할 수 있다. 📌 시스템 콜 ( system call ) 운영체제의 서비스에 접근하기 위한 인터페이스는 시스템 콜을 통해 제공된다. 더 궁금하면 클릭 [ 운영체제 ] 시스템 콜 ( System call ) 들어가기 운영체제의 서비스에 접근하기 위한 인터페이스를 위해 os 가..
📌 전투 결과 구현하기 공격을 누르면 서로 공격하게 해서, 둘 중에 먼저 체력이 0이 되는 쪽이 나오면 승부가 가려진다. 주인공의 체력이 0이 되면 게임 오버 / 몬스터의 체력이 0이 되면 주인공은 경험치를 얻는다. 경험치가 주인공 레벨 x 15 보다 높으면 주인공을 레벨업을 한다. 레벨업을 하면 주인공은 체력을 모두 회복하고, 최대 체력과 공격력이 5씩 증가한다. 그런데 Hero / Monster 클래스에 공통되는 부분이 있다. 이름, 체력, 공격력, 경험치 같은 공통 속성이 있고, attack 같은 공통 메서드가 있다. 이런 중복을 제거하면 좋을 것 같다. ✨ 클래스의 상속 여기서 클래스의 상속이라는 개념이 등장한다. Hero 와 Monster 클래스에서 공통되는 부분만 추려 새로운 클래스로 만들고,..
📌 클래스 간에 상호 작용하기 start 메서드에서는 이벤트 리스너 연결과 화면 전환 외에 어떤 것을 해야할까? 주인공을 만들어야 한다. 이때 constructor 에서 받은 주인공의 이름을 start 메서드를 거쳐 Hero 클래스에 전달한다. class Game { constructor (name){ this.monster = null; this.hero = null; this.monsterList = [ {name: '슬라임',hp:25,att:10,xp:10}, {name: '스켈레톤',hp:50,att:15,xp:20}, {name: '마왕',hp:150,att:35,xp:50}, ]; this.start(name); } start(name){ $gameMenu.addEventListener('s..
들어가기 텍스트 RPG 를 만들면서 클래스 문법을 배우자. 텍스트로만 진행하는 RPG이다. 주인공,몬스터,보스가 아노고 레벨업도 한다. 📌 순서도 게임에는 크게 2가지 모드가 있다. 1. 일반 모드 : 모험, 휴식, 종료 중에서 선택하는 일반 모드 2. 전투 모드 : 적을 공격 or 체력을 회복 or 도망 내용에 맞춰서 순서도를 그려보자. 📌 첫 화면 만들기 주인공 이름을 입력받는 첫 화면을 만들자. 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 사용자가 주인공 이름을 입력하고 시작 버튼을 클릭하면 초기 화면을 일반 메뉴로 화면 전환한다. 📌 주인공과 몬스터 만들기 아직 주인공의 이름만 입력했다. 이제 주인공의 정보, 몬스터들의 정보를 입력하자. 객체 리터럴로 주인공을 만들었다. ..
📌 차례 전환하기 클릭한 칸에 O를 입력하게 하려면 td 태드에 클릭 이벤트 리스너를 붙여야 한다. 이벤트 리스너는 td 태그를 생성할 때 바로 붙인다. 실제 화면에 태그가 표시되기 전이라도 이벤트 리스너를 미리 붙일 수 있다. 한번 O을 넣은 칸이면 다시 넣지 않도록 점검하는 코드를 추가하고, 입력 모양이 O 아니면 X 이므로 누구의 차례 ( turn ) 인지는 O 또는 X로 구분한다. 그리고, callback 함수 마지막에서 turn 이 O이면 X로, X면 O로 바꾼다. //조건부 연산자 사용. //turn 이 O이면 X로, X면 O으로 바꾼다. turn = turn ==='X' ? 'O' : 'X'; //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍 조건부 연산자가 헷갈린다면 if..
들어가기 틱택토 게임은 오목의 축소판인 삼목이다. 삼목은 바둑판이 아니라 3 x 3 표 위에서 진행한다. 삼목 데이터는 자바스크립트에서 이차원 배열로 표현한다. 틱택토를 만들면서 이차원 배열로 데이터를 관리하고, 배열 데이터를 HTML 화면에 표시하는 작업을 배워 보자. 📌 순서도 그리기 바둑에 검은 돌, 흰 돌이 있듯이 틱택토에는 O 와 X 가 있다. 먼저 혼자 번갈아 가면 O 와 X 를 넣고 마지막에 컴퓨터와 게임을 하는 방법을 추가하겠다. 📌 첫 코드 이번에는 HTML 까지 자바스크립트로 작성하므로 body 태그 내부에 script 태그를 제외한 다른 태그를 넣지 않는다. 📌 이차원 배열 다루기 ✨ 이차원 배열 틱택토는 이차원 배열을 사용해야 한다. 위 표를 자바스크립트로 표시해보자. [ [null..
📌 평균 반응속도 구하기 테스트를 반복적으로 수행해서 평균 반응속도를 구하자. 평균 반응속도를 구하려면 기존 반응속도를 모두 기록해야 한다. 어디에다가 기록해놓을까? 더보기 배열을 만든다. records 라는 ** 을 만들어 반응속도를 기록한다. 클릭해서 시작하세요 반복해서 측정해야 하므로 측정이 끝날 때마다 startTime 과 endTime 을 null 로 비운다. 평균 반응속도를 측정하면 다음과 같이 나온다. 💫 배열의 메서드 reduce 아래는 배열에 저장된 값들의 평균을 구하는 코드이다. 평균을 구하려면 모든 값을 더한 후 전체 개수로 나누면 된다. 모든 값의 합을 구할 때 reduce 라는 배열의 메서드를 사용했다. const average = records.reduce((a,c) => a +..
들어가기 반응속도가 얼마나 빠른지 확인하는 반응속도 테스트 프로그램을 만들 것이다. 시간을 측정해야 하므로 시간과 관련된 메서드를 제공하는 Date 객체를 사용한다. 반응속도를 기록하고 평균을 내어 화면에 표시하겠다. 📌 순서도 그리기 사용자는 처음에 대기 화면인 파랑 화면을 본다. 여기서 화면을 한번 클릭하면 빨강 화면으로 전환되는데, 빨강 화면은 준비 화면을 의미한다. 준비 화면에서는 임의의 시간이 지난 후에 초록 화면으로 자동 전환된다. 초록 화면을 보자마자 클릭하면 초록 화면이 뜬 시간과 클릭한 시간의 차이를 구해 반응속도를 측정한다. 만약 준비 화면 (빨강) 일 때 클릭한다면 성급했다는 메시지가 나오고 다시 클릭하도록 대기 화면(파랑)으로 보낸다. 타이머도 이벤트 리스너와 마찬가지로 비동기로 작..
📌 5판 3선승제로 만들기 가위바위보 게임은 무한히 반복되므로 어느 순간이 되면 게임을 마무리하고 싶어진다. 게임을 5판 3선승제로 만들어 3번 먼저 이긴 쪽이 최종 승리하는 것으로 바꿔보자. 단, 무승부가 나면 무효 판으로 친다. 🤍 점수 기록하는 변수 선언 score 대신 내 점수를 기록하는 me 와 컴퓨터의 점수를 기록하는 computer 변수를 선언한다. 가위 바위 보 0 내가 승리하면 me 변수에 1을 더하고, 컴퓨터가 승리하면 computer 변수에 1을 더한다. me 나 computer 가 3이 됐는지를 확인해서 3이 된 쪽이 있다면 결과 메시지를 띄우고, 없다면 1초 뒤에 개음을 재개한다. 더보기 -(도서) Let's Get IT 자바스크립트 프로그래밍 https://thebook.io/ ..
📌 가위바위보 규칙 찾기 이제 버튼을 클릭하면 점수를 계산해서 화면에 점수를 표시하는 부분만 구현하면 된다. 🤍 event.target.textContent 사용하기 먼저 버튼을 클릭할 때 어떤 선택지를 클릭했는지를 알아야 한다. event.target.textContent 를 사용하면 글자를 알아낼 수 있다. //2번째 방법 ( 함수가 아무 일도 하지 않게 만듬 ) let clickable = true; //변수를 만든다. const clickButton = () => { if (clickable){ clearInterval(intervalid); clickable = false; //버튼을 클릭한 동안에는 false로 만든다. //글자 알아내기. //const myChoice = event.targe..
들어가기 가위보위보 게임은 가위, 바위, 보 버튼을 클릭해 컴퓨터와 승패를 가른다. 버튼을 누르면 승부를 표시하기 위해 돌아가는 그림을 1초 동안 멈추게 하겠다. 📌 순서도 그리기 📌 첫 코드 가위 바위 보 0 📌 객체로 변수 묶기 img_url 변수에 주어진 이미지는 위와 같다. 이것은 가위, 바위, 보가 하나의 이미지로 합쳐 있다. 이런 사진은 처음 본다. 왜일까? 더보기 서버에 이미지를 요청하는 횟수를 줄이기 위한 기법이다. 가위, 바위, 보 각각의 이미지를 한 번씩 요청하면 총 3번의 요청이 서버로 전송되지만, 그림처럼 하나로 합쳐 두면 한 번만 된다. 이를 이미지 스프라이트 ( image sprite ) 라고 한다. 단, 이미지가 하나로 합쳐져 있으므로 CSS 와 자바스크립트로 적절히 잘라서 화..
