Javascript (50) 썸네일형 리스트형 [js] input 값 숫자에 컴마 찍기 (thousands separators with commas) Input 값에 숫자를 입력하면 숫자가 그대~로 컴마없이 나온다. 1000000 -> 1,000,000 으로 변경하기 해당 input id를 불러와서 매 숫자의 천의 자리마다 "," 컴마를 찍는 함수를 keyup 이벤트로 넣어주었다. 원래는 더 간편하게 html input에 바로 onkyup="comma()" 이렇게 넣어주었다가 js가 해당 함수를 찾지못하는 에러가 났다. (랜더될 때 Js 함수가 Global이 아니라서라고 한다.) 찾아보니 global 하게 만들거나 또는 modern event handling (아래 코드 방식)으로 만드라고 해서 후자로 만들었다. html 원 javascript const money_input1 = document.getElementById('input1'); mone.. [JavaScript] reduce 개념 사용법 알아보기 Reduce : reduce() 매서드는 배열의 각 요소에 대해 주어진 함수를 실행, 하나의 결과값을 반환한다. 반환값은 number, object, array 등이 있다. * reduce는 배열에 적용되는 함수이다. Reduce의 인자값 1. 누산기 (acc) 2. 현재값 (cur) 3. 현재 인덱스 (idx) 4. 원본 배열 (src) reduce의 첫 번째 인자값이 reduce의 특징을 잘 말해준다. acc 누산기 = 최종 집합 결과물이라고 생각하면 쉽다, 내가 설정한 함수가 적용된 값이 acc 인자값으로 할당되고 각 ele요소 반복하면서 acc의 값도 계속해서 바뀌게 된다. 처음 개념을 읽었을 때 바로 이해하기 어려웠는데, 아래 예시처럼 console.log를 찍어 어떻게 돌아가는지 눈으로 확인하.. map vs reduce 개념 차이 성능 속도 비교 Map & Reduce map 과 reduce 모두 항상 array에 사용한다. ex. [1,2,3,4].map(() => {}) [{a:1}, {b:2}, {c:3}].reduce(() => {}) Map map은 항상 기존의 array가 가진 동일한 수의 elements를 담은 array를 반환한다. 만약 기존 array 의 elements가 5개라면 반환되는 array의 elements도 5개이다. array의 각각의 개별 element에 변화를 주고 싶을 때 map을 사용한다. example) const array = [1,2,3,4]; const mapArray = array.map((ele) => { return Math.pow(ele, 2); }); console.log(mapArray);).. [Javascript] 날짜 더하고 빼기 / How to set or add months, days, hours to Date / moment 라이브러리 1. new Date() function const today = new Date(); console.log(today); const ACertainDay = new Date('2020-01-01'); console.log('a certain day =', ACertainDay); const ACertainDay2 = new Date(2022, 1, 1,); console.log(ACertainDay2) console.log result new Date()은 () 안이 비어있으면 디폴트로 "현재"를 반환하고, 'YYYY-MM-DD' string형태로 값을 넣을 수 있다. 값을 넣는 형태는 (2020,1,1) 이렇게도 가능하다. It returns date, default is 'now' (when the.. [JavaScript] Convert a Unix timestamp to time / 유닉스 시간으로 변환하기 유닉스 시간 -----> 날짜로 변환하기 : How to convert a Unix timestamp to time const unix_timestamp = 1582416000; const date = new Date(unix_timestamp * 1000); console.log('date=', date); 날짜 ------> 유닉스 시간으로 변환하기 : How to convert time to a Unix timestamp const time = new Date('2022-06-24'); const unixTime = time.getTime(); console.log('unixTime=', unixTime) [JaveScript] 이벤트 루프란? 작동 방식 자세히 알아보기 Event loops JavaScript, 싱글 스레드 기반 언어 : 한번에 하나씩 작업 수행, 이벤트 루프를 이용해 비동기 방식으로 동시성 지원한다. 이벤트 루프란 ? : Callback Event Queue에서 하나씩 꺼내서 동작시키는 Loop을 말한다. 위의 그림 전체를 말하는 것 같다. 태스크 큐 ? : web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간, FIFO, 하나의 큐로 이루어있지 않고 Microtask Queue, Animation Frames 등 여러개의 큐로 이루어져 있다. Web API ? : 브라우저에서 자체 지원하는 api이다. DOM이벤트, AJAX, setTimeout 등의 비동기 작업 등을 수행할 수 있도록 api를 지원한다. 이벤트 루프 프로세스 코드가 호출스택에.. [JavaScript] 콘솔로그 전체 보기 / console.log more items.. 전체 펼쳐보기 아주 오~랜만에 적는 JS 관련 글! 나는 아직 디버깅할 때 console.log를 많이 사용하는데 가끔 데이터가 아주 길거나 많으면 console.log(numberArray); 이렇게 표시되고 나머지 데이터는 볼 수가 없다. 안의 데이터는 사실 전체를 확인해야하는 일이 별로 없지만 만약 확인해야한다면 console.log 대신 console.dir을 사용하고 첫 번째 인자값 = log 볼 데이터 두 번재 인자값 = 옵션 : maxArrayLength: null 을 넣어주면 console.dir(numberArray, { maxArrayLength: null }); 모든 데이터가 콘솔에 출력된다. [JavaScript] 객체 복사하기 <옅은 복사 vs 깊은 복사> JavaScript, 자바스크립트에서 객체 복사하는 여러 방법들이 헷갈려서 직접 공부겸 글로 남기기 긴 글 짧게 요약하면 ↘↘ clone() : 복사를 하고 참조도 한다. (옅은 복사) deepClone() : 복사를 하고 참조는 없다. (깊은 복사) 참조란 ? = > 같은 객체를 바라보고 있는 것 const example1 = { a:1, b:2}; const copied = example1; console.log(example1); // { a:1, b:2} console.log(copied); // { a:1, b:2} // example1의 'a'의 값을 100으로 변경 example1.a = 100; console.log(example1); // { a:100, b:2} console.log(c.. [JavaScript] 핸드폰번호, 생년월일 - 하이픈 자동 삽입하기 / Backspace keyCode 프로젝트 마무리로 핸드폰번호, 생년월일 정규식으로 유효성 검사를 하는데 - 하이픈을 수동으로 입력해야해서 불편함을 느꼈다. 그래서 입력된 값의 길이와 onkeyup 이라는 event를 사용하여 - 하이픈 자동 삽입하기까지 작성해보았다. 생년월일 하이픈 자동 생성하기 html 에 onkeyup = "함수(this)" 코드 추가하기 생년월일 html과 연결된 Javascript에 아래 코드 추가하기 // 생년월일 - 하이픈 자동 생성 function birth_keyup(obj){ let birth_len = obj.value.length; if (event.keyCode==8){ obj.value = obj.value.slice(0,birth_len) return 0; }else if(birth_len==.. [JavaScript] 이메일, 핸드폰 번호, 생년월일 유효성 검사 (정규식) 이번 프로젝트 마무리 단계로 회원가입 join 시 userid 역할인 email, 핸드폰 번호, 생년월일 유효성 검사를 추가했다. 정규식을 사용하여 코드를 더 간결하게 만들 수 있었다. 😀 Email 형식 유효성 검사 -> JS addEventListener('change', callback) 사용 // EMAIL (userid) 형식 유효성 검사 let userid = document.querySelector('#userid') userid.addEventListener('change',(e)=>{ // html 의 onchange="validEmail(this)"와 동일 validEmail(e.target) }) function validEmail(obj){ if(validEmailCheck(obj).. [JavaScript] Promise 값 가져오기 async await 사용 JavaScript Promise 객체의 값을 가져오는 방법 ! let admin_check = areYouAdmin(userid) console.log(admin_check) ---> 요 부분이 안나왔다. async function areYouAdmin(userid){ let user_level = await users.findOne({where:{userid,}}) console.log(user_level.dataValues.admin) -> 요기는 잘 뜨고 return user_level.dataValues.admin; } 채팅 구현 중 Promise 의 값을 외부로 가져오면 계속 Pending으로만 떴다. areYouAdmin 이라는 함수에서 해당 userid가 관리자인지 아닌지 판별하고 싶었는데.. [JavaScript] 팝업창 띄우는 두 가지 방법 1. html 에서 바로 띄우기 채팅 html 해당 요소(a tag) 에 href 를 'javascript:openWindowPop('http://localhost:3000/', 'popup') 이렇게 쓰면 끝 ! 그리고 아래 JS 에 팝업창 크기 조정하기 2. js를 연결해서 클릭하면 함수 실행하여 window pop으로 띄우기 let chatBtn = document.querySelector('#chatBtn'); chatBtn.addEventListener('click', chatFn); function chatFn() { var chatWidth = 450; var chatHeight = 655; var chatLeft = 90; var chatTop = 100; // xPos = (documen.. [JavaScript] node.js 회원가입시 이메일 인증하여 로그인 하기 구현 JavaScript, node.js로 회원가입시 이메일 인증하기 html '제출' 버튼을 누르면 JS 로 함수 안의 명령들을 처리한 후, joinform.submit() 으로 처리해 주었다. 이름 생년월일 html_ js // 모든 절차 통과 후 회원가입 완료 alert(msg); joinform.submit(); } 아이디, 비밀번호, 이메일 등의 모든 유효성 검사를 거치로 -> sumit() -> /user/join_success user/join_success js let join_success = (req, res) => { let { username, userbirth, userid, userpw, mobile } = req.body; // verifying key 만들어 db에 함께 creat.. [JavaScript] Node.js Google API 구글 지도 맵 가져오기 JavaScript node.js 로 Google API 구글 맵 가져오기 구글 맵을 API로 가져오려면 billing 결제 정보를 업데이트하고 confirm을 받아야 온전한 지도, marker 까지 표시할 수 있다. 아직 나의 결제 정보는 confirm 중이여서 먼저 지도만 가져오는 코드만 공유 ! 먼저 Google cloud flatform 에서 API 키를 만들어야 한다. Google API 키 만드는 방법 https://blckchainetc.tistory.com/228 [ Google API 최신 ] http://localhost로 구글 로그인 로그아웃 API 사용하기 JavaScript node.js 1. Google Cloud Platform 에 들어간다. https://console.clo.. [JavaScript] 이메일 주소 유효성 검사 JavaScript 로 이메일 주소 유효성 검사하기 JavaScript 의 이메일 유효성 검사 두 가지 정규식 표현 방법 - var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; var pattern = new RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i); var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/; var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-.. [JavaScript] IntersectionObserver 편리한 스크롤 이벤트 scroll event 500x 500px 의 4개 div 마지막 div에 fade in scroll event 주기 let winH = window.innerHeight; - 윈도우의 높이 (보여지고 있는 창의 height = ex 500px;) let scrollY = window.scrollY; - 스크롤의 값 (스크롤이 움지이지않은 상태는 0 ) let posFromTop = item4.getBoundingClientRect().top; (상대좌표 값 - 스크롤을 내릴 수록 줄어듬!) - 현재 위치(최상단)에서 적용할div 최상단 까지의 거리 - 현재 창의 최 상단으로부터 내가 스크롤 이벤트 주려는 div의 최상단 = 1500 let absolutePos = scrollY + posFromRop; - item 4의 절대.. [JavaScript] scrollHeight, ScrollTop, ClientHeight 차이 JavaScript scrollHeight, ScrollTop, ClientHeight 차이 [JavaScript 채팅창] div 스크롤 자동으로 내려가게 만드는 방법 JavaScript 채팅창 구현 시 필요한 div 스크롤 자동으로 내려가게 만드는 방법 1) 기본 코드 소스 let chat = document.querySelector('#chat'); chat.scrollTop = chat.scrollHeight; ->chat 이라는 div가 채팅 창이 된다. 2) 예시 html JavaScript function send() { const msg = document.querySelector('#msg'); if (msg.value == '') { return; } else { socket.emit('send', msg.value); msgAdd(msg.value, 'me'); msg.value = ''; let chat = document.querySelector(.. [JavaScript] Mysql2 로 DB data 비동기로 가져오기 예제 mysql2 가 아닌 mysql 을 쓴 server.js 코드 const express = require('express'); const nunjucks = require('nunjucks'); const bodyParser = require('body-parser'); const tokenKey = require('./JWT'); const cryptoPW=require('./cryptoPW') const auth = require('./middleware/auth'); const mysql = require('mysql') const session=require('express-session'); const app = express(); nunjucks.configure('views', { expre.. [JavaScript] .crypto.createHmac 'sha256' 해시 알고리즘 암호화, 복호화 / 자바스크립트, node.js, JWT 토큰 JavaScript Node.js | crypto.createHmac() crypto.createHmac() 매서드는 Hmac 객체를 생성하는데 사용된다. 기본 구조 crypto.createHmac(algorithm, key, options) 첫 번째 인자값 : 알고리즘 방식 ex) sha256, sha512 두 번째 인자값 : Hmac key값 (암호 HMAC hash 를 만드는데 사용) It returns string, Buffer, TypedArray, DataView or KEyObject. 세 번째 인자값 : (Optional) - stream behavior 를 컨트롤 한다. It returns an object. 예시 const crypto = require('crypto'); functio.. [JavaScript] 구조 분해 할당 [...] {...} 비구조화 할당 문법이란? 예시 / 자바스크립트 JavaScript [...] {...} 구조 분해 할당 , 비구조화 할당 문법 이란? - 배열 or 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javascript 표현식 - Perl & Python 등 다른 언어가 가지고 있는 기능이기도 함 예제 1 [a,b,...rest] = [10,20,30,40,50,60]; //a = 10 , b = 20 , rest => 나머지가 배열로 들어감 console.log(a); // 10 number로 return console.log(b); // 20 number로 return console.log(rest); // [30,40,50,60] //배열로 return let A = [a,b,...rest] = [10,20,30,40,50,60];.. 질문 [JavaScript] 자바스크립트 Object.keys() 사용법, 예제 JavaScript Object.keys() Object.keys() - method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would. 해당 객체의 셀 수 있는 속성 이름들을 순서대로 (normal loop would) 반환한다. e·nu·mer·a·ble /əˈn(y)o͞omərəb(ə)l/ adjective MATHEMATICS able to be counted by one-to-one correspondence with the set of all positive integers. 기본 구문 Object.keys(obj) 매개 변수 1... [JavaScript] Switch ...case 조건문과 if ...else 차이는? 예제로 알아보기 자바스크립트 switch문 switch 문 (swith... case : .... break;) switch문은 if문과 기능이 거의 비슷하다. switch 조건문은 if문으로 변형 가능하지만 if문 대신 switch문을 쓰는 이유는 간결성, 가독성이다. 보통 if문 == 같다를 표현할 때, 내용이 복수일 때, 복수의 if조건문은 switch문으로 바꿔 쓸 수 있다. switch 조건문 case에는 상수값만 올 수 있어 변수, 비교식 등에는 사용할 수 없다. * default 값은 Optional 기본 예제로 이해해보기 let colors = 'red'; switch (colors){ case 'brown' : console.log('color is brown'); break; case 'red' : console.log('col.. JavaScript 자바스크립트 String.fromCharCode() 사용법 , 예제 String.fromCodePoint와 차이점 JavaScript String.fromCharCode() String.fromCharCode() - UTF-16 코드 유닛의 시퀀스로부터 문자열 생성, 반환 - String 객체가 아닌 문자열을 반환 - String의 정적 매서드이기 떄문에 String.fromCharCode() 이렇게 Stirng을 반드시 붙여서 써야함 - 높을 코드 포인트의 문자는 surrogate (대리의) 값 두 개를 합쳐 하나의 문자를 표현하므로 String.fromCodePoint() 을 쓰면 가능 String.fromCodePoint() https://blckchainetc.tistory.com/187 JavaScript 자바스크립트 String.fromCodePoint() 사용법 예제 String.fromCharCode .. 이전 1 2 3 다음
