본문 바로가기

전체 글

beforeunload , 사용자가 페이지를 이탈하려고 할 때 방지하기 사용자가 페이지를 이탈하려고 할 때 컨펌창을 띄우려면 'beforeunload' 를 사용하면 됩니다. window.addEventListener('beforeunload', (event) => { // Cancel the event as stated by the standard. event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = ''; }); 참고: developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event Window: beforeunload 이벤트 - Web API | MDN beforeunload 이벤트는 문서와 그 리소스가 언로드 되기 직전.. 더보기
nodejs교과서 redis 부분 버전에 따른 에러 nodejs 교과서 redis 연동 부분에서 버전이 달라서 생기는 문제가 있었다. 책에서는 connet-redis 를 3버전으로 사용하고 있고, 내가 설치한 버전은 4버전이어서 설정을 조금 변경해주어야 했다. 변경 전 아래와 같은 에러가 발생했다. A client must be directly provided to the Redisstore.... https://www.npmjs.com/package/redis npm 사이트에서 내용 보고 아래와 같이 코드를 입력하니 일단 에러 없이 잘 돌아가고 세션도 잘 유지가 되었다 ^^ //connet-redis 가 4버전 이상일 때 redis 패키지 설치 후 아래와 같이 입력하니 일단 돌아감 // package.json "connect-redis": "^4.0.3.. 더보기
맥,win10 mysql 실행방법 맥 터미널에서 mysql 실행 방법 $ cd /usr/local/mysql/bin $ ./mysql -u root -p 패스워드 입력 후 사용 window10 cdm 에서 실행 방법 bitnami 인 경우 $ cd C:\Bitnami\wampstack-5.6.29-1\mysql\bin $ mysql -u root -p 패스워드 입력 후 사용 일반 $ cd C:\Program Files\MySQL\MySQL Server 5.7\bin $ mysql -u root -p 더보기
[JS] destructuring 응용 예제 코드 유사배열 배열로 바꾸기 유사배열 (array-like)은 forEach를 사용할 수 없기 때문에 Array.from() 을 사용해야 한다. const buttons = document.getElementsByClassName('btn'); // for(let i=0; i console.log('clicked!!!')); // } Array.from(buttons).forEach(button => { button.addEventListener('click', () => console.log('clicked!~!')); }); 일반 for 문은 사용 가능하다. object destructuring const obj = { color: { theme: 'dark', font: 'white' }, fruit: .. 더보기
[JS] closure 클로저 예제 코드 클로저란, 외부함수 안에 내부함수가 리턴되었어도 여전히 외부함수의 변수가 살아있는(?) 현상을 말하는 것으로 알고 있다. 스코프 확인, 리턴되어도 외부함수를 사용할 수 있다. function outerFn() { let a = 10; return function innerFn() { let b = 20; return function deepFn() { let sum = a + b + g; console.log(sum); }; }; } let g = 30; outerFn()()(); // 60 클로저 기능 중 대표적인 것이 커링이다. 커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게하는 방식. function add(x) { return function(y) { ret.. 더보기
prettier 설정 (vscode mac) prettier 설치 및 설정 방법. 1.extention 에서 prettier 검색 후 설치. 2. vscode 설정(settings) 3. settings 에 들어왔으면 오른쪽 상단 ... 있는 곳에 오른쪽 귀 접혀있는 문서 모양 클릭 4. "editor.formatOnSave": true 입력 후 저장. (코드 저장시 자동으로 정렬) 참고) https://busy.org/@anpigon/eslint-prettier-airbnb-style + 2019년 11월 12일 화요일 추가 prettier가 업데이트 되면서 마이그레이션 하라는 경고? 가 나타났다 cmd+shift+p → settings.json (vscode 설정파일) 에 "prettier.singleQuote": true 기존 프리티어 설정 .. 더보기
[JS] 객체 차집합 만들기 예제 코드 과제 중에 차집합을 만들면 해결할 수 있는 문제가 있어서 만들어 보았다. // obj2 - obj1 이다! function diff(obj1, obj2) { let tmp = { ...obj2 }; for (let prop in obj2) { if (obj1.hasOwnProperty(prop)) { delete tmp[prop]; } } return tmp; } 객체 차집합 후 합치기 (객체간 합치기를 할 때는 Object.assign 을 사용했는데 원본 객체를 변경하는 것이기 때문에 사용에 주의가 필요하다) function diff(obj1, obj2) { let tmp = { ...obj2 }; for (let prop in obj2) { if (obj1.hasOwnProperty(prop)) { .. 더보기
Arrow Function, function() 의 this 차이 예제 코드 화살표 함수 사용시 일반 function 선언문과 this 사용시 차이를 알고 있어야 한다. 항상 헷갈리는 부분이다. 그래서 간단하게라도 참고용 예제 코드를 작성하였다. 화살표 함수(Arrow Function) const obj = { prefix: 'hello~ ', arr: ['sherlock', 'mina', 'lily'], test() { this.arr.forEach(value => { console.log(this.prefix, value); // 상위 this를 가리킨다. }); } }; // > obj.test(); // hello~ sherlock // hello~ mina // hello~ lily 화살표 함수의 this 는 상위 this 를 가리킨다. (obj 를 가리킨다.) 일반 함.. 더보기