[HoC] 일곱 번째 워크샵 - 해커톤

Hacker on Campus

• 일시: 7주차 [2019.12.03.화]
• 장소: 성신여대
• 인원: 5명

0. 인트로 및 팀 구성

12월 3일, 일곱 번째 워크샵에서는 HoC의 마지막을 장식할 해커톤을 진행하였다.
팀원들이 모두 모이자 7주차와 8주차에 걸쳐 진행할 해커톤에 대해 간단히 소개하는 시간을 가졌다.

인트로 및 팀 구성은 다음과 같이 진행되었다.

• 팀 구성 후 팀장 정하기
  먼저 팀을 두 조로 나눈 뒤, 각 팀끼리 모여 팀장을 정했다. 나는 1학년 일문과 학생과 함께 두 명이서 팀이 되었고 다른 팀은 컴공과 2명, 통계학과 1명 이렇게 총 세 명이서 팀을 이루었다.
  우리 조에서는 내가 팀장을 맡았고 다른 조에서는 컴공과 2학년 학생이 팀장을 맡았다.

• 구현할 기능 정하기

  1. Calendar + Todo List
  2. Twittler

처음에 우리 팀에서 나는 캘린더를 생각했었고 일문과 학생은 Momentum에 다른 기능을 더 추가해서 만들기를 원했는데, 결국 서로 구현하고자 하는 기능을 합쳐서 데일리 캘린더와 Todo List를 함께 만들기로 하였다.
다른 팀에서는 트위틀러를 만들되, 회원가입을 할 수 있는 기능도 추가해서 구현하기로 했다👍

• VSCode Live Share 설치
  팀별로 어떤 기능을 구현할지 정한 후에는 페어프로그래밍을 위해 VSCode Live Share를 설치할 것을 말씀드렸다. 그런데 여기서 문제가 발생했다...!
  VSCode Live Share를 설치한 뒤 각 팀원의 컴퓨터를 서로 연결시키기 위해서는 깃헙에 로그인하는 과정이 필요하다. 그런데 다들 깃헙 아이디가 없어서 회원가입을 급히 하고, 또 중간 중간 Live Share에 연결이 되지 않아서 그걸 해결하다 보니까 프로그램을 설치하는 데만 30분은 넘게 걸렸다. 그나마 우리 팀은 문제가 금방 해결되어서 진도를 나가고 있는데 다른 팀은 연결이 잘 되지 않아 그 부분을 해결하느라 애를 많이 먹었다. 그래도 시간이 지나자 문제였던 부분이 잘 해결돼서 원만하게 페어프로그래밍을 진행할 수 있었다!
  생각지도 못한 일 때문에 시간이 많이 지체돼서 워크샵 시간 동안 해커톤을 온전히 진행하지 못한 점이 많이 아쉬웠다. 하지만, 오늘의 실수를 통해 예상 밖의 일이 발생했을 때 당황하지 않고 상황을 침착하게 헤쳐나가는 것도 한 그룹을 이끌어나가는 리더에게 매우 중요한 역량이라는 것을 깨달을 수 있었다. 앞으로는 이런 일이 일어나지 않도록 하는 게 가장 좋겠지만, 혹시라도 다음에 오늘과 비슷한 상황이 생긴다면 그 때는 미리 만반의 준비를 해와서 오늘보다 훨씬 침착하게 행동하는 모습을 보여주고 싶다😌

• Todo List 나누어주기
  페어프로그래밍 도구를 설치한 후에는 오늘 해야할 일이 적힌 Todo List를 나눠드렸다.
  오늘은 html과 css까지만 구현을 하고 다음 주에는 자바스크립트 코드를 작성할 것을 안내해 드리면서, 각각의 todo가 완료될 경우 종이에 체크하면 된다고 말씀드렸다.

1. 프로토타이핑

• 프로토타이핑에 관한 영상 시청
  해커톤을 위한 간단한 준비를 마친 후, 팀원들에게 프로토타이핑의 중요성을 설명하기 위해 다음 영상을 함께 시청했다.
  https://youtu.be/JMjozqJS44M?t=228
  (위 영상은 코딩을 시작하기 전, 종이와 펜 등 원하는 도구를 이용해 본인이 구현할 기능을 프로토타이핑하는 방법에 대해 설명하는 내용이다.)

• 구현할 기능에 대한 프로토타이핑하기
  영상을 시청하고 난 후 우리도 각자 구현하기로 한 기능을 프로토타이핑하여 서로에게 소개하는 시간을 가졌다.

2. 역할 분담

• 팀 내에서 각자 어떤 부분을 맡을지 역할 나누기
  이번 주는 html과 css만 구현하기로 계획했기 때문에 부담이 훨씬 덜했다. 따라서 모든 팀원들에게 오늘은 html과 css를 완성시키는 것을 목표로 할테니 너무 급하게 시작하지 않아도 된다고 말씀드린 후, 프로토타이핑한 것을 보며 팀 내에서 누가 어떤 부분을 맡을지 정하면 된다고 안내해드렸다.

3. 코딩 시작👨‍💻

• 구조는 다 같이 짜되, 맡은 역할에 따라 각자 코딩하기
  - html 코드 작성
  우리 팀은 프로토타이핑한 것을 토대로 html에 어떤 태그들을 써넣어어야 할지 상의하는 시간을 가졌다. 우리 팀이 구현하기로 한 기능은 크게 복잡한 기능이 아니었기 때문에 html 코드를 작성하는 데에는 시간이 많이 걸리지 않았다.

  - css 코드 작성
  하지만 css 코드를 작성할 때는 확실히 신경써야할 부분이 많았다. 
  	1. 두 개의 박스 중앙정렬로 나란히 놓기
      **html**
      ```html

  box1

  box2
  ``` **css** ```css .boxes { text-align: center; } .box { border: 1px solid black; width: 40%; height: 100px; text-align: center; display: inline-block; } ``` 두 개의 박스를 감싸준 div.boxes에는 text-align: center를 해주고, div.box에는 display: inline-block을 해줘서 두 개의 박스를 중앙정렬로 나란히 놓을 수 있었다. 2. 왼쪽 박스 안의 텍스트를 가로 세로 모두 중앙정렬 시키기 **html** ```html
  box1

  box2
  ``` **css** ```css .boxes { text-align: center; } .box { border: 1px solid black; width: 40%; height: 100px; line-heigth: 100px; /* height값과 동일한 line-height값을 적용한다*/ text-align: center; display: inline-block; } ``` - 가로 중앙 정렬: text-align: center - 세로 중앙 정렬: height값과 똑같은 line-height값 적용

4. 마무리

오늘은 팀원들과 함께 해커톤을 진행해보았다.
사실 해커톤이라는 말을 처음 들었을 땐 코딩의 고수🔥들이 모여 엄청난 기능을 만들어내는 시간이라는 생각이 들어 시작하기가 두려웠었다. 하지만, 역시 막상 해보고 나니 지금까지 배웠던 내용들을 적용해 우리가 구현할 수 있는 서비스를 만들어내는 즐거운 시간이라는 걸 깨달을 수 있었다.
벌써 다음 주차가 마지막 워크샵인데 우리 팀원 모두 각자 원하는 기능을 구현해서 뿌듯한 마음으로 스터디를 마무리할 수 있었으면 좋겠다. 마지막까지 파이팅!