(일단 시작하기에 앞서 본인은 프론트엔드 파트를 맡아서 다른 부분은 간략하게만 설명하겠다.)
프로젝트 기간 : 2023년 9월 ~ 2023년 12월
팀원 수 : 5명(백엔드 2명, 프론트엔드 2명, 얼굴인식 1명)
연계 기업 : LG전자
시작
내가 들었던 과목은 기업과 연계하여 기업에서 내어주는 프로젝트를 팀 프로젝트로 해결하는 과목이었다. 팀원이 꾸려졌고, 나는 난생 처음 해보는 프론트엔드 파트를 맡게 되었다. (물론 백엔드도 해본 적은 없긴 하다만, 프론트엔드는 더욱 더 생소했다.)
우리 팀은 LG전자의 '오픈소스 기반의 사이니지 솔루션 개발' 프로젝트를 하게 되었다. 구체적인 내용으로는 사용자 인식을 통해 사용자에게 맞는 메뉴를 추천해주는 키오스크를 개발하는 것이었다.
정말 걱정을 많이 했다. "팀원들에게 피해가 가면 어떡하지?", "프론트엔드 너무 어려운 것 아닌가?" 라는 생각을 정말 많이 했다.
결론만 이야기하면, 나는 지금 리액트가 너무 재미있다.
팀원들과의 첫 회의
정확히 언제했는지는 기억이 나지 않지만 어떤 프레임워크를 사용할 것인지 프로젝트를 어떻게 진행할 것인지, 그리고 위에서 얘기했지만 누가 어떤 파트를 맡을 것인지에 대한 큰 틀을 잡기 시작했다. 큰 일정 계획도 잡았고, 제일 중요한 깃허브 레포도 생성해서 공유했다.
그리고 긴 회의 끝에 프론트 라이브러리도 정하게 되었다.
결론은 '리액트' 였다.
이 수업은 기업과 연계한 만큼, 그 해당 기업에 있는 멘토도 배정이 된다. 우리는 멘토님께 리액트가 어떻겠냐라는 제안을 했고, 멘토님께서는 그러면 리액트와 비슷하면서도 WebOS에 맞는 Enact가 어떻겠냐라고 말씀하셨지만, 우리는 미래에 더 유용하게 쓰일 수도 있는 리액트를 택했다.
프론트 팀인, 나와 Mr.LEE(익명성을 위해 Lee라고 부르겠다.)는 리액트 프로젝트 시작부터 검색을 했다.
멘토님과의 첫 회의
멘토님과의 첫 회의는 비대면으로 진행되었다.
프로젝트는 결과는 일단 기술문서 였다. 오픈 소스로 블로그에 공개하는 것이다. 멘토님께서는 프로젝트 결과가 기술문서라고 말씀하시며, 구체적인 프로젝트 개요와 목적에 대해서 말씀해주셨다. 간단한 회의가 끝나고 난 뒤에 우리는 우리끼리 더 얘기했다. (멘토님 회의는 금방 끝났는데, 스타벅스에서 2시간이나 더 비대면 회의했던 것이 아직도 잊혀지지 않는다.)
일단 우리는 라즈베리파이와 웹캠, 그리고 터치 스크린이 가능한 모니터를 준비하기로 했다. 해당 라즈베리 파이에는 WebOS를 세팅해야 한다. 그리고 나중에 우리가 만든 프로그램을 세팅해 사용할 수 있도록 만드는 것이 우리의 목표였다.
백엔드 같은 경우는 일단 먼저 테이블 설계가 계획되었고, 얼굴인식 파트 같은 경우는 어떻게 서버를 두고 데이터를 주고 받을지를 정했다.
프론트엔드는 일단 관리자 모드를 개발할 것인지, 그리고 세부적인 기능(이전으로 돌아가기, Home으로 돌아가기 등)을 어떻게, 어디서 둘 것인지를 정하였다. 물론 핵심적인 메뉴 추천 기능, UI 등을 어떻게 할 것인지도 정했다.
그래서 프론트 팀은 일단 UI를 어떻게 할 것인지 각자 디자인 해보기로 했다.
첫 디자인
Figma로 어떻게 UI를 구현할 것인지 먼저 디자인했다.
본인은 아래와 같이 디자인했다.
밑밥 깔자면, 디자인은 너무 어렵다. 일단 먼저 이런식으로 진행하기를 원했고, 결론만 이야기하자면, 다행히(?) 내가 만든 위 디자인은 채택되지 않았다.
위 페이지말고도 다른 것들도 많지만, 대표적으로 하나만 가져와봤다.
React 프로젝트 시작
일단 Lee와 React 설치 및 프로젝트 시작과 관련된 검색을 하기 시작했다. 여러 블로그나 문서를 찾아본 끝에 하나의 글을 찾았다.
https://velog.io/@cho876/Chapter01.-React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85-Mac-OS
React 프로젝트 시작을 위함이라면 혹시나 필요하신 분들은 읽으면 좋을 것 같다. (나도 React 프로젝트 시작을 위한 게시글을 하나 정리하고 싶다.)
그리고 처음에는 막무가내로 하고자 했다. 그냥 검색을 통해서 배우며, 개발을 진행하려 했지만 그 방법에는 너무나 많은 리스크가 존재했다. 그래서 나와 Lee는 리액트 강의를 하나 찾아 우리가 개발하려는 것에 맞는 강의를 찾고자 했다. 그래서 찾은 것이 인프런 사이트에서 찾은 '프로젝트로 배우는 React.js 강의' 였다.
리액트로 블로그를 만들며 진행하는 강의였는데, 나중에 알게 된 사실이지만 우리의 본체 프로젝트를 진행하는데 꽤나 비슷하고, 유용한 강의였다.
React 강의를 들으며...
해당 강의는 앞서 말했듯, 블로그를 직접 만들고 React 내부 데이터베이스를 이용해 포스팅한 글들을 관리하는 것들을 가르쳐주었다. 유료 강의다 보니까 자세히는 말하기 좀 그렇지만, 간단히만 이야기해보겠다.
일단, 자바스크립트 라이브러리는 'Bootstrap'이란 라이브러리를 사용했다.
https://getbootstrap.kr/
Bootstrap(부트스트랩) 사이트
부트스트랩 라이브러리는 버튼, navbar 등 기본적인 component를 디자인하는데 유용했다.
그리고 강의를 들으며 자바스크립트에서는 class가 아닌, className을 사용해야 한다는 것을 알게 되었다. 그리고 지금은 당연한 것이지만, React라는 자바스크립트 라이브러리는 Component 구성이 매우 중요하다는 것을 알게 되었다. (후에 알게된 것이지만, html로 구현하는 것과 React로 구현하는 것의 효율 차이가 상당하다.)
강의를 들으면서, "우리 프로젝트는 어떻게 구현하고 어떻게 Component를 구성하는 것이 좋을까?" 라는 생각을 수도 없이 많이 했다.
