사전캠프를 통해 배웠던 내용들과 그 내용들 바탕으로 만든 프로젝트를 최종 보고서 형태로 작성하였습니다.Chater 01 - Beginnings 1. 자기소개  안녕하세요 ! 백엔드 개발자를 꿈꾸는 박신영입니다. 개발 지식의 깊이가 아직 부족하다고 판단하여, 이를 극복하고 더 깊이 있는 역량을 쌓기 위해 Spring Track에 참여하게 되었습니다.작은 것 부터 하나하나 쌓아가겠습니다 😎저는 끊임없이 배우고 성장하는 개발자가 되고 싶습니다. 지금까지 HTML/CSS/JavaScript를  간단한 웹 화면을 구현해 본 경험이 있으며,  SQLD 및 ADSP, 정보처리기사, 빅데이터분석기사 자격증을 취득하며 데이터베이스와 프로그래밍 역량을 쌓아왔습니다. 이러한 경험을 바탕으로, 앞으로는 웹 백엔드 개발에 집..

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