WIL : 백엔드와 프론트엔드의 첫 협업!!!

첫 만남!

 

다행히 상기와 같은 이유로 구성원 간에 맞지 않는 일은 없었다...

구성원들께서는 누구보다 적극적으로 임해주시려는 태도가 보여

나도 덩달아 신나 '이거 해볼까요?' '저거 해볼까요?' 라는 의견을 많이 피력하게 됐다.

부담스러워 하지 않으시고, 마땅한 피드백을 주셨던 구성원들께 다시 한 번 감사하다는 말씀드리고 싶다.

 

주제 선정

현재 최대의 관심사이며 취미이며 비즈니스인 개발을 주제로 꼽았다.

그리고... 언제나 그렇듯 모방은 창조의 어머니다.

'커리어리'는 우리의 목적에 적당히 부합하는 사이트였다.

게시물, 댓글, 프로필, 소셜로그인과 더불어 OG tag를 임베드 하는 기능을 갖고 있었고

개발자를 위한 커뮤니티 라는 점이 그랬다.

주제 선정 회의를 시작한지 5분 만에 작업에 착수하게 되었다.

 

작업 착수

결국 완료만 남은 노션...

필자는 리액트를 사용하는 프론트엔드 개발자(진)로, 구조에 대해 먼저 생각해보았다.

프론트엔드팀은 필자를 포함한 2인으로 구성되었는데, 함께 하시는 분은 과정을 시작하며 처음 개발을 접해보시는 분으로

그 분이 협업을 진행하면서 부담을 느끼시면 안 되겠다는 생각을 먼저 했었다.

협업은 github으로 진행하고, 진행 척도 및 공유 사항은 내가 notion을 만들어 진행하려 했으나,

9시 부터 새벽 3시까지 상시대기하여 대화로 하는 것이 빠르게 되었다...

 

구조는 Atomic Design을 기초로 global styles로 기저를 다지고, theme provider로 공통적인 것들을 공유하고 

세세한 것들은 element로 만들거나, 컴포넌트 내부에서 styled component를 만들어서 진행하고 싶었다.

스타일과 큰 페이지, 컴포넌트, 엘리먼트 등등 기초적인 것들만 내가 만들어 공유했다.

 

 

코딩, 코딩, 코딩

돌이켜보자면 접신해서 코딩했었던 것 같다.

엄청나게 잘 했다는 것이 아니라, 내가 한 것이 아닌 것 같다는 의미의...

 

협업은 백엔드 분들에게 양해를 구하고 작은 배포를 부탁드렸다.

프론트엔드에서 API 기능들을 확인하면서 즉각적인 피드백을 드리는 것이 장기적으로는 빠른 방법일 수 있겠다는 생각이었다.

감사하게도 백엔드분들은 적극적으로 수용해주셨고 큰 기능들이 추가될 때마다 컴파일한 파일을 보내주셨다.

그럼 프론트엔드에서는 jar 파일을 받아 로컬에서 서버를 돌리면서 체크할 수 있게 되었다.

덕분에 CORS, 소셜로그인 등 상대적으로 중요한 기능들에 대해 면밀히 살펴볼 수 있었다.

다시 한 번 무리한 부탁일 수 있는 것에 적극적으로 수용해주신 백엔드 분들께 감사하다는 말씀드리고 싶다.

 

그럼에도 불구하고 여러가지 트러블슈팅은 있었다.

협업을 처음해봤던 지라, CORS에 대해 어떻게 다뤄야 할지 고민했고,

소셜로그인은 어떻게 다뤄야 할지, 프론트엔드에서는 라이프사이클에 대한 고민이 주되었다.

 

GitHub - mtae616/sout-FrontEnd

고민들은 상기 링크 REAME에서 보실 수 있다.

 

개별 포스트를 작성하면서 CRUD는 기본으로, OG tag를 삽입하는 것이 필요했다.

물론 백엔드에서 크롤링을 해서 내려주는 것이 맞겠지만 우리는 시간이 부족했다.

하여 찾아낸 것이 opengraph-react 라는 라이브러리였다.

 

opengraph-react

 

여러가지 후보군이 있었더라면 좋았겠지만, 최근 까지 버전관리가 되는 패키지가 이것 밖에 없었다.

(사실 최근도 9개월 전이긴 하다...)

 

다만 사용하면서 포스트 내의 url이 변경되면 감지하지 못하는 트러블이 발생하였는데,

(e.g. 검색을 하여 화면에서 렌더링 되는 게시물이 바뀌었을 때 등...)

redux 에서 변수를 하나 설정하여 게시물이 바뀌었을 때에는 boolean 값을 통해 다시 한 번 렌더링 될 수 있게 하였다.

다만 이 때 boolean 값을 변경하는 dispatch가 랜더링 보다 먼저 일어나 setTimeout으로 관리하였다.

그렇게 금요일 쯔음 되니까 마무리가 되는 것 같았다. 소셜로그인도, CORS나 og tag 관련된 고민도 점점 마무리 되는 듯 했다.

 

다만 제출일자가 다가오자 ec2와 s3 배포 후 트러블 슈팅에 관해

조바심이 났던 나는 같이 하던 구성원의 대부분의 것을 덜어와 해결하였다.

이것으로 내가 그분의 배움의 기회를 박탈한 것은 아닌지, 그 분께 상실감을 드린 것은 아닌지 염려 되었다.

그저 한 주차의 과제였을 뿐인데 꼭 그랬어야 했었나 하는 생각도 지금은 든다.

조금은 내려놓을 필요가 있다.

 

마무리

어쨌든 우리는 소기의 목적을 달성했다!

S3와 EC2의 배포 연결을 하면서도 큰 이슈는 발생하지 않았다.

비록 디자인은 크게 신경쓰지 못하여 뒤틀린 황천의 '커리어리'가 되긴 했지만, 시작할 때의 목적에 부합하게 되었다.

반응형으로 제작했고 게시물, 댓글, 유저정보 CRUD, 검색을 통한 포스트 불러오기, 무한스크롤 등등...

이번 프로젝트의 백엔드는 스프링이었는데, 일전에 스프링을 배웠던 경험이 도움이 많이 되었다.

 

우리는 이제 소통할 수 있고, 함께할 수 있고, 연결될 수 있다.

흡사 UN의 문구같은데 그냥 기술적인 이야기다...

 

 

you know me!