1주차 WIL (사전 미니 프로젝트 회고)

 4일간의 사전 강의를 듣고 진행한 미니 프로젝트. 나는 그전부터 웹개발 종합반 내용을 들었기 때문에 프로젝트 직전 1주 반 정도 공부했던 것 같다.

 

 시간이 3일도 채 주어지지 않았기 때문에 당연히 프로젝트는 지금까지 배운 내용 수준 정도라고 생각을 했고 크게 어렵지 않을 거라고 생각을 했다. 하지만 이전 기수들이 진행했던 미니 프로젝트 완성본을 보니 눈앞이 깜깜해졌다.. '저걸 나보고 만들라고?'라는 생각도 들었다. 그래도 팀원들이 초반에 어떤 방향으로 프로젝트를 진행할 건지 계획을 잘 세워주셔서 프로젝트를 시도해(?) 볼 수 있었다. 

 

 우리 팀은 간단하게 to-do-list를 만드는 프로젝트를 진행했다. 프로젝트는 기존 웹개발 종합반에서 만들었던 to-do-list를 기반으로 몇 가지 기능 추가 및 로그인, 로그아웃 기능을 추가하는 방향으로 기획했다. 

 

 

# 와이어 프레임

 막막했다고 생각했던 프로젝트가 와이어 프레임을 기반해서 하나씩 만들어가는 것을 보며 와이어 프레임의 중요성을 깨달았다.

 

 

# API 설계

기능	method	url	request	response
로그인	POST	/login	{ email: string, nick: string, pw: string }
to-do-list 데이터 조회	POST	/todo
to-do-list 완료 체크	POST	/todo/done
to-do-list 완료 취소	POST	/todo/cancle
to-do-list 삭제	POST	/todo/delete
로그인한 유저 정보 가져오기	GET	/todo

 

# 미니 프로젝트 개발

 먼저 역할을 크게 로그인 페이지 담당과, 메인 페이지 담당하는 역할로 구분을 했다. 나는 로그인 페이지를 담당하여 프로젝트를 진행하게 되었다. 여기서 나는 로그인 데이터를 받아오고 db에 저장되면 저장된 유저의 to-do-list 메인 페이지로 이동하는 역할을 맡았다.

 

 나는 이 부분을 구현하기 위해 프로젝트의 대부분의 시간을 사용한 것 같다. 쿠키, 토큰, 암호화 등의 지식이 하나도 없었기 때문에 어려움을 많이 느꼈고, 절망감도 많이 느꼈다... 하지만 팀원들과 소통을 하면서 계속 시도해 본 결과 문제를 해결할 수 있었다. 

 

 

# 협업

 일단 우리 팀 모두가 git과 친숙하지 않았다... 그래서 처음에는 VS 코드 라이브 셰어 기능을 활용해서 협업을 진행했지만, 불편한 사항이 꽤 있었다. 그래서 github에 commit은 하지만 merge는 일일이 비교해 가면서 하는 방식(ㅎㅎ)으로 진행하였다. github 사용법을 가능한 한 빨리 익혀야지..

 

 

# 트러블 슈팅

 문제점들이 꼬리의 꼬리를 무는 방식으로 생겨났던 것 같다. 하나 해결하면 이와 관련된 다른 문제가 발생하고, 또 발생하고..

 

1. 아이디와 비밀번호를 입력했을 때 저장된 아이디의 DB로 로그인하는 문제

이 문제는 db에 저장된 데이터를 result에 저장한 뒤, 조건문을 활용해 값을 찾는 방식으로 해결하였다. result = db.user.find_one({'id': id_receive, 'pw': pw_receive, 'nickname': nick_receive}) if result is not None:      return jsonify({'result': 'success', 'userInt': result['userInt']}) else:      return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않는다 개굴.'})

 

 

2. 로그인된 아이디의 to-do-list를 가져오는 문제

이 부분이 제일 어려웠다.. 처음에는 하나의 db 테이블 id, pw, to-do-list 등 모든 데이터를 저장하고 불러오는 방식으로 진행하려고 했지만, 딕셔너리 안에 있는 to-do-list라는 리스트에 데이터를 추가하고 추가한 데이터를 다시 웹페이지 상에 보여주는 문제를 해결하지 못해서 user와 todo라는 두 개의 테이블을 만들어서 문제를 해결했다.  또한 userInt라는 새로운 key값을 만들어서 user 테이블과 todo 테이블을 비교한 뒤, 같은 userInt 값을 불러오는 방식으로 문제를 해결하였다. 하지만 여기서 cookie에 저장된 값이 정수형이 아니여서 인식을 하지 못하는 문제가 생겼는데 이를 int형으로 변환하여 해결하였다. // 로그인 시에 cookie 값 저장(login.html) $.cookie('userInt', response['userInt']);   // 저장된 userInt 값을 바탕으로 to-do-list 찾기 userInt_receive = int(request.cookies.get('userInt'))   todoinfo = list(db.todo.find({'userInt': userInt_receive}))   for i in range(len(todoinfo)):   todoinfo[i]['_id'] = str(todoinfo[i]['_id'])   return jsonify({'result': todoinfo, 'userInt': userInt_receive, 'nickname': nickname_receive })

 

3. to-do-list를 find()로 가져오지 못하는 문제

to-do-list를 find_one() 함수로 가져오는 것은 가능했지만 find()로 모든 목록들을 가져오는 것이 불가능했다. 해결 방법은 todoinfo = list(db.todo.find({'userInt': userInt_receive}))   list로 묶어 준뒤 todoinfo의 _id 값을 str로 변환하여 출력하면 된다

 

 

# 추가하고 싶은 기능

 사실 3일도 안 되는 기간만에 이 프로젝트를 완벽하게 성공하기란 매우 어려운 것이라고 생각이 들었다.(지식도 없었기 때문에..) 그래서 추가하고 싶은 기능 몇 가지를 소개하고자 한다.

 

1. 회원가입 기능

 이 기능은 시간만 충분했다면 쉽게 구현할 수 있을 거라는 생각이 들었고, 필수적으로 구현해야 하기 때문

 

2. 정해진 기간 내에 to-do-list를 완성하면 개구리를 완성하는 기능

 게임적인 요소가 필요하다는 생각이 들었다. 따라서 예를 들어 3일을 설정하고 3일 안에 등록한 to-do-list를 모두 완료했을 경우 올챙이가 서서히 개구리가 되는 기능을 구현하고 싶었다.

 

3. 친구 등록 및 공유 기능

 친구는 어떤 목표를 가지고 있고, 얼만큼 수행했는지 볼 수 있다면 조금 더 동기부여가 될 수 있을 것 같다는 생각에 구현하고 싶었다.

 

 

# 작품

로그인 페이지로 닉네임, 아이디, 비밀번호를 입력

 

메인 페이지로 날짜 및 to-do-list를 작성하고 기록을 하면 페이지에 표시

 

귀여운 alert..

 

# 후기

1. 나는 누구 여긴 어디..

 처음에는 큰 틀 없이 개별 기능에 집중하다 보니 내가 이것을 왜 하고 있는지에 대한 인식조차 어려웠던 것 같다. 그래서 구현 완료된 기능들을 합친 후에는 뇌정지가 왔다...(합쳐보니 뭐가 뭔지 몰라서) 그래서 혼자 '뭘 해야 되지?'에 대한 고민을 엄청 많이 했던 것 같다. 그래도 혼자 절망에 빠져있는 사이 팀원들이 프로젝트를 잘 이끌어 주셔서 너무 감사하고 또 미안하다.. 이번 프로젝트를 진행하면서 큰 틀을 이해하고 진행하는 것이 매우 중요하다는 것을 깨달았다.

 

 

2. 다양한 툴 활용 능력

 프로그래밍 언어적인 부분이 아니라 협업 부분에서 다양한 툴의 활용 능력이 중요하다는 것을 느꼈다. figma를 사용해서 와이어프레임을 제작했다면, 가시성이 더 좋아 서로 프로젝트를 이해하는 부분에 있어서 더 도움이 됐을 것 같고 git을 잘 활용했다면 분업을 조금 더 효율적으로 하고 코드를 일일이 수정하는 불필요한 시간을 줄일 수 있을 거라는 생각이 들었다. 

 

 

3. 앞으로 난..

 이번 프로젝트를 통해 정말 많이 부족하다는 것을 느꼈다. 아는 게 없으니 무엇을 모르는지도 몰랐고, 어떤 방식을 사용해야 하는지도 몰랐다. 다음 주부터 본 과정에 들어가면 기본기부터 잘 다지고, 큰 맥락 속에서 흐름이 어떻게 이루어지는지 계속 생각하면서 남은 99일을 마무리해야겠다.

 

 

https://github.com/rladydqls99/to-do-list.git

GitHub - rladydqls99/to-do-list