[백킹트랙 생성 프로젝트] 구현 과정

https://github.com/sh5080/BackTrack

GitHub - sh5080/BackTrack

과정

프론트단에서 모든 것을 해결하려고 처음엔 생각했지만 기능 명세를 정리하면서 추후 서비스를 배포할 생각까지 하고 있다보니, 로그인과 별도의 내용 저장, 불러오기 등을 생각하고 있어서 레포를 하나로 사용하되, 브랜치를 프론트와 백 기준으로 나누어 생성했다. 

 

취업을 위해서는 포스트맨이 곧 프론트고, 뷰임을 알지만 배포도 하고 기능에 대해 사용자를 통한 실제적인 피드백을 받기 위해서는 프론트가 필요했다. 리액트를 배울 시간에 node.js만 공부했다보니 프론트에 대해서 너무 취약함을 알고 있지만 서비스를 위해 리액트를 배워서 하기엔 너무 비효율적일 것 같아서 고민하다가 vue가 당장 접근하기 쉬울 것 같아서 vue로 시작하게 되었다. 

 

css지식이 0에 가까운 나에게 chatGPT + vue의 조합은...ㅋㅋㅋ 훌륭했다. 만들어진 ui는 물론 극 초심자의 수준에 가깝지만.. 기능구현에 초점을 맞추고, 정말 사용가능할 정도로만.... 구성하고 디자인적인 측면은 중요치 않으니 가장 나중에 다듬어보려 한다. 

 

현재는 프론트에서 코드를 생성하는 부분에 대해 구현했다. 다음은 현재까지 어떻게 진행했는지 소개하려 한다. 

 

진행 상황

css를 위한 노력을 위해...ㅋㅋ 나름 위치를 조정하려 애쓴 흔적이 보인다. 그룹을 지정해서 위치와 비율을 맞추었다. 그리고 bpm, 마디 수를 선택할 때 직접입력을 할 때만 블록이 풀리고 하얗게 변함을 조금 더 확실하게 보기 위해서 그룹을 어둡게 해놓았다. 

key, extends, tensions를 조합하여 아래 chord에 입력할 수 있다. 

 

버튼을 클릭하여 하나의 코드씩 만들 수 있고, 등록을 클릭하면 아래 preview에서 확인할 수 있다. preview에는 만든 코드들을 누적할 수 있고, 누적한 preview의 코드를 아래 생성하기 버튼을 클릭하면 서버로 bpm, 마디수, 코드들을 보낸다. 

 

여기까지가 현재의 진행상황이다. 내용만 보면 .. 그렇게 오래걸릴 것이 아닌데, 코드를 조합할 때 모든 조합이 다 가능한 것이 아니다. key에서는 하나만 선택할 수 있고, b과 #중에 하나만 선택할 수 있고... 등 조건이 있고 온오프와 특정 조건을 성립하게 하는데 시간을 꽤 쏟아서 이정도 하는데 2일은 쏟은 것 같다.. 

하면서도 여기에 시간쏟을게 아닌데.. 라는 생각이 계속 들면서도 나름의 양분이 되고 어느정도의 완성도를 보이기 위해 실제 사용되는 코드를 불편함 없이 만들 수 있도록 로직을 구성하여 뿌듯하긴 하다. 물론 아직 100% 완벽하지는 않아서 기능구현 이후 추가로 보수가 필요한 부분들은 있어서 따로 메모해두었다. 

현재까지는 입력값과 그에 대한 에러처리만 백엔드와 통신하고 있고, 에러처리에 대해서는 vue의 라이브러리를 이용하여 토스트메세지로 성공, 에러메세지를 구분하여 보내주고 있다. 

 

 

이제 실질적으로 이 프로젝트의 메인이라고 볼 수 있는 .. 백킹트랙을 만드는 과정에 대해 공부하고, 구현한 뒤 포스팅해보려 한다. 

 

코멘트

구현하면서 알고리즘, 코테 문제풀이에 더 열심을 다해야겠다는 생각이 크게 들었다.