[JavaScript] 음악 스펙트럼 플레이어 만들기
·
Front end/JavaScript
요즘 도리 노래에 빠졌는데 유튜브 플레이리스트에 도리 신곡이 없어서 내가 플레이리스트를 만들어 보았다. 처음에는 플레이리스트를 유튜브에 올려보려고 영상편집을 배워봤는데 툴을 뭐 쓸지 고민하다 결국 js로 만들게 되었다 ㅋㅋ  미리보기 플레이리스트 myeong-jae-hwi.github.io 먼저 앨범 이미지는 iTunes에서 가져올 수 있다고 해서 이미지를 다운 받았고, mp3파일은 지니에서 구매했다. 지니가 3개월동안 할인을 많이 해줘서 싸게 음악을 다운받을 수 있었다. iTuneshttps://decoupled.app/itunes-artwork-finder/?term=&country=us&entity=album iTunes Artwork Finder decoupled.app geniehttps://p..
[JavaScript] 가비지 컬렉션
·
Front end/JavaScript
가비지컬렉션이란 더이상 다른 객체에 참조되지 않는 객체를 삭제하여 메모리 누수를 방지하는 메모리 관리방식이다. GC라고 불리며 메모리 관리를 직접 해야하는 C++과 다르게 가비지 컬렉터가 자동으로 메모리를 관리해준다.
[JavaScript] 얕은복사 vs 깊은복사 feat. 참조복사
·
Front end/JavaScript
참조복사객체의 참조 복사는 같은 메모리 주소를 복사한다. 즉, 원본 데이터를 참조복사한 다른 객체의 값이 바뀌게 된다면 원본에 문제가 생길 가능성이 매우 높다. let message = '문자 값은 프리미티브 데이터 타입으로 값이 복사됩니다.';let messenger = { name: 'kakao talk', manufacture: 'kakao',};let text = message;let conversationTool = messenger;// 비교 (복사 vs. 참조)console.log(message == text);console.log(message === text);console.log(messenger == conversationTool);console.log(messenger === c..
[JavaScript] 구조분해 할당
·
Front end/JavaScript
구조 분해 할당구조분해 할당이란 배열 혹은 객체의 속성을 개별 변수에 담을 수 있도록 하는 표현식이다. 가끔 배열의 일부분만 필요한 경우가 있는데 이럴 때 여러 방법이 있지만 구조 분해 할당을 사용하면 매우 쉽게 값을 가져올 수 있다.  배열 분해변수를 좌항, 분해하고자 하는 배열을 우항에 놓고 분해한다. 이 때, 배열의 순서를 맞추어야 한다. const fruits = ['apple', 'banana', 'cherry'];// 배열 요소를 변수에 할당const [first, second, third] = fruits;console.log(first); // "apple"console.log(second); // "banana"console.log(third); // "cherry"기본값 지정cons..