JavaScript (28) 썸네일형 리스트형 [React JS] React JS, JSX 기존 바닐라 JS는 HTML을 먼저 만들고 JS를 만들어서 덧붙이는 방식이라면, React JS는 JavaScript을 먼저 만드는 방식이기 때문에 업데이트를 HTML에서 할 필요 없이 JS로만 업데이트가 가능하다. 사용하기 위해서는 script에 React JS, ReactDom을 추가해야한다. React JS는 인터렉티브의 원동력, ReactDom은 React element를 가져가다 HTML로 바꿔주는 역할을 한다. https://unpkg.com/react@17.0.2/umd/react.production.min.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js JSX는 JavaScript를 확장한 문법이다. 생긴게 HTM.. [Video app] URL Parameters URL에서 숫자등이 들어 있는 ID를 넣어 줄 때는 /:id(뒤에 id는 아무 문자나 상관 없다) 하지만 이렇게 지정하면 숫자 외에 문자가 들어가는 URL도 express가 id처럼 인식하기 때문에 다른 문자가 포함된 url을 상단에 올려줘야하는 번거로움이 있다. 따라서 Regular Expression이 필요하다 https://www.regexpal.com \w+: 모든 문자, 숫자 선택 \d+: 모든 숫자 선택 JS에서는 \를 하나 더 추가해서 (\\d+) 이렇게 작성한다. 그럼 /(\\d+) 이렇게 작성해도 되지만, /:id(\\d+) 이렇게 작성하는 이유는 id를 이용해서 req.params.id와 같은 숫자값을 찾을 수 있기 때문이다. https://kasterra.github.io/regex1.. [Video app] render, req, res, express, router, morgan req, res 관련 글 https://expressjs.com/en/api.html#req Express 4.x - API Reference Express 4.x API express() Creates an Express application. The express() function is a top-level function exported by the express module. var express = require('express') var app = express() Methods express.json([options]) This middleware is available in Ex expressjs.com 추가적으로 express, router에 대한 설명도 나와있다. express는 다른.. [Video app] make server 보통 코드와 로직을 가지고 있는 모든 파일들은 src라는 파일을 만들어서 안에 넣는다. scripts 안에서 index.js는 src/index.js로 바뀐다. 단 해당 js파일에서 import express를 할 때는 상위폴더 명을 기재하지 않아도 자동으로 찾아준다. 그 후 const app(자유롭게해도된다) = express(); 입력하면 express app를 실행 가능하게 만들어준다. app.listen() -> addeventlistener 같은 것 괄호 안에 4000(fort숫자, 집 대문같은 개념)그리고 함수명(handleListening)을 작성한다. 바닐라 JS의 click event와 비슷하다. const handleListening = () => console.log(`✅ Server.. [Video app] package.json, express, dependencies package.json에서 "scripts"은 콘솔에서 내가 만든 명령어를 실행하게 해준다. package.json에서 "dependencies"는 해당 패키지가 작동하기 위해서 필요한 다른 package를 말한다. npm run으로 실행 가능 서버를 만들어 주기 위해서 express를 설치해준다. -> npm i express 으로 설치 express같은 package를 설치하면 자동으로 node_modules 폴더에 저장된다. 만약 해당 폴더가 삭제되었을 경우, npm i를 해준다면 dependencies에 있는 package들을 토대로 모듈을 다시 설치해준다. (따라서 Github에 업로드한다면 용량이 큰 node_modules 폴더를 제외 시켜도 npm i로 재설치가 가능하다) .gitignore.. [Video app] Node JS란? Node JS란 브라우저 외에서도 작동하는 Java Script이다. 따라서 다른 프로그래밍 언어처럼 백엔드가 가능하다. Node JS로 React JS도 가능하다. 즉 앱과 어플을 만들 수 있다.Node JS를 활용해서 동영상을 업로드 할 수 있는 웹페이지를 만들어 보기로함.주로 이론과 알아두면 좋을 문법 위주로 작성할 계획이다. package.json은 node js에서 처음 만드는 파일. 레고와 같이 하나씩 쌓아 올려보자. [momentum app] stopwatch 만들기 https://ge5rg2.github.io/momentum-2021/ Momentum App What are the things you need to focus on today? ge5rg2.github.io 개인적으로 사용 빈도가 가장 높을 것 같은 stopwatch를 만들고 momentum app 기능에 추가했다. ✖ 00:00:00 start stop HTML (화면 내리는 버튼은 기존에 사용하던 pageDown Class를 활용하였다.) .main-timer { z-index: 4; position: absolute; top: 50px; left: 10px; flex-direction: column; justify-content: center; align-items: center; height:.. [momentum app] 그림 저장 버튼 지난번에 이어서 저장 버튼을 활성화시켜 보았다. const saveBtn = document.getElementById("jsSave"); function handleCM(event) { event.preventDefault(); /* 마우스 우클릭 방지 함수 */ } function handleSaveClick() { const image = canvas.toDataURL(); const link = document.createElement("a"); link.href = image; link.download = "PaintJS[🎨]"; link.click(); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); canvas.addEve.. 이전 1 2 3 4 다음
