자바스크립트 - 원시형(primitive) 이란?

primitive이란? 자바스크립트의 원시형 타입이 있습니다. 객체도, 메서드도 속성을 가지지 않은 데이터 입니다 primitive 종류 총 7개가 있습니다. String Number Boolean null undefined 그리고 ES6 문법에서 Symbol ES 2020 문법 BigInt 가 추가 되었습니다. Symbol BigInt 예시 var str = 'superman'; console.log(str.length); // 8 str 변수에 superman 값을 담고 length 속성을 부르게 되면 8이 콘솔에 찍히게 됩니다. 문자열 데이터가 어떻게 length라는 속성을 가지게 되는건가요? length를 호출할 때, String 객체 래퍼를 만들고, 그 객체 length 속성 값을 가지고 오게 ..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 26.
• textsms

비트 코인이 21세기 최고의 발명품인 이유

1비트 가격이 1억을 달성하였습니다. 2018년에 2천만원, 2021년에 8천만원을 달성하였는데, 결국 1억을 달성하였습니다. 비트코인이란? 비트코인은 블록체인을 기술을 이용하여 만들어진 화폐 입니다. 탈중앙화 등의 특징이 있습니다. 구매력을 보존할 수 있는 최고의 자산은? 자산에는 여러가지 종류가 있습니다. 부동산, 금, 주식, 종이 화폐 등이 있습니다. 하지만 이 자산들은 자신의 구매력을 보존할 수 없거나 관리가 힘들다는 문제가 있습니다. 종이 화폐 종이 화폐의 주체는 정부 입니다. 정부 정책에 따라서 통화량을 늘리거나 줄이거나, 조절을 합니다. 이러한 과정에서 화폐 가치는 점점 떨어지게 되면서 구매력을 잃게 됩니다. 주식, 회사 회사의 성장은 정부 정책, 기술 트렌드의 변화에 밀접한 관련이 있습니다..

• format_list_bulleted 일상/재테크
• · 2024. 3. 16.
• textsms

Break a leg 뜻 의미

Break a leg 뜻? 행운을 빌어 Break a leg은 행운을 빌어라는 뜻입니다. Good luck 과도 같은 뜻입니다. 다리를 부시자 이런 말이 왜 행운을 빌어라는 뜻일까요? 무대나 중요한 일이 있을 때, 행운을 빌어주는 말은 하면 오히려 더 안 좋은 일이 생길 수도 있다고 생각해서 반대로 부정 타는 말을 해서 무사히 무대를 마쳐라는 의미를 가지고 있습니다. 미나씨, 또 프사 바뀌었네요 라는 드라마의 OST 제목이 Break a leg 이길래 무슨 뜻인지 궁금해서 찾아보았습니다. 영화 드라마의 주인공인 이미나 대리를 응원해 주는 말이었나 봅니다.

• format_list_bulleted 일상/이야기
• · 2024. 2. 26.
• textsms

자바스크립트 - async await 비동기 처리하기

비동기 asynchronous 란? 특정 작업이 완료할 때까지 대기하지 않고, 다른 작업을 먼저 진행하고 특정 작업이 완료가 되면 이벤트에 응답할 수 있는 방법입니다. fetch('https://dummyjson.com/users') .then(res => res.json()) .then(console.log); // to do something fetch 작업을 진행하고, 아래에는 다른 작업들이 진행되게 됩니다. 그리고 then 을 이용하여 api 호출이 완료가 되면 완료 이후 로직이 타게 됩니다. async / await 여러 비동기 함수를 콜백함수를 이용해서 처리하면, 콜백 지옥에 빠질 수 도 있습니다. 그렇게 되면 코드가 복잡하게 되어서 로직을 이해하기 어려울 수 있습니다. async / awai..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 24.
• textsms

자바스크립트 - 고차 함수와 보조 함수란?

함수형 프로그래밍에서 고차함수를 적극 사용합니다. 고차함수란? 함수 중에 파라미터로 함수를 받거나, 함수를 리턴하는 함수가 고차 함수입니다. 배열 고차 함수 중에 filter 함수가 있습니다. const array = [1, 2, 3]; array.filter((val) => { return val > 2 }) 이렇게 파리미터에 함수를 넣는 함수들을 고차 함수라고 합니다. 보조함수란? 보조 함수는 마찬가지로 고차함수에 파라미터로 들어가는 함수들을 보조 함수라고 합니다. button.addEventListener("click", function (e) { // click event listener }); 클릭 이벤트 리스너도 보조 함수입니다. const array = [1, 2, 3]; array.filt..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 24.
• textsms

자바스크립트 - 함수형 프로그래밍이란?

함수형 프로그래밍이란? 함수형 프로그래밍은 항상 동일하게 동작하는 함수를 만들고, 보조 함수를 이용해서 로직을 완성하는 방식으로 프로그래밍을 하는 방법입니다. 예시 function map(array, condition) { const newArray = []; for (var i = 0; i 10; }) console.log(list); // [20, 30] map 함수에서 첫 번째 파라미터는 배열을 받고, 두 번째 파라미터는 조건을 ..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 22.
• textsms

자바스크립트 - 호이스팅이란? (hoisting)

호이스팅이란? hoist는 영어로 끌어올리다는 뜻입니다. 호이스팅은 변수와 함수를 선언할 때, 자신의 스코프 최상단으로 끌어올려서 어디서든 볼 수 있도록 하는것을 호이스팅이라고 합니다. 호이스팅 예시 1 add(1, 2); // 3 function add(a, b) { return a + b; } 위와 같이 add 함수를 아래에서 만들어도 호이스팅이 되어서 위에서 실행될 수 있습니다. minus(2, 1); // Uncaught TypeError: minus is not a function var minus = function(a, b) { return a - b } 단 변수에 함수를 담게 되면 에러가 발생 됩니다 에러가 발생하는 이유는 변수의 경우에는 선언과 초기화가 구분이 되어 있습니다. consol..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 22.
• textsms

자바스크립트 - 클로저란? (closure)

클로저란? 클로저는 영어로는 closure 폐쇄라는 뜻을 가지고 있습니다. 자바스크립트에서 클로저는 이렇게 정의할 수 있습니다. 클로저는 자신(함수)이 생성될 때, 자신의 스코프에서 알 수 있는 변수를 기억하는 함수입니다. 클로저 예시 function a() { var num1 = 5; function b(num2) { return num1 + num2; } return b; } var obj = a(); console.log(obj(5)); // 10 console.log(obj(10)); // 15 b 함수가 클로저입니다. b 함수가 생성될 때, num1 변수를 기억하고 있고, a 함수의 실행이 끝나도, obj 함수를 통해서 계속 num1 값을 기억하여 새로운 값을 만들 수 있습니다. 클로저는 언제 ..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 21.
• textsms

자바스크립트 - 일정한 시간 간격으로 함수 호출하는 쓰로틀링(throttling) 구현하기

쓰로틀링(throttling) 이란? 일정한 시간 간격으로 함수를 호출하는 방법입니다. 주로 스크롤 이벤트, 마우스 이동 등에서 사용하는 방법입니다. 쓰로틀링(throttling) 구현하기 function throttle(func, delay) { let timeoutId; return function() { if (!timeoutId) { timeoutId = setTimeout(() => { func(); timeoutId = null; }, delay); } }; } 쓰로틀링(throttling) 예시 See the Pen debounce by powerku (@powerku) on CodePen. 디바운스(debounce) vs 쓰로틀링(throttling) 디바운스 마지막으로 발생한 함수만 호출..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 15.
• textsms

자바스크립트 - 함수 호출 지연 시키는 debounce 구현하기

debounce란? 검색을 할 때, 검색어를 추천하는 기능이 있습니다. 하지만, 모든 음절마다 검색을 하게 되면 과도하게 많은 API가 발생할 수 있습니다. 일정 시간이 지날 때까지 함수 호출을 지연시키는 방법을 debounce라고 합니다. debounce 구현하기 const debounce = (func, delay = 300) => { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => { func(); }, delay); }; }; const getData = () => { const ul = document.getElementById('content'); const li = document.createEleme..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 13.
• textsms