Sintory의 웹 개발 블로그

- Web 프로젝트를 하나 만들고 보니 동기, 비동기를 알아야 겠다는 생각이 들었다.- 백엔드 작업자들도 동기, 비동기 작업을 필수로 알아야한다.- 백엔드는 클라이언트 요청을 받아 응답을 줘야한다. 동기 방식으로 처리하면 요청이 끝날 때 까지 다음 요청을 받지 못해 성능이 낮아질 수 있다. 그러나 비동기 방식을 이용하여 여러 요청을 동시에 처리하면 처리 속도가 훨씬 빨라질 것이다.- DB 작업을 예시로 생각하면 쉽다. 데이터를 저장하고 조회할 때, 다른 요청을 처리할 수 있어야한다. 동기 작업이라면 병목현상이 생길 수 있지만, 비동기 작업이라면 여러 개의 DB 요청을 동시에 처리할 수 있을 것이다.✅ 사전 지식1️⃣ 메모리힙- 동적으로 할당된 메모리(객체, 함수, 변수 등)가 저장되는 영역이다. 힙은 구..

프로젝트의 마지막 Git 배포를 해보겠다. 아래는 실제 만들어진 웹 사이트이다.직접 데이터 추가, 삭제 가능하니 구경해도 될 거 같다!👉👉 https://sinyoung0403.github.io/Todo_simple/ 👈👈 ✅ Git 연동, 파일 보내기- Git의 Repository 에 접근하려면 먼저 Git 연동을 해야한다.1️⃣ Git 설치- 먼저 Git이 설치되어 있어야 한다. 나는 설치 되어 있어 있고, 연동을 미리 해두었다.2️⃣ VS code 에서 소스 제어라고 되어 있는 부분을 클릭 후 GitHub 게시를 클릭하여 준다.3️⃣ 상단에 뜬 것 중 하나 선택- private 는 비공개 public 은 공개라고 보면 된다.4️⃣ 원하는 파일 선택하기- 나는 test.html만 넣어보겠다. ..

*) 말만 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. 4주차 3 강의 실습2) 음식점의 지역과 평균 배달시간으로 Segmentation 하기.- 단계별로 찾는다. 라고 생각하면 쉽다.- 1단계 - 식당이름, 시도, avg() 평균시간만 추출- 2단계 - 평균 배달시간 별로 그분화.일단은 GROUP BY 절을 사용할때,SELECT restaurant_name, SUBSTR(addr,1,2) as sido, avg(delivery_time)From food_orders fo group by 1,2sido이라는 열을 넣을지 안 넣을지 고민했다.restaurant_name만 기준으로 그룹화됨.SUBSTR(addr,1,2) as "지역"은 SELECT 문에서 사용되지만, GROUP BY에는 포함되지 않았기 때문에 그룹의 대표값(임의의 값)이 반환됨.즉, 같은 ..

01. 3주차 3강의1) replacereplace(col,'현재값','바꿀값')- col 열의 '현재값'을 '바꿀값'으로 바꾸어달라라는 뜻2) substringsubstr(col, 시작위치, 글자수)- 여기서 시작위치는 보통의 코딩과 다르게 1부터 시작이다. (다른 코드에서는 0부터 카운트 되지만 sql은 다름)3) concatconcat('a','b','c', ...)- a와 b, c, ... 를 이어주는 함수.4) 실습실습 1) 서울 지역의 음식 타입별 평균 음식 주문 금액 구하기 (출력: 서울, 타입, 평균금액)SELECT SUBSTR(addr,1,2) as "시도", cuisine_type ,AVG(price)FROM food_orders fo WHERE addr LIKE '%서울%'GROUP ..