[WIL-001] 토이 프로젝트 - 펫스타그램(Petstagram)

🦄 토이 프로젝트 19조 - 펫스타그램(Petstagram)

✨진행 날짜 : 3/28 ~ 3/31일(3~4일)

토이프로젝트 주간동안 3명의 팀원과 함께 펫스타그램(Petstagram)이라는 웹 사이트를 개발했다.

팀원들과 함께 3일동안 프로젝트를 진행하면서 느낀 부분들을 작성해 보려고 한다.

---

 

무엇을 고민했나? 

 

일단 프로젝트 기간이 매우 짧았다. 원래 월~목요일까지 였으나, 우리는 첫 프로젝트 주제를 한 번 뒤엎고 새 주제로 변경하여 하루 ~ 이틀정도의 시간을 버렸기 때문에 시간이 많이 부족했다..

처음 구상한 프로젝트 주제는 한강 정보 웹사이트 만들기였다. 한강의 여러 공원들(망원, 여의나루 등등...)의 지역들로 나누어 그 지역들의 명소에 대한 순위를 제공하고, 해당 장소에 대한 정보, 리뷰, 댓글 등을 지원하는 웹 서비스를 구현하고자 했다. 

하지만 가장 큰 문제점이 있었다.

1. 바닐라js를 사용하면 여러 하위페이지를 이동할 때 해당 장소에 대한 데이터를 하위페이지로 전달하기가 어렵다는 점이다. 메인페이지 => 핫플 장소 페이지 => 장소 정보 및 리뷰 페이지 등등으로 계속해서 장소의 정보를 전달해 주기 위해서는 state나 props과 같이 데이터를 전달하여 해당하는 정보에 따라 다른 결과물을 보여줘야 하는데 아무래도 바닐라js로 state, props, jsx의 기능을 대체하기는 굉장히 어렵다는 생각이 들었다. class를 사용하거나 어찌저찌 구현한다고 쳐도, 여러 외부 페이지로 페이지간 이동하게 된다면 리렌더링 되어 데이터가 소실될 것이라고 생각했다. 서버에 데이터를 저장하게 하여 매번 가져올 수도 있으나 성능적인 부분에도 좋지 않을 것 같고 시간도 굉장히 오래 걸릴 것이 분명했다. 차라리 React로 구현하는 것이 낫지 않을까 판단하여 React로 진행해보려고 했으나 또 문제가 있었다.

2. 팀원 총 4명 중 나와 한분을 제외하고는 React를 사용할 줄 모른다. 당연한 것이 우리는 아직 기초 자바스크립트 언어만 온보딩 스터디로 진행한게 전부였다. 바닐라로 구현하고 넘겨주면 나와 다른 분이 React 코드로 변환할까도 생각했지만 사실상 3일안에 바닐라 구현 => 리액트 변경, 백엔드 구현 까지 모두 소화하는 것은 자바스크립트 사용도 미숙한 다른 팀원들을 고려한다면 절대 불가능하다고 판단했다. 또 배포 문제까지 더하여 어떤 이슈가 있을지 예상하지 못하기 때문에 계획을 변경해 좀 더 실현 가능한 새로운 바닐라js 프로젝트를 구상해 보기로 했다.

이렇게되어 최종적으로 발탁된 주제가 펫스타그램(Petstagram)이었다.

 

 

구현 가능한 계획을 세우자 

 

펫스타그램은 인스타그램을 모티브로 하여 각종 귀여운 애완동물들의 일상과 사진을 공유하는 웹 서비스다. 

3일 안에 구현을 완료해야 하기 때문에 크게 총 5가지 기능들에만 집중하여 구현하기로 계획했다.

1. 회원가입

2. 로그인

3. 게시물 올리기(클라우드 이미지 서비스)

4. 전체 피드

5. 내 피드 

그 중에 내가 구현을 맡은 부분은 로그인, 로그아웃 기능이었다.

 

 

개발 완료한 기능 

3일이라는 기간동안 내 피드를 제외하고는 모두 완료했다. 게시글 올리기의 닉네임을 가져오는 부분에서 에러가 발생하지 않는데도 불구하고 DB에 정보가 들어가지 않아 내 피드를 가져오지 못했기 때문이었다. 하지만 제출 후에도 포기하지 않고 계속 끊임없이 시도하면서 하루 더 디버깅하여 중간에 발생한 문제를 해결하는데 성공했고, 결국 프로젝트를 완성했다! 너무 어이없게도 서버 작동의 문제였다.

 

 

트러블 슈팅, 힘들었던 부분 

 

아무래도 풀스택 개발이다 보니 익숙지 않은 파이썬 flask서버를 사용하는게 쉽진 않았다.

자바스크립트는 콘솔에 친절히 에러를 띄워주는데 비해 파이썬은 그닥 친절하진 않았다... 백엔드 언어라서 그런가..

서버에서 계속 에러가 나고, 파이썬 문법도 제대로 배우진 않아 계속 구글링하며 진행하고, 어떤 것이 라이브러리인지도 많이 헷갈렸다.

프로젝트의 마지막 기능에서 까지도 서버가 말썽이었다... 계속 되는 삽질의 연속.. 다음에는 노드를 배워보고 싶다..🥲

 

서버를 의심하자.

위에서 3일동안 해결하지 못한 이유가, 에러가 나지 않는데 DB에 정보가 들어가지 않는다는 점이었다.

디버깅을 해본 결과 분명 결과값이 도출되고 DB에 넘어가는 것까지 확인하였는데 이상하게도 데이터가 DB에 전달되지 않았다....결국 몇시간 동안 디버깅을 계속 반복하고 계속 확인하고 문제가 없다는 걸 계속 확인한 후, vscode를 껐다 키고 서버를 다시 열어본 결과 정상적으로 동작하는 것을 확인했다......

그 동안 코드는 거짓말하지 않는다. 언제나 틀린 건 나다..라는 생각을 굳게 믿고 있었던 나였기 때문에 망치로 머리를 한 대 맞은 기분이었다.. 코드는 거짓말 하지 않지만 서버는 정상 작동하지 않을 수도 있다는 것을 뼈져리게 느꼈다.

코드에 이상이 없음에도, 에러가 나지 않는데도 정상 동작이 되지 않는다면 이제는 서버를 의심해 보자...🤣

 

인터프리터에 주의하자.

인터프리터 버전이 다르면 계속 flask 등등 각종 라이브러리 모듈들이 없다고 나온다.

ModuleNotFoundError: No module named 'flask'

 

 

 아쉬운 점들, 보완할 점 

 

토큰을 도대체 어떻게 사용해야 할까?

내가 구현해야 하는 로그인 기능에서 토큰을 사용하는 것은 선택사항이었지만, 좀 더 욕심을 내서 토큰 발급까지 구현해 보았다. 토큰을 사용하는 방법이 가장 어렵고 힘들었다... 이전 외부 협업 프로젝트에서 카카오 로그인을 연동하는 역할을 담당하여 토큰이라는 것을 처음 듣고 백엔드로부터 전달받는 것까지는 경험해 봤지만, 솔직히 아직 토큰에 대한 개념도 잘 잡히지 않았을 뿐더러 토큰을 직접 발급해 보는 것도 처음이었다. 

토큰을 발급하는 자체는 쉽다. 하지만 토큰에 어떤 정보가 담겨야 하는지, hash로 정보를 암호화 해야 하는지, 토큰을 도대체 어디서 어떻게 관리해야 하고, 어떤 상황에서 토큰을 어떻게 이용해야 하는가... 그것이 정말 어려웠다.

우선 내가 처음 구상했던 방식으로 서버에서 토큰을 발급하여 클라이언트로 넘겨주는 방법으로 진행해 보았다. 클라이언트에서 넘겨받으면 토큰을 로컬 스토리지에 저장하도록 하였는데, 문제점이 로컬스토리지에 저장하게 되면 항상 자동로그인 상태가 된다는 점이었다. 우리는 자동로그인 기능까지 구현할 계획이 없었음으로 웹 페이지를 나가거나 브라우저를 닫게되면 로그인이 풀리도록 설정하고 싶었다. 따라서 브라우저가 닫힐 때에 토큰을 삭제하는 방법을 구글링 하다가 로컬 스토리지와 세션스토리지의 차이점이 영구성에 있다는 것을 알게 되었고, 세션스토리에 저장하여 브라우저가 닫히거나 할 경우 토큰이 사라질 수 있도록 하여 로그아웃 처리되게 하였다.

문제는 이 토큰으로 서버에 사용자 정보를 요청하여 사용자 정보가 필요한 페이지 등에서 로그인한 사용자 정보를 활용할 수 있게 만드는 것이었는데, 이게 참 어려웠다. 토큰 발급까지는 정보가 많았지만, 이 토큰을 어떻게 이용해서 사용자 정보를 가져오는지에 대한 정보가 너무 부족했다...

특히 시간이 너무 없었기 때문에 일단은 임시방편으로 내가 구상한 대로 구현해 보았다. 로그인시 Access Token을 발급해 DB의 사용자 정보에 추가한다. 사용자 정보가 필요한 페이지에서 현재 Access Token을 API로 전달해주면, auth/user-data API에서 해당하는 Access Token을 가진 사용자가 있는지 판별하여 그 사용자의 정보들을 return해 주도록 설정하였다.

여기까지 사용자 정보를 받아오는데 성공했다. 하지만 이 방법은 토큰을 옳바르게 사용하는 방법이 아니라고 생각된다. 생각해봐야 할 문제들은 다음과 같다.

1. 클라이언트가 토큰을 가지고 있는 것이 보안적인 측면에서 옳은가?

지난 카카오 로그인 연동에서 토큰은 서버에서 관리하여야 한다는 의견이 있었다. 혹여나 클라이언트에서 토큰을 가지고 있으면 사용자 정보가 유출되어 고소당하거나 할 가능성이 없지 않기 때문이다. 나도 이에 동의한다.  => 서버의 세션 등에서 토큰을 관리하는 방법과, 토큰에서 사용자정보를 hash처리 하는 방법, refresh Token에 대해 더 공부해 보아야 할 것 같다. 

2. 토큰으로 사용자의 정보에 접근하는 방법

refesh Token으로 access Token에 접근해 사용자의 정보를 받아와 전달하는 방법..? 이게 맞는지 감이 잘 안오지만 어쨌든 토큰을 사용해 안전하게 서버에서 사용자의 정보를 전달하는 방법에 대해 더 공부해 보자.

 

구글링을 해봤지만 쿠키, 세션, 스토리지 등 정말 여러 방법이 존재하는 것 같고 각각 장단점도 존재하는 것 같았다. 요즘은 쿠키와 세션 대신 스토리지와 JWT토큰을 사용하는 추세라고 알고 있는데 이유는 서버 데이터 용량 차지에 있다고 한다. 어쨌든 이 개념들은 하루 보고 완벽히 이해할 수 있는 개념은 아니라고 생각되므로 앞으로 꾸준히 공부하면서 해결해야 할 부분인 것 같다. 이번 프로젝트 때는 다른 팀원분들 코드를 봐드리고 전체 프로젝트의 완성도를 높이느라 이 부분들을 많이 보완하지 못했지만 다음에는 더 공부해서 반드시 안정적으로 토큰을 사용하는 방법을 숙지하도록 해야겠다.

 

아쉬운점 : 정리를 잘하자. 노션과 깃헙 ReadMe 꼭! 정리를 잘 해두자.

내 기억을 믿지 말고 기록을 믿자. 다른 팀들의 잘 정리된 기록들을 보며 많이 반성했다. 다음 부터는 프로젝트도 중요하지만 그 때 그 때 진행과정을 잘 정리하고 기록하는 것을 반드시 잊지 말자고 깊게 반성했다.

 

 

 배운 점들 

1. 협업의 중요성 : 항해에서 진행한 첫 풀스택 협업 프로젝트 였다. 부트캠프를 하면서 계속해서 느끼고 있는 장점이지만 여러명이 고민하여 에러를 해결하다 보면 내가 보지 못했던 문제를 다른 분들이 해결해 줄 수 있다. 협업의 가장 큰 장점이라고 생각되는 부분이었다.

2. 입문자에게 마냥 구글링을 강요하는 것이 무조건 좋은 방법은 아니다 : 코딩에 처음 입문하는 팀원들은 사실 아는 정보가 별로 없기 때문에 구글링을 하는데도 한계가 있다. 구글링도 많이 알수록 잘하게 되는 것 같다. 어차피 나중에는 알아서 구글링하여 정보를 찾을 수 있다. 하지만 코드작성법 조차 잘 모르는 팀원들에게는 방향성을 제시해 주거나 코드 작성 방법을 보여 주며 일단 경험해 본 것을 바탕으로 구글링 할 수 있게 도와주는 것이 좋은 것 같다. 외부 협업 프로젝트에서 프론트 사수 분의 코드를 분석하며 정말 많이 깨닫고 배웠었다. 접근법도 몰라서 혼자 구글링에 실패하고 끙끙 앓다가 부트캠프를 포기하거나 코딩에 대한 흥미를 잃지 않도록 방향성을 제시해 주어야 한다고 느꼈다.

3. 로그인에 대해 참 막연하기만 했는데, 전반적인 흐름에 대해 좀 더 이해하게 된 것 같아 얻는게 많았다. 각자 역할 분담을 사다리 타기로 결정했지만 이번 기회에 로그인 기능을 구현해보는 기회가 있었다는 것에 참 운이 좋았다고 생각하고 감사했다.

4. 처음으로 풀스택으로 어떤 기능들을 구현하고, 그것들이 모여 하나의 서비스를 완성한다는 점이 너무 뿌듯했다. 내 손으로 백엔드와 DB까지 구현했다는 것이 너무 대견하다고 느꼈다.

5. 팀원들이 프로젝트 시작부터 끝까지 엄청난 발전을 하는 것이 눈에  보였다. 첫 프로젝트인데도 불구하고 디버깅하는 속도도 빨라지고 도와드리면서도 큰 보람을 느꼈다. 그 전 팀의 팀장으로서 전 팀원들도 살펴보니 첫 만남과 비교도 안되게 많이 발전해 있는 모습에 너무 뿌듯했다. 내게 많이 배웠다는 말을 들을 때마다 너무 감사했고 뿌듯하다. 나도 더 발전하고 성장해서 계속 좋은 쪽으로 이끌어 드릴 수 있었으면 좋겠다. 느낀점이 꽤 많은 첫 프로젝트였다.🙂