JavaScript
JavaScript
JavaScript에 관해 공부하며 간단 메모한 글
https://ko.javascript.info/?utm_source=Nomad+Academy&utm_campaign=8026b5711e-EMAIL_CAMPAIGN_2020_12_09_07_02_COPY_01&utm_medium=email&utm_term=0_4313d957c9-8026b5711e-155724345 모던 자바스크립트 총 정리
What is JavaScript?
JavaScript 언어 동작 방식 1 (클릭 시 새 탭 열기)
JavaScript 언어 동작 방식 2 (클릭 시 새 탭 열기)
JavaScript 코드 최적화 하기 (DOM 제어는 최소한으로)
JavaScript 비동기 처리 로직 (클릭 시 새 탭 열기)
JavaScript 코드 동작 순서 (클릭 시 새 탭 열기)
JavaScript 동기/비동기로 매끄럽게하기 ***! (클릭 시 새 탭 열기)
hoisting
기본적으로 JavaScript는 Synchronous Script
var, function declaration 등의 변수, 함수 선언문은 script 최상단으로 위동 되어 실행 됨
General coding rule
‘use strict’
var hoisting
avoid nested loop
early return, early exit (if조건문 사용시 조건에 안맞을 시 빨리 return 후 필요한 logic 작성 등)
function expression / function declaration 구분
arrow function
IIFE(Immeadiately Invoked Functgion Expression)
class(template), object(instance of class), OOP(Object Oriented Programming)
script Attribute
AJAX
XMLHttpRequest에 관하여 - zerocho (클릭 시 새 탭 열기)
ajax 데이터 로딩 중 로딩 표시(클릭 시 새 탭 열기)
ajax CORS 문제에 관하여(클릭 시 새 탭 열기)
ajax CORS 문제 nodeJS로 해결 (클릭 시 새 탭 열기)
하나은행 환율 API 간헐적 CORS/CORB (클릭 시 새 탭 열기)
xmlhttprequest인자로 비동기/동기 (클릭 시 새 탭 열기)
xmlhttpreques시 try catch로 오류판단(클릭 시 새 탭 열기)
CORS error catch 가능여부 2 (보안문제로 불가)
HTTP Request 할 시, setRequestHeader를 통해, Header설정 하는 방법 등
script generated HTML code 를 parsing 하는 방법 (only JS?)
http -> https 요청 (가능) / https -> http 요청 (불가) -» hosting받아서 http로 만듦…
/wapi/v3/assetDetail.html API (클릭 시 새 탭 열기)
setTimeOut
for문 안 에서의 setTimeOut (클릭 시 새 탭 열기)
jQuery
jQuery에서 append() 사용 시 주의 할 점 (클릭 시 새 탭 열기)
input 값 변화 실시간 감지(propertychange change keyup paste input)
script src의 위치와 $(document).ready/window.onload 상관관계
script src의 위치와 $(document).ready/window.onload 상관관계 2
async & await
getbyElement, querySelector
getbyElement, querySelector 차이
form submit without Redirection
이벤트리스너로 preventDefault() 설정해주기
const ajaxtest = document.getElementById("ajaxLogin");
ajaxtest.addEventListener("submit", function (evt) {
evt.preventDefault();
login();
});
etc
effect
특정 수치 이상일 경우 배경색 변경(table cell의 경우) (클릭 시 새 탭 열기)
notification 효과 주는 JS (클릭 시 새 탭 열기)
숫자 처리
개발중, toFixed를 7주고 함수 만들어서 그 함수에 전달 후, 10000이상이면 tofixed2 등 처리 할 생각이었으나, *1 하는 방법 사용
소수인 number 변수에 * 1 을 하면 끝 0을 제외한 유효숫자 까지만 표기 됨
(ex : var a = 0.5600 인경우 console.log(a*1) 은 0.56으로 표기 됨)
forced reflow while executing JavaSCript took Xms
빈번한 DOM 구조 변경으로 인한 에러
tippy.js 적용시 발생.. 빈번한 DOM 구조 변경인듯
XMLHttpRequest 등으로 외부 요청 시 cache되어 데이터가 update되지 않는 문제
https://stackoverflow.com/questions/6090990/how-can-i-avoid-cached-data-when-downloading-via-xmlhttprequest
time을 이용
https://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached/168977#168977
ajax 에서 no cache option
vanilla JS
PM2
음성인식 API
https://usecode.pw/%EC%9D%8C%EC%84%B1%EC%9D%B8%EC%8B%9D-api-web-speech-api-%EB%82%98%EB%A7%8C%EC%9D%98-%EC%8B%9C%EB%A6%AC%EB%A5%BC-%EB%A7%8C%EB%93%A4-%EC%88%98-%EC%9E%88%EC%9D%84%EA%B9%8C/
Promise.All
promise.all 에 관하여..
promise.AllSettled 에 관하여 …
DOM 노드 생성 및 추가
SSE(Server Sent Event), EventSource 객체
https://developer.mozilla.org/ko/docs/Web/API/EventSource
WSS의 대안, 자신이 서버를 구성할 때
JS memo
cors문제
prompt, confirm, location, window
BOM, DOM
기명/익명 함수
객체 생성자 함수 -> 객체 생성
queryselector
``백틱 ${}
https://lgphone.tistory.com/122 웹소켓 사용 예제
JS 관련
https://ui.toast.com/weekly-pick/ko_20210611 JS 메모리 관리 관련
https://stackoverflow.com/questions/21397809/create-a-trusted-self-signed-ssl-cert-for-localhost-for-use-with-express-node node.js localhost에 SSL 적용하기
https://hi098123.tistory.com/152 strict-origin-when-cross-origin : http –> https 요청 불가?
https://stackoverflow.com/questions/1723287/calling-a-javascript-function-named-in-a-variable 메소드에 변수 사용
https://stackoverflow.com/questions/46067702/how-to-call-a-javascript-function-using-variable 메소드에 변수 사용 2
문법 간단 메모
array
array에서 indexof 사용 시, 원하는 값 편리하게 찾을 수 있음
var name = "foo, need mod";
var letter = `Dear ${name}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ${name} Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ${
1 + 1
} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. ${name}`;
console.log(letter);
table
table Header 클릭 시 정렬되는 예제 코드 (클릭 시 새 탭 열기)
table안에 이미지 딱 맞춰 넣기 (클릭 시 새 탭 열기)
MutationObserver
Mutation Observer 에 관하여 1 (클릭 시 새 탭 열기)
Mutation Observer 에 관하여 2 (클릭 시 새 탭 열기)
Mutation Observer Stackoverflow my question (클릭 시 새 탭 열기)
(Mutation oberver에서 config를 subtree: true로 설정하라 함)
localStorage
클라이언트에 정보, 데이터 저장 (클릭 시 새 탭 열기)
input
input에서 enter키 누를 시 이벤트 발생 (클릭 시 새 탭 열기)
반복문
Date() 객체
JS 암호화 라이브러리
즉시 실행 SetInterval의 hack
https://stackoverflow.com/questions/6685396/execute-the-setinterval-function-without-delay-the-first-time
UTF-8 en/decrypt 관련
https://velog.io/@ryu/JavaScript-%EB%94%94%EC%BD%94%EB%94%A9-decodeURI-vs-decodeURIComponent-vs-unescape
