지니리 개발일지

Object shorthand assignment 리액트에서 많이 사용하는 JS ES6문법으로 키와 변수의 이름이 같을 때 사용한다. let name="noona"; let age = 17; let person ={ name: name, age: age } console.log(person); // { name: 'noona', age: 17 } let person ={ name, age } console.log(person); // { name: 'noona', age: 17 } Destructuring 객체 안에서 가져오고 싶은 키 값을 배열에서도 적용 가능하다. let person ={ name:"noona", age: 20 } let name = person.name; let age = perso..

저번 벽돌깨기 게임에 이어서 몬스터 탈출 게임을 4차에 걸쳐 만들기로 했다. 🚪🏃🏻‍♀️ 👻 1차 버전에서는 맵/ 타일/ 플레이어/ 탈출구를 생성하였다. 맵·타일 생성 - 9*9 타일을 가진 맵 생성. - 2차원 배열과 class타입으로 작성. monsterGame.js // 캔버스 생성 const canvas= document.getElementById("myCanvas"); const context = canvas.getContext("2d"); // 타일(class 타입으로 생성) class Tile { constructor(left, top, right, bottom, color) { this.left = left; this.top = top; this.right = right; this.bott..

HTML5에 새롭게 추가된 태그는 주로 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용한다. 그래픽 콘텐츠를 위한 컨테이너일 뿐 실제로 그림을 그리는 동작은 스크립트를 사용하여 구현한다. 해당 브라우저가 요소를 지원하지 않을 경우 내부에 존재하는 텍스트는 브라우저 화면에 대신 나타나게 된다. canvas.html index.js const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); function drawCanvas() { context.beginPath();// 그리기 시작 context.rect(0, 0, canvas.width, canvas.height); conte..

난수(Random Number)란 정의된 범위 내에서 무작위로 추출된 수를 일컫는다. 자바스크립트의 내장 객체로 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 Math가 있다. 그리고 수학적 작업을 손쉽게 할 수 있도록 Math 메소드를 사용해서 아래와 같이 난수(random number)를 구할 수 있다. let randomNum = Math.random(); console.log(randomNum);// 0.0 ~ 1.0 사이의 랜덤한 값(난수) 난수 생성할 때 쓸 수 있는 Math 메소드는 아래와 같다. 그 외 Math에는 min, max 등 다양한 메소드가 있다. Math.random() - 0보다 크거나 같고 1보다 작은 랜던숫자 반환. Math.floor() - 소수점 이하 버림 M..

숫자형(Number) 숫자 형태로 이루어진 자료형이다. 평소 우리가 사용하는 건 10진수이다. 2진수, 8진수, 16진수에 대해 알아보고 어떻게 사용하는지도 알아보자. 2진수 0b 0000 0000 2진수는 위와 같은 형태로 사용한다. 0은 숫자 표현이라는 형식적인 느낌이고 b는 binary를 뜻한다. 0 b 0 0 0 0 0 0 0 0 128 64 32 16 8 4 2 1 ex) 10진수 255를 2진수로 0b 1111 1111/ 10진수 179는 2진수로 0b 1011 0011로 나타낼 수 있음. 8진수 0o00 8진수는 위와 같은 형태로 사용한다. 0은 숫자 표현이라는 형식적인 느낌이고 o는 octal를 뜻한다. 0 o 0 0 0 64 8 1 ex) 10진수 255를 8진수로 0o377/ 10진수 ..

변수(variable)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 보통 프로젝트를 진행할 때 변수명에 대해 규칙을 정해야하는데 아래와 같은 방법들이 있다. 변수명 규칙 1. 알파벳, -, -, 숫자로 작성한다. 한글, 특수문자, 일본어 등은 문법적으로 가능하지만 권장 x 숫자가 제일 앞에 올 수 없다. 2. Camel 표기법 (구글 권장) 낙타라는 의미를 가지고 있으며 소문자로 시작해 2번째 단어부터는 대문자로 작성한다. ex) let myVeryLongLongName; 3. 대소문자로 구분한다. let myVeryLongLongName; let MyVeryLongLongName; (Pascal 표기법) 변수 타입 var 가장 오래된 버전에서 사용하는 변수 타입 가변성, 중복선언의 문제가 ..

Javascript를 실행하는 2가지 방법이 있다. 1. html 파일 내에서 html 파일 내에서 태그 안에 직접 자바스크립트 코드를 작성하게 될 때 제일 밑부분에 작성하는 것이 좋다. body 안에 다른 html, css코드가 렌더링 되기 전에 자바스크립트 코드가 실행되면 렌더링 오류가 날 수 있기 때문이다. 또한 HTML이 만들어질 때 같이 컴파일 되고 메모리 할당도 같이 진행돼서 한 번에 처리하는데 시간이 오래 걸린다. 2. js파일을 불러오는 방법 따로 파일을 js 파일을 불러오면 한 번에 컴파일해서 페이지를 보여주고 순차적 자바스크립트 코드가 실행된다. 그래서 프로젝트가 커지면 자바스크립트 파일을 따로 가져오는 게 좋다.