Sintory의 웹 개발 블로그

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() { ..

1. 웹의 동작 개념1. 클라이언트(브라우저)는 주소를 통해 API로 요청을 보내고, 서버에게 받은 HTML(데이터) 파일을 그려주는 역할을 함.2. 요청은 API라는 창구에 보냄. (정해진 약속대로 요청을 보내는 것) ex: 주소창에 주소를 입력하고 엔터를 입력3. 서버는 API 요청에 맞는 HTML 파일을 클라이언트에게 돌려줌.2. HTML- html 은 크게 사이에 아래를 넣으면 끝- Query에서는 해당 함수 정의와 사용 방식이 변하지 않으며, jQuery의 이벤트 핸들러나 다른 기능 안에서 JavaScript 함수를 사용할 수 있습니다.document.getElementById('hello').innerHTML = '안녕';위에 코드를 아래처럼 쓸 수 있다.$('#hello').html('안녕..

문제 시험 점수를 입력받아 90 ~ 100점은 A, 80 ~ 89점은 B, 70 ~ 79점은 C, 60 ~ 69점은 D, 나머지 점수는 F를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 시험 점수가 주어진다. 시험 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다. 출력 시험 성적을 출력한다. 예제 입력100예제 출력 Apackage exam.Step02;import java.util.Scanner;public class Exam9498 { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int A = scanner.nextInt(); if (A>=90) { Sys..

문제 두 정수 A와 B가 주어졌을 때, A와 B를 비교하는 프로그램을 작성하시오. 입력 첫째 줄에 A와 B가 주어진다. A와 B는 공백 한 칸으로 구분되어져 있다. 출력 첫째 줄에 다음 세 가지 중 하나를 출력한다. A가 B보다 큰 경우에는 '>'를 출력한다. A가 B보다 작은 경우에는 'A와 B가 같은 경우에는 '=='를 출력한다.제한 -10,000 ≤ A, B ≤ 10,000예제 입력1 2예제 출력package exam.Step02;import java.util.Scanner;public class Exam1330 { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int A = scann..