전체 글159 프론트엔드 성능 최적화 가이드 (2) 2024. 11. 16. ES6 함수의 추가 기능 자바스크립트는 ES6 이전과 이후로 나뉜다. ES6이후 JS의 많은 부분이 바뀌었는데 함수 부분도 마찬가지이다. 먼저 이전의 함수는 생성자함수와 일반 함수의 구분이 없었다. 따라서 모든 함수는 일반함수로서 호출할 수 있으며 생성자 함수로서 new 키워드를 사용해 호출할 수 있었다. 이러한 유동성은 성능면에서도 큰 문제를 갖는다. 바로 콜백함수 또는 객체에 바인딩 된 함수 모두 cunstructor를 갖는다는 점이다. 이는 불필요한 프로토타입 객체를 생성하게 되며, 함수의 명확한 구분없이 사용되는 점은 코드의 가독성에도 큰 영향을 미친다. 따라서 ES6 이후 함수의 사용 목적에 따라 세가지 종류로 나누었다. 구분constructorprototypesuperarguments일반함수OOXO메서드XXOO화살표.. 2024. 11. 15. [JavaScript] 음악 플레이리스트 프로그래스바 제작 (3) 버그를 해결했다. 원인을 찾아보니 크롬을 실행할 때 음원이 나오지 않아도 AudioContext 객체를 생성할 수 없다. 그래서 즉시 실행되던 함수를 묶어 playMusic 에서 실행하도록 바꾸었더니 해결됐다. 다음으로 프로그래스 바를 만들었다. 내용을 요약하자면 오디오 timeupdate 이벤트 리스너를 이용해 내부 함수가 계속해서 실행될 수 있게 했다. 그 뒤로는 현재길이 / 전체길이 를 백분위로 환산한 뒤 프로그래스 바의 width 길이에 대입했다. 재생 시간에 따른 프로그래스 바 크기 조절실행코드 audio.addEventListener("timeupdate", (e) => { // console.log(e); // 프로그래스 바 진행 리스너 const currentTime =.. 2024. 11. 14. [JavaScript] 타입별 메서드와 제너레이트 타입별 메서드숫자형(number)e의 사용숫자를 입력할 때 100000000과 같은 큰 수를 입력해야 한다면 0을 치는게 헷갈릴 수 있다. 따라서 e를 쓰고 그 뒤에 0의 개수를 입력하면 된다.const billion = 1000000000;const _billion = 1e9Math 함수삼각함수Math.sin(radian) : 라디안의 사인값을 반환하는 함수이다.Math.cos(radian) : 라디안의 코사인값을 반환하는 함수이다.최대/최소Math.max( num ) : 인수들 중 가장 큰 값을 반환하는 함수이다.Math.min( num ) : 인수들 중 가장 작은값을 반환하는 함수이다.문자형 (string)문자는 Immutable (불변) 이다. 따라서 문자열을 수정하기 위해서는 문자를 슬라이싱해 .. 2024. 11. 13. [JavaScript] 클로저 (closure)란 무엇일까 모듈화의 핵심은 "응집도를 높히고 결합도를 낮춘다" 이다. 이 내용을 잘 생각하며 카운트를 증가시키는 함수를 만들어 본다면 어떻게 코드를 작성할 수 있을까let cnt = 0;function count(){ return cnt ++}뭐 대충 이런식으로 작성할 수 있을 것이다. 이 때 cnt 변수가 함수 외부에 선언되었다. 이렇게되면 어떤 곳에서도 접근이 가능해 위험하고, count 함수를 다른곳으로 옮겨야 할때 항상 저 cnt 변수를 같이 가지고 가야하는 문제가 생긴다. 또 다른 경우에는 코드 200줄 아래에서 누군가가 cnt라는 변수를 사용한다면 에러가 날 수도 있다. 이 때 cnt라는 변수를 count 함수 내부에 선언할 수만 있다면 위 문제 모두 해결된다. 그렇지만 count 함수를 호출할 때마다.. 2024. 11. 12. [JavaScript] 음악 플레이리스트 (2) 사운드 스펙트럼, 에러 극복기 분명히 어제까지 잘 되던 사이트가 오늘 아침부터 소리가 안나기 시작했다. 처음에는 단순 렉이겠거니 싶었는데 핸드폰으로 들어가도 안나오고 시간이 지나도 소리가 나지 않자 뭔가 문제가 생긴 것 같아 한참 문제를 찾았다. 그런데 코드도 짧아서 에러 나올 곳도 없고 콘솔창도 깨끗하고 심지어는 가끔씩 될 때도 있었다. 그래서 대체 왜 그런가 찾아봤더니 mp3 파일의 용량 문제였다... 파일을 압축해서 다시 호스팅 하니 잘 되는 것을 볼 수 있었다. 그런데 분명히 이 글 시작할 때까지만 해도 잘 되던게 지금 또 안되기 시작했다. + 한참 또 찾아보았는데 도저히 왜 안되는지 모르겠다. 이제는 파일 크기도 1.6메가로 작고 콘솔에 내가 출력하는 audio.src를 찍어봤는데 해당 경로로 들어가면 노래가 나온다. 더.. 2024. 11. 11. [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.. 2024. 11. 10. [JavaScript] 가비지 컬렉션 가비지컬렉션이란 더이상 다른 객체에 참조되지 않는 객체를 삭제하여 메모리 누수를 방지하는 메모리 관리방식이다. GC라고 불리며 메모리 관리를 직접 해야하는 C++과 다르게 가비지 컬렉터가 자동으로 메모리를 관리해준다. 2024. 11. 9. [JavaScript] 얕은복사 vs 깊은복사 feat. 참조복사 참조복사객체의 참조 복사는 같은 메모리 주소를 복사한다. 즉, 원본 데이터를 참조복사한 다른 객체의 값이 바뀌게 된다면 원본에 문제가 생길 가능성이 매우 높다. 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.. 2024. 11. 8. 이전 1 2 3 4 ··· 18 다음
