별도 포스팅으로 남기지는 않겠지만, 그동안 유튜브 뮤직에서 사용하는 모달을 만들었다.
모달에 애니메이션도 넣어보면서 css 의 animation 도 사용해보았다.
다른 사람의 코드를 볼 때는 엄청 어렵고 복잡해 보였었는데
애니메이션을 공부하고 보니 각 애니메이션을 단계별로 자세하게 적어서 복잡해보인 것일 뿐
각 단계를 뜯어보면 그렇게까지 복잡하지 않다는 것을 알 수 있었다.
이렇게 만들어졌다.
실제 유튜브 뮤직이랑 비교하면 아이콘도 조금 다르고, 모달에 메뉴도 더 넣어야되지만
일단 UI 넣는건 이정도까지만 해보기로 했다.
이제는 API 서버를 만들어서 프론트에서 백엔드로 HTTP 요청을 날려서 데이터를 얻어온 뒤,
얻어온 데이터를 잘 처리해서 UI에 뿌려주도록 분리된 백엔드를 만들어보려고 한다.
이를 위해서 우선 API 서버용 서브도메인을 등록했다.
API 라는 호스트명을 넣어서 api.example.com 형식으로 접속하면 백엔드에서 데이터를 얻어오도록 했다.
지금은 TTL이 3600인데, 적용을 빠르게 하고 싶어서 잠깐 300으로 낮췄다가 접속이 되는걸 확인하고 3600으로 돌려두었다.
10정도로 너무 낮은 수로 하니까 그건 또 설정이 안되게 막혀있더라..
도메인 설정이 끝났으니 다음으로는 nginx 설정이다.
기존에 사용하던 server 블록을 복사해서 아래와 같이 설정했다.
일단 테스트하는 느낌으로 api 서버로 접속을 하려고하면
nginx 설치시 보였던 그 기본 인덱스파일을 보여주도록 해봤다.
서브도메인에 따라서 다르게 화면이 보이기만 하면 성공이다.
다행히 결과는 성공이었다!!
nginx에서 서브도메인 등록을 해본건 이번이 처음이었는데, 잘 되서 다행이다.
이 블로그 게시글을 참고해서 따라해봤다.
근데 참고한 블로그를 보니까, 저 분도 직접 개인서버에 블로그를 올리신 것 같아보인다.
나도 언젠가 저렇게 해보고 싶다.
비록 물리적인 서버는 같지만 일단은 API 서버 분리가 되었으니 다음엔 백엔드 프로그래밍을 해봐야겠다.
지금 Node.js 랑 플라스크 중에서 고민중인데, 자바스크립트 언어가 익숙하지 않은데 Node.js 를 쓰는게 맞나 확신은 안선다.
오히려 익숙하지 않으니까 쓰면서 더 익숙해져야하나 싶기도 하고....
아무리 생각해봐도 플라스크는 입문용 프레임워크는 아닌 것 같다는 생각이 들어서 더 고민이 된다.
같은 파이썬 계열이면 장고로 가야하나 싶기도 한데 일단 갖고 있는 플라스크 책을 활용해보고 싶기도 하고..
너무 욕심인가 흠..
'개인 프로젝트 > [2022] 유튜브 뮤직 클론코딩' 카테고리의 다른 글
[유튜브 뮤직 클론코딩] 6. 프로젝트 구조 수정과 로그인 구현 (0) | 2022.08.05 |
---|---|
[유튜브 뮤직 클론코딩] 5. MariaDB + NodeJS 연동하기 (0) | 2022.06.08 |
[유튜브 뮤직 클론코딩] 4. Express 프레임워크 적용과 API 서버에서 데이터 받기 (0) | 2022.06.05 |
[유튜브 뮤직 클론코딩] 3. Fetch API & Node.js 에서 CORS 해결하기 (0) | 2022.05.20 |
[유튜브 뮤직 클론코딩] 1. html 코드를 동적으로 생성하도록 수정하기 (0) | 2022.05.04 |