목차
프로젝트 주제 선정
중간 프로젝트는 Vanilla로 진행했다. HTML, CSS, 순수한 JavaScript만 사용해야 했다. 라이브러리 사용은 최소화하고 최대한 JavaScript만 사용해서 구현해야 했다. 처음에는 기존 eBook 리더기의 기능을 향상시키는 방향으로 진행해 보려고 했는데, 우리들의 실력이 따라가기 어려울 것 같았다. 문서를 렌더링할 때 라이브러리를 사용해야 했고, 특히 문서 위에 밑줄을 그리거나 하이라이트를 한 후, 해당 내용의 위치를 기억하게 하는 것이 생각보다 어려운 기술을 요했다.
이후 빠르게 주제를 바꿔 보기로 했다. 거의 하루를 쏟아서 주제를 발전하다가 필요한 기술이 우리의 실력을 월등히 넘어서는 것 같아서 빠른 포기가 필요하다고 판단했다. 새로 나온 주제는 악보를 띄우고, 피아노를 칠 수 있도록 해보는 거였다. 몸이 불편하더라도 피아노를 칠 수 있도록 개발해 보기로 했다. 그리고 처음 피아노를 배우는 사람들을 위해 학습 모드와 게임 모드도 추가해 보기로 했다.
프로젝트 이름은 Pianiverse라고 지었다. 키보드와 음성 안내를 기반으로 저시력자, 시각장애인, 청각장애인, 피아노 입문자 등 누구나 함께 즐길 수 있는 피아노 학습 웹 애플리케이션을 개발하기로 결정했다. 필요한 기능들을 컴포넌트 단위로 분리해서 각 팀원들이 하나씩 구현해 나갔다. 나는 모든 페이지의 디자인을 담당했고, '시각 중심', '청각 중심', '함께 배우기'의 모드를 선택할 수 있는 모달 창을 구현하고, 선택한 모드를 localStorage에 저장하는 기능을 구현했다. 그리고 악보를 선택하고 띄울 수 있는 컴포넌트를 구현했다.
프로젝트를 통해 배운 것
input type="file" 요소 사용
input 요소의 type="file" 속성을 사용하면 사용자가 파일을 업로드할 수 있다. 이때 input 요소의 버튼을 스타일링하려면 label 요소를 추가한 후, label 요소를 스타일링하고 input 요소를 숨겨야 한다. input 요소의 기본 스타일에 뜨는 문구를 수정할 수 없기 때문이다. 포커스링도 label 요소에 추가해야 한다.
input type="file" 요소로 업로드할 파일의 확장자를 제한하려면 accept 속성을 사용할 수 있다.
<label aria-label="악보 추가" for="card-add">
<!-- ... -->
</label>
<input type="file" name="card-add" id="card-add" accept="image/*, .pdf"/>
2줄 이상의 텍스트에 말줄임표 넣기
1줄 텍스트에 말줄임표를 넣을 때는 다음과 같은 css 속성을 사용할 수 있다.
text-overflow: ellipsis;
하지만 2줄이 넘는 텍스트 맨 끝에만 말줄임표를 넣으려면 위 속성만으로는 안 된다. 위 속성을 사용하면 모든 줄에 말줄임표가 들어가기 때문이다. 그래서 다음과 같은 속성을 줘야 한다.
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;마지막 -webkit-line-clamp: 3; 속성에서 '3'은 표현할 줄 수다. 2줄로 제한하려면 속성 값으로 '2'를 할당하면 된다. 그리고 긴 영어 단어를 자르려면 overflow-wrap: break-word; 속성도 필요하다.
여러 html 파일에서 컴포넌트 불러오기
우리 팀은 컴포넌트 단위로 개발하기로 해서 html 파일에 html, head, body 요소 없이 컴포넌트만 들어있도록 했다. 그리고 메인 html 페이지에 컴포넌트 파일에서 내용을 불러와서 html 내부에 랜더링하도록 했다. 이때 처음에는 innerHTML을 사용했다. 그랬더니 기존 내용을 지우고 새로운 내용으로 완전히 대체해 버려서 다른 방법을 찾아야 했다.
fetch API를 사용하니 컴포넌트 파일에서 내용을 불러오면서 js 파일에서 export한 함수를 불러와 실행할 수 있었다. fetch API를 사용하면 순차적으로 실행할 수 있어서, 내용이 랜더링되기 전에 querySelector로 요소를 찾지 못하는 일도 발생하지 않았다.
프로젝트에서 아쉬운 것
프로젝트를 진행하면서 가장 아쉬웠던 것은 아무래도 피아노 소리를 들어보지 못한 것이다. 피아노 건반 마크업과 스타일링이 생각보다 오래 걸렸고, 소리를 내는 기능이 생각보다 복잡했기 때문이다. 심지어 이 모든 것을 한 사람이 담당해서 해내야 했던 것이 기간 안에 피아노 건반 구현을 해내지 못한 이유였다. AI의 도움을 받으면 순식간에 해낼 수도 있었겠지만, 최대한 AI의 도움은 받지 않고 구현하기로 했던 만큼 한 사람이 감당하기에는 어려웠던 것이다.
그래도 발표 이후에는 건반 소리를 들을 수 있었다! 소리를 낼 수 있게 하는 기능은 발표 전에 구현이 됐었는데, 메인 페이지에 컴포넌트를 연결하는 과정에서 어려움이 있어서 발표 때는 시연하지 못했지만, 우리들의 소소한 기쁨으로 남았다.
프로젝트 GitHub
2주라는 짧다면 짧고, 길다면 긴 시간이 지났다. 처음 시작할 때만 하더라도 이걸 2주 안에 해낼 수 있을까 싶었는데, 역시 프로젝트를 진행할수록 하나씩 나중으로 미루는 기능이 생겼다. 하지만 이만큼 해낸 것만 해도 정말 뿌듯하고, 정말 많이 배운 시간이었다. 수업을 들으면서 이해했다고 생각했지만, 사실 제대로 이해하지 못하고 있던 것들이 너무 많았다. 여러 방법을 시도해 보고, 시행착오고 겪어보면서 많이 배우고 많이 성장했다. 조원들도 너무 잘 만나서 프로젝트 기간은 끝나더라도, 남은 기능들을 끝까지 함께 구현해 보고 싶다!
우리가 만든 프로젝트의 GitHub 저장소는 아래 링크를 통해 방문할 수 있다.
GitHub - FRONTENDBOOTCAMP-14th/js-project-team-9: 바닐라 프로젝트 9조
바닐라 프로젝트 9조. Contribute to FRONTENDBOOTCAMP-14th/js-project-team-9 development by creating an account on GitHub.
github.com
