본문 바로가기

Web Development

(89)
Express - Babel(바벨) 적용하기 Express 에서 바벨 사용법 요약. 바벨을 사용하는 이유는? - 최신 JS 문법을 사용하기 위함(ES6이후 문법)이며, 구형 브라우저에서 동작할 수 있도록 코드를 변환해주는 변환 역할을 한다. 코드에서 차이점은? //express를 불러오는 방법 (구식) const express = require('express'); //Express를 불러오는 신식 방법 import express from "express"; 그럼 Express에서 바벨을 적용시키는 방법은? 1. 터미널 창에 다음과 같이 코드를 입력해서 다운로드한다. npm install @babel/core @babel/node @babel/preset-env --save 2. .babelrc 파일을 만들고 다음의 코드를 삽입한다. { "pres..
[Javascript] 곱등이게임 Javascript로 음.. 두더지게임을 만들어봤습니다. 그런데, 맥북에 두더지 아이콘을 못찾겠어서, 곱등이로.. 아이콘을 바꿧으니, 곱등이게임이되겠죠?ㅋㅋ 아무튼 ! 살펴봅시다 ! 0. 곱등이게임영상 1. 순서도 처음에, 틱택토 응용해서 3x3칸을 만들려고했습니다. 그런데, 생각해보니 HTML로 화면을 만들면 훨씬 간편하잖아요? 그래서 굳이, JS로 만들 필요성을 못느껴서, HTML로 직접 만들어주고, 시작했습니다. 2. humble.html (곱등이 = humble); 점수표 1 2 3 4 5 6 7 8 9 게임시작 ! 3 X 3 칸과, 점수를 넣을 칸, 그리고, 게임시작버튼 등을 만들고 humble.js를 임포트 + humble.css를 임포트해왔습니다. 2. humble.js let score =..
[Zerocho-14] EventListener(keyup&down) & 증감연산자(전위형/후위형) & Blocking / Non-Blocking & 이벤트루프 1. EventListener(Keyup&down&press) 지난시간에, EventListener속성중에, mousemove, down , up 등, 마우스의 움직임 이벤트에 대해 살펴봤습니다. 그럼 이번시간에는 테트리스 게임을 만들면서 필요했던, 키보드 키들의 이벤트를 설정하는 방법에 대해 살펴보겠습니다. 우선 'keyUp' 입니다. 키보드의 키를 눌렀다가, 떼는 순간 발생하는 이벤트입니다. window.addEventListener('keyup', (event)=> { console.log(event); }) 그럼, 어떤 버튼을 눌렀는지 객체내에 값을 반환해주는데, 이를 이용해서 사용자가 어떤 버튼을 눌렀는지 확인하고 상호작용할 수 있습니다. 다음은 'keyDown' 입니다. 키보드를 꾹 ~ 누르고..
[Javascript] 계산기만들기 자바스크립트 문법을 처음 배운 뒤, 뭔가 만들어본 경험이 없어, 막상 자바스크립트로 뭘 만들라고 하면 만들지를 못하겠더라구요. 그래서 ! 저번 투두리스트에 이어서, 또 ~ 흔한 주제중 하나인 계산기 만들기를 차근차근 해봤습니다. 우선 순서도를 그렸습니다. 이런식으로 해서 코드를 써나간 결과물은 다음과 같습니다. 못생긴 계산기.. 별거없죠? ㅋㅋ.. 그냥 계산기입니다. 아무튼 코드를 살펴보는 시간을 가져보겠습니다. 1. HTML AC 7 8 9 ÷ 4 5 6 x 1 2 3 - 0 . + HTML파일입니다. 1. 기본적으로, header부분에는, 결과창을 만들어주고, 사용자가 값을 입력할 input_blank와, submit 버튼(=)을 만들어줬습니다. 그리고 css요소를 조금 즉흥적으로 보면서 적응한 부분..