190524_TIL(Hackathon)

5월 24일 (금)

패스트캠퍼스에서 주관하는 Hackathon 행사에 참여하였다. 이번 Hackathon 행사는 약 7시간에 걸쳐서 진행되는 아주 짧은 행사였다.(팀원 선정과 주제 선정은 사전에 진행하였다.)

이 행사에 주최 목적은 실제로 어떤 제대로 된 결과물을 내기보다는 다른 사람과 팀을 이루어 같이 어떤 프로그램을 만들어보는데 의의가 있다고 생각한다.

팀원은 나를 포함하여 2인으로 구성되었다. 팀이 구성된 후 주제를 선정하기 위해 팀원과 여러 가지 의견을 나누었다. 처음에는 간단한 게임위주의 주제가 나왔다. 캐치마인드, 벽돌깨기, 포켓몬 그림그리기 등의 의견이 나왔지만 결국에는 수업에 배운 내용을 복습하고 예습하기 좋은 주제를 선정하자는데 의견이 모아져서 “씀” 이라는 어플을 모티브로하여 사용자에게 랜덤한 주제의 글감을 제공하고 사용자가 작성한 글을 입력 받아 저장하는 프로그램을 만들기로 하였다.

주제가 선정된 이후에는 카카오오븐을 활용하여 우리의 구체적인 생각과 디자인 요소를 그려넣어 보았다. 그 이후에는 이미지, 아이콘, 폰트 등의 Resource를 찾아보고 의견을 나누어 선정하였다. 그 이후에는 파트를 나누었는데 팀원이 HTML5와 CSS3를 이용하여 레이아웃 및 디자인 작업을 하고 나는 그동안 따로 Javascript 작업을 진행하다가 팀원의 레이아웃 작업이 끝나면 같이 기능구현의 초점을 맞추기로 하였다.

프로젝트는 HTML5, CSS3, Vanila JavaScript로만 진행을 하였고 다른 툴이나 프레임워크는 사용하지 않았다. git fork을 활용하여 협업을 진행하였고 visual studio code로 작업을 진행하였다.

랜덤한 글감을 제공하기 위해 Math.floor(), Math.random() 메소드를 사용하였고, 랜덤으로 제공된 글감과 사용자가 입력한 글을 객체 형태로 변환하고 사용자가 저장 버튼을 누를 때마다 객체를 배열에 push하였다. 그리고 이 객체가 저장된 배열을 JSON.stringify() 메소드를 이용하여 JSON 문자열 형태로 변환하고 localStorage.setItem() 메소드를 이용하여 localstorage에 저장하였다. 저장된 정보를 불러들 일 때는 localStorage.getItem() 메소드를 이용하였고 JSON.parse()를 이용하여 다시 객체 형태로 변환하였다. 여기까지는 크게 막힘없이 잘 진행이 되었으나 문제는 localStorage에 저장한 정보(랜덤 글감과 사용자가 작성한 글)를 다른 페이지에 액자 형태로 전달하는 것이었다. 해본적이 없는 작업이었기 때문에 앞이 캄캄하고 난감한 기분이 들었다.

우선, 이 문제를 해결하기 위해서 localstorage에 저장한 정보가 다른 페이지에서도 살아있는지 확인하는 작업이 필요했었다. 다행히 다른 페이지로 이동하여도 localstorage 저장한 정보가 살아있었다. 두 번째로는 save 하고 load 할 때 이 전과는 다른 작업이 필요하다는 점을 깨달았다. 여러 방법이 있겠지만 가장 간단하게 든 생각은 다른 js파일을 만들어서 save와 load 할 때 이 전과는 다른 작업을 설정해주는 것이었다. 다행히 이 방법을 통해 기능구현은 가능하였다. 하지만 우리 팀의 MVP(Minimum Viable Product)는 액자 형태로 저장한 이미지를 클릭하였을 때 다시 사용자가 작성한 페이지로 이동하는 것이었는데 시간 관계상 구현하지 못하였다… 그래도 우리 팀원이 영상 능력자(?)여서 내가 발표를 진행할 때 많은 도움이 되었다.

짧은 시간 안에 결과물을 내야하는 압박감 때문에 긴장되는 하루였고 결과물도 아쉬움이 많이 남았지만 분명 매력적인 경험이었다. 다음에 기회가 된다면 다시 한번 참여 해보고싶다.