깃허브 링크: https://github.com/gyun97/Introduce_team/tree/main

프로젝트 전반 소개

내일배움캠프 일주일 동안 이루어진 미니 프로젝트인 팀 소개 프로젝트가 끝이 났다.

내 역할은 팀장과 메인페이지 구현이었는데 프론트 엔드 부분은 개인적으로 좋아하지도 않고 사실상 지식이 전무하다 하더라도 과언이 없는 부분이라 간단한 화면 구성이었음에도 불구하고 굉장히 애를 먹었던 것 같다.

(본인의 사진이 함부로 넷상에 기재되는 것을 원치 않을 팀원이 있을 수 있으므로 부득이하게 스티커 처리했다.)

언제 봐도 정말 심플한 화면인데 코드를 짜면 짤수록 화면 위쪽의 이미지 부분이 한 쪽에만 나타난다던지 팀원 카드가 제대로 화면에 나타나지 않는다던지 카드에 마우스 접촉시 확대되는 호버 기능이 구현이 되지 않는다던지 여러 문제점들이 나타났고 구글링, 유튜브, 챗GPT 등을 통해 어찌어찌 해결할 수 있었다.

상세페이지는 이런 식으로 간단하게 구성했다. 하단의 아이콘 두 개는 부트스트랩에서 가져와 각각 개인 기술 블로그와 깃허브 링크로 연결해놓았다.

방명록은 Javascript, Flask, MongoDB를 이용하여 구현하였다.
자바스크립트의 비동기/데이터 처리 방식으로 서버 통신을 진행하였고 fetch를 사용하여 CRUD를 구현하였다.

파이썬에서는 Flask를 사용하여 간단한 방명록 웹 애플리케이션을 만든 후 MongoDB 데이터베이스를 백엔드로 사용하여 데이터를 저장하고 처리하였다. 또 Flask-CORS를 사용하여 CORS 정책을 처리하고, MongoClient()를 사용하여 MongoDB와 연결하여 완성하였다.

느낀 점

사실 프로젝트라고 하기도 민망한 수준의 몸풀기였는데 여기서는 개인적으로 프론트 엔드와 깃이 내 발목을 잡았었다. 프론트 엔드는 하기 싫어서 기초적인 공부 말고는 해본 적이 없다는 점이 문제였고 깃은 다른 사람들과 깃을 사용하면서 제대로 프로젝트를 협업한 적이 없었는데 팀장 역할을 맡아 내 깃허브의 레포지토리에서 브랜치를 생성하고 병합하는 역할을 맡다 보니까 충돌이 나거나 잘못된 merge를 하여 내용이 날라가는 등 혼자 깃을 사용하던 때와 달리 많은 어려움을 느꼈고 내가 깃에 대해 매우 무지한 상태라는 것을 깨달았다. 한 번 확실하게 깃에 대해 공부하여 다음 합동 프로젝트에 대비하자고 느꼈던 전반적인 계기가 되었던 것 같다.