🤸‍♀️[SOPT 27th] 솝커톤 후기

이 글은 이 순서로 썼어요.

1. 솝커톤 소개
2. FISHING 소개
3. 서버 설계
4. 개발 과정과 결과물
5. 느낀 점🥰

---

2020.11.21 (토) ~ 2020.11.22 (일)

저번 주말 27기 솝커톤이 있었다! 서버 YB인 나는 시작하기 전부터 다른 파트원들과의 협업을 해 볼 수 있다는 기대감이 컸었다!

---

⚡ Theme & Ideation

이번 솝커톤의 주제는 바로 '중독'이었다.

우리는 주제를 보고 떠오르는 아이디어들을 Notion에 다같이 적으면서 아이디어 회의를 진행했다.

우리는 여러가지 주제들을 떠올리며 말했었는데, 중독을 바라보는 관점도 사람마다 매우 달라서 흥미로웠다. 보통 중독이라고 하면 알코올, 담배 중독과 같은 유해한 것에 대한 중독을 쉽게 생각하게된다. 하지만 얘기를 깊게 해볼 수록 중독이라고 하는 것은 긍정적인 것들에 대해서도 많이 나타날 수 있다.

그래서 우리는 중독이 되고 싶은 것에 대해서도 한 번 생각해보기로 했다.

• 공부 중독
• 운동 중독
• 일 중독 (워커홀릭)

등이 있을 수 있는데, 우리는 이 중에서도 일 중독에 대해 좀 더 깊은 이야기를 나눌 수 있었다.

솝트는 열정을 보고 뽑는 동아리인 만큼, 원래부터 열정이 넘치고 열심히 사는 사람들이 많다. 이 이야기를 하는 우리 조원들만 보더라도 저 사람들은 대체 언제 쉴까 궁금해졌었다. 일 중독은 걸리고 싶을 만큼 생산적이고 멋진 것 같다. 하지만 우리는 관점을 달리해서 일 중독을 타파하는, 너무 열심히 사는 것만을 목표로 하는 솝트인들에 잠깐의 휴식을 주고 싶다는 멋진 생각을 하게 되었다. 그리고 이것은 우리의 서비스 FISHING의 탄생으로 이어졌다.

---

🐟 FISHING

팀원들이 장난스레 제안한 이 낚시질은 생각보다 괜찮았다.

For Ideal Sopt Hitchhiking - FISHING

• 일 중독 SOPT인들을 위한 reference/article 저장소

로 사람들을 속이고, 그 뒤에 사람들을 낚고 힐링할 수 있는 방법을 생각해봤다. 계속해서 사용할 서비스라기보다는 일회성의 이벤트 형식이긴 했지만 솝커톤용으로는 괜찮은 귀여운 아이디어라고 생각했다!

사용자 인터페이스 초안은 이랬었다.

---

1. 이름과 파트를 입력한다.
2. 파트별로 나뉘어있는 아티클 페이지에 접속한다. (가짜)
3. 시간이 흐르다가 시간 멈춤이라는 버튼을 누르면 시간이 멈추고 랜덤 힐링 사진이 나온다.
4. 원하는 경우 자신의 휴식 방법을 사진과 함께 공유할 수 있다.
5. 이 전의 사용자들이 남겨둔 휴식방법/휴식모습을찍은사진을 보고 공감을 누를 수 있다.

---

주제 선정 후 기획 피드백에서 운영진분들께서 아이디어가 좋고, 잘 살리면 대박이 날 것같다는 말씀을 해주셔서 우리 팀은 좋은 기운을 가지고 시작할 수 있었다!

---

🧾 Design

우선 Fishing을 설계하기 위해서 지난 몇 주동안 배웠던 데이터베이스 설계를 써먹어 볼 수 있었다. 일단 우리는 세미나만 따라하기 급급한 왕초보 섭린이였기 때문에 실제로 RDS를 사용할 때 새로운 인스턴스를 생성해야하나, 아니면 새로운 데이터베이스를 생성해야하나 고민했다. 안 그래도 바쁜 파트장님한테 카톡으로 엄청 질문해서 괴롭히기도 했다. 근데 결론은, 걍 같은 데이터베이스에 새로운 스키마만 추가하면 되는 거였다 ㅋㅋ

우선 우리는 처음에 User와 Post 테이블만 생각을 하고 있었는데 기디 분들이 로그인기능을 만드는게 별로라고 해서 유저 일회용으로 생각하고 Post 정보에 필요한 랜덤 닉네임과 파트를 연결하기 위해서 굳이 유저 테이블을 만들었다. 좋아요(공감) 기능을 추가하기로 해서 Like 테이블도 생기게 되었다.

초반에 유저의 세션을 유지할까 말까 고민했었는데 로그인 기능도 없는데 딱히 필요가 있을까라는 생각에 토큰을 발급하지 않았다. 이건 좀 실수였던게, like도 누른 직후에만 취소할 수 있는 이상한 방식이 돼버리고 말았다.

우리 서버파트들은 둘 다 YB여서 아예 띄우지도 못할까봐 부담이 커서 어떻게는 설계부터 간단하게 가려고 했던 것 같다. 시간이 절대 적은 게 아니라는 걸 알았더라면 유저모델도 만들 수 있었을 것 같기도 하다.

1차 제출물은 다음과 같았다.

• ERD
• API 명세서

이 두 가지만 제출하면 됐었는데, ERD는 mySQL 워크벤치에서 만들어 주는 거라 테이블과 관계만 설정해주면 되고, API도 우리가 세미나 때 배웠던 것들을 활용하면 금방이어서 부담이 적었다. 이 때가 오후 11시 12시? 였던 것 같은데 1차 제출이 5시라고 알고있었어서, 여유있다고 생각했다.

---

💻 Development

서버를 같이 하는 우영 오빠가 기존에 사용하던 RDS 인스턴스에 우리 프로젝트 DB를 연결하고 라우팅, Models, Sequelize 설정을 완료했다. 기존에 세미나에서 작성했던 것들을 거의 비슷하게 가져와서 정말 시간이 얼마 안 걸렸다. 그리고 api도 금방금방 만들고 걱정이 하나도 없었다. postman으로 요청을 보냈을 때 응답도 제대로 왔다.

내가 만든 api는 User 생성, 이미지 랜덤 선택 요거 두 개이다.

여유롭게 놀던 와중에 (새벽 2시 40분이었다.) 갑자기 오빠가 3시까지 1차 제출을 해야한다면서 다급해하는 거다. 그래서 나도 덩달아 놀라서 부랴부랴 파트장님이 올려준 포맷에 맞춰 마크다운을 썼다. 우리는 딱 3시에 제출을 했는데 다행히도 제출된 팀에 속해있었다😂 이건 나중에 안 건데 이 때 우리가 파트장님이 써놓은 리드미를 따라 써서 제출한 게 1차 제출물이 아니라 최종 제출물이었던 것이다. 결론적으로 우리는 8시에 제출하면 되는 최종 제출물을 3시에 제출한거다. 이 때부터 할 일이 없어졌다고 생각해서 진짜 심심했다.

우리는 서버를 일찍 마무리했기 때문에 오빠는 웹파트 분들을 도와드리고 있었고 나는 옆에서 오빠가 하는 걸 구경하고 있었다. 리덕스라는 걸 쓰는 것 같았는데 나는 아는 것도 없었고, 합동세미나를 아직 진행하지 않아서 프론트랑 백이랑 어떻게 맞물려 돌아가는지 궁금했었다. 그래서 물어보니 ajax를 사용하면 우리가 보내주는 응답을 프론트에서 받을 수 있다고 했다. 이거는 합동세미나하면서 더 자세히 공부해보고싶다!

아무튼 나는 그동안 역할 분담을 하지 않고 프로젝트를 할 때 프론트를 정적파일로 대충 떼워서 서버에서 직접 랜더링해서 보여줬었던 게 생각이 났다. 정적파일들만 가지고 프론트를 하는 게 일반적이지 않다는 것과 보통은 어떻게 하는 건지 이론만 알고 있었는데, 직접 웹파트 분들이 연결하는 걸 옆에서 보니까 설명을 듣지 않아도 원리를 이해하는 데 오래 걸리지 않았다. 빨리 합동세미나두 하고, 앱잼도 하고 싶어졌다 서버파트원들끼리만 있는 것과는 또 다른 재미가 있었다.

---

실수

우리가 만났던 오류 중 기억에 남는 것들이 있다. 하나는 되게 간단하고 어이 없는 건데 사람들이 많이 하는 실수인 것 같은 sequelize synchronization 옵션이다. 이 옵션을 false로 두고 모델 구조를 바꾸면 자동으로 업데이트가 되지 않기 때문에 모델에 대한 것을 바꾸고나서는 true로 꼭 바꿔줘야 한다.

// app.js
const { sequelize } = require("./models");

sequelize
  .sync({ force: false })
  .then(() => {
    console.log("데이터베이스 연결 성공!");
  })
  .catch((error) => {
    console.error(error);
  });

우리가 이미지 url을 저장하는 컬럼의 자료형을 STRING(100)으로 설정해놔서 url이 잘려서 저장되는 불상사가 일어났었는데, 우리가 아무리 글자수를 늘려도 동기화 옵션을 false로 해놓아서 실제 데이터베이스에는 url의 길이가 100인 것이었다. 사소한 실수였는데 다급해서 엄청 당황했던 기억이 난다.

---

우리의 최종제출물은 발표자료와 시연동영상이었는데, 마지막에 갑자기 서버에서 포스트를 추가하는 요청을 제대로 받지 못해 500 에러가 계속났다. 에러야, 제대로 아는 거 하나 없는 나에게는 익숙하고 별로 대수롭지 않은데도 이 때 너무 당황했던 이유는 postman에서는 에러가 전혀 나지 않았기 때문이었다. 프론트의 postSharePage에서 multipart/form data 오류가 났다.

어떤 에러인지 정확히 보려고 로컬에서 서버를 돌렸는데 요청은 잘 도착하는데 500에러가 나서 뭔가 싶었다. 나중에 오빠가 이마 탁 치면서 설마하고 코드를 수정했는데 바로 잘 돌아갔다. 사실 처음에 우리가 코드를 작성할 때 고치기 귀찮다고 넘어간 부분이 있었는데

// server: postRouter.js
const postsRouter = express.Router();
postsRouter.post("/", upload.single("postImageUrl"), postController.createPost); //!

우리는 multer로 단일 이미지를 s3에 업로드하는 함수를 upload로 정의 했는데, 이미지 자체를 가리키는 키의 이름을postImageUrl로 설정해버렸던 것이다. 초반에 postRoute 코드 읽고 이 부분을 발견했을 때 귀찮으니까 그냥 두지 뭐 하면서 대수롭지 않게 넘어갔었는데

// front: PostSharePage.js
const handleSubmitButton = async () => {
   let fileData = new FormData();
   try {
     console.log(contentsInput.value);
     fileData.append("image", image); //!
     fileData.append("contents", contentsInput.value);
     fileData.append("nickname", "first");
     ...
   }
   ...
}

위와 같이 프론트에서 image라는 키로 폼데이터를 전송했기 때문에 서버에서 인식하지 못했던 것이다. 그래서 저 부분을 image -> postImageUrl로 바꿔주니까 바로 돌아갔다. 처음에 저거 하나 고쳤으면 에러 잡을 시간에 더 많은 걸 할 수 있었을거란 생각에 아쉬움이 남았다.

아무튼 이 후에는 거의 마무리가 되어서 웹파트 분들이 열일해서 퀄리티 높이다가 발표시간이 왔었던 것같다.

---

✨ FISHING - Demo

처음에는 아티클/레퍼런스 모음집같은 느낌! 닉네임과 파트를 설정하고 들어간다.

위의 파트 별 섹션을 클릭하면 현재 시간을 보여주고 멈추면 비로소 보이는 것들을 클릭하면 쉬라는 문구가 나온다 (ㅋㅋㅋ)

그리고 자신의 휴식 방법을 업로드하고, 다른 사람들이 업로드한 포스트들을 볼 수 있다!

---

느낀 점

1. 복습 더 미루면 큰일나겠다 - 세미나는 나에게 아무것도 주지 않는다. 가만히 듣고 따라만 하는 사람은 발전이 없다. 기본적인 코드도 손에 익지 않았다니. 솝커톤 내내 반성했다. 솝커톤에서는 그나마 구현하기 쉬운 api를 썼으니 다행이었지 나중가서 어려움을 겪을 것 같았다. 세미나 복습해야지! 😁

2. 조급해하지 말아야지 - 못하면 가만히라도 있었어야 했는데, 혼자 흥분해서 모니터 때리고 음료수 쏟고. 창피했다. 아니 사실 가만히 있기보단 잘하려고 더 몰입하고 적극적으로 참여해야하는 게 맞긴 한데 이번엔 의욕만 너무 앞서서 흥분한 게 후회된다. 공부해서 여유롭고 차분한 사람이 되자

3. 다른 사람이랑 일하는 거 쉽지 않구나 - 그래도 나름 서버에 대한 지식은 많아졌다고 생각했는데 다른 파트원들과 대화할 때 내가 모르는 것들이 너무 많았다. 당일에 처음 보는 사람들과 막힘없이 대화할 수 있는 언니 오빠들이 너무 멋졌다. 다른 사람들과 잘 소통하기 위해서는 또 다른 노력이 필요하겠다는게 와닿았다.

4. 얼른 앱잼 하고싶다! - 이번에 반성 좀 했으니 만회할 기회가 앱잼이라고 생각한다. 1박2일 해커톤에서도 이렇게 많은 것들을 돌아보고 얻은게 많은데 앱잼은 또 얼마나 재밌을까 기대가 된다😆