Sintory의 웹 개발 블로그

*) 말만 3일차지 5일차이다 😎1. 진행중인 웹 페이지 결과물- 열심히 며칠간 뚝딱 뚝딱 만들다 보니, 아래와 같이 나오게 되었다.- 나름 귀엽게 잘 나온거 같다 😺 2일차와 다르게 색깔도 변경된 걸 볼 수 있다 !- Todo 와 Done 도 구분되어서 만들었기도 하다 😋- 데이터 수정, 삭제, 업데이트도 완료했다. 🤪 2. 주말부터 현재까지 완료한 부분2025.02.08 - [프로젝트/ToDoApp프로젝트-FireBase] - [ToDoApp-Firebase] Web 구현 01 [ToDoApp-Firebase] Web 구현 011. 간단한 HTML 제작하기크게 toast-container 과 container-full 로 분리했다.toast-container 에는 toast가 실행될 div를 ..

1. 상황- modal이 잘 작동 되었다. 영상을 한번 보겠다. - 잘 작동되기만 하면은 문제 없을 줄 알았는데 웹 콘솔에 이상한 에러가 생겼다. Blocked aria-hidden on an element because its descendant retained focus.The focus must not be hidden from assistive technology users.Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section ..

안내 메시지도 꾸미고 싶은 마음에 bootstrap 에 있는 Toast와 Modal을 사용해보기로했다.토스트와 모달을 동적으로 삽입할 수 있는 방법에 대해서 포스팅하고자 한다.📂 링크 가져오기 - HTML 의 head 부분에 위 코드를 넣어준다.✅ Toast 삽입 방법1️⃣ Toast 공간 지정 및 버튼 지정- html 의 부분안에 container을 하나 만들어 줄 것이다. Toast ...2️⃣ 모듈 설정- jquery 를 사용하는데 type="module" 로 사용할 것이다. HTML head 부분에 아래의 코드를 넣어준다. 3️⃣ 함수 만들기- action 마다 HTML코드를 작성하는 것이 아니라, 동적으로 작동할 수 있게끔 할 것이다.- 아래 사진과..

1. 간단한 HTML 제작하기크게 toast-container 과 container-full 로 분리했다.toast-container 에는 toast가 실행될 div를 만들어 두었다.container-full 가 실제 실행코드들로 보면 된다.container-full 에는 Head 부분 과 Btn 부분 과 Data 부분 으로 구성되어 있다.Todo와 Done 을 구분하기 위해 다른 웹 페이지 test.html 을 만들었다. test.html도 아래의 html과 유사해 생략하였다.  † To Do App † 오늘 서울의 온도는 °C 이며, 날씨는 입니다..

1. 웹 프로젝트 기획: 목표 설정과 핵심 기능 정리하기1) 프로젝트 목적과 목표 설정- 이번 프로젝트는 직관적이고 간편한 일정 관리 기능을 제공하는 TodoApp을 개발하는 것을 목표로 합니다.- 사용자가 할 일을 쉽게 추가하고, 수정 및 삭제할 수 있도록 설계하여 사용자에게 일정 관리 경험을 제공합니다.- 또한, 실시간 날씨 정보를 연동하여 일정 계획 시 날씨에 따른 고려 요소를 반영할 수 있도록 합니다.> 이 프로젝트를 통해 일정 관리를 할 수 있는 직관적인 TodoApp을 개발하는 것이 목표입니다. 🚀 2) 핵심 기능 정리- 할 일 관리 기능: 사용자는 할 일을 추가, 수정, 삭제할 수 있으며, 완료 여부를 체크할 수 있습니다.- 데이터 저장 및 관리: 입력된 일정 데이터는 데이터베이스(MySQ..

1. API 키 발급 후, 재연동오늘 이슈가 있었던 Firebse의 API 키를 새로 발급 받았다.2. 삭제버튼- 어제 하지 못했던 삭제버튼을 다시 작성했다.- Checkbox 타입일 경우에는 JS 가 독립적으로 인식하나, Button요소는 그렇지 못하기 때문에 $().click 이런식으로 접근하면 단 하나의 버튼요소만 접근 하게 된다.- 그리하여 $(document).on('click','.deleteBtn', func (){}) 이런식으로 document에 접근해서 코드해야한다.- 실수로 삭제할 경우를 대비해서 window.confirm 이라는 것도 받았다.$(document).on('click', '.deleteBtn', async function () { // ID 가져오고 let ch..

에러는 아니지만, 나름 중요한 부분이라 에러 부분에 포스팅해겠다.1. 상황- Firebase에서 데이터를 관리하던 도중, 왠지는 모르겠으나 내가 넣은 적도 없는 데이터가 추가되어 있었다.- 해킹 당한 건가? 어떻게 된거지? 라는 여러가지 생각이 들었다. - 물론, 구글에 결제수단을 등록하지 않았기 때문에 Spark(무료) 요금제 상태로 유지되어 있다. 그래서 무료 한도내에서만 사용 가능하게끔 되어 있어 큰 문제는 없지만! 보안 문제는 해결해야 할 거 같았다.  2. 원인분석- API키가 노출이 되어야지만, 이렇게 접근할 수 있다.- 최근에 강의를 따라하며 git hub에 배포한 것이 문제인 것 같다. - 한 페이지를 그대로 배포한 것이라 따로 ignore 을 하지 못한게 화재인 거 같다. 3. 해결방법-..

1. 웹 프로젝트 기획: 목표 설정과 핵심 기능 정리하기 1) 프로젝트 목적과 목표 설정- TodoApp 을 만들것이다. 2) 핵심 기능 정리- 일정 추가, 수정, 삭제가 가능하게끔 할것이다.3) 간단한 화면 설계  2. 웹 프로젝트 설계: 프론트엔드, 백엔드, 데이터베이스 구조1) 프론트엔드 디자인- 3-5일 정도로 하는 간단한 프로젝트 이기 때문에, 간단하게 html, css, js + bootstrap 으로만 디자인 할 예정이다. 2) 백엔드 설계- FireBase만을 이용할 것이다.3) 데이터베이스- NonSql 이라 따로 생각하지 않겠다. 3. 구현하기1) 간단한 html 만들기  -> 추후에 꾸며줄 예정이다.2) firebase db랑 연결해주기// Firebase SDK 라이브러리 가져오기i..

1. FireBase 라이브러리 세팅2. addDocs 데이터를 추가- 먼저 데이터를 읽어오구- 그 데이터를 딕셔너리로 만들어 준 후- 딕셔너리를 addDoc로 넣어주기. await addDoc(collection(db, ""), doc)$("#id").click(async function () { let data = ${"#id"}.val() let doc = { }; await addDoc(collection(db, ""), doc)});- async와 await는 JavaScript에서 비동기 작업을 처리하기 위한 키워드. 이들은 비동기적인 코드를 보다 간결하고 동기적인 스타일로 작성할 수 있도록 도와줍니다.3. getDocs 데이터 가져오기- 가져올려면, getDocs 를 해야함.-..

- TIL 이라 일단은 간단하게 쓴 후에 내가 추후에 필요할 거 같은 부분은 따로 스킵해두어야겠다.3주차1. Warming-up- Bootstrap : 남들이 만든 HTML 코드임- jQery : 남들이 만든 코드 모음, 라이브러리. JavaScript를 더욱 쉽게 조작할 수 있음.2. togle- 보이고 안 보이고 하는 것. display:none 을 해준다고 보면 됨.3. Input 요소 추가하기- 먼저 let으로 값을 선언 후 > $('#id') 를 통해 val()를 가져온다.- 그후 let temp_html 에 넣을 html 코드를 넣어준 후- 넣고싶은 갑을 사이사이에 ${} 해주면 된다.- 마지막으로 $('#id').append() 해주면 추가 된다.function makeCard() { ..