마우스를 방향에 따라 움직이는 오브젝트 웹을 돌아다니다 보면 마우스를 이동할때 마우스 방향으로 오브젝트가 실시간으로 바라보고는 하는데요. 나중에 도움이 되지 않을까 싶어서 자바스크립트로 구현해 보았습니다. 오브젝트는 CSS속성 transform: rotate를 사용하여 각도 조절을 통해 마우스가 있는 방향으로 움직이게 합니다. See the Pen [JavaScript] 마우스를 따라가는 오브젝트 by junheeleeme (@junheeleeme) on CodePen. target인 화살표의 중심좌표를 기준으로 마우스 좌표에 따라 각도를 구해서 마우스가 이동할때마다 값을 넣어줍니다. 각도를 구할 때는 두 점 사이의 절대각도를 구하는 아크탄젠트를 사용한다. 수학공부 열심히 할걸.. atan2 함수는 두 ..
2021.05.19
Error: listen EACCES: permission denied 0.0.0.0:80 Error: listen EACCES: permission denied 0.0.0.0:80 at Server.setupListenHandle [as _listen2] (net.js:1301:21) at listenInCluster (net.js:1366:12) at Server.listen (net.js:1452:7) at Object. (/home/ubuntu/portfolio/index.js:19:5) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loa..
2021.05.12 1
코드 const mongoose = require('mongoose'); const MONGODB_URL = "mongodb+srv://name:@생략"; mongoose.connect(MONGODB_URL, { useNewUrlParser: true, useUnifiedTopology: true }, err=>{ if(err){ console.log(err) } else{ console.log('success!'); } }); 오류 메세지 MongoError: bad auth : Authentication failed. at MessageStream.messageHandler (/Users/user/Documents/node_modules/mongodb/lib/cmap/connection.js:268..
2021.04.23
아마존 AWS EC2에 있는 인스턴스에 연결하기 위해 윈도우에서는 putty라는 터미널 소프트웨어를 사용했지만 맥에서는 기존의 있는 터미널을 이용하여 연결할 수 있다. 1. 터미널 실행 2. 해당 인스턴스의 pem키가 저장된 위치로 이동 3. chmod 400 "pem키 파일명' 4. ssh -i "pem키 파일명" "인스턴스 주소" 연결 끝
2021.04.21
1. JSON JSON은 자바스크립트에서 객체를 만들 때 사용하는 표현식을 말한다. JSON형식이라고 말을 하며 컴퓨터나 사람이 이해하기 쉬우며 데이터의 용량도 작아 최근에는 XML을 대신하여 JSON을 사용하기도 한다. 2. JSON API JSON.parse(str) : 문자열 파라미터를 자바스크립트의 객체로 만들어준다. JSON.stringify(ob) : 객체 파라미터를 JSON 포멧으로 바꿔준다. JSON은 서버와 통신하면서 주고받을때 문자열 형식으로 받아 다시 JSON형식으로 바꾸어 사용하기 위해 JSON.parse/stringify를 사용한다. var person = '{\ "number" : "01",\ "name" : "꾸생",\ "id" : "abcd1234"\ }'; var info ..
2021.03.28
Ajax(Asynchronous JavaScript And XML) 고정적인 웹 문서를 넘어 새로고침없이 새로운 문서 내용을 반영하기 위한 방법이다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 이루어 변경된 결과를 웹페이지에 반영하는 기술로, 비동기성의 장점을 보여주며 XMLHttpRequest 객체를 사용하여 JSON, XML, HTML,일반 텍스트 등 다양한 포맷을 주고받을 수 있다. 간단하게 말해 페이지 로딩없이 새로운 HTML 내용을 변경할 수 있다. Ajax 구현방법 JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server..
2021.03.28
자바스크립트 append() / prepend() fixed target을 기준으로 first는 append를 사용했고 second는 prepend를 사용하여 적용한 결과이다. 기존에 있었던 fixed는 가운데에 위치했고 prepend는 앞 쪽에, append는 뒤에 첨부되었다. target.parentNode.append(first); 이런식으로도 사용 가능
2021.03.26
See the Pen Tetris by junheeleeme (@junheeleeme) on CodePen. 유튜브 강의를 보면서 테트리스를 구현해보았지만 코드를 100% 이해하기 위해서 다시 처음부터 만들어야겠다..
2021.03.24
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev