8주간 코딩을 배우고 개인 프로젝트를 진행하여 서비스를 런칭해보는 스파르타코딩클럽 오프라인 웹 프로그래밍 과정이 끝났다. 내가 진행했던 프로젝트에 대해 짤막하게 소개하고 간단하게 후기를 남겨보고자 한다.
스파르타코딩클럽이란?
코딩에 대해 하나도 모르는 사람들을 대상으로 8주간 여러 기술을 익혀 개인 프로젝트까지 수행하는 웹 프로그래밍 종합반이 제일 유명하다. 1~5주차에는 HTML, CSS, JavaScript, jQuery, AJAX 등의 프론트엔드 기술, Python과 MongoDB, 백엔드 구축을 위한 Flask 프레임워크를 배우며 정신없이 지나간다. 6~8주차에는 튜터님 도움을 받아 스스로 계획한 프로젝트를 준비하고 완성해서 AWS에 올리는 것으로 마무리하게 된다.
최근에는 오프라인 종합반의 1~5주차 내용을 온라인 종합반으로 오픈했다고 하는데, 개인적으로는 좋은 튜터님과 팀원들을 만나 8주간 많은 도움을 받았고, 스스로 무언가를 완성해봐야 의미 있는 마무리라고 생각하기 때문에 오프라인 종합반을 추천한다. 자세한 커리큘럼은 스파르타코딩클럽 홈페이지를 참조하면 된다.
프로젝트 취지 및 설명
인터넷을 돌아다니면서 어느 개발자가 여행하면서 찍은 사진과 짧은 글을 별도로 본인이 제작한 웹사이트에 올려서 활용하는 것을 보게 되었다. 나도 비슷한 사이트를 구현해보고 싶어졌고, 프로젝트 계획하면서 개인용이 아니라 회원제 사이트로 운영한다면 여행의 순간을 사진하고 짧은 글로 남길 수 있는 마이크로블로그가 될 수 있다는 생각에 로그인 기능까지 도입해보기로 했다.
인천국제공항 출국장에서 여러 나라의 언어로 '즐거운 여행 되세요.'라는 말이 표기되었던 것을 본 기억이 나는데, 그 중 프랑스어가 어감이 가장(?) 좋아서 프로젝트 이름을 'Bon Voyage'로 정하게 되었다.
프로젝트 시연 영상
시연 내용 정리
1. 메인 페이지에는 가장 최근에 올라온 글 중 공개 설정한 글이 6개만 보임
2. 사용자별 페이지에는 해당 사용자가 게시한 글이 모두 보임
3. 회원가입 후 로그인하면 우측 상단에 사용자 닉네임이 뜨며, 닉네임 클릭시 나오는 드롭다운 메뉴에서 내 페이지, 회원정보 수정 메뉴, 글쓰기 메뉴에 접근 가능함
4. 닉네임이나 자기소개 수정시 사용자 페이지에 반영됨
5. 기본 이미지 사용 선택하지 않고 이미지 첨부 후 저장시 이미지와 내용이 보임, 기본 이미지 사용 선택 후 내용 적어서 저장시 기본 이미지와 내용이 보임
6. 글 작성시 '사이트 초기화면에 표시' 선택 해제하고 저장하면 사용자 페이지에만 보임
7. 글 삭제 버튼 누르면 더 이상 글이 보이지 않게 되고, 회원 탈퇴시 해당 사용자가 작성한 글이 모두 삭제됨
어려웠던 점 및 극복 방법
개인 프로젝트를 하면서 내가 원하는 대로 구현하는 것이 늘 산 넘어 산이었지만 그 중에서 가장 어려웠던 것 2개만 언급해보고자 한다.
글 번호(ID) 구현
글을 작성할 때는 필요없지만 글을 수정하거나 삭제할 때 해당 글을 특정할 수 있는 요소가 필요해서 글 번호를 구현해야겠다는 생각이 들었다. MongoDB에 항목(document)을 하나씩 저장하게 되면 '_id'라는 필드에 ObjectID 형식으로 자체 ID가 생기는데 정수 1, 2, 3, 4, ... 형식이 아니라 임의의 문자열 형식이라 실제로 사용하기 어렵다는 문제가 있었다.
알아보니 MongoDB는 태생적으로 항목을 구별할 수 있는 ID를 자연수 1에서 하나씩 늘려가면서 제공해주지는 않는다고 한다. 구글에 'mongodb _id auto increment'로 검색해보니 MongoDB 튜토리얼도 있고, 그 외 다른 글도 많아서 방법이 여러 가지인 것으로 보였다. 그 중에서 나는 'counters'라는 컬렉션(collection)을 만들어 그 안에 숫자를 document로 저장하고, Python에 글을 작성할 때마다 숫자를 1씩 증가시키는 함수를 만들어 글 작성시 ID로 반영되도록 했다. 이렇게 하니 글의 '_id' 필드에 정수 값이 들어오고, 글을 쓸 때마다 '_id'가 1씩 증가하게 되었다. 이후에 글을 수정하거나 삭제하는 API 구현시 먼저 DB에서 글을 찾을 때 '_id'의 숫자로 찾을 수 있도록 했다.
파일 업로드 구현
가장 마지막에 발목을 잡았던 건 글 작성시 첨부한 사진을 실제 서버에 업로드되도록 하는 것이었다. Flask 문서에 예시가 있어 API 및 HTML 템플릿을 어떻게 구현해야 하는지 나와있긴 한데, <form> 태그에 속성을 부여해서 서버와 통신하는 예제여서 AJAX로 구현을 원하는 나로서는 API만 참고하고 AJAX 구현이 된 다른 예제를 참조할 수밖에 없었다.
AJAX로 서버에 내용을 보내는 부분을 구현할 때 처음에는 입력받은 내용과 첨부 파일 모두 하나의 AJAX에서 보내보려고 했으나, 내가 시도했던 방법 모두 내용 및 파일이 DB에 저장되지 않았다. 그래서 글 내용을 저장하는 API와 파일 업로드하는 API를 따로 만들고, 글 내용을 전달하는 AJAX의 성공 콜백 함수에 기본 이미지 사용하는지 체크하는 코드를 넣고, 기본 이미지 사용하지 않는다면 파일 업로드하는 AJAX를 실행하는 것으로 코드를 짰다. 파일을 업로드하는 경우에는 AJAX 안에 또 AJAX를 실행하는 셈인데, 이렇게 하니 글 내용과 파일 업로드 모두 가능하게 되었다.
(가능하다면) 차후 계획
사이트를 좀 더 개발할 수 있는 여유 시간이 생긴다면, 아래 내용들도 추가로 개발해보고 싶다.
글 종류 설정: 글과 사진만 있는 게시물, 비행기·선박·기차 티켓(출발지와 행선지 표시) 등
사용자 페이지의 페이지네이션(pagination): 한 페이지당 글 6개만 출력되도록 설정
사진 및 글 내용 외에 커스텀 필드로 날씨나 위치(geolocation) 입력 가능하게 구현
8주간의 코딩 후기
다른 사람이 개발한 프로그램을 사용할 때 프로그램에 문제가 있다면 왜 이 부분까지 신경을 못 썼는지 나무라기도 했는데, 내가 개발자의 입장이 되어보니까 개발이라는 게 결코 쉬운 게 아니었다. 특히 한 문제를 해결하기 위해 해당 부분 코드를 다시 짰는데 생각지도 못했던 새로운 문제가 파생될 때는 정말 미쳐버릴 것 같았다. 그렇게 새로 생긴 문제점까지 머리 싸매고 고치면 시간이 엄청나게 흘러가 있었다.
그리고 남이 만든 코드를 가져다 쓸 때는 그걸 그대로 가져다 쓰는 게 아니라 가공을 하는 등 잘 가져다 써야 한다는 점도 뼈저리게 느꼈다. 처음에는 디버거에 어디서 문제가 발생했다고 주르륵 뜨면 보통 아무 생각 없이 해당 메시지를 복붙해서 구글링해보는데, Stack Overflow나 다른 사이트에 비슷한 문제로 글이 올라와 있고 아래에 답변이 있다면 그 코드를 다시 내 코드에 복붙해서 사용하게 된다. 그렇게 해서 문제가 해결된다면 괜찮은데 해당 개발 환경과 내 개발 환경이 다르다면 문제가 해결되지도 않을 뿐더러 새로운 문제가 생기게 되니 잘 살펴봐야 한다.
여러모로 올해 7·8월은 오랜만에 영양가 있었던 시간으로 기억에 남을것 같고, 무엇보다도 시행착오에 대한 두려움이 사라지고 또다른 것을 개발할 때 모르는 게 생기면 찾아보면서 할 수 있겠다는 자신감이 생겼다. 앞으로 언제 또 이렇게 시간을 들여 개발을 하게 될지는 모르겠지만, 조금씩이라도 시간을 들인다면 이제 어느 정도는 나 혼자서도 삽질을 해볼 수 있을 것 같다.