-
학교 근처 맛집 웹페이지를 만들면서 많은 부분을 배우고 팁을 얻어갈 수 있었다.
그리고 맛집리스트화면에서 많은 다양한 오류(?)를 만났는데, 어떤 문제였는지 어떻게 해결했는지에 대해 나눠보려고 한다.
[팁]
1. 코드를 짤때 중간중간 꼭 주석을 달자!
초반에는 작성한 코드가 많이 없어 내용을 다 기억할 수 있어 필요성을 못 느낄 수 도 있다. 하지만 점점 코드가 쌓여가고 여러 파일을 작성하게 되면서 "음.... 내가 이 부분을 왜 이렇게 작성했더라..." 이런 생각이 들 때가 찾아온다. 회의시간 피드백을 하면서 "이 부분 어떻게 작성했어?" 물어보면 주석이 없는 경우 찾느라 "어...잠깐만..." 이렇게 말하는 시간이 늘어난다. 나중에 한 번에 달 생각하지 말고 그때그때 작성해두는 습관을 만들자!
2. 안될 땐 한 번 껐다 켜보자...
이번 프로젝트는 vscode를 이용해 작성했다. 코드를 수정하고 다시 화면을 열어 확인해보면 적용이 안된 경우가 종종 생긴다. 처음에는 당연히 내 코드가 잘못된 줄 알고 "왜 안되지..." 이러면 다시 고민하는 시간만 늘어났다. 나중에 알고보니 화면을 다시 실행시켰더라도 코드 반영이 안된 것이었다. ( 나는 자주 경험했다...) 그럴땐 vscode도 다시 껐다 실행해보고 윈도우 창도 끄고 다시 실행시켜보자...
3. 중복되는 html 코드 모으기!
웹페이지를 만들면 각 화면의 코드마다 중복되는 부분이 생긴다. 주로 글씨체나 글씨 크기등과 같은 header부분의 내용이나 footer, navigation bar등에서 중복되는 코드가 자주 작성되게된다. 이런 경우 중복되는 부분들을 하나의 html모을 수 있다, 나머지 화면의 파일에서는 모아둔 html을 확장하는 방법으로 작성한다.
<index.html의 일부> 우리는 index.html 파일을 하나 만들어 중복되는 코드를 작성해둔 후
<맛집리스트화면 중 일부> 다른 각 화면에 index.html 작성해 둔 중복되는 코드는 삭제하고 확장받아 사용하였다.
그리고 각 화면마다 다른부분은
{% block sectionheader %}...{% endblock sectionheader %}이 안에 작성하였다. 그리고 꼭
{% extends "index.html" %}확장받은 이 부분을 작성해야한다!
[디버깅]
맛집리스트화면에서 다양한 오류(?)중 하나가 맛집을 데이터베이스에 저장된 키워드로 sorting하는 과정이였다...
<맛집리스트화면> 위의 사진과 같은 키워드 sorting하기 전 화면에서 카테고리 밀 키워드 버튼을 누르면
요렇게 select 요소가 활성화된다. 이 중 option( ex. 분위기 좋은)을 누르면 데이터 중 해당 키워드를 가진 데이터들만 가져와 화면에 보여주게된다. 그런데 여기서 문제가 발생했다.....
새로운 페이지가 로딩되었을때 select요소에 선택한 키워드로 고정되어있어야하는데 초기 키워드로 고정되어있다. 데이터들은 분류하여 잘 가져오졌는데 뭐가 문제일까.....
<페이지 로딩시 select박스에 선택한 값 유지되도록 하는 코드> 
< 수정 전_ select 태그 관련 html> 분명 박스안에 값 고정되도록 하는 코드를 작성했는데 왜 안되는 걸까...
구글링 해보면서 "한글이여서 안되는걸까?" 라는 의심이 들었다. 한글에서 오류가 나는거라면 All요소에서는 되어야한다. 다시 실행해본 결과 All은 된다... 한글인식이 문제라고 생각하던 중 팀원에게서 해결했다는 소식을 들었다!
"그거 화면에 나오는 내용을 데이터베이스에 넘긴 키워드랑 똑같이쓰면 고정돼!!!"
< 수정 후 html > 위의 오른쪽 빨간박스 부분을 수정하고 다시 실행시켜보았다.
< 수정 후 맛집리스트화면 > 하핫....이제 된다.... '#' 이거 하나 차이였을 뿐인데..
혹시
$(document).ready(function(){ ...});이 함수를 script로 작성했는데도 select option을 누르고 데이터를 불러왔는데 박스 안에 값이 고정이 안된다면
데이터베이스에 저장한 값과 select요소의 option의 내용이 같은지 확인해보길 바란다!