방구석 개발자의 놀이터

Hoisting(호이스팅) 관련 내용을 보다가 함수 선언 function을 주로 사용하는지 const (arrow function)을 주로 사용하는지 각 선호도에 대해 각자의 생각을 토론하는 글을 보고 재미있어서 정리해보았다. (토론 출처 : https://dev.to/skinnypetethegiraffe/function-or-const-which-do-you-prefer-typescriptjavascript-apa) // function function test() { return "test"; } // arrow function const test = () => "test"; 1. function 선언을 선호하는 이유 hoisting(호이스팅)을 지원 (중첩 함수를 작성할 때 코드 정리 용이) con..

무한 스크롤을 하기 앞서 가장 중요한 포인트는 Scroll Bar의 위치를 찾는것이다. 1. Scroll Bar의 위치 찾는법 const onScroll = e => { console.dir(e.target.scrollingElement); } document.addEventListener("scroll", onScroll); 위와 같은 코드를 사용하여 콘솔창을 확인해보면 위와 같이 수많은 정보가 나온다. 여기서 필요한 정보는 scrollHeight: 1231 , scrollTop: 340, clientHeight: 891 이렇게 3가지 정보가 필요하다. 그 이유는!!! 무한 스크롤에서 필요한 Scroll을 가장 아래로 내렸을 때가 바로 body 영역의 총 길이 = scrollHeight = scroll..

event.stopPropagation을 알아보기 전에 HTML에서 사용자 이벤트 전달 과정을 이해해야 한다. 1. 버블업(Bubble Up) - 웹 페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 되는데 이것을 버블업(Bubble Up)이라고 한다. 테스트 위의 코드를 예를 들면 a 태그를 클릭 했을 때 : a 태그의 onClick -> li 태그의 onClick -> ul 태그의 onClick 을 실행하게 된다. 만약 ul 태그에 onClick 이벤트가 있다면 a 태그를 클릭하는 순간 의도하지 않게 ul 태그의 onClick 이벤트가 실행된다. 이것을 방지하기 위해 event.stopPropagation()을 사용한다. 2. event.stopPropagation - 부..

1. Script import 방법 내용 // script 호출 //index.js let test = document.querySelector("#test"); test.addEventListener("click", function(){ alert("Hello Test") }); 로 호출할 수 있다. 위의 예제에서 index.js파일 경로는 html과 같은 폴더안에 있어서 경로를 생략했다. 2. Script 파일 위치 script를 head 태그 안에 위치할 수 있다. 하지만 이 경우에는 위의 예시에서는 오류가 발생한다. 오류를 방지하기 위해서는 위 예시의 index.js를 아래처럼 바꿔야 한다. //index.js window.onload = function(){ let test = document...

1. Callback 함수 예제 - Callback 함수란 함수의 파라미터로 함수를 넣어 다음 함수로 실행 시키는것. -> 말이 조금 어려운데 예제를 보면 쉽게 이해 가능 function increaseAndPrint(n, callback){ setTimeout(()=>{ const increased = n + 1; console.log(increased); if(callback){ callback(increased); } }, 1000); } increaseAndPrint(0, n => { console.log('끝'); //결과 : 1, '끝' }); - 위의 예제에서는 callback 함수에 n => {console.log('끝');} 함수를 넣은 것 2. Callback 지옥 - Callback함..

1. 반복자 (Iterator) next 메소드를 갖고 있다 next 메소드는 value와 done 속성값을 가진 객체를 반환 done 속성값은 작업이 끝났을 때 참이 된다 2. 반복 가능(Iterable) 객체 Symbol.iterator 속성값으로 함수를 갖고 있다 해당 함수를 호출하면 반복자(Iterator)를 반환

filter 란? - 특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만드는 함수 예제 const food =[ { id:1, name:'포도', kind:'fruit' }, { id:2, name:'소고기', kind:'meat' } ] //과일을 만족하는 배열을 꺼내보자 const fruit = food.filter(food => food.kind === 'fruit'); console.log(fruit); // 결과 : [{id:1, name:'포도',kind:'fruit'}] food 배열에서 kind : 'fruit' 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열 fruit을 만든다.

ESM 문법을 익히기 위해 모듈을 내보내고 가져오는 코드를 예시로 사용한다. // file1.js export default function func1(){} export function func2(){} export const var1 = 123; export let var2 = 'hello'; //file2.js import myFunc1, { func2, var1, var2 } from './file1.js'; //file3.js import { func2 as myFunc2 } from './file1.js'; ESM 문법 특징 코드를 내보낼 때는 export 사용 코드를 가져오는 쪽에서는 import, from 사용 default 키워드는 한 파일에서 한 번만 사용 가능 default 키워드로 ..

1. Getter의 특징 - get 함수명() {} 식으로 생성할 때 get을 붙임 - return 값이 있어야함 - 호출할 때 getter()로 하지 않고 getter로 호출 const numbers = { a: 1, b: 2, get sum(){ console.log('getter 실행'); return this.a + this.b; } }; console.log(numbers.sum); numbers.b = 5; console.log(numbers.sum); 2. Setter의 특징 - set 함수명() {} 식으로 생성할 때 set을 붙임 - parameter가 있어야함 const dog = { _name: '멍멍이', set name(value){ console.log('setter'); thi..

아래의 pizza 객체를 출력할 때 const pizza = { name : '콤비네이션', price : 20000 } 기본적인 방법 const print = (pizza) => { return `${pizza.name}의 가격은 ${pizza.price}입니다.`; } console.log(print(pizza)); 객체의 비구조화 할당 방법 const print = (pizza) => { const {name, price} = pizza; return `${name}의 가격은 ${price}입니다.`; } console.log(print(pizza)); or const print = ({name, price}) => { return `${name}의 가격은 ${price}입니다.`; } consol..