쥰뎁

커링 함수에 대한 내용을 보다가 지연 실행이라는 개념에 대해 제대로 배웠습니다.실제 동작하는 웹 앱 애플리케이션을 개발하다보면 지금 호출한 함수가 조건부로 실행되었으면 좋겠고, 재사용까지 할 수 있으면 좋겠다는 생각을 해봤다면 커링 함수를 쓰는 것이 좋을겁니다. 커링 함수란?커링 함수(currying function)는 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 구조로 만든 함수입니다.커링 함수를 실행하면 마지막 매개 변수를 받기 전까지 실행되지 않다가, 마지막 매개 변수를 입력하는 순간 메서드가 호출되고 종료된 후에는 가비지 컬렉터가 수거하여 메모리를 해제하는 원리입니다. 다음은 커링 함수의 기본적인 예시 코드입니다.var currying = fun..

간혹 코딩을 하다 클로저(Closure)라는 단어를 보긴 했다만 직접적으로 이게 무엇을 위해서 어떤 원리로 작동하는지 공부해 본 건 처음이었습니다... 한 번 정독해서는 음,,, 이게 클로저구나,, 정도였고, 두 번째 정독할 때에는 아,, 이럴 때 이렇게 사용하면 되겠구나,, 라는 정도로 이해했습니다.완벽한 이해를 하고싶지만 뭐든 내가 직접 문제를 해결하고자 사용한 코드가 아니라면 개념 잡기가 힘들기 때문에 최소한의 이해를 했습니다. 클로저의 의미 및 원리 이해클로저(Closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이라고 합니다. 자바스크립트가 가지는 고유한 개념이 아니라서, 다양한 문헌에서 클로저를 다르게 정의하고 설명합니다.  다양한 문헌에서 클로저를 한 문장으로 요약해서 설명..

콜백 함수란?콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다.뜻을 살펴보면 callback은 '호출'의 의미를 갖는 call과 '되돌아오다'의 의미를 갖는 back의 합성어로 되돌아 호출해달라는 명령입니다.쉽게 말해서 어떤 함수 X를 호출하면서 '특정 조건을 만족할 때' 함수 Y를 실행해서 반환해달라는 요청을 함께 보내는 것입니다. 이처럼 콜백 함수는 다른 함수(메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 조건이 만족할 때 실행할 것입니다. 제어권호출 시점다음은 setInterval 함수를 통한 콜백 함수 예제입니다.var count = 0;var callbackFunc = function() { c..

자바스크립트의 '없음'을 나타내는 값은 undefined와 null로 두 가지가 있습니다.두 값의 의미는 같은 것 같지만 미세하게 다르고, 사용하는 목적 또한 다릅니다. Undefinedundefined는 사용자가 명시적으로 지정할 수도 있고, 자바스크립트 엔진이 자동으로 부여하는 경우도 있습니다. 다음은 자바스크립트 엔진이 자동으로 undefined를 부여하는 경우는 세 가지 경우입니다.// 값을 대입하지 않은 변수, 즉 데이터의 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때var a;console.log(a) // undefiend// 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때var obj = { a: 1};console.log(obj.b); // undefined// retur..

얕은 복사와 깊은 복사얕은 복사(shallow copy) - 바로 아래 단계의 값만 복사하는 방법깊은 복사(deep copy) - 내부의 모든 값들을 하나하나 전부 복사하는 방법 다음은 얕은 복사를 구현한 함수와 객체 복사 결과를 보여주는 코드이다.// 기존 정보를 복사해서 새로운 객체를 반환하는 함수 (얕은 복사)var copyObject = function(target) { var result = {}; for (var item in target){ result[item] = target[item]; }}var user = { name: 'kim', info: { gender: 'male', age: '26' }};var user2 = ..

힙(Heap)힙은 우선순위 큐를 위해 만들어진 자료구조로, 여러 값중 최대값과 최소값을 빠르게 찾아내도록 만들어진 완전 이진트리의 일종이다. 최대 힙 (Max Heap)부모 노드의 값 >= 자식 노드의 값*Reference [자료구조] 힙(heap)이란 - Heee's Development BlogStep by step goes a long way.gmlwjd9405.github.io최소 힙(Min Heap)자식 노드의 값 >= 부모 노드의 값*Reference 구현힙(Heap)을 구현하는 표준 자료구조는 배열이다.힙(Heap)의 부모 노드와 자식 노드간의 인덱스 구조부모 노드 인덱스: 자식 노드 인덱스 // 2왼쪽 자식 노드 인덱스: 부모 노드 인덱스 * 2오른쪽 자식 노드 인덱스: 부모 노드 인덱스 ..

Array ( 배열 )메모리에 할당할 크기를 미리 정하고 사용하는 자료구조이다.int arr[10];// arr에 10개 미만의 데이터가 있을 시, 메모리 낭비 발생// arr에 10개 초과의 데이터가 삽입될 때, 메모리 초과(부족) 발생  장점배열을 사용하면 index가 존재하기 때문에 원하는 값을 빠르게 조회 가능하다단점값을 삽입하거나 삭제할 때 비효율적이다. 3번째 index위치에 값을 추가하려고 한다면, 기존에 있던 [3]부터 마지막 요소까지 한 칸씩 뒤로 이동해야 하는 연산이 수행되기 때문이다.List ( 리스트 )Array의 단점을 보완하고자 List가 등장했다.List는 메모리에 할당할 크기를 미리 정하지 않아도 된다. 크기가 정해져있지 않기 때문에 메모리 초과 문제를 해결할 수 있다.하지만..

개요 사이드 프로젝트로 웹 디자인&개발을 하면서 Audio를 사용할 기회가 생겼다. 이번에는 "음악 스트리밍"을 주제로 웹 디자인을 하고, React로 개발까지 진행하였다. 본론 const [audio] = useState(new Audio(src)); 먼저, useState를 활용하여 React 컴포넌트의 상태로 오디오 요소를 관리하면 추가되는 기능 또는 초기화에 대해서 유지보수가 편할 것이라 생각한다. src에 들어가는 주소는 mp3파일이 프로젝트 폴더의 public 내에 위치한다면 '/song.mp3'를 넣으면 음악 파일을 불러올 수 있다. 본인은 src도 상태로 관리하고자 useState를 활용했다. // 본 개발에서 사용될 음악 목록 const song = ["Cruel Summer", "Sha..