With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application. (..ㄹㅇ진짜임) 출처 : https://wavesurfer-js.org/

개쩌는 라이브러리다. 음원을 분석해 파형을 웹에 나타내는 작업을 해야했는데, 처음엔 직접 하나하나 뜯어 구현할 생각에 기간 걱정을 했다. 그러다 서치를 통해 이 라이브러리를 발견했는데 구세주가 따로 없었다. react에 이를 적용했던 방법에 대해 기억나는대로 적어보려한다.

🥸 적용했던 기억을 더듬어보자

index.html

먼저 index.html에 아래 스크립트를 추가해줬다.

<script src="https://unpkg.com/wavesurfer.js"></script>

AudioCard.js

그 다음, 아래처럼 오디오 카드 구역을 설정해준다.

// wavesurfer
...
import WaveSurfer from "wavesurfer.js";

...
const waveform = useRef(null);
return(
  ...
  <div ref={waveform}></div>
  ...
)
...

id나 useState를 사용해도 되지만, 즉시 적용을 위해 ref를 사용해줬다.

const wavesurfer = useRef(null);
const audioURL = "audio/audio.mp3";
const [colorType, setColorType] = useState(null);

useEffect(() => {
    if(waveform.current){
      // waveform.current가 읽혀지면 시작됨
      wavesurfer.current = 
        WaveSurfer.create({
          container: waveform.current, // ref로 연결했기 때문에 current로 연결해주기
          barWidth: 4, // 막대 하나의 width값
          barHeight: 1,
          barGap: 2,
          progressColor: colorType,
          waveColor: '#eee',
          });
      wavesurfer.current.load(audioURL);
    }
},[])

그리고 빈 ref(state도 상관 없긴하지만, 역시 즉시 반영을 원했다.)에 음원과 Wavesurfer.create를 연결해주면 끝났다. Wavesurfer.create에는 이 외에도 정말 다양한 커스텀 키 값들이 있으니, 원하면 공식문서를 훑어보세요옹~

근데 난 여기서 쉽게 끝나진 않았다.

🤯 CORS 에러가 제일 싫은뎁쇼..

왕왕 싫어..보기만 해도 안압 폭발하는 느낌

공식문서에서 하라는 대로 다 따라했는데도 불구하고 cors 에러가 났다. 라이브러리 연결에 cors에러라니 장난하나?라고 생각했는데..!

그 전에 혹시 이 글을 보고 있는 사람이 있다면, 그 이유가 나와 같은 현상을 겪고있다면, 근데 aws를 사용하지 않는다면, .
.
.

그럼 죄송하지만 큰 도움은 되지 않을 것 같다.. aws에 음원을 올려놓고 그걸 가져와 썼는데 허용이 안되어 있던게 원인이었기 때문이다.

그냥 로컬 음원 파일을 바인딩하면 음원이 잘 가져와지는데, 원하는 음원을 url로 연결하려하면 cors가 떠서 깨닫게 되었다.

그래서 그냥 aws에서 cors허용을 해주었다. 간단하쥬? cors 허용은 아래 글들을 참고해서 설정해주었다.

https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/cors.html

https://velog.io/@kimsehwan96/S3-CORS-%ED%97%A4%EB%8D%94-%EA%B4%80%EB%A0%A8-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-html2canvas-lottie

감사합니다 선생님들! 그럼 이만!

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 내가 웃는게 웃는게 아니야

이전 블로그에 있던 글인데, 그 블로그 접었다. 뻘짓한거 생각난김에 옮겨놓아야겠다.

🤷🏻 난 몰랐지

내 노트북으론 분명히 HTTPS로 잘 열리는데, 윈도우 로컬로 열라고 하면 HTTP로 열리는, 내 뚜껑도 열리는 일이 발생했다. 나는 진짜 해결법을 몰라서 별 뻘짓 다하고 결국 원형 탈모가 올 뻔 했는데, 다행히 해결법을 찾았다. 안까먹으려고 써놓는 글임.

맥이랑 윈도우랑 package.js 작성 때 script의 start부분 세팅을 다르게 해줘야한다.

// MAC
"script" : {
      "start" : "HTTPS=true react-script start",
      ...
},

// WINDOW
  "script" : {
      "start" : "set HTTPS=true&&react-script start",
      ...
},

다시 봐도 눈물겹네..끝!

겉모습만 알고있던 함수 선언식, 함수 표현식에 대해 더 깊게 공부해보자

🎯 함수 표현식

우리가 평소 알고있던 그 모습이다.

function 함수명(){
    // 로직
}

🎯 함수 선언식

우리가 평소 알고있던 그 모습의 함수를 변수에 넣은 모습이다.

// 익명 함수
var 변수명 = function(){
    // 로직
}

// 기명 함수
var 변수명 = function 함수명(){
    // 로직
}

🤷🏻 함수 표현식과 함수 선언식의 차이점

생긴 모습(변수 할당 여부) 외의 차이점에 대해 알아보자.

가장 큰 차이점은 호이스팅 영향을 받는지에 대한 여부이다. 함수 표현식은 호이스팅 영향을 받지 않지만, 함수 선언식은 호이스팅 영향을 받는다. 예시를 통해 알아보겠다.

먼저, 함수 선언식으로 작성했을 때의 예시이다.

test(2); // 호이스팅 영향을 받지 않아 에러 메세지 출력

var test = function(x){
    return x * 2;
}

test(2); // 4

함수 선언식의 test 함수는 선언하기 전에 실행하면 에러메세지가 출력되는 모습을 발견했다.

다음은, 함수 표현식으로 작성했을 때의 예시이다.

test(2); // 4 (호이스팅 영향을 받음)

function test(x){
    return x * 2;
}

test(2); // 4

함수 표현식의 test 함수는 선언하기 전에 실행해도 호이스팅의 영향이 되어 결과 값이 잘 출력되어 나온다.

🐢 그래서, 내 생각엔

호이스팅 영향을 받는지에 대한 여부를 잘 고려하면서 필요에 따라 선택해야하지만, 내 생각엔.. 불가피한 상황이 아니면 되도록이면 함수는 상단에 사용하는게 좋을 것 같다..!키키 끝!

출처 :

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function
• https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/
• https://taenami.tistory.com/86

공부해야하는 것들이 꽤 많은데 대충 훑고 까먹기 싫어서 시작한 프론트엔드 로드맵 따라가기! 꼼꼼한 Front-End 개발자가 되는 길은 험난하구나..

🧑🏻‍💻 어쩌다가 이런 포스팅을..?

프론트엔드 로드맵을 발견해서 이리저리 클릭해보던 중 이 내용들을 모두(희망사항) 습득하면 간지날 것 같다는 생각이 들었다. 내가 참고한 로드맵은 아래 링크를 확인하면 된다. 오늘은 첫번째 질문, 인터넷이 어떻게 작동하는지에 대한 정리를 해보려한다!

참고 로드맵 : https://roadmap.sh/frontend/

🤷🏻 인터넷이 뭘까?

인터넷(Internet)이란, 여러 통신망을 연결한다는 뜻의 'inter-network'라는 말에서 시작되었으며, 전 세계 컴퓨터들을 연결하는 하나의 큰 통신망을 의미한다. 인터넷은 클라이언트와 서버로 구성되어 있으며, TCP/IP라는 기본 프로토콜을 통해 제공되고 있다.

🤯 TCP/IP ????

• IP : 패킷 통신 방식의 인터넷 프로토콜(Internet Protocol). 네트워크에 연결된 모든 컴퓨터에는 고유한 IP주소를 부여받는다.
• TCP : 전송 조절 프로토콜(Transmission Control Protocol). TCP는 IP 위에서 동작하는 프로토콜로, 데이터의 전달을 보증하고 보낸 순서대로 받게해준다. '한 기기에서 다른 기기로 데이터 전송'을 담당한다.

🕸 네트워크

2대의 컴퓨터가 통신을 한다고 치면, 물리적인 케이블이나 무선 연결(와이파이, 블루투스등)을 통해 연결할 수 있다. 단순하게 네트워크를 형성하는 것이다. 하지만, 해당 방법으로 네트워크를 형성할 시, 10대의 컴퓨터가 형성한 네트워크는 아래 사진과 같다.

10대의 컴퓨터를 연결하기 위해 컴퓨터 당 9개의 플러그가 달린 45개의 케이블이 필요해지는 것이다..! 이 문제를 해결하기 위해 네트워크의 각 컴퓨터는 라우터라고하는 '특수한 소형 컴퓨터'에 연결된다.

예를 들어 메세지를 보낸다고 가정하면, 보내는 컴퓨터에서 직접적으로 받는 컴퓨터로 통신을 하는 것이 아니라는 것이다. 보내는 컴퓨터는 메세지를 중간다리 역할을 하는 라우터로 전달, 라우터는 받는 컴퓨터로 메세지를 전달한다. 이제 10대의 컴퓨터 네트워크에 9개의 플러그가 달린 45개의 케이블이 아닌 단 10개의 케이블만 필요하다!

라우터도 '특수한 소형 컴퓨터'. 즉, 두 대의 라우터를 연결하는 것이 가능하다. 컴퓨터를 라우터에 연결하고, 라우터와 라우터가 연결되고..그렇게 무한히 확장이 가능하다는 뜻이다! (개쩐다)

하지만, 이렇게 네트워크를 구축하기엔 부족한 것이 있다. 아주아주 먼 곳과의 연결은 어렵다는 것이다. 아주아주 먼 곳과 연결이 잘 되어있는 사례가 무엇일까? 바로 전화시설이다. 전화 시설은 이미 세계 어느 곳과도 연결되어 있기에, 이 시점에서 우리가 필요로 하는 상당히 완벽한 배선인 것 같다. 따라서 모뎀이라는 특수 장비를 사용하여 네트워크의 정보를 전화 시설에서 처리할 수 있는 정보로 바꾼다. (물론 그 반대도 가능)

짠! 이렇게 전화 시설에 연결된 우리의 컴퓨터와 라우터..! 자 이제 보내는 네트워크에서 아주아주 먼 네트워크로 메세지를 보내려면 어떻게 해야할까? 바로 네트워크를 인터넷 서비스 제공 업체(Internet Sevice Provider, ISP)에 연결하면 해결된다!

🤯 ISP????

'인터넷 서비스 제공 업체'로, 우리나라에 대표적으로 KT, SK telecom, U+가 있다. 이 회사들이 인터넷 케이블들을 설치해놓고, 우리에게 제공해주는 것이다!

짜잔! 이렇게 ISP는 다른 ISP의 라우터에도 엑세스가 가능하여 인터넷은 이러한 전체 네트워크 인프라로 구성된다.

출처 :

• https://developer.mozilla.org/ko/docs/Learn/Common_questions/How_does_the_Internet_work
• http://www.tcpschool.com/webbasic/intro
• https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C_%EC%8A%A4%EC%9C%84%ED%8A%B8

!!에 대해 최근 정확히 알게되었다. 까먹기 전에 확실히 정리를 해두면 좋을 것 같아서 정리해본다.

🎯 !! (Double Exclamation Marks)

!!연산자는 다른 타입의 값을 boolean으로 형 변환하기 위해 사용한다.

🎯 !!! (Triple Exclamation Marks)

!!!연산자는 !!연산자의 부정문으로 사용한다. 대게 !!연산자 사용 후 boolean으로 형 변환이 된 상태를 부정할 때 쓰이는 것 같다.

✏️ Example

예를들면 조금 더 이해하기 쉬울 것이니 아래 예시를 참고하자.

// number
const n = 1;
console.log(!n); // false
console.log(!!n); // true
console.log(!!!n); // false

// string
const s = "hello";
console.log(!s); // false
console.log(!!s); // true
console.log(!!!s); // false

// null
const nu = null;
console.log(!nu); // true
console.log(!!nu); // false
console.log(!!!nu); // true

빨리 목적성을 갖고 타입스크립트로 !!연산자를 써보고싶다. 계속 깊게 들어가려 할 수록 점점 넓게 새로운 것들이 발견되는 기분이라 재밌다. 열심히 해야징

벨로그를 처음 사용해보는 나를 위한 가이드 작성 (두근두근)

찾아보니 벨로그도 github의 readme 작성과 비슷하게 마크다운을 사용하길래, 첫 게시글은 벨로그 사용법을 쭉 정리하는 것이 좋을 것 같다고 생각했다!

🪄 Header

h1부터 h6까지 제목 작성이 가능하다.

✏️ 입력

#-> h1 ##-> h2 ###-> h3 ####-> h4 #####-> h5 ######-> h6

📃 출력

h1

h2

h3

h4

h5

h6

🪄 BLOCK

👉🏻 글씨 음영처리

백틱을 사용하면 글씨 음영처리가 가능하다.

✏️ 입력

📃 출력

백틱 사용하여 글씨 음영 넣기.

👉🏻 인용 넣기

'>'를 사용하면 인용 가능

✏️ 입력

> 1단 >> 2단 >>> 3단 >>>> 4단

📃 출력

1단

2단

3단

4단

👉🏻 코드 블럭

백틱을 3개 찍어 코드 블럭 사용 가능하다. 한 줄짜리 코드 블럭은 탭을 두번 치면 쉽게 만들어진다. 맨 위 백틱에는 사용 문법을 꼭 같이 찍어주자!

✏️ 입력

📃 출력

function test(){
return console.log('hello world')
}

```

👉🏻 수평선

*이나 -, _으로 수평선을 만들 수 있다.

✏️ 입력

📃 출력

👉🏻 글자 색상

html 태그로 사용하면 글자 색상도 바꿀 수 있다.

✏️ 입력

📃 출력

red yellow