[유튜브 뮤직 클론코딩] 4. Express 프레임워크 적용과 API 서버에서 데이터 받기

원래는 http 내장 모듈을 이용해서 해볼까 했는데,

검색을 해보니까 이 모듈을 이용해서 서버 프로그래밍을 하는 건 안될 것 같다고 생각했다.

 

createServer() 메소드로 서버를 만드는데, 이 함수의 인자로 콜백함수가 있다.

그런데 이 콜백함수로 요청 객체가 넘어오는데,

라우팅을 처리할 때 이 요청 객체의 경로를 일일히 분기로 나눠서 처리해야 했기 때문이다.

 

물론 해결책이 있을 것 같긴했는데,

굳이 그렇게까지 http모듈을 사용하고 싶지는 않아서 express 모듈을 사용하기로 했다.

 

사용하다보니까 뭔가 플라스크랑 닮았다.

대부분의 웹 프레임워크가 다 거기서 거기인건가 싶기도 하고...

 'URL'  -> 해당 url 에 대한 콜백 함수

이 구조인건 똑같았다.

 

우선 메인페이지로 사용자가 접속했을 때, '빠른 선곡' 부분의 곡 데이터를 줘보기로 했다.

아직은 데이터베이스가 없으니 임의로 직접 데이터를 보내주도록 코딩해보았다.

 

루트 경로로 들어왔을 때, '빠른 선곡' 에 대해 넘겨줄 데이터를

"fastStartList" 키에 객체 배열로 넘겨주었다.

 

이제 데이터를 보내는 API 함수가 만들어졌으니

클라이언트에서 받은 데이터를 UI에 뿌리도록 아래와 같이 작성했다.

 

API_ADDRESS 변수에는 요청할 API 서버 주소가 적혀있다.

서버주소로 바로 요청했으니 루트 디렉토리에 대한 요청이다.

 

받은 json 데이터를 객체로 바꾸고, fastStartList 를 가져온다음

기존에 만들었던 UI 렌더링 함수에 해당 객체배열의 데이터를 인자로 넘겨준다.

 

한가지 문제는 이 fetch 메서드가 비동기 메서드라서

제일 위에 보여야하는 '빠른 선곡' 에만 fetch 메서드를 사용하면

실제 렌더링 결과 '빠른 선곡'이 맨 아래에 보이게 된다.

 

그래서 나머지 UI를 렌더링 하는 코드를 RENDER() 함수에 넣어주고

fetch 메소드의 then 메서드에서 실행시켜 '빠른 선곡'이 렌더링 된 이후에

렌더링 하도록 코딩하였다.

 

플러터에는 미리 UI를 그려놓고, UI의 데이터를 나중에 받으면

받는대로 넣어주는 Future 객체를 사용할 수 있었다.

자바스크립트로도 그런 비슷한 걸 구현해볼 수는 없을까 궁금하다.

(왠지 리엑트에는 있을 것 같다. 리엑트는 플러터랑 닮았다고 들었기 때문이다)

 

이 코드를 실행한 결과는 아래와 같다.

 

 

아주 성공적이다 ㅎㅎ

그렇다면 이제부터 할 일은 이 데이터를 하드코딩으로 넘겨주는게 아니라

DB를 만들어서 DB에서 데이터를 가져오도록 하는 것이다.

 

DB는 아마 마리아db나 MySQL을 사용할 것 같다.

오라클은 유료니까 사용하긴 힘들 것 같고

몽고DB같은 NoSQL은 아직 굳이.. 싶기도 하고

어차피 3학년 DB수업은 RDMBS니까 관계형 데이터베이스 연습을 더 해보고 싶다.