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. 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. 웹 프로젝트 기획: 목표 설정과 핵심 기능 정리하기 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('안녕..

문제 : 🦚 예산이 가장 큰 프로젝트는? 1. 각 직원이 속한 부서에서 가장 높은 월급을 받는 직원들만 포함된 결과를 조회하는 SQL 쿼리를 작성해주세요.a. 출력 결과에는 직원의 이름, 부서, 그리고 월급이 포함되어야 합니다.b. 기대 결과NameDepartmentSalaryAliceHR5000FrankIT7200EveSales55002. 직원이 참여한 프로젝트 중 예산이 10,000 이상인 프로젝트만을 조회하는 SQL 쿼리를 작성해주세요.a. 출력 결과에는 직원 이름, 프로젝트 이름, 그리고 프로젝트 예산이 포함되어야 합니다.b. 답지 오류로 일부 수정Name ProjectName BudgetAlice Alpha 10000Bob Alpha10000Charlie Beta 15000Frank Beta ..

문제 : 🎨 데이터 속 김서방 찾기상황: 여러분들은 스파르타코딩클럽의 분석가로 취직했습니다. DBeaver를 테스트 해볼 겸 “김”씨로 시작하는 이용자들 수를 세어 보기로 했습니다.name_cnt: “김”씨 성을 가지고 있는 교육생의 수따로 설명할 코드가 없어 정답만 표시하겠다. SELECT count(*) as name_cntFROM users where name Like "김**" 이 문제에 대합 해답을 포스터 한 거 같았는데. 까먹었나보다.. 게시글에 없길래 올렸다.

문제 : 🏆 가장 많이 팔린 품목은?1. 각 고객이 구매한 모든 제품의 총 금액을 계산하고, 고객 이름, 총 구매 금액, 주문 수를 출력하는 SQL 쿼리를 작성해주세요. CustomerNameTotalAmountOrderCountAlice28002Bob11502Charlie8002> 답안에 오류가 있어 따로 수정.2. 각 제품 카테고리별로 가장 많이 팔린 제품의 이름과 총 판매량을 조회하는 SQL 쿼리를 작성해주세요.CategoryTop_ProductTotalSoldElectronicsLaptop3HomeCoffee Maker3 1. 알고리즘1) 각 고객이 구매한 모든 제품의 총 금액을 계산하고, 고객 이름, 총 구매 금액, 주문 수를 출력- 1단계: 먼저 Orders 와 Product 테이블을 합친다..

문제 : 💸가장 높은 월급을 받는 직원은?1. 각 직원의 이름, 부서, 월급, 그리고 그 직원이 속한 부서에서 가장 높은 월급을 받고 있는 직원의 이름과 월급을 조회하는 SQL 쿼리를 작성해주세요.기대사항 :부서별로 평균 월급이 가장 높은 부서의 이름과 해당 부서의 평균 월급을 조회하는 SQL 쿼리를 작성해주세요.기대사항:1. 개념 배우기WITH AS 문- 공통 테이블 표현식(CTE, Common Table Expression) 을 정의할 때 사용되며, 서브쿼리를 깔끔하게 정리하고 재사용할 수 있게 해준다.- WITH 안에서 일시적인 테이블(CTE) 을 만들고, 메인 SELECT 문에서 이를 참조하는 방식.- 복잡한 쿼리를 쪼개어 가독성을 높이고, 동일한 서브쿼리를 여러 번 실행하는 비효율을 방지.WI..