프로젝트를 시작할 당시에는 정말 막막했지만, 프로젝트를 계속 진행하면서 프로젝트 초반부터 알았다면 유용했을 몇 가지 팁들을 깨달을 수 있었고, 여러 오류를 해결해나가며 프로젝트를 성공적으로 마무리할 수 있었다. 오늘은 프로젝트 진행시 알아두면 좋을 몇 가지 꿀팁과 디버깅 과정들을 소개해보려한다.
📌HTML/CSS/JS 작업 시 이용하면 좋은 사이트 추천
프로젝트는 flask, firebase 등도 이용해야 하기 때문에 구름 IDE를 기반으로 작업하였다. 하지만, 프로젝트 초반 화면 구성 시, 구름IDE 화면에서 매번 저장을 누르고 변경사항을 확인하는 것은 번거로웠다. 특히, 프로젝트 중반부터 구름IDE에서는 변경사항이 바로 반영되지 않고 느리게 반영되는 현상이 나타나여 더욱 작업이 힘들어졌다. 이때, Codepen 사이트를 활용하여 HTML, CSS, JS 파일을 작업할 때 편하게 사용할 수 있었다.
위 화면처럼, Codepen 사이트에서는 HTML, CSS, JSS가 한 화면에서 모두 작성될 수 있도록 되어 있어 여러 파일을 왔다갔다 하며 작업하는 불편함을 줄일 수 있었다. 또한, 코드가 변경되면 자동저장되어 바로 화면에 표시해주기 때문에 변경사항을 확인하기도 매우 편리했다. HTML, CSS, JS 파일을 작업할 때만큼은 위 사이트를 이용하면 매우 좋은 것 같다.
📌HTML/CSS 작업 과정 살펴보기
프론트엔드 구현 시, 작성한 코드가 어떻게 반영되고 있는지를 개발자도구를 통하여 확인해가며 수정해보면 오류를 쉽게 찾을 수 있다.
설정 > 기타도구 > 개발자도구 > 요소
단축키: Ctrl + Shift + I
작성한 코드를 클릭하면 해당 부분이 어떻게 반영되고 있는지 화면에 표시된다.
📌구름 IDE CSS 화면 반영 오류 해결
구름IDE에서 CSS파일을 아무리 수정하여도 화면에는 반영되지 않는 현상이 나타났다. 처음에는 코드 오류인줄 알았으나 다른 구름 IDE를 사용하는 팀원들에게도 나타났고, vscode를 이용하여 작업하면 정상 작동되었다. 구름에서 이 문제를 해결하는 방법은 다음과 같다.
설정 > 개인 정보 보호 및 보안 > 인터넷 사용 기록 삭제 > 캐시된 이미지 파일 및 선택 > 인터넷 사용 기록 삭제
단축키: Ctrl+Shift+Del 을 누르면 위 창으로 바로 연결된다.
📌firebase DB 오류
변경사항 없이 잘 작동되던 코드에서 갑자기 firebase 데이터베이스에서 데이터를 받아오는 과정에 오류가 난다면, firebase에 입력된 데이터 자체에 오류가 있을 수도 있다.
위와 같이, 데이터베이스에서 데이터를 받아와야 하는 모든 화면에서 오류가 발생하였다.
firebase에 입력된 데이터베이스를 확인해보니, 특정 데이터에서 restaurant 안에 추가되어 있어야 할 식당정보 값들이 restaurant과 동일한 선상에 추가된 것을 볼 수 있었다. 이 데이터를 삭제하니 다시 정상 작동되었다.
오류가 발생한 원인을 찾아보니, 식당 정보 수정 기능을 구현하던 중 수정 전 이름이 아닌 수정 후 이름을 기준으로 데이터베이스에 접근해서 생긴 오류였다. 따라서, 아래와 같이 수정 전의 식당 이름을 변수에 따로 저장해둠으로써 해결할 수 있었다.
(12번째 줄에서, 숨겨진 input을 사용하여 originalname 이라는 변수에 원래 이름을 저장해두고 있다.)
(170번째, 172번째 줄에서, 식당의 수정 전 정보를 가져오는 함수를 호출할 때 originalname을 사용하고 있다.)
