팀 소개 사이트의 구성은 메인 창, 팀 소개 창, 방명록 창 3개의 HTML로 구성했다.
1. 메인 창
'novengers 팀을 소개합니다'라는 문구의 아래에 팀이 추구하는 방향을 나타내는 글귀를 띄워놓았다.
중단의 회색 버튼이 두개가 있다. 이 버튼을 누르면 글귀가 바뀐다.
함수의 hide와 fadein을 활용해서 만들었다. 왼쪽 버튼에는 -값을 추가하게 하여 이전의 문장으로 이동하고 오른쪽 버튼에는 +값을 추가하여 다음 문장으로 이동하도록 구성하였다.
우측 상단에 목록 토글과 home 메뉴가 있다.
home 메뉴를 누르면 메인 창으로 이동하고 목록 토글을 클릭하면 member와 방명록 창으로 이동할 수 있다.
2. member 창
왼쪽 상단에 멤버카드를 등록 할 수 있는 버튼과 수정, 삭제 버튼이 있다.
하단에는 등록된 멤버들의 사진과 정보가 들어가 있다.
카드에 커서를 올리면 카드가 뒤집히면서 자기소개와 mbti의 내용이 나온다.
등록하기를 누르면 필요한 정보를 기입해야 하는 모달 창이 뜬다.
정보를 다 기입하면 alert창에 고유 아이디가 뜬다. 이 고유 아이디는 수정과 삭제 할 때 꼭 필요한 정보이다.
아무나 수정 삭제 하는 것을 방지하기 위해서다.
수정과 삭제는 입력된 고유 아이디를 가지고 있는 멤버 하나에게만 적용이 된다.
수정버튼을 누르면 정보를 수정할 수 있는 모달 창이 뜬다.
옆에 있는 체크 버튼으로 필요한 정보만 수정이 가능하다.
체크의 유무에 따라서 파이썬에 보내지는 정보가 달라진다.
삭제버튼을 누르면 삭제 모달창이 뜬다.
창에 고유아이디를 넣으면 그 정보를 가지고 있는 데이터가 삭제된다.
3. 방명록 창
한마디 남기기 버튼을 누르면 방명록을 사용할 수 있는 창이 뜬다.
닉네임과 코멘트가 왼쪽하단부에 남겨진다.
x버튼을 누르면 비밀번호를 누르는 창이 뜬다. 그것을 기입해야한 삭제가 가능하다.
4. 한 주동안 프로젝트를 진행하면서 배운 점
파이썬과 자바스크립트의 함수에 대한 이해도가 높아졌다.
1) 비밀번호 기능 구현
비밀번호의 구현방식은 데이터베이스에 있는 모든 비밀번호를 리스트화해서 html에 기입된 비밀번호와 일치하는 것이 있는지 없는지 확인하는 형식이었다.
파이썬의 db.find에서 false와 true가 어떤 식으로 작용하는지 이해함으로써 기능을 구현할 수 있었다.
자바스크립트의 비밀번호를 체크하는 함수이다.
파이썬에서 들여오는 데이터가 어떤 방식과 타입인지 이해할 수 있었다.
pw_li의 키와 값 중 값의 데이터만 필요했기 때문에 빈 배열 arr에 push로 pw_li의 값(a.pw)만을 넣었다.
indexOf의 함수는 arr배열에 pw의 값이 존재하는지를 묻는 함수이다.
만약 존재한다면 값이 1이되고 없다면 -1이 된다. 이를 이용한 if문으로 비밀번호를 구현하였다.
2) 모달창은 1개 밖에 띄울 수 없다.
비밀번호를 기입하는 창은 모달창이다.
비밀번호를 입력하면 수정 할 수 있는 모달 창이 뜨는 방식이다.
비밀번호가 잘못 기입됐을 때 alert창은 잘 떴는데 제대로 기입되었을 때 정보를 수정하기 위한 모달창이 뜨지 않았다.
알고 보니 모달창은 1개밖에 띄울 수 없다는 정보를 얻었다.
그래서
비밀번호를 확인하는 모달창을 닫고 새로운 모달창 (정보 수정 창)이 뜨도록 함수를 추가했더니 정상적으로 작동이 됐다.
4) 파이썬의 for 반복문
예전 프로젝트의 파이썬에서 post로 정보를 받을 때 썼던 코드다.
post의 doc 부분과 정보를 받아오는 부분에 반복문을 사용하면 코드가 굉장히 간편해진다.
for in 반복문으로 doc와 request.form을 간단히 만들었다.
5. 한 주동안 프로젝트를 진행하면서 느낀 점
프로젝트가 시작되는 첫날에는 간단히 마무리할 수 있을 줄 알았다.
왜냐하면 CRUD의 기능을 구현만 하면 된다고 했기 때문이다.
그래서 페이지 시작할 때 데이터베이스에서 정보 읽기 멤버들의 정보등록, 수정, 삭제 기능을 단순하게 넣기만 하면 되는 줄 알았다.
단순히 CRUD의 기능을 추가하는 것은 간단했다. 팀원 대부분이 이 기능을 첫날에 구현했다. 그리고 문제가 이튿날에 발생했다.
프로젝트의 완성도를 위해서 각자 필요한 추가 기능을 만들어서 병합하자는 의견이 나왔고 하루가 마무리되기 30분 전에 서로의 진행도를 공유하기로 했다.
각자 스스로가 필요하다고 느끼는 작업을 하고 하루의 마지막에 회의를 시작했다. 똑같은 기능을 만들었던 팀원들도 있었고 CSS를 만졌던 팀원도 있었고 CRUD를 보강하는 팀원도 있었다. 일단은 각자가 시작했던 기능을 서로 끝내자는 방향으로 움직였기 때문에 전체적인 시간이 낭비되었. 또한 데이터를 병합할 때 각자가 사용했던 변수명이 통일되지 않아서 오류가 발생하기도 했다.
프로젝트의 마무리 시점에서는 각자가 최선을 다했기 때문에 좋은 결과물이 나왔지만 팀원들끼리 프로젝트를 회고했을 때 느낀점은 결과물을 위한 회의가 부족해서 코드를 짜는 시간이 과할 정도로 투자되었고 변수명에 대한 통일을 하지 않아서 데이터를 통합할 때 힘들었다는 점이었다.
결과물을 봤을 때는 만족스러운 수준이었다고 생각한다. 하지만 팀 프로젝트로 잘 움직였나? 라고 생각을 했을 때는 그렇게 잘 움직였다고 말할 수는 없던 거 같다. 그럼에도 불구하고 만족스러운 결과가 기간 내에 나온 이유는 서로가 열심히 작업하고 모르는 것을 물어봤을 때 다들 성심성의껏 도와줬던 것에 있다고 생각한다.
내일 배움 캠프에서 자주 하는 말이 있다.
'팀프로젝트의 경험이 중요하다.'
말로만 와 닿았었지만 이제는 이해했다.
서로 회의를 자주하는 것은 시간 낭비처럼 느껴질 수도 있지만 사실은 시간을 가장 절약하는 방법이라는 것과
서로의 역할 분담은 정말 구체적으로 이뤄져야 한다는 것이다.
만약에 다음 프로젝트를 진행한다면 그때는 더 잘할 수 있을 것 같고 이번 프로젝트를 통해서 많은 것을 배웠다.
좋은 경험이었다.
'팀 과제 (팀 소개 사이트)' 카테고리의 다른 글
| [내일배움캠프] 6기 노.벤져스 팀 과제 팀 소개 사이트 -1- (1) | 2023.05.16 |
|---|---|
| [내일배움캠프] 6기 노.벤져스 팀 과제 팀 소개 사이트 제작 S.A (0) | 2023.05.15 |
