'🌕 Front-end/Java Script' 카테고리의 글 목록

[ JS ] 화살표 함수

2023.04.23

🤍 화살표 함수 ES6에서 새로 추가되었다. 함수 표현식에 비해 짧은 문법을 가지고 있다. 사전적으로 this 값을 묶는다. 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수이다. 일반함수, 화살표 함수의 비교 function fun() { // 일반함수 ... } const arrFun = () => { // 화살표 함수 ... }; 화살표 함수 사용 예시 var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); console.log(a2); // logs [8, 6, 7, 9] // 화살표 함수 사용 var a3 = a.map( s => s.le..

🌕 Front-end/Java Script

[ JavaScript ] 이벤트 루프 이해하기_카드 짝 맞추기 게임_2 ( 강좌 참고 )

2023.02.21

📌 효과 발생 중 카드 클릭 막기 구현 중 생긴 버그를 잡자. 1. 카드를 클릭하면 카드가 뒤집힌다. 2. 이미 짝이 맞춰진 카드를 클릭해도 카드가 뒤집힌다. 3. 서로 다른 4가지 색의 카드를 연달아 클릭하면 마지막 두 카드가 앞면을 보인 채 남아 있다. 4. 한 카드를 연이어 클릭하면 '축하합니다!' 표시 창이 뜬다. 해결하려면 카드를 클릭할 수 있는 상황 / 클릭할 수 없는 상황을 구분해야 한다. 이를 위한 새로운 변수가 필요하다. 처음에 카드를 잠깐 보여 줬다가 다시 뒤집을 때까지는 클릭할 수 없게 한다. 또한, 클릭한 카드가 이미 짝이 맞춰진 카드이거나 조금 전에 뒤집은 카드인 경우를 모두 onClickCard 함수에서 걸러낸다. 왜 서로 다른 색상의 4가지 카드를 연이어 클릭하면 마지막 두 장..

🌕 Front-end/Java Script

[ JavaScript ] 이벤트 루프 이해하기_카드 짝 맞추기 게임_1 ( 강좌 참고 )

2023.02.03

들어가기 짝 맞추기를 해보자. 짝 맞추기 게임은 다음과 같다. 12장의 카드가 있고, 두 장씩 서로 색이 같다. 모든 카드의 색을 보여 주며 잠깐 동안 카드 짝을 외울 수 있는 시간을 주고 나서, 카드를 다시 전부 뒤집은 뒤 짝을 맞추게 한다. 많은 카드를 실시간으로 뒤집기 때문에, 자바스크립트가 돌아가는 순서를 정확하게 알아야 한다. 📌 순서도 그리기 2장씩 카드를 뒤집어 2장의 카드 색이 같으면 완료 목록에 넣고, 다르면 다시 뒤집는다. 12장의 카드를 모두 맞추면 성공이다. 위의 순서도를 보면 서로 관련 있는 절차는 하나의 절차로 묶고, 복잡한 비동기 절차나 조건문 절차에서만 순서도를 분리한다. Note! 비동기가 뭐였지? 비동기는 동기의 반댓말로, 실제 코딩한 순서와 다르게 동작하는 코드를 비동기..

🌕 Front-end/Java Script

[ JavaScript ] map ( ) 함수

2023.02.01

📌 map ( ) 함수 map ( ) 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수이다. 알아두기 객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다. 이해가 안됩니다. 예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터를 사용해야 하는 상황이 발생할 수 있다. 이때 map ( ) 을 사용할 수 있다. 이렇게 보면 map ( ) 은 주어진 값을 새로운 값으로 구성하는 함수라고도 할 수 있다. const users = [ { firstName: 'a', lastName: 'A' }, { firstName: 'b', lastName: 'B' }, { firstName: 'c', lastName: 'C' }, { firstName: 'd..

🌕 Front-end/Java Script

[ JavaScript ] 매개변수(Parameter) 와 전달인자 (Arguments)

2023.02.01

📌 매개변수( Parameter ) 와 전달인자 ( Argument ) 란? function test(a,b) { return a + b } test(2,3); //원본 코드 출처. //https://cocobi.tistory.com/82 위 코드에서 함수를 선언할 때 ( a,b ) 의 a,b 가 매개변수 ( parameter ) 이다. 매개변수는 말 그대로 변수라는 뜻이다. 또한, 함수를 호출할 때 (2,3) 이 변수에 들어가는 값이며 인수 ( argument ) 라고 한다. 정리 위 이미지에서 x 와 y 는 매개변수 ( Parameter, 인자 ) 에 해당하며 함수의 정의에서 사용되는 변수이다. 그리고 add( 2,5) 에서 2 와 5 를 전달인자 ( Argument, 인수 ) 라고 부르며 파라미터에..

🌕 Front-end/Java Script

[ JavaScript ] 함수 선언식 & 함수 표현식

2023.01.30

📌 함수 선언식 - Function Declarations 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. function 함수명() { 구현 로직 } // 예시 function funcDeclarations() { return 'A function declaration'; } funcDeclarations(); // 'A function declaration' //코드 출처. //https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/ 해당 파일, 혹은 주변의 코드가 실행되면 바로 정의된다. ∎ 코드 예제 functionOne(); //"Hello World!" function f..

🌕 Front-end/Java Script

[ JavaScript ] 클래스 다루기_텍스트 RPG_3 ( 강좌 참고 )

2023.01.24

📌 전투 결과 구현하기 공격을 누르면 서로 공격하게 해서, 둘 중에 먼저 체력이 0이 되는 쪽이 나오면 승부가 가려진다. 주인공의 체력이 0이 되면 게임 오버 / 몬스터의 체력이 0이 되면 주인공은 경험치를 얻는다. 경험치가 주인공 레벨 x 15 보다 높으면 주인공을 레벨업을 한다. 레벨업을 하면 주인공은 체력을 모두 회복하고, 최대 체력과 공격력이 5씩 증가한다. 그런데 Hero / Monster 클래스에 공통되는 부분이 있다. 이름, 체력, 공격력, 경험치 같은 공통 속성이 있고, attack 같은 공통 메서드가 있다. 이런 중복을 제거하면 좋을 것 같다. ✨ 클래스의 상속 여기서 클래스의 상속이라는 개념이 등장한다. Hero 와 Monster 클래스에서 공통되는 부분만 추려 새로운 클래스로 만들고,..

🌕 Front-end/Java Script

[ JavaScript ] 클래스 다루기_텍스트 RPG_2 ( 강좌 참고 )

2023.01.12

📌 클래스 간에 상호 작용하기 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..

🌕 Front-end/Java Script

[ JavaScript ] 클래스 다루기_텍스트 RPG_1 ( 강좌 참고 )

2023.01.11

들어가기 텍스트 RPG 를 만들면서 클래스 문법을 배우자. 텍스트로만 진행하는 RPG이다. 주인공,몬스터,보스가 아노고 레벨업도 한다. 📌 순서도 게임에는 크게 2가지 모드가 있다. 1. 일반 모드 : 모험, 휴식, 종료 중에서 선택하는 일반 모드 2. 전투 모드 : 적을 공격 or 체력을 회복 or 도망 내용에 맞춰서 순서도를 그려보자. 📌 첫 화면 만들기 주인공 이름을 입력받는 첫 화면을 만들자. 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 사용자가 주인공 이름을 입력하고 시작 버튼을 클릭하면 초기 화면을 일반 메뉴로 화면 전환한다. 📌 주인공과 몬스터 만들기 아직 주인공의 이름만 입력했다. 이제 주인공의 정보, 몬스터들의 정보를 입력하자. 객체 리터럴로 주인공을 만들었다. ..

🌕 Front-end/Java Script

[ JavaScript ] 이차원 배열 다루기_ 틱택토 게임_2 ( 강좌 참고 )

2023.01.09

📌 차례 전환하기 클릭한 칸에 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..

🌕 Front-end/Java Script

[ JavaScript ] 이차원 배열 다루기_ 틱택토 게임_1 ( 강좌 참고 )

2023.01.09

들어가기 틱택토 게임은 오목의 축소판인 삼목이다. 삼목은 바둑판이 아니라 3 x 3 표 위에서 진행한다. 삼목 데이터는 자바스크립트에서 이차원 배열로 표현한다. 틱택토를 만들면서 이차원 배열로 데이터를 관리하고, 배열 데이터를 HTML 화면에 표시하는 작업을 배워 보자. 📌 순서도 그리기 바둑에 검은 돌, 흰 돌이 있듯이 틱택토에는 O 와 X 가 있다. 먼저 혼자 번갈아 가면 O 와 X 를 넣고 마지막에 컴퓨터와 게임을 하는 방법을 추가하겠다. 📌 첫 코드 이번에는 HTML 까지 자바스크립트로 작성하므로 body 태그 내부에 script 태그를 제외한 다른 태그를 넣지 않는다. 📌 이차원 배열 다루기 ✨ 이차원 배열 틱택토는 이차원 배열을 사용해야 한다. 위 표를 자바스크립트로 표시해보자. [ [null..

🌕 Front-end/Java Script

[ JavaScript ] Date 사용하기_ 반응속도 테스트_2 ( 강좌 참고 )

2023.01.08

📌 평균 반응속도 구하기 테스트를 반복적으로 수행해서 평균 반응속도를 구하자. 평균 반응속도를 구하려면 기존 반응속도를 모두 기록해야 한다. 어디에다가 기록해놓을까? 더보기 배열을 만든다. records 라는 ** 을 만들어 반응속도를 기록한다. 클릭해서 시작하세요 반복해서 측정해야 하므로 측정이 끝날 때마다 startTime 과 endTime 을 null 로 비운다. 평균 반응속도를 측정하면 다음과 같이 나온다. 💫 배열의 메서드 reduce 아래는 배열에 저장된 값들의 평균을 구하는 코드이다. 평균을 구하려면 모든 값을 더한 후 전체 개수로 나누면 된다. 모든 값의 합을 구할 때 reduce 라는 배열의 메서드를 사용했다. const average = records.reduce((a,c) => a +..

티스토리툴바