[SSAC 3기] - 10주차-(1)

📢 개인프로젝트 발표 및 시상!!!

✨개인프로젝트

---

결론부터 이야기하면 대상, 최우수상, 우수상 중 우수상을 수상했다
(어떻게 우수상을 받았지? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

1. 프로젝트 구상계기

사실 처음엔 프로그래밍 강의 플랫폼을 제작하고 있었는데, 질의응답 시간에 동기분 한분이 나와 똑같은 것 을 보고 다른걸로 바꿔야겠다 생각을 했습니다.

괜찮은게 뭐가 있을까 고민을 하던 중 이왕 만드는거 포트폴리용이 아닌 내가 실제로 사용할 수 있는, 나에게 필요한 프로젝트를 만들어야겠다 싶어 PW 를 자주 잊어버리는 저를 위해 pw를 저장해주는 웹앱을 만들게 되었습니다.

2. 프로젝트 명

훈키도키(HKDK)
-> 내이름의 끝자와 비밀번호키의 끝자를 합쳐 훈키로 정했다가 기억에 잘 남을 수 있게 오키도키에서 착안하여(?!) 훈키도키로 정하였습니다.

3. 프로젝트 설명

• 훈키도키(HKDK)는 여러 사이트 들의 PW를 등록하는 사이트 입니다.
• 회원가입을 한 회원만이 사이트를 이용할 수 있으며, 회원이라면 기존 pw 등록 및 수정, 삭제 는 물론 랜덤pw를 추천받아 등록할 수 있습니다.
• 어떤 것이든 관리자에게 페이지 내에서 손쉽게 문의 메일을 전송 할 수 있습니다.

4. 프로젝트 레이아웃

• 회원가입 페이지 ( register )
• 회원가입 완료 페이지 ( registered )
• 로그인 페이지 ( login )
• 세션 없을때 뜨는 페이지 ( nosession )
• 로그인 실패 페이지 ( loginFail )
• 메인 페이지 ( main )
• 마이페이지 ( myPage )
  -> 총 7가지 페이지로 구성되어 있습니다.

5. 기술 스택

• 프론트 : html, css, js, bootstrap, jquery, ajax
• 백 : python3, django
• 툴 : vsc, putty, filezila
• etc : ncp, github

6. 개발한 기능

• 회원가입, 로그인 페이지
  • 세션처리
• 마이페이지
  • 회원 정보 조회, 수정, 탈퇴
• 메인페이지
  • 텍스트 스크롤 효과
  • 사이트 카드별 pw등록, 수정 삭제, 랜덤 pw 생성 ( ajax 처리 )
  • 메일 전송 ( ajax 처리 )
• 공통
  • UX 디자인 ( bootstrap에 css한스푼 )

7. 유스케이스

• 사용자
  • 회원가입, 로그인 ( 사용자인증 )
  • 회원관리 ( 조회, 수정, 삭제 )
  • 사이트별 pw등록 ( 등록, 수정, 삭제 )
  • 메일전송
    

8. ERD

• user
• passwordStroage
  
  

9. 프로젝트 시연 영상

-> 세션이 없을때 페이지를 담지 못했지만 로그아웃후 메인페이지 접근하거나 뒤로가기 클릭했을때 노세션 페이지가 뜨게 되어 있습니다.
-> ( 실제로 발표할때의 영상 아님 )

😱TMI

---

보시는 여러분들이 궁금하실것 같..죄송합니다.....

1. 로그인 중복처리

• 회원가입시 id가 중복으로 처리 안되게 처리함
• user가 입력한 데이터가 db내에 있는지 없는지 검사해서 있을시 안되게 처리하였음

2. 동시 접속

• 동시에 접속하더라도 user간의 세션이 다르기 때문에 가능
  

3. DB테이블

• human ( 로그인 유저 테이블 )
  • 필드는 총 3개 ( human_id, human_name, human_password )
• passward storage ( 사이트 pw 테이블 )
  • 필드는 총 3개 ( human_id, site_name, site_password )
  • 테이블간의 연결은 human_id로 설정
  • 로그인한 유저가 사이트에 등록된 pw를 human_id로 가져온다

4. 고민했던 부분

• ajax 처리
  처음엔 전부 ajax처리를 하였으나 reload시 맨처음 페이지로 돌아가는 이슈 때문에 강제로 keycode f5를 막았으나, 영 아닌것 같아 고민하다 좀 더 나은 UX를 위해 페이지이동을 처리하되, 모달창과 이메일 처리부분만 ajax로 처리하였습니다.
  

• react
  조건부렌더링 프론트에서 하기 위해서 react를 사용하려고 하다가 수업 했던걸로만 만들고자 배제 하고 백에서 처리하였습니다.
  

• 로직
  테이블을 최대한 생성하지 않게끔 백단 로직을 짜려고 노력했습니다.
  

• 디자인
  이목을 끌기위해 템플릿을 가져다 쓰려다 오히려 전부 가져다쓴 것 처럼 보일까 염려되어 가져다 쓰지 않고, 디비컷에서 여러 웹페이지들 디자인을 참고 하며 하나씩 참고하여 제작 하였습니다. ( 부트스트랩은 0 )
  

🙇‍♂️프로젝트 후기

---

동기분들 모두 나의 예상을 가볍게 뛰어넘고 엄청 잘하셨다....!!!
대상은 ㄷㅎ님 최우수상은 ㄷㅎ님, ㅅㅇ님이 받으셨다!!!

1. 아쉬웠던 점

• 디자인에 좀 더 신경 쓰지 못한 것
• 기획서, 목업, UD, ERD를 제작 하지 못한 것
• 발표를 긴장한 나머지 의식의 흐름대로 된 것 ( 굳이 말 안해도 되는것 까지.. )

2. 잘했다고 생각하는점

• 제작 하면서 세션에 대해 완벽하게 이해를 하였고 세션처리 또한 예외처리까지 완벽하게 구현한점
• 구상했던 기능을 전부 구현한 것
• 욕심내지 않고 기본에 충실한 것

3. 느낀점

• 확실히 로직 설계하고 기능을 구현하기까지의 노고도 중요하지만, 어떻게 보여지는가가 크게 작용 한다는걸 느꼈다.
• 디자이너분들을 존경하게 되었다.
• springboot 같은 경우 설정해줘야하는게 많은데 그에 비해 django는 계속 사용하다보니 간단하고, 앞으로 간단하게 뭐 만들게 되는 일이 생기면 django를 사용하여 만들 것 같다.
  
  

🦈간단한 회고

---

심플 이즈 더 베스트가 안먹히다니..ㅠㅠ ㅋㅋㅋㅋㅋ

클론코딩이나 포트폴리오용이라고 생각하고 무리하게 욕심내거나, 무작정 따라치는건 그때만 이해될뿐, 길게 남지 않는데, 내가 사용하려고 스스로 하나하나 찾아서 만들고 테스트해보고 해보니, 제대로 이해되고 또 만드는 동안 삽질마저도 재미있었던 경험이였다.

또한 발표중에 동기분들께서 질문 및 피드백 너무 잘해주셔서 너무 감사했고, 다른 동기분들의 훌륭한 작품들과 발표를 잘하시는걸 보면서 많이 자극받았다. 긍정적인 영향력 굳!!! 팀프로젝트가 기대된다 하하하핳! ssac 3기 화이팅💪💪💪