항해99 0주차 사전스터디 미니프로젝트

항해99 본과정에 들어가기전 javascript와 flask를 사용해 팀원들과 함께

미니프로젝트를 진행하였다.

웹개발 종합반은 2회독 정도 진행했으며 이해가 안되는 부분은 더 듣고 

강의자료를 참고하여 익혔다.

 

크롤링과 GET POST 방식에 대한 연습 및 이해를 높이기위해 이 기능들을

최대한 많이 활용하는 프로젝트를 진행하기로 하였고 웹툰 소개 페이지를 만들기로

결정하였다.

 

웹페이지 설계

 

 

0123456

웹툰 소개 웹사이트

페이지는 위와 같이 구성하기로 하였고 팀원은 총 5명이였다.

메인페이지 구현 2명

게시판페이지 구현 2명

로그인/회원가입 구현 1명

으로 나눠서 하기로 했고 나는 로그인/회원가입 부분을 구현하기로 했다.

 

기능 구현 계획

매니저님과 질의응답하는 시간을 가졌고 우리 팀원들이 설계했던 웹페이지가

지금 단계에서는 성공하지 못할 수도 있기에 뼈대가 되는 기능들을 먼저 구현하고

거기에 살을 붙이는 방식으로 진행하기로 하였고 너무 난이도가 높은 기능은 

제외하기로 하였다.

 

로그인 / 회원가입 부분에서도 jwt토큰을 이용하는 방식이 아닌

mongoDB 서버에 있는 아이디 비밀번호 정보를 불러와 일치하면

로그인을 완료시키는 방식으로 진행하기로 했다.

로그인 로그아웃에 대한 부분은 true false처럼 0과 1로 구분하기로 했다.

 

기능 구현

계획대로 mongoDB 서버에 있는 정보와 일치하면 로그인 성공을 구현하려 했으나

어려운 부분이 있었다.

1. html파일이 여러개 생기게되는데 로그인 정보를 html파일별로 주고받기가 어려움

2. 위와 같은 이유로 현재 로그인 상태에 대한 부분도 주고 받기가 어려움

 

지금와서 생각이 드는데 render_template에 대한 이해도가 부족했다는 생각이 들고

페이지 이동에 대한 것은 다뤄본 적이 없어서 겪은 오류 정도가 아닐까 싶다.

 

계획 수정

생각했던 계획이 오류가 있었다는 것을 깨닫고 전체 코드를 지우고 다시 구현하기로 했다.

전체적으로 기능이 어떻게 구현되어야 할것인가도 중요하지만 핵심기술이 무엇인가도

중요하다는 생각이 들었고 로그인 / 회원가입 기능의 핵심은 데이터의 페이지 이동이라는

생각이 들었고 정보 검색에 들어갔다.

 

session 

여러가지 키워드로 검색하는 도중 session이라는 기능에 대해 알게 되었다.

flask 서버에 저장해놓으면 다른 html 페이지에서도 꺼내 쓸 수 있는 기능이였고

실제로 간단한 로그인 화면을 구현하는데에 사용하는 기술이였다.

팀원들에게 기능에 대해 설명을 했고 바로 적용에 들어갔다.

몇번의 시행착오가 있었으나 consol창에서 데이터가 찍히는 것을 확인해가며 

아이디 -> 비밀번호 -> 로그인 성공 -> 아이디 예외처리 -> 비밀번호 예외처리 등의

순서로 하나씩 만들어 나갔다.

 

문제점

ajax를 통해 동작 수행에 대한 완료 메세지를 출력하려고 했으나 if문에 대한 부분은

출력하는 것이 가능했지만 마지막에는 결국 render_template기능을 리턴해야 했기에

그 부분에 들어갈 완료 메세지는 넣지 못했다. 몇가지의 시도를 했는데

1. render_template와 같이 출력

구글링을 해보니 return 값을 여러개 출력하는 방법이 가능해 이 방법으로 구현하려 했으나

에러가 발생했다. 언어 자체가 지원되지 않는 늬앙스의 에러 메세지였는데 많은 구글링을

했으나 원하는 해답은 얻지 못해 이 방법은 포기 하기로 했다

2. html쪽에서 하드코딩

render_template만 출력할 경우 html에서 응답 받을 메세지는 없으므로 null을 출력하기에

null 값이 들어오면 메세지를 출력하게하는 방식으로 처리하려 했는데

문제에 대한 해결은 확실하지만 내가 배움에 있어서는 크게 도움이 되지 않는 방법같아서 

하지 않기로 했다

if문을 많이 만들어서 각각에 리턴값을 줘 예외가 없게끔 코드를 짰다.

가독성면에서는 안좋겠지만 사실 로그인 실패에도 비밀번호가 틀리는 경우 아이디가 틀리는 경우

아이디 입력칸이 비어있는 경우 등 많은 예외가 있기에 이에 대한 예외 처리를 어떻게해야 할지

몰라서 if문을 많이 썼었을것같다

그래서 if문을 통해 완료 메세지 출력에 대한 문제를 해결했다.

 

좋았던 점

app.py에 많은 코드뭉치들이 생겨나기 시작하면서 많은 여러가지 경우가 생겨 났는데

이에 앞서서 가장 큰 두가지 경우는 로그인 상태의 index와 로그아웃 상태의 index였다

모든 경우의 수의 마지막은 결국 이 두가지 이므로 이 두가지는 아래 사진과 같이 처리하였다.

 

 

위 사진과 같이 코드를 짜니 다른 코드 뭉치들의 마지막을 이쪽으로 보내면 

index()의 코드를 통해 session에 id와 pw가 있는지 없는지 검증할 것이고 그 결과를

로그인 상태와 로그아웃 상태에 따라 출력할것이기에 다른 코드들이 굉장히 간결해졌고

가독성이 좋아지는 것을 느꼈다.

내가 짰던 코드들 중에서 모두들 얘기하는 클린코드와 가장 가까운 부분이 이부분이 아닐까싶다.

 

코드 합치기

각 팀원들이 만들었던 코드들을 합쳐서 하나의 완성물을 만들었다.

시작하기전에 크게 이렇게 하자라는 약속은 없었지만 모두 같은 것을 보고 공부하고

그것을 응용한 미니프로젝트였기에 환경에 대한 부분은 다를바가 없어서 문제가 없었다.

우리는 아직 깃허브를 쓰지않고 복사 붙여넣기를 통해 코드를 합치기로 했는데

코드를 합치는 과정에서 코드가 길어지기도 하고 순간순간에 맞춰서 또 바꿔줘야 할 부분들이

생기는데 그 부분들을 코드 한줄이라도 놓치게 되면 전체적인 코드가 작동되지 않는 증상도 

있었고 생각보다 환경적인 부분은 다 맞춰놓고 시작해서 크게 합칠때는 문제가 없을거라고

생각했는데 여러부분에서 문제가 발생하는 것을 느꼈다.

사전에 많은 회의와 약속이 필요하다는 것을 느꼈고 팀별로 작업을 할 경우에는

깃허브가 굉장히 편리할수 있겠다라는 것을 몸으로 느낀 시간이였다.

 

정리

로그인 / 로그아웃 / 회원가입 / 내 정보 / 비밀번호 변경 이렇게 다섯가지 페이지를 구현했고

적용에 완료했다.

본과정이 들어가기까지 일주일정도의 시간이 남았는데 그때까지 다섯가지 페이지에 대해서

디테일에 대해 좀 더 다듬을 것인지 jwt 토큰에 대해 공부한 후 적용해볼것인지는

아직 고민중에 있다.