1. 서론
드디어 부트캠프에서 첫 미니 프로젝트(풀스택)인 주차장을 설계하고 구현을 해보았다. 프론트엔드를 지망하는 나로써 데이터가 DB와 온전히 오고가는지를 중점으로 두고 진행을 하였다. 나는 적응하기까지가 오래걸려서 기능이 많지도 않구 시간도 2주정도 걸렸던거같다. 덕분에 로그인, 회원가입 기능도 다시 복습을 해보았고, fetch로 서버와의 통신, MYSQL 쿼리, HTML DOM조작, 기타 JS 문법 등을 익혀보게 되었고 아무래도 Model처리는 안하였지만
DB쿼리문과 NODE.JS간에 데이터 정제과정을 겪어본게 프론트엔드 개발자입장으로써는 귀한 경험이 되었다. 블로그도 덕분에 써보게되어서 첨이고 시간도 많이없어서 일단은 되는데로 복습겸, 나의 생각을 적어 보아야겠다
2. DB설계
시나리오 설계와 객체 설계도 했지만, 그때는 구상자체가 어려워서 프로젝트를 진행시에는 많이 바꿨고 하면서 이해가 되었다. 그래도 적지만 이해한거를 잘 지켜야겠다.
테이블은 크게 USERS, PARKING테이블이 있다.
애초에 DB설정?(FK, PK, Default, Extra)를 잘못 걸어서 ㅠㅠ
설정하는데도 구글링하면서 몇일 날린거같다ㅋㅋ 음 되는대로 막했었어서 기억이 날란지모르겠지만 삽질의 과정은 이러하다
USERS테이블에 car_number 컬럼에 PK추가,
PARKING 테이블에서 USERS테이블의 car_number FK추가
그로인한 safemode 해제?, index문제, 전체 FK풀고 걸기,
외래키 테이블 확인하기 등
확실히 위 키워드에 대한 정보들(쿼리)은 잘나왔지만 오류를 보고
유추하고 시도할때에 다른 환경들과 맞물려서 어려웠던게 컸던거같다
3. 서버구현
NODE.JS EXPRESS 기반으로 구현했고,
처음이라 되는데로 막해서 그런지 중간에는 정신차렸지만 거의 서버에서 개발하는 나의 모습을 발견했다. 예로 router, 프론트에 띄울 로직, ejs로 데이터 넘겨주기만 계속하다가, 나중에는 클라이언트에서 데이터를 요청하고 받는식으로 결국 짬뽕(?)이 되었지만 다 경험했다고 치자^^
로그인과 회원가입
저번 과제에서 구현을 해봐서 할만할거같았는데 4일정도 걸렸던거 같다ㅋㅋ req.session과 쿼리문들에대해서는 익숙해졌다.
그리고 욕심이 생겨서 로그인과 회원가입을 한페이지에 넣었고 회원가입시 이미 있는 정보이면 문구를 띄워주는것이 목표였고, 어렵지 않다고 생각했다!
하지만 문제는 회원가입을 제출하기를 누르면 로그인의 화면으로 간다는 점이었다
그래서 당황한 나는 css로 제어를 해야겠다고 생각했고
제어할 css 클래스를 서버에서 상태에 맞게 보내주었고
리로드되어도 회원가입 부분이 보여질 수 있게는 하였다
로그인을 하게되면 입차가 되어지게 하였다(DB에 데이터 INSERT)
그리고 그 시간을 INDEX페이지에 띄워지게 작성을하였다
이과정은 서론에서 말한 나중에 추가한것이라 힘들게? ejs로 안넘겨주고
(똑같은 페이지인데 여러 통신을 통해 render를 해줄때 일일이 넘겨줘야하는 수고로움이 발생했어서 힘들게 느꼈던거같다 + 늘어나는 코드양)
프론트 Fetch, Form을 이용하여 클라에서 요청해서 서버에서 Data를 전달받아서 화면에 띄우는 식으로 작성했다
출차요청
입차(로그인)시 나오는 화면이다
출차요청은 그냥 버튼이고, 누를시에 출차 시간과 현재금액, 30분 미만 주차일때 총금액이 나오는 동작이다
콘솔을 하나하나 찍어본 흔적.. ㅎㅎ 덕분에 다시 보며 공부를했다
입차시간과 출차시간을 SELECT하는 쿼리의 result이다
처음에는 result[0]["in_time]했는데 불러와지지않아서
엄청난 삽질끝에 result를 json문자열로 변환했다
근데 문장에 답이있듯이 배열인줄알고 인데그 0번째를 출력해봤더니
아니나 다를까 "["가 출력이 된것이었다. ㅎㅎ
그래서 json.parse를하고 배열과 객체의 형식으로 불러오니 출력이 잘되었다. 나중에도 실수할거같아서 꼭 기억해야겠다!
이 부분을 하면서 느낀것은 여유도없었지만 이 js파일은 routes폴더안에 있구 query문과 로직도 함께 있다보니 코드가 엄청길어졌다..
즉 나중에 언젠가는 MVC패턴으로 리팩토링할 창창한 미래가 보였다^^
4.프론트 처리
무사히 서버로부터 데이터를 넘겨받았다(계산이 되서 온거든 아니든)
response값을 JSON형식으로 변환하고 return을 하게되면
다음 then의 data값으로 보내준다!! (fetch문법에 관한 내용이니 직접 참고해보자)
그다음에는 객체를 참조하는 방법으로 값을 저장하고 DOM 요소에 값을 변경하는 방법으로 상대적으로 쉽고 간편하게 끝냈다
프론트처리를 하면서 역할을 확실히 나눴고 좀 더 익숙하며, 쉽게 끝냈던 거 같다!!
5. 추가해야할것들
결과 페이지에서 뒤로가기를 막기!
index페이지에서 리로드하면 입차시간도 리로드되는데 막기!!
리이이이패애애액토오오오리리리잉 등
20210413 figma프로토타입 https://www.figma.com/file/qHeBp8aOpVin8J6OZLpB0b/Untitled?node-id=0%3A1
