본문 바로가기

전체 글

(120)
Express - Router(라우터) 라우터란? "라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다." 즉, URI를 다루는 기법이다. 주소창에 www.tistory.com/manage/~~~~ www.tistory.com/board/~~~~ 이런식으로, 카테고리 별로 묶을 수 있다. 기본적으로 app.get('/manage', 콜백함수) { // www.주소.com/admin/ 어드민의 루트페이지. res.send(`Management Page`); }) adminRouter.get('/enroll', (req, res) => { // www.주소.com/admin/enroll 접속페이지 res.send(`Enroll Page`); }) adminRouter.get('/uploa..
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' 입니다. 키보드를 꾹 ~ 누르고..