[미니프로젝트] 여긴 어때?

프로젝트를 진행하는 동안 내가 맡았던 역할 및 기능 구현을 중심으로 일지를 작성했다.

 

프로젝트명

여긴 어때?

 

프로젝트 설명

검색한 지명으로 주변 주차장 찾기

 

프로젝트 환경

• VScode
• Python
• 가상환경생성
• jQuery
• jinja2

 

프로젝트 참여한 인원

• 5명

 

프로젝트 진행사항

Day - 1

• 회원가입 기능 구현 과정
  • join.html이라는 파일에 기능구현을 하였다. 
  • 이름, ID, PW, 닉네임으로 회원가입을 진행하기로 하였고 정규식과 조건식을 이용하여 가입 정보에 제한을 두었다.
    1. 이름 : 한글 혹은 영어(대소문자)로 2자리 이상 15자리 이하인 정보 기입하기
    2.  ID : 영어(대소문자)와 숫자를 이용하여 4자리 이상 12자리 이하인 정보 기입하기
    3.  PW :  영어(대소문자)와 숫자를 이용하여 4자리 이상 20자리 이하인 정보기입하기
    4. PW 정보를 2번 기입하여 일치 여부 확인하기
    5. 빈칸이 없도록 정보기입하기
  • 가입 정보에 이상이 없으면 FormData에 저장이 되고  app.py로 정보를 넘겨준다.
  • 넘겨진 정보는 mongoDB에서 데이터를 받아 조건식을 이용하여 ID와 닉네임의 중복검사를 진행한다.
  • 이마저도 이상이 없으면 DB에 저장이 되고 회원가입이 완료된다.

 

• 회원가입 기능을 구현하면서 느낀 점
  1. 데이터가 담긴 정보를 넘기고 받아올 때 사용하는 GET, POST 방식에 대해 조금 더 이해할 수 있었다.
  2. app.py에서 회원가입에 대한 정보에 제한을 걸어두려 했었으나 html 파일에서도 jQuery를 통해서 정규식 구현이 가능하다고 하여 구현하게 되었고 jQuery를 처음 배운 입장에서 구현이 되니 뿌듯하였다.
  3. 제일 좋았고 다행이라 생각했던 점은 mongoDB에 실제로 내가 원하는 대로 저장이 되는 걸 확인을 하니 지금까지 배운 것들을 잘 활용했다는 것, 내가 맡은 몫은 제대로 해냈다는 것과 그로 인해 프로젝트 진행이 한걸음 더 나아갈 수 있었다는 점이 제일 좋았다.

 

• 사용했던 코드 일부분

 // 회원가입에 필요한 정보를 담는다.
        function join_order() {  
            let id_check = /^[a-zA-Z0-9]{4,12}$/
            let pw_check = /^[a-zA-Z0-9]{4,20}$/
            let name_check = /^[가-힣a-zA-Z]{2,15}$/
            
            
            ......
            
            
            
             if (name == "" || id == "" || pw == "" || pw2 == "" || nickname == ""){
                alert("입력되지 않은 정보가 있습니다.")
                return false
            }
            else if (!name_check.test(name)) {
                alert("이름 형식에 맞지 않습니다. 2글자 이상 한글과 영어로 입력하세요")
                return false 
            }
            else if(!id_check.test(id) ){
                alert("아이디 형식에 맞지 않습니다.대소문자, 숫자로 구성하고 4~12자리여야 합니다.")
                return false
                
                
                ......
                
                
            let formData = new FormData();
            formData.append("name_give", name)
            formData.append("id_give", id)
            formData.append("pw_give", pw)
            formData.append("pw2_give", pw2)
            formData.append("nickname_give", nickname)

 

Day - 2

• 메인페이지 구현 과정
  • 예전에 엑셀파일에 담긴 주소를 구글지도 API에 담아 시각화한 것이 떠올랐고 공공데이터 사이트에서 주차장 데이터를 받았다.
  • 엑셀데이터는 pandas를 이용하여 컬럼명을 다시 지정하고 필요 없는 컬럼과 정보들은 drop 하였다.
  • 지도는 같은 팀원의 제안으로 카카오맵 API를 사용하기로 하여 키를 발급받았다.
  • 팀원 2명이 내가 회원가입 기능을 구현할 때 미리 메인페이지 기능을 구현하였고 나는 추가로 데이터가 시각적으로 깔끔하게 보이게 하기 위하여 정보를 테이블에 담기 위해 css 공부를 하였다.

 

• 메인 페이지를 구현하면서 느낀 점
  1.  다시 한번 pandas를 공부하는 계기가 되었고 잊지 말아야겠다고 생각했다(언제 쓰일지 몰라서....)
  2. 카카오맵 API를 사용하면서 느낀 점은 장소가 표시된 마커에 마우스를 올려놓으면 정보가 뜬다던지 해당 정보가 있는 사이트로 간다던지 조금 더 구현하고 싶었던 부분들이 있었는데 '아... 공부를 더 열심히 해야겠다'라는 생각을 갖게 해 주었다.

 

Day - 3

• 마무리 작업
  • Day-2에 기술매니저님과 이야기했을 때 로그인/회원가입 이외에 mongoDB를 사용하지 않았다는 점을 알게 되었다.
  • 위의 내용 때문에 엑셀 데이터를 mongoDB에 저장하고 싶었으나 시간이 부족한 관계로 더 이상 진행 하지 못함
  • html 파일에 table class를 구현하였고 NO, 주차장 이름, 지번 주소, 요금이 나올 수 있도록 하였다.
  • 배포하는 작업에서 AWS의 서버를 사고 설정하는 과정에서 5XX에러 메시지와 기타 등등의 에러 메시지가 많아서 배포 진행을 못 하였고 Git 주소를 제출하게 되었다.

 

• 마무리하면서 느낀 점
  1. 부트스트랩을 이용하여 테이블을 만들면서 웹에서 style을 어떻게 적용해야 하는지를 조금 더 알게 되었다.
  2. 배포하는 과정이 원활하게 진행될 줄 알았으나 끝날 때까지 끝난 게 아니라고 방심하면 안 되다는 걸 다시 느꼈고 왜 배포에서 에러가 났는지 확인하는 과정에서 필요한 라이브러리만 남기고 재배포를 실행하였으나 역시 안되어 이 부분은 조금 더 공부해야 하는 과제로 남게 되었다.
  3. 기능 구현을 진행할수록 더 필요한 기능들을 알게 되었다.
  4. 예전에는 관심 없었고 잘 몰랐었으나 사용하면서 혹은 기능구현을 진행하면서 더 필요한 기능과 서비스를 제공해야 하니 왜 시스템을 업그레이드해야 하고 왜 재배포를 해야 하는지 이해하게 되었다. 
  5. 협업할 때 Github를 왜 사용하는지와 알게 되었다. 팀원들과 파일을 주고받을 대 훨씬 편했다.

 

• 사용했던 코드 일부분

    table {
            width: auto;
            border-top: 1px solid #444444;
            border-collapse: collapse;
            margin-left: auto;
            margin-right: auto;
        }

        th,
        td {
            border-bottom: 1px solid #444444;
            padding: 5px;
        }

 

프로젝트 에러 메시지

1. Uncaught (in promise) SyntaxError: Unexpected token ‘<’, “<!DOCTYPE “… is not valid JSON
   • SyntaxError는 문법적으로 유효하지 않을 때 발생한다. → <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 추가로 해결하였다.
   • https://dahlia15.tistory.com/54
2. Uncaught ReferenceError: $ is not defined
   • 제이 쿼리 로드가 제대로 안되어 발생된 에러 → 제이 쿼리 선언을 스크립트 보다 먼저 선언하게끔 코드를 수정하여 해결하였다.
   • https://joonpyo-hong.tistory.com/entry/JS-jQuery-is-not-defined-is-not-defined-오류
3. Fatal error in launcher: Unable to create process using
   • 가상환경을 실행시키고 Terminal에서 pip install 시 발생된 에러 → python -m pip install 라이브러리명 → 명령어 실행 → 에러 상황 해결하였다.
   • https://gldmg.tistory.com/12
4. UnicodeDecodeError: 'cp949' codec can't decode byte 0xee in position 15: illegal multibyte sequence
   • 엑셀 파일 불러올 때 발생된 에러 → 인코딩 문제인 줄 알고 찾아봤으나 계속 에러 발생 → 파일경로에서 \ 부분을 / 로 고침 → 확장자명이 csv가 아니고 xlsx 이므로 pd.read_excel로 바꾸어 해결하였다.
   • https://afsdzvcx123.tistory.com/entry/파이썬Python-‘cp949’-codec-can’t-decode-byte-0xec-in-position-0-illegal-multibyte-sequence-에러-해결-방법

 

• 에러 해결 시 참고한 사이트

pip 명령어 에러 해결 : Faltal error in launcher: Unable to create process using '"'

[JS] jQuery is not defined, $ is not defined 오류

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 해결법 + JSON이란?

 

프로젝트 결과

https://youtu.be/bOajqCPDzr4