소개
GDSC(Google Developer Student Clubs)는 Google Developers가 후원하는 대학생 커뮤니티이다.
최근에 우리나라 대학교에 지부가 생겼고 우리 학교에서는 지난 해 1기를 모집한 신생 단체이지만 후원사가 구글인 만큼 다양한 행사에 참여할 기회가 많다.
활동 기간은 1년이며, 일반 Member와 스터디를 주도하고 행사를 기획하는 Core Member로 구성되어 있다.
작년에 1기에 지원했다가 떨어졌었는데, 블로그와 깃허브에 활동 내용 및 자료를 공개하고 있어서 스터디도 따라 배워보고 주관 행사에도 참여했다. 이번에 2기 Member에 지원할 때는 여기에 관심을 계속 가졌었다는 점을 어필(?)했다. 서류와 면접 절차는 여타 다른 연합동아리와 유사했다. 다행히 좋게 봐주셨는지 이번에는 합격을 해서 GDSC 2기 멤버로 활동하게 되었다.
스프링 부트, 리액트 스터디
안드로이드 / 스프링 부트 / 리액트 / 알고리즘 / 머신러닝 이렇게 5가지 스터디가 열렸다. 몸이 5개였다면 모든 프로젝트에 참여하고 싶었겠지만, 올해는 웹으로 한우물을 파보자는 심정으로 스프링부트(백엔드), 리액트(프론트엔드) 스터디에 참여하게 되었다.
6주 동안 교재나 유튜브 강의, 구글을 활용해서 중요한 지식을 함축적으로 학습할 수 있었다. 매주 블로그에 기록함으로써 헷갈릴 때마다 참고할 나만의 학습자료를 만들 수 있어 좋았다. 다만 심화적인 이해를 하려면 추가적으로 공부를 해야 할 것 같다.
다양한 세션
우리 학교의 자체 세션은 리드, 코어 멤버분이 맡아서 진행해주셨다. 우아한형제들의 테코톡처럼 짧은 시간에 핵심 개념을 설명하는 방식으로 진행되었다.
GitHub 가이드 / Swagger로 API 문서 작성 / 머신러닝 라이브러리 / react 동기, 비동기 처리 / http 기본 지식 등..
후술할 토이 프로젝트에서도 도움이 되는 유익한 정보였고 시간 날 때 다시 공부하고 싶다.
DevFest
11월 1일부터 12일까지 전국의 GDSC 소속 학교의 연합 행사인 DevFest GDG Campus 2021에 참가했다. 매일 모각코와 세션이 함께 진행되어 다양한 사람들과 이야기를 나눌 수 있었고 취업과 커리어에 대한 다양한 정보를 얻어갈 수 있었다.
토이 프로젝트
안드+스프링+리액트
스터디에서 배운 내용을 활용할 수 있도록 안드로이드, 스프링, 리액트로 나뉘어 토이 프로젝트가 진행되었다. 팀별로 각각 2명씩 담당하게 되었으며, 나는 리액트를 담당하게 되어 스프링 팀과 직접적으로 협업했다.
리액트에서는 최소 요구 기능인 CRUD 기능을 구현하기 위해 axios를 활용하여 REST 형식의 API로 스프링 서버와 요청을 주고받았다.
github에서는 초기 설정 후 각자의 이름으로 브랜치를 생성하여 작업 후 Pull Request를 보내 main과 병합하는 방식으로 작업했다.
리액트와 스프링 연동
토이 프로젝트인 만큼 기능 구현의 부담감은 적었지만, 리액트와 스프링을 연동하는 과정에서 많은 시행착오를 겪었다. 결론적으로는 리액트 package.json 파일에 "proxy": "스프링 서버 주소"를 입력하여 해결했다. 이는 CORS 문제 때문인데, 자세한 내용은 링크를 참고하면 좋을 것 같다.
REST API, JSON
이번 토이 프로젝트를 통해 REST API를 명확하게 이해할 수 있었다. 특히 스프링(백엔드) 팀의 중요성을 느꼈다. 안드로이드와 리액트 두 팀과 협업하는 이중고를 겪었음에도 서버 배포, Swagger를 활용한 API 테스트 등을 해준 덕분에 프론트엔드 쪽에서 테스트하기 용이했다. 나도 스프링 스터디 배운 거 열심히 복습해서 다음에는 백엔드 팀에서 작업해보고 싶다.
그리고 REST API로 데이터를 주고받을 때 JSON 형식을 이용한다는 것을 알게 되었다. JSON(JavaScript Object Notation)은 Javascript 객체 문법으로, 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이라고 한다. 자바스크립트 기반이지만 프로그래밍 언어나 플랫폼으로부터 독립적으로 동작하기 때문에 널리 사용되고 있다.
느낀 점
- 프론트엔드와 백엔드의 명확한 역할 분담 : 프론트엔드용, 백엔드용 프레임워크를 나눠서 작업한 경험은 처음이었다. 내가 맡은 부분만 하면 되어서 효율성이 높아졌다. 하지만 양쪽 모두를 이해해야 작업 진행이 잘 되는 것 같다. 무리해서라도 두 개의 스터디에 참여해서 다행이었다.
- 프론트엔드용 프레임워크로써 리액트의 장점 : 컴포넌트를 사용하니까 재사용성이 높고 수정하기도 용이했다. router를 통해 SPA(Single Page Application)을 구현할 수 있어서 불필요한 새로고침이 없어진 것도 좋다.
- 개발자가 공부를 놓으면 안 되는 이유 : 불과 몇 주 전에 React Router가 v6으로 업그레이드 되면서 문법이 다수 바뀌어 혼란을 겪었다. 옳게 했는데도 오류가 발생한다면 혹시 버전이 올라가지 않았는지 반드시 체크해보자.
아쉬운 점
- 조금 더 체계적인 git flow : 각자 작업하고 병합하는 작업을 하다가 나중에는 충돌이 일어나서 나중에는 main에다가 직접 push했었다. 초기 세팅 브랜치, 최종 브랜치(main), 개인별 작업 브랜치를 구축하고 각자 pull request를 올리면 코드 리뷰 후 병합하는 방식을 조금 더 체계적으로 실행했으면 좋았을 것 같다. git 공부를 더 열심히 해야겠다.
- 구글 소셜 로그인 시 보안 이슈 : 실제로는 보안을 위해 로그인 할 때마다 토큰을 주고받는 것으로 알고 있는데, react-google-login으로는 단순하게 사용자 정보를 POST를 통해 서버로 보내기만 해서 보안에 문제에 발생할 것 같다. 향후 큰 규모의 프로젝트를 진행할 때 유념해야 할 부분이다.
참고한 자료
- 리액트-스프링 연동: proxy 설정 / NGINX으로 분리 연동
- json-server로 가짜 API 서버 생성 - 리액트 테스트용
- 리액트 axios: 공식 문서 / 활용 예시
- react-router-dom: 리액트 라우터 v6 튜토리얼 / v6에서 달라진 점
- react-google-login: 공식 문서 / 활용 예시 / webStorage로 브라우저에 정보 저장
- 스프링에서 swagger로 API 문서 자동화
마무리
올해 하반기에 가장 기대를 가졌던 활동인 만큼, 그 이상으로 만족스러웠고 다행히 첫걸음을 잘 떼었다고 생각한다. parabol을 활용한 회고도 신선하고 좋았다.
내년에는 가장 중요한 행사인 Solution Challange를 앞두고 있고, 그밖에 다양한 행사가 예고되어 있어 앞으로도 기대가 된다!
