전체 글
-
git 사용법 (상) 혼자작업편about front-end 2020. 5. 22. 23:03
왜 깃(git)을 사용할까? 내가 뭔가를 만들고 프로젝트를 진행하면, 컴퓨터의 특정 폴더에 작업물들을 넣어둔다. git은 이 폴더 안에, 시간 여행이 가능한 "평행우주"들을 만드는 것이다. 시간여행이 가능하다는 건 내가 수습하기 어려운 실수들을 했거나, 전이랑 뭐가 바뀌었는지 헷갈릴때, 언제든 폴더 내 상태를 과거로 돌릴 수 있다는 것이다. Ctrl+z와 같은 수준이 아니라, 아예 모든 파일들의 저장된 상태를 아까로, 엊그제로, 아니면 아예 맨 초기로 돌려 놓을 수 있다는 이야기이다. 또는 과거로 돌아가서 필요한 것만 챙겨서 현재나 다른 과거로 가져올 수도 있다. 🤗 (엄청난걸?) 예전 처럼 매번 폴더를 압축해서 시점별로 저장해 둘 필요가 없다. (..나를 두고 하신말씀인가..?ㅋㅋㅋ) 평행우주를 만든다..
-
웹페이지의 스크롤 막기Study/JavaScript 2020. 5. 21. 15:24
간단한 미니 게임이 들어간 자기소개 웹페이지 구현중, 웹페이지에 간단한 게임을 넣는것 까지 완성이 되었는데, 문제가 발생했다. 웹페이지를 #id값에 따라 움직이게 했더니 긴 스크롤이 발생하여, 게임 안에서 애벌레가 사과를 먹기위해 방향키를 조절할때마다 위아래로 웹페이지 스크롤이 함께 움직였기 때문이다. 어떻게 웹페이지의 스크롤은 막고, 게임 캔버스에서 방향키는 조절할 수 있도록 할 수 있을까? 이를 해결하기 위해 구글링을 해보았다. css fixed? sticky ?? 모두 내가 원하는 방식이 아니다. 덕분에 fixed 만 알았는데 몰랐던 sticky 방법에 대해서도 알 수 있었지만... 😎 구글링을 하면서 스크롤 자체를 없애주기 위해서 css 에서 oeverflow: hidden; 방식을 사용할 수 있..
-
async vs deferStudy/JavaScript 2020. 5. 20. 19:10
// 노드 js와 api는 모두 console에 관련된 api를 가지고 있다. 그리고 이 둘의 api들의 interface가 둘다 동일하다. 1. console api console API는 웹 API중의 하나이다. API (Appication Programming Interface). 웹 APIs 는 자바스크립트 언어 자체에 포함된 아이가 아니라 브라우저가 제공하는 브라우저가 이해할 수 있는 함수들이다. 콘솔은 언어 자체에 포함되는 아이는 아니지만, 통상적으로 사용되는 아이여서 똑같은 콘솔apis를 이용해서 node JS 로도 출력할 수 있고 브라우저 상에서도 출력되는 걸 확인 할 수 있다. 2. Dev Tools 그리고 브라우저에서 딸려나오는 이런 개발 툴을 잘 사용하면 유용하게 활용할 수 있다. i..
-
snake gameStudy/JavaScript 2020. 5. 19. 14:05
//html js코드는 아래와 같다. const cvs = document.getElementById("snake"); const ctx = cvs.getContext("2d"); //create the unit let box = 32; //load images const ground = new Image(); ground.src = "images/ground.png"; const foodImg = new Image(); foodImg.src = "images/food.png"; //load audio files const dead = new Audio(); const eat = new Audio(); dead.src = "audios/gameover.mp3"; eat.src = "audios/eat.m..
-
(게임) 구구단 구현Study/JavaScript 2020. 5. 18. 16:52
코드를 작성하기 전에 먼저 생각해본다. 컴퓨터가 랜덤한 문제를 낸다. | 내가 답을 입력한다. | 2번 (no) (yes) 1번 while (true){ let numberOne = Math.floor(Math.random() * 9) + 1; let numberTwo = Math.floor(Math.random() * 9) + 1; let result = numberOne * numberTwo; let condition = true; while (condition){ let answer = prompt(`${String(numberOne)} 곱하기 ${String(numberTwo)} 는?`) if (result === Number(answer)){ alert('올 맞췄네😊'); condition = ..
-
객체Study/JavaScript 2020. 5. 18. 16:13
객체 함수(function) 배열 숫자 문자 불린 null undefined 객체 = { 속성(프로퍼티): 값, 속성(메서드: 함수 } 호출할때, 아래와 같이 작성. 객체.속성 객체['속성'] 이 두 호출 방법의 차이 : 윗 호출방법이 편하지만, 아래 호출방법을 사용해야할 때가 있다. Array 라는 객체가 있다. 이것은 브라우저에서 만들어준 배열을 담당하는 객체이다. 그러나 배열은 아니다. 이와 같이 Math 객체, Number, window객체 등등 있다. 앞 첫글자가 대문자 인 친구들은 '생성자'이다.
-
printTriangle만들기Study/JavaScript 2020. 5. 18. 15:44
for (처음(1); 조건(2); 끝(4)){ 실행(3) } 2,3,4는 조건이 true면 계속 반복 for(let star = 1; star = 2 ; star -= 2){ console.log('*'.repeat(star)) } /* 결과 ********** ******** ****** **** ** */ 위와 같은 함수를 "등차수열"이라고 한다. 등차수열 = -2, 몇개씩 감소될때 등비수열 = 2배씩 차이날 때 for (let star = 10; star >= 2 ; star *= 2){ console.log('*'.repeat(star)) } 위 함수가 등비수열이다. (결과값이 2배씩 차이남) for (let star = 5; star >= 1 ; star -= 1){ console.log(' '..
-
save imgStudy/JavaScript 2020. 5. 17. 20:03
캔버스에서 마우스 우클릭을 하면, 두 가지를 볼 수 있는데, save img와 copy img이다. 우리가 캔버스에서 한 작품들은 이미지 저장이 된다. 무슨일이 일어난 거냐면, canvas는 pixel을 다루는 거니까 기본적으로 img를 만든다. 그래서 다운로드와 save파트는 이미 내장되어있다. 이미 canvas가 pixel을 다뤄서 img를 만들어주니까 우리가 할게 없다. 여기에 버그가 있다는 것을 알게 되었는데, filling모드를 적용하지 않으면 배경이 투명색으로 이미지가 저장된다. 즉, canvas에 배경색을 지정하지 않으면, 실제 pixel manipulator canvas에 background를 설정하지 않아서이다. 즉 우리는 배경색을 지정하지 않아도, canvas가 load 되자마자 설정되..