js10 [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] for in과 for of for ...in 문for ...in 문은 열거가능한 모든 속성을 반복한다. 이 때 상속된 속성도 같이 접근하게 된다. 여기서 두 가지의 특징이 나타난다.첫 번째로는 상속된 속성에 접근 가능하다는 점과 두 번째로는 열거 가능한 속성을 반복한다는 점이다. 주로 객체의 속성에 접근할 때 사용한다. 상속된 속성에 접근 가능const javaScript = { creator: 'Brendan Eich', createAt: '1995.05', standardName: 'ECMAScript', currentVersion: 2024,};Object.prototype.nickName = 'tiger'; // 최상위 객체인 Object에 nickName이라는 프로퍼티 할당 위 코드에서 javaScript 객체의.. 2024. 11. 5. v-if와 v-for 이번 단원에서는 Vue에서 if와 for를 사용하는 방법에 대해 배웠다. 일단 문법은 다른 언어들과 같아서 익숙했지만, html 코드 내에 작성하는게 뭔가 맘에 안든다. 나는 보통 html에서 태그 속에 뭐 넣는 걸 안좋아하는데 익숙해지면 괜찮아질 것 같기도 하다. 암튼 뭐 되게 간결하고 사용법도 쉽고, Js에서 코드 길게 안짜도 편리하다는 점은 정말 유용하다. v-if뷰에서 사용하는 if 문이다. html 태그 내에서 사용하며, 큰따옴표 안에 Js 코드를 작성한다. 아래는 goals라는 배열이 비어있다면 해당 텍스트를 나타내는 코드이다. 목표가 설정되지 않았습니다. 목표를 설정해주세요. v-else뷰에서 사용하는 else이다. if 바로 아래에서 사용해야 하며, 중간에 다른 태그가 들어가면 실행되지않는.. 2024. 6. 15. computed와 watch 이전 단원에서는 data와 methods 의 대해 배웠다. 이번 단원에는 Vue의 다른 개념인 computed와 watch에 대해 공부했다. 쉽게 설명하자면 computed는 연산형 데이터? 라고 말 할 수 있을 것 같고 watch는 데이터가 바뀔 때 알 수 있으니 디버깅할 때 좋을 것 같다. computed는 데이터에 직접 연산을 넣으면 가독성이 떨어지고, 효율이 낮아질 수 있으니 따로 분리하는 것이라고 이해했고, watch는 그냥 디버깅 하위호환이라고 이해했다. computed (연산 프로퍼티): 연산 작업이 필요한 변수를 데이터처럼 관리하기 위함. ➡️ 즉, 재사용성의 증가, 코드의 가독성 및 유지보수 작업이 향상된다. 메서드와 다른 점: 다른 데이터에 의존하는 데이터에 주로 사용. 해당 속성.. 2024. 6. 15. 이전 1 2 다음
