남민우의 공부 블로그

지난 시간에 만들었던 방명록을 이어서 제작한다.먼저 버그 사항부터 수정하고 시작한다데이터 Read 순서 정렬let docs = await getDocs(query(collection(db, "DB_guestLog"), orderBy("date", "asc"), orderBy("hour", "desc"), orderBy("minu", "desc")));코드를 다음과 같이 수정하였다.date를 asc 로만 받아올 때 같은 날짜 안에 시간이 다를 경우 의도하지 않은 순서로 정렬되는 현상을 고치기 위해 hour, minu 필드를 추가, 각각 desc 로 받도록 하였다. desc 로 진행한 이유는 날짜와 동일하게 asc 로 정렬할 경우 순서가 반대로 적용되어 내림차순인 desc 로 정렬한 후 받아왔다.hour 에..

내일배움캠프 학습/HTML 2024. 10. 31. 22:34

내일배움캠프 팀 프로젝트의 일환으로, 팀을 소개하는 페이지를 만들기로 하였다.그 중 방명록을 담당하였고, 그 기록을 남긴다. 기능기초적인 기능들로만 구성할 예정이다.[이름, 내용] 을 입력해 기록하기 버튼을 누르면 본문에 내용이 담기고,추가적으로 [기록한 날짜, 시간]을 받아와서 같이 저장시킬 것이다. 다음과 같이 제작하였다.추가적으로, 기록하기 중 이름/내용을 작성하지 않았을 경우 alert() 를 통해 빈 항목을 알려주기로 하였다. 답글 기능은 현재 개발 중에 있다. 날짜 받아오기let date = new Date();let date_Hour = date.getHours();let jyp = 'Am'if (date_Hour >= 12) { jyp = 'Pm'; if (date_Hour > 12) da..

내일배움캠프 학습/HTML 2024. 10. 30. 20:46

기존에 만들었던 BCFlix 프로젝트를 활용, FireStore DataBase 연동과정까지는 동일하게 진행했다고 가정한다. 배포이전에 만들었던 프로젝트 - 브라우저를 열어보면file:///C:/Users/user/Desktop/BootCamp/BCFlix/Index.html다음과 같이 '파일'의 형태인 것을 알 수 있다.하지만 우리가 아는 일반적인 주소는 https:// 등과 같은 형태를 이루고 있다. 이 http 를 '프로토콜' 이라고 부른다.데이터 통신 규약 이라는 말로, 기기 간 데이터를 주고 받을 때 정해진 규약 이라고 볼 수 있다.더보기http 와 https 로 나뉜 경우를 봤을 수 있는데, 이 s 는 Security 의 약자로, 더 보안이 강화되었다는 의미라고 한다.이러한 프로토콜을 사용해 ..

내일배움캠프 학습/HTML 2024. 10. 29. 21:12

지난 시간에 만들었던 브라우저는 데이터를 저장하지 못해 새로고침을 하면 기록했던 데이터가 모두 리셋되는 것을 볼 수 있었다.이번 시간에는 이러한 데이터 저장을 위해 구글의 FireBase 를 활용하는 실습을 진행한다. FireBase구글이 만들어둔 백앤드 플랫폼이다.클라우드 서비스처럼 미리 만들어진 플랫폼을 개발한 프론트앤드에 적용시켜, 기능 구현이 더 집중할 수 있도록 한다.https://firebase.google.com/?hl=ko Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.goo..

내일배움캠프 학습/HTML 2024. 10. 29. 20:58

이전 회차에서 실습으로 진행했던 '나만의 추억 앨범 만들기' 코드를 활용하여 진행한다.새 앨범을 만드는 기능과, 앨범 기록 칸의 On/Off 하는 토글 기능을 만든다. 실습 진행JS에는 Toggle() 함수를 통해 특정 객체의 On/Off 기능을 추가할 수 있다.function openclose(){ $('#PostBox').toggle();} 해당 기능을 사용하면, 웹페이지에서 PostBox 가 사라지는데, 이는 실제로 사라진 것이 아니다.F12를 통해 확인하면 쉽게 알 수 있는데, display 의 값이 none 이 된 것 뿐, 데이터는 그대로 유지되고 있다. 값을 받아올 때 : Val()function MakeCard(){ let images = $('#image').val(); alert(imag..

내일배움캠프 학습/HTML 2024. 10. 28. 23:11

자바스크립트(이하 js)는 웹페이지에 추가적인 동작, 예를 들어 검색창을 클릭하면 연관 검색어가 나오거나 아이콘을 클릭하면 다른 사이트로 이동되거나 하는 등의 움직임을 더해주기 위해 사용된다. CSS까지 적용된 코드에 이어서 실습을 진행했다. BCFlix Home Series Moive Saves ..

내일배움캠프 학습/HTML 2024. 10. 28. 22:51

웹 브라우저 작동 원리예를 들어, naver.com 을 통해 사이트로 들어가면, 해당 주소에서 데이터를 받아 우리 컴퓨터의 브라우저로 받아온다.클라이언트는 데이터를 요청, 서버는 데이터를 제공하는 방식으로 브라우저의 작동이 이루어진다.구성은1. HTML : 뼈대의 역할2. CSS : 꾸미기의 역할3. JavaScript : 웹페이지의 움직임 역할로 되어 있다. 이번에 진행한 강의에서는 개발 환경으로 'VSCode'를 사용하였다. HTMLHTML은 웹페이지의 모습을 구성하기 위한 언어로, 크게 Head 와 Body 로 나뉜다.Head 에는 Body 에 들어가지 않는 모든 부분을 담당하며 CSS 와 JS도 이에 속한다.Body 는 눈에 보이는 부분을 구성하며, 웹 페이지의 여러 배치, 디자인, 글귀 등 페이..

내일배움캠프 학습/HTML 2024. 10. 28. 22:22