분류 전체보기
-
[맛집 페이지 제작 프로젝트] 팝업창 구현 및 팝업창에서 부모창으로 데이터 넘기기카테고리 없음 2022. 12. 16. 23:51
#frontend #팝업창 #부모창 #개발 #javascript #css #html #python #flask 개요 프로젝트 중 대표메뉴 등록 화면에서 팝업창을 띄우고, 팝업창으로부터 부모창이 데이터를 전달받도록 구현해야 할 일이 있었다. 그때 어떻게 구현했었는지에 대하여 작성할 계획이다. 우선 당시 구현해야했던 구체적인 업무는 다음과 같다. 1. 부모창에서 알레르기 체크박스를 클릭 시 알레르기 정보를 선택하는 팝업창을 띄움 2. 팝업창에서 알레르기 정보 선택 후 등록 버튼 클릭 3. 팝업창이 종료되며, 팝업창에서 선택했던 알레르기 정보들이 부모창의 input 박스에 표시됨 +) 팝업창에서 등록 버튼이 아닌 초기화 버튼을 누를 시, 체크박스가 해제되며 알레르기 정보 또한 초기화됨 물론 여기서 말하는 부모..
-
카카오맵 api - 카테고리 별로 지도에 마커 표시하기카테고리 없음 2022. 12. 16. 23:03
📌목차 1. 카카오맵 지도 생성하기 2. firebase에서 데이터 불러오기 3. 주소로 좌표 검색하기 함수 사용 이번에 오픈sw플랫폼이라는 과목에서 맛집 웹사이트를 만들면서 카카오맵 api를 사용하게 되었다. 이전에 React로 카카오맵을 잠깐 사용해봤을 때 많이 어려웠고 오류가 났어서 이번에 순수 javascript로 카카오맵 api를 건드려보는 것이 내겐 큰 도전이었다. 결론적으로 구현한 화면은 이렇다. 탭에서 카테고리를 클릭하면 그에 맞는 마커들이 띄워지고, 마커를 hover하면 맛집 이름이 뜬다. 추가적으로 마커를 클릭하게 되면 맛집 세부화면으로 이동하게 된다. 지도 화면을 구현하면서 가장 난항을 겪었던 부분이 크게 2가지가 있었는데, 첫 번째는 firebase와 javascript를 연동하는 ..
-
[팁/ 디버깅]카테고리 없음 2022. 12. 16. 21:22
학교 근처 맛집 웹페이지를 만들면서 많은 부분을 배우고 팁을 얻어갈 수 있었다. 그리고 맛집리스트화면에서 많은 다양한 오류(?)를 만났는데, 어떤 문제였는지 어떻게 해결했는지에 대해 나눠보려고 한다. [팁] 1. 코드를 짤때 중간중간 꼭 주석을 달자! 초반에는 작성한 코드가 많이 없어 내용을 다 기억할 수 있어 필요성을 못 느낄 수 도 있다. 하지만 점점 코드가 쌓여가고 여러 파일을 작성하게 되면서 "음.... 내가 이 부분을 왜 이렇게 작성했더라..." 이런 생각이 들 때가 찾아온다. 회의시간 피드백을 하면서 "이 부분 어떻게 작성했어?" 물어보면 주석이 없는 경우 찾느라 "어...잠깐만..." 이렇게 말하는 시간이 늘어난다. 나중에 한 번에 달 생각하지 말고 그때그때 작성해두는 습관을 만들자! 2. ..
-
기술 블로그(개념part)카테고리 없음 2022. 12. 16. 20:53
HTML? Hypertext Markup Language로 말그대로 페이지들 사이의 링크를 정의해주는 하이퍼텍스트와 웹페이지의 구조를 정의하는 마크업 언어 (태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지)로 이루어진다. (웹페이지의 뼈대) CSS? Cascading Style Sheets로 웹페이지에 다양한 스타일을 적용할 수 있도록 지원(웹페이지의 decoration)하는 규칙 기반 언어이다. JavaScript? 사용자와의 상호작용을 지원하고 Node.js와 함께 서버프로그래밍에도 사용(웹페이지의 동작)하는 프로그래밍 언어이다. 크게 3가지 방법이 있다. 1. 내부 CSS 2. 인라인 CSS 3. 외부 CSS *HTML 코드가 길 때는 내부 CSS보다 외부 CSS로 작성하는 방법..
-
Visual Studio Code에서 Firebase Realtime Database 사용하기카테고리 없음 2022. 12. 16. 20:12
이번 글에서는 Visual Studio Code에서 Firebase Realtime Database를 사용하는 법을 다루고자 한다. Firebase Realtime Database란? Google이 개발한 NoSQL 데이터 베이스로 JSON 포멧의 데이터가 실시간으로 저장 및 동기화된다. 웹이나 모바일 앱 제한 없이 사용 가능하다. 그렇다면, 구체적인 사용 방법은? Step by step으로 따라가 보자! 1. Firebase 홈페이지에서 Firebase Realtime Database 생성하기 2. Visual Studio Code에서 Pyrebase 설치하고 Firebase auth 파일 생성하기 3. DB handler로 데이터베이스 연결하고 Firebase에 db 넘겨주기 1. Firebase 홈..