2020-하반기 회고 : 교내 동아리 해커톤을 마치고나서

생애 첫 프로젝트!

• 필자는 그동안 프로젝트 경험이 없었다. 그래서 항상 포트폴리오로 기능할 수 있는, 그리고 협업 경험을 쌓을 수 있는 프로젝트에 대한 갈망이 있었다.
• 그래서 2019년 하반기, 교내 프로그래밍 동아리에 들어가게 되었고, 꽤 좋은 사람들과 긴 시간 협업하면서 만들어낸 프로젝트 1개와, 1.16일 당일에 진행한 해커톤 프로젝트 1개 2가지를 만들어내게 되었다.

React Native - Filter & Sticker Camera

• Project repo : https://github.com/DonghyunKim98/hareubang-client

Preview

• 안드로이드 개발자, 서버 개발자와 하나의 프로젝트도 제대로 만들어본적 없는 사람의 프로젝트.
• 그래서 서로 안써본 기술을 이용해보자! 로 시작했고, Client로는 React-Native Server로는 Nest.js 가 채택되었다.
• 어떤 어플을 만들까 생각을 하다가, 스노우 어플을 클론해보는 게 좋다는 생각이 들었고 당초 계획은 필터,스티커,콜라쥬 3가지를 만드는 나름 규모있는 프로젝트였다.

Stack

• React Native
• TypeScript
• Hook

• 전부 내가 처음 써보는 것들이었고, 개념부터 다시 차근차근 잡느라 꽤 시간이 걸렸지만, 프론트앤드 개발자라면 (특히 JS개발자이자 React 개발자라면) 피해갈 수 없는 기술들이기 때문에 꼼꼼히 개념들을 정리해가면서 배웠다.

Description

• 최종적으로는 서버를 붙이지 않고 클라이언트만을 이용하였다.
• 기능도 필터 ,스티커만을 구현했다.
• 최초 화면
  
• 필터를 입히는 화면
  
• 스티커를 입히는 화면
  
• 정상적으로 필터와 스티커를 입힌 화면 모두 저장까지 완료된다.

What I learn? & What I felt?

What I learn!
git flow
: 브랜치별 작업을 어떻게 할것인지.
github을 이용한 협업 경험
: issue 와 branch protection rules 를 이용하는 방법
Slack과 Notion을 활용한 커뮤니케이션 툴의 적극적 활용
: Github를 slack에 연결함으로써 작업이 어떻게 되가고 있는지 확인 가능하고, Notion를 통해 정보를 공유할 수 있다는 점
좋은 JS코드 작성법
: module화가 무엇인지, eslint와 pretteir를 왜 사용하고 어떻게 사용하는지
npm을 이용한 library 활용방법
: 일단 github에서 찾아보면 나보다 뛰어난 사람들이 작성해놓은 코드가 있다. 그중에서도 start가 높은 것으로 import를 하면 된다는 것을.

What I Felt!

• 당초 계획과는 상당히 축소되어서 진행되었다.
• 솔직하게 가장 어려운 것은 역시 '사람'이다. 같이 플젝을 진행하고자 했던 2명이 개인사정이 생겨서 결국 혼자 진행하게 되었기 때문.
• 가장 실력도 경험도 떨어졌기때문에, 유의미한 시간을 투자했지만, 위의 정도가 최선이었다.
• 그래도 내 첫 프로젝트라는 것에 매우 의의가 있었고, 꽤 애착이 가게 됐다.

Svelte - Travel-info

• Project repo : https://github.com/Neulhan/travel-info
• Deployed site : https://travel-info.life/

Preview

• 하반기에 동아리에서 진행한 Svelte 스터디의 최종 해커톤을 진행했다.
• 이번 해커톤의 주제는 '여행'이었다. 이에 맞춰 브레인스토밍을 팀원들과 하게됐고, 내 아이디어가 채택이 되었다
• 요지는 "몇개의 여행장소를 정하고 그 여행장소를 클릭했을때, 카테고리별 상위 검색어 N가지를 보여주자" 였다.
• 그 다음 역할 분담을 진행했다
  • 도시를 어떻게 보여줘서 어떻게 선택시킬지를 해결
  • 어떤 여행지 관련 데이터를 어떻게 가져와서 정리할지를 해결
  • 모인 여행지 관련 데이터를 어떻게 보여줄 지를 해결 => 내가 맡은 부분이 되었다.

Stack

• Svelte : Client
  • Sass for CSS Preprocessor
• Go : Crawling Data

Description

• 여행지를 고르는 화면 : 축소 & 확대 지원
  
• 여행지내에서 카테고리를 선택하는 화면 : 전체적인 애니메이션 효과 + 카드별 효과
  
• 베포까지 완료. (직접 한번 들어가서 구경하는 것을 추천드립니다.)

What I learn? & What I felt?

What I learn?

• Svelte!!
  : 정말 훌륭한 웹 프레임워크. 라이브러리가 부족해서 그렇지, 채택하는 기업이 많아져서, 하루 빨리 보급화가 됐으면 좋겠다. React보다 쉽고, 편리하고, 직관적이다.
• Sass
  : CSS는 못생겼고, 중복되고, 짜증난다. 시중에 다양한 전처리기들이 존재하긴 하고, 그 중 Sass는 CSS의 문제점들을 충분히 해결함을 이번 해커톤을 통해 확실히 배웠다.

What I felt?

• 일단 찾아보자
  : 어플리케이션 프로젝트와 비슷한 맥락인데, 세상에는 다양한 능력자분들이 이미 만들어놓은 훌륭한 것들이 많다. 이 프로젝트에서 나는 버튼 디자인과 카드 디자인을 가지고 왔고, 단지 내가 원하는 색상으로 변경한 것외에는 없다
• 이게 되네?
  : 개발할때 제일 짜릿한 순간이다. 생각한데로 잘 분업이 이루어져서 조각난 퍼즐을 맞췄을때 하나의 완성품이 탄생했다.
• 헷갈리는 개념
  : 필자는 최근에 React를 굉장히 많이 했다. Svelte 스터디가 11월말정도에 끝났고, 너무 오랜시간 복습을 안해서 그런것도 있지만, 헷갈리는 부분들이 꽤 존재했다. (특히 배열 컴포넌트를 어떻게 처리하지 고민하다 멘토에게 전화를 했고, Svelte스럽게 잘 처리했다)

앞으로는?

더 많은 프로젝트

• 프로젝트를 1개할때 얻는 것이 매우매우 많다.
• 인사이트도 깊어지고, 사람들에게 자랑스럽게 이야기할 부분들도 생겨나고.
• 무엇보다 포트폴리오라고 불리울 수 있는 것이 생겨난 다는 점에서 말이다.
• 현재 진행하고 있는 사이드 프로젝트가 있다. 규모가 점점 커지는데, 잘 해결이 된다면 한층 더 성장하지 않을까 하다.

더 깊은 공부

• 일단 분야를 더 넓혀나가는것보다 깊은 공부가 우선시되야 한다는 생각이 들었다.
• 프로그래밍 분야에서 코딩만 할줄 안다면, 분야를 바꾸는 건 그다지 어려운 일이 아닌 생각이 들었기 때문.
• 다만 이 지점에서 주니어와 시니어를 구별지을 수 있는 부분은, 기존 분야에서 어디까지 깊이 들어갔나 인것 같다
  • 적당히만 팠던 사람은 분야를 바꿔도 딱 그정도까지만의 인사이트를 보유하게 되기 때문.
  • 따라서 지금 내가 가지고 있는 클라이언트 역량을 더 깊게 들어갈 필요가 있다
• 그래서 아마도 다음과 같은 공부를 하지 않을까 하다.

  라이브러리를 조작 or 만들기
  : 내가 딱 원하는 라이브러리를 찾기는 어려울 수도 있다는 생각이 들었다. 그럼 어떻게 하냐? 당연히 만들어야지. 그리고 이를 베포하는 경험까지 쌓는다면 진정한 개발자가 되지 않을까하다

더 넓은 공부

• 하지만 더 넓은 공부도 반드시 필요하다
• 가령, 이번 RN 프로젝트에서 서버쪽 개발자에 이탈이 있었지만, 내가 서버를 개발할 수 있었다면?? 이라는 아쉬움이 남는것은 사실.
• 그리고 풀스택 개발자가 된다면, 훨씬 다양한 개발을 내 실력에 구애받지 않고 할 수 있다는 점이 있다.
• 백앤드 개발공부를 슬슬 시작할 지점이라는 말이다.