javascript

Proxy : 대리, 대리의, 대신useForm()의 formState에 대해 알아보다가 Proxy에 대해 알아보았다.(formState is wrapped with a Proxy to improve render performance and skip extra logi

Redux : A Predictable State Container for JS Apps : 예측가능한 상태컨테이너, JS 앱을 위한

제너레이터(generator) : 여러개의 값을 필요에 따라 하나씩 반환(yield) 제너레이터 함수 함수를 실행하면 제너레이터 객체가 반환됨 참고 문헌 코어 자바스크립트 제너레이터

공통적으로 묶을 만한 것들을 한 폴더에 넣기components / slider / MainPageSlider.jsLeturePageSlider.jsindex.jsindex.js에 몰아서 정리하기가져다 쓰기더 다양하고 복잡한 절차들이 있을 순 있지만 일단 이렇게 만들어

window.location.href : 다른 페이지로 리다이렉트참고 문헌https://www.codingfactory.net/10691https://stackoverflow.com/questions/7077770/window-location-href

undefined 도 false로 만들어주는 연산자참고 문헌 https://hermeslog.tistory.com/279

지금까지 웹에서 화면 구성을 위해 javascript 파일 안에서 import, require를 자연스럽게 사용을 해왔는데이번에 IIS에서 원격 드라이브에 있는 파일을 직접 수정하면서 개발을 하려 하는데require, import를 사용 할 수 없었다.알고보니 node

서버와 이용자 사이의 물리적 거리를 줄여 웹 페이지 콘텐츠 로드 지연을 최소화 하는, 촘촘히 분산된 서버로 이루어진 플랫폼지역에 따라 느려지는 것을 방지하기 위해 CDN은 PoP(Points of Presence)라고 하는 전 세계의 여러 지역에 캐시된 버전의 웹사이트

많은 노드를 추가해야 한다면 innerHTML하나씩 추가할 경우 appendChild참고 문헌https://m.blog.naver.com/tmondev/221070295102

react같이 편하게 세팅되어 있는 곳에서 작업을 하다보니쌩 html, css, javascript로 세팅을 하는 것을 잘 몰랐던 것 같다.이런식으로 되어 있는 구조에서 main.js가 test.js을 import 해오고 싶은 경우에html에서 main.js 파일을 추

document.getElementById('textbox_id').value참고 문헌https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-jav

참고 문헌https://stackoverflow.com/questions/2462800/how-do-i-create-a-dynamic-key-to-be-added-to-a-javascript-object-variable

html tag를 구분하기 위해 data-\* 속성을 사용하기도 한다.예를 들어 data-id 처럼 사용하면 원하는 태그를 가져올 때 편한 것 같다.이것을 javascript에서 불러 오려면 다음과 같다.참고 문헌https://developer.mozilla.

https://bourbonkk.tistory.com/70https://sjh010.tistory.com/1https://stackoverflow.com/questions/25434813/simple-pagination-in-javascrip

currentPage++로 하면 안됨\++currentPage 로 해야 됨

기존 웹사이트에 회사 선임들이 jQuery를 많이 사용하셨다.나는 jQuery를 이번에 처음 접해보았고 vanilla javascript에서 jQuery라이브러리 함수를 필요한 시점에 호출할 필요가 있었다.사실 직접 만들어도 상관없지만 jQuery의 flexslider

success에 콜백함수를 전달할 때() => successCallback(MagicSearch.$input, data, fieldsName) 가 아닌successCallback(MagicSearch.$input, data, fieldsName) 을 전달하면함수가 바로

사실 code splitting이 이미 되어 있다.각 페이지마다 하나의 html에 연결할 javascript 파일을 각각 선택하기 때문

참고 문헌https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parametershttps://electronic-moongchi.tistory.com/82

https://ysyapr91.tistory.com/3https://blog.naver.com/PostView.nhn?blogId=okskmk2&logNo=221763461417&parentCategoryNo=&categoryNo=148&viewDat

(key, value 존재)object도 key, value로 저장하는데 무슨 차이가 있나?map의 key는 함수나 오브젝트 같은 어떤 것이든 가능return: Map은 Map을 리턴, object는 undefined참고 문헌https://im-designlo

for문에서 조건에 따라 다르게 실행하기 위해 continue를 쓰곤 했다.Array.forEach 에선 사용이 불가능한데 forEach는 return을 사용하면 continue와 같은 효과를 볼 수 있다.https://developer.mozilla.org/

웹을 만들다 보니 innerHTML로 편하게 만들다가 치명적인 단점을 발견했다.innerHTML로 만든 DOM은 메모리 주소가 새로 할당된다는 것이다.innerHTML로 그리는 것이 끝난 후에 해당 DOM을 가져와야 제대로 가져올 수 있다.(그리기 전에 이벤트 리스너

/패턴(pattern)/옵션(flag)g : global => 전역검색매칭되는 다수의 결과값을 기억i : case insensitive => 대소문자 없는 검색m : multi-line => 다중행(여러줄) 검색s : single line => .에 개행 문자도 매칭(

str = str.slice(0, -1);참고 문헌https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slicehttps://gent.tistory.c

javascript 로 동적으로 넣은 HTML(DOM)은 미리 이벤트 리스너를 설정할 수 없다.Array를 받아서 카드형태로 리스트를 화면에 그릴 때 javascript로 HTML을 넣는데이때 이벤트리스너를 미리 설정해 놓을 수 없다.또 각각 이벤트 리스너를 지정하는

array를 변경할 때 splice를 이용하면 기존 데이터에 변경이 되므로 slice를 사용하거나기존 array를 복사해서 splice 사용하기둘 중에 더 편한 방법을 찾아서 정리삭제 뿐만 아니라 순서를 변경할 때는 어떤 방법을 사용하는 것이 좋을지 생각해보기

drag and drop 관련 코드를 찾아보던 중 못 보던 메소드가 있어서 찾아보았다.getElementsByClassName 또는 querySelectorAll은 Array가 아닌 NodeList를 return하기 때문에 Array의 method인 map을 사용할 수

회사에서 자바스크립트만으로 웹을 개발하고 있다.라이브러리를 쓰지 않다보니 모든 UI와 로직을 전부 내가 생각한 대로 만들었는데 그러다보니 코드가 분리가 잘 안된부분도 많았다.버튼이 first, <<, <, 1, ..., 10, >, >>, last으로

서론 이 간단해 보이는 drag and drop animation을 만들어 보려했지만 생각보다 쉽지 않았다. 개인적인 생각으론 인프런에서도 sortable js 라이브러리를 사용한 것으로 생각된다. 왜냐하면 선택 후 드래그로 움직임을 바꿀 때 현재 선택된 elemen

value="값" => don't forget double quotation marks

함수의 parameter로 변수를 받아서 그것의 값을 변경해도 전달한 원래의 변수는 값이 변화되지 않는다.그런데 신기한점은 함수내에서 변수를 선언하지 않았고 단지 전달만 받은 변수가 계속 살아서 값이 누적될 수 있다.

자주 사용하지 않는 연산자는 한번씩 찾아보게 되는 것 같다Nullish coalescing operator (??)?? 기준 좌변의 값이 null 또는 undefined일 경우에만 우변의 값을 전달 함e.g.어떤 변수 앞에 !!를 붙이면 그것에 대한 true, fals

여태까지 react 또는 자바스크립트로 동적으로 컴포넌트를 렌더링 할 때(조건) && 컴포넌트(조건) ? 컴포넌트 : ''위 두가지 형태를 많이 사용했었다하지만 ||로도 가능하다는 것을 알게 되었다.앞||뒤 의 경우 앞 이 true 이면 바로 true를 return해서

변수의 값이 변하지 않는 데이터(메모리 위치안의 값)변하지 않는 변수(메모리 위치)상수가 더 포괄적인 의미https://mommoo.tistory.com/14

array.map() 과 같은데 리턴값이 1 depth 벗어난 배열e.g.,arr1.map(aCallbackFunction) => \[1, 2]arr1.flatMap(aCallbackFunction) => 1, 2https://developer.mozilla.

프론트(리액트)에서 데이터를 처리할 때 서버에서 리소스 베이스로 API가 열려있다 보니 배열을 돌면서 각 id로 특정 데이터를 조회하고 그것을 가공하는 로직이 필요했다.이럴 때 Promise.all 을 사용하면 편리한 것 같다.예제 코드는 좋은 예는 아니지만 생각나는대

ES6의 Symbol은 유일무이한 값을 만든다고 한다.문득 react의 key로 사용하면 좋을 것 같아서 찾아보니 react key는 Symbol을 지원하지 않는다.자바스크립트 딥 다이브 33장 읽을 때 다시 자세히 보겠지만아직까지 필요성을 잘 모르겠다.

배정밀도는 64비트단정밀도는 32비트라고 한다.부동소수점은 소수점이 고정되어 있지 않고고정소수점은 소수점이 고정되어 있다.배정밀도는 정확하지만 더 느리다.https://gigglehd.com/gg/hard/5427559부동 소수점 vs 고정 소수점고정 소수점

then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.sentry 같이 에러가 발생했을 때 로그를 남기고 싶다면 instance의 interceptor를 이용하면 좋다이때 주의해야 되는 것은 반드시 error처리 함수의 return은 Promise.

new Promise로 인스턴스를 만들 때 를 전달해야 된다await은 resolve에 전달한 것이 return 된다then으로 받는 것과 같다

주로 리스트를 렌더링하고 CRUD 하는 데 Array를 사용했었다이번에 강의를 통해 Object hash map 형태로 객체를 만들어서 렌더링 할땐 Object.entries 로 할 수 있고데이터를 삭제할 땐 delete 연산자를 이용해서 삭제할 수 있다는 것을 알게

axios의 major 버전 업데이트 살펴보기

클래스 내에서 this는 자기 자신(인스턴스)를 가리킨다위 코드에서 getSoldOutState() 메소드의 리턴 값으로 SoldOutState 인스턴스를 생성한 것을 리턴하는데 이때 SoldOutState 생성자에 전달하는 this는 GumballMachine 인스턴

Tree shaking은 사용되지 않는 코드를 제거하기 위해 JavaScript 컨텍스트에서 일반적으로 사용되는 용어입니다.

브라우저 웹 API(javascript)에 window.print() 메소드를 호출하면 프린트 화면을 띄울 수 있다CSS에서 프린트 시 보여줄 화면에서만 적용할 css를 따로 설정할 수 있다

라이브러리를 만들기 위해 사용한 rollup에 대해 정리해보자

javascript spread operator는 depth가 2이상인 오브젝트인 경우 shallow copy가 된다deep copy가 필요한 상황이 많진 않지만 필요한 경우 lodash cloneDeep() 메소드를 사용하자JSON 파싱방법의 경우 속도가 느리고 JS

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/voidvoid 연산자는 주어진 표현식을 평가하고 undefined를 반환합니다.typescript에서 Promise를 반환하는

window의 클릭 이벤트에 메뉴를 닫는 콜백을 달아놓고특정 버튼을 클릭 시 메뉴가 열릴 때 이벤트 버블링으로 인해 window에 설정된 이벤트가 같이 발생되어서 메뉴가 열리지 않는 문제가 발생한다이벤트 버블링을 막아서 해결할 수 있다

- 2진수일 때 0과 1을 바꾼 것 - e.g. ~5 // -6 - tilde 연산을 하면 소수점들은 버려지게 된다

시간이나 날짜를 표현할 때 숫자가 한자리인 경우 0을 앞에 붙여서 두 자리로 만드는 경우가 많다util함수로 만들어서 사용해왔었으나 javascript String 내장 메소드가 있다는 것을 이번에 알게 되었다간단하게 padStart 메소드를 사용할 수 있어서 앞으로

요즘 코딩할 때 자동완성이 되지 않으면 내가 뭘 잘못하고 있다는 생각이 든다그래서 자바스크립트로 코딩을 할 수 없게 되었는데js로 임시로 타입을 지원하는 방법이 있다이는 js로 구성된 강의를 들을 때 특히 유용하다이와 같이 JS Doc을 이용해서 너무도 편하게 타입 지

참고https://stackoverflow.com/questions/10787782/full-height-of-a-html-element-div-including-border-padding-and-margin

date 관련 대표적인 라이브러리는 moment.js 입니다https://momentjs.com/https://www.npmjs.com/package/moment하지만 공식 사이트에 보면 moment.js는 2011년에 만들어져서 지금까지 많은 기능이

- 차트에 그려지는 데이터가 적은 경우 SVG - 그려지는 데이터가 많고 상호작용이 있는 경우엔 Canvas

회사에서 js 라이브러리를 솔루션으로 제공하는 가장 간단한 방법은 난독화한 js 파일을 제공하는 것이다난독화는 아래 사이트에서 할 수도 있다https://obfuscator.io/그렇지만 매번 수동으로 할 순 없기에 번들러에 플러그인을 설치해서 사용할 수 있다

responseType: "blob"

Z vs. +09:00

큐를 이용해서 비동기 함수로 전달한 콜백의 실행 순서를 이벤트가 발생한 순서대로 실행하게 만들 수 있다button10을 클릭하면 1초뒤에 10을 showBox에 표시하고button100을 클릭하면 0.1초 뒤에 100을 표시할 때,button10을 클릭하고 바로 but

jest 테스트 파일이 같이 빌드되는 것을 수정하자https://stackoverflow.com/questions/65347157/how-to-prevent-tests-being-bundled-by-rollup