이번엔 지난번 포스팅에 적었던대로 데이터베이스를 연동하여 데이터를 가져오도록 해보았다. 우선 MariaDB 를 깔고, NodeJS 에 연동하기 위해 MySQL 모듈을 설치했다. 이걸 설치할 당시 가장 최근 버전이었던 10.8.3 버전을 깔았는데 오늘 다시 들어가보니 10.9 버전이 나왔다. 그런데 1년밖에 지원안하니까 10.6을 까는걸 권장한다고 나와있다.. 그리고 어제 설치할 때는 Harukasan 에서 다운로드를 할 수가 없었다. 그냥 아예 명령어를 복사 붙여넣기 했는데 404에러가 떴다. 그래서 YongBok.net 으로 받았다. 아직은 Express하고 mysql 밖에 없다 그리고 다음과 같이 코드를 작성했다. DB에 접속하기 위한 코드 부분을 따로 분리했다. DB서버와 nodejs 서버가 같은 ..
원래는 http 내장 모듈을 이용해서 해볼까 했는데, 검색을 해보니까 이 모듈을 이용해서 서버 프로그래밍을 하는 건 안될 것 같다고 생각했다. createServer() 메소드로 서버를 만드는데, 이 함수의 인자로 콜백함수가 있다. 그런데 이 콜백함수로 요청 객체가 넘어오는데, 라우팅을 처리할 때 이 요청 객체의 경로를 일일히 분기로 나눠서 처리해야 했기 때문이다. 물론 해결책이 있을 것 같긴했는데, 굳이 그렇게까지 http모듈을 사용하고 싶지는 않아서 express 모듈을 사용하기로 했다. 사용하다보니까 뭔가 플라스크랑 닮았다. 대부분의 웹 프레임워크가 다 거기서 거기인건가 싶기도 하고... 'URL' -> 해당 url 에 대한 콜백 함수 이 구조인건 똑같았다. 우선 메인페이지로 사용자가 접속했을 때,..
이제 분리한 API 서버 도메인에 접속되는 걸 확인했으니 프론트서버에서 백엔드서버로 요청을 보내고 응답을 받는 것을 테스트해보기로 했다. 현재 프론트에서는 아무런 프레임워크 없이 순수 바닐라 자바스크립트로 만들고 있기 때문에 자바스크립트에서 사용할 수 있는 가장 대표적인 내장 함수인 fetch API 를 사용했다. 우선 프론트엔드의 자바스크립트 파일에서 다음과 같은 코드를 작성했다. 이렇게 REST API 를 이용해서 데이터를 받아오고, 받아온 데이터로 화면에 UI를 뿌리는 것이기 때문에 첫번째 포스팅에서 동적으로 UI를 생성하도록 짰던 코드에서 fetch 를 호출하도록 했다. 이것도 일단 테스트니까 서버에서 받은 데이터를 콘솔에 출력하도록 해봤다. 다음으로 출력할 데이터를 보내줄 서버에 코드를 작성해야..
별도 포스팅으로 남기지는 않겠지만, 그동안 유튜브 뮤직에서 사용하는 모달을 만들었다. 모달에 애니메이션도 넣어보면서 css 의 animation 도 사용해보았다. 다른 사람의 코드를 볼 때는 엄청 어렵고 복잡해 보였었는데 애니메이션을 공부하고 보니 각 애니메이션을 단계별로 자세하게 적어서 복잡해보인 것일 뿐 각 단계를 뜯어보면 그렇게까지 복잡하지 않다는 것을 알 수 있었다. 이렇게 만들어졌다. 실제 유튜브 뮤직이랑 비교하면 아이콘도 조금 다르고, 모달에 메뉴도 더 넣어야되지만 일단 UI 넣는건 이정도까지만 해보기로 했다. 이제는 API 서버를 만들어서 프론트에서 백엔드로 HTTP 요청을 날려서 데이터를 얻어온 뒤, 얻어온 데이터를 잘 처리해서 UI에 뿌려주도록 분리된 백엔드를 만들어보려고 한다. 이를 위..
드디어 한미연합훈련이 끝났다. (만세.....) 인터넷 검색하면 나오는 그 훈련입니다. 보안문제 없어요! 훈련이 끝나고 기존에 웹개발 공부로 하고 있던 유튜브 뮤직 클론코딩을 이어서 진행하기 시작했다. 지금까지는 열심히 구글링하면서 찾아낸 자료로 다음과 같은 화면 구성까지 만들었다. 만들다가 나중에 알게된 건데, PC 유튜브 뮤직과 모바일 유튜브 뮤직 디자인이나 UI구성이 조금 다르다 ㅋㅋㅋ (당연한건가..?) 일단 모바일 버전을 보면서 따라 만들기 시작했으니까 계속 모바일 버전을 참고해서 만들기로 했다. 다크모드는 아직 따로 만들지 않았지만, 나중에 다크모드로 바꿀 예정이다. 내 친구는 저 노란색을 보면서 색이 이상하다고 좀 바꾸라고 했었는데, 저건 Element 영역을 확인하려고 임시로 칠해놓은 색이..
이 앱의 메인 기능인 악보에 대한 CRUD 구현이 모두 끝나서 주변 기능들을 구현하기 시작했다. 1. '좋아요', Key 조절 기능 추가 악보 뷰어 페이지에서 악보에 좋아요를 누를 수 있도록 버튼을 만들고, 마이페이지에서는 내가 좋아요 표시한 악보를 모아서 볼 수 있도록 했다. 이를 위해서 자동 스크롤 UI 위치를 하단으로 수정했다. 좋아요 버튼을 상단 앱바에 넣고 싶었기 때문이다. 그리고 하단에 자동 스크롤 UI만 덩그러니 넣으니 허전해서 마침 구현하려고 했었던 악보 키를 조절하는 버튼도 넣었다. UI가 나름 괜찮아졌다 ㅎㅎ 지금 악보는 내가 미리 좋아요 표시를 해두어서 색이 칠해진 하트 모양이다. 좋아요를 표시하지 않은 악보는 색이 칠해져 있지 않다. 지금 포스팅을 쓰면서 생각해보니 하트 색을 빨간색..
원래는 악보를 구성할 때, 페이지 별로 구성하는 것을 생각했었다. verse 페이지 작성하고, chorus 페이지 작성하고, bridge 페이지를 각각 만든다음 '전체' 페이지에는 각 페이지에 작성한 코드를 이리저리 조합해서 만들자! 이게 내 처음 아이디어였는데, 생각보다 '전체' 페이지에서 각 페이지의 코드를 합치는게 복잡했다. 단순히 각 페이지의 코드를 읽어서 붙이는 것이라면 상관없겠지만, (사실 이것도 구현하기가 너무 귀찮았다.) 이왕 각 페이지의 코드를 참조하는거, '전체페이지의 코드'와 '각 페이지의 코드' 를 서로 연동해서 전체 페이지에서 수정한 코드가 각 페이지에서도 수정되고, 각 페이지에서 수정한 코드가 전체에서도 수정되도록 하고 싶었다. 이걸 구현하려면, 결국 모든 코드셀에대해 Globa..
악보에 대해 CRUD 구현을 완료했다. 그리고 백엔드를 오라클 클라우드를 이용한 리눅스 서버에서, BaaS인 파이어베이스로 이전했다. Firebase 로 이전한 배경 악보에 대해 수정과 삭제를 진행하기 위해서는 악보를 작성한 작성자를 구분할 수 있어야 한다. 유저 인증 기능을 손수 구현한다면 내가 생각하기에 DB에 아이디와 비밀번호를 저장해놓고 사용자가 입력하면 입력값을 DB의 데이터와 단순 비교하여 체크하는 방식으로 했을 것이다. 비밀번호의 경우, 데이터를 그대로 저장하는게 아니라 해시를 사용한다고 들었다. 또 여기저기에서 주워들은 이야기로는 토큰이니 세션과 쿠키니 그런 것으로 유저 인증을 한다고 들었는데, "아이디 + 비밀번호 + 해시" 이 3가지 조합외에 기술을 사용하는 이유는 아직 와닿지 않았다...
악보 편집 기능의 핵심 기능을 완성했다. 3일 동안의 커밋 내역이다. 변경사항이 정말 많다. 3일동안 밥먹고 자는 시간 빼고 플러터로 코딩만 했다... (코딩 : 아키텍처 고안 : 디버깅,플러터 공부 = 3 : 2 : 5 정도 인 듯하다.) 1. DB에 코드를 저장하고, 저장한 코드를 불러오는 기능을 구현했다. 딱 '코드'만 저장하는게 아니라 코드를 포함한 줄 건너뜀과 같은 부분도 저장하도록 했다. 2. 코드셀을 보여줄 때, 높이가 높아지면 아래 코드가 키보드와 버튼 UI에 가려지는 문제를 수정했다. 원래 Scaffold() 위젯의 body 속성으로 코드셀을 넣어주고, 커스텀키보드와 버튼UI를 bottom 속성에 넣었었다. 그런데 bottom 속성은 기본적으로 body위에 스택처럼 덮어서 UI를 보여주는..
코드 구성요소 분류하기 이틀동안, 커스텀 키보드로 입력한 코드 구성요소를 따로따로 저장하고 저장한 요소를 조합하여 코드로 띄우는 기능을 만들었다. 이때 코드 구성요소를 저장하는 방법때문에 삽질을 많이 했다.. 코드 구성요소는 다음과 같다. 루트, 루트#/b, 루트 텐션, 마이너, 마이너텐션, 메이저, 메이저텐션, 텐션#/b, 텐션, ASDA, ASDA텐션, 베이스, 베이스#/b 이렇게 구성요소가 매우 많은 데에는 텐션의 위치가 여러군데 가능하기 때문이다. C2 와 같은 코드는 루트가 C이고, 루트 텐션이 2인 것으로 보았다. 루트 텐션과 그냥 텐션을 나눈 이유는 간단하다. C2(#9) 과 같은 코드를 작성하기 위해서이다. ASDA는 add, sus, dim, aug 의 첫글자를 따서 지었다. 저 4가지 ..
