남민우의 공부 블로그

내일배움캠프 팀 프로젝트의 일환으로, 팀을 소개하는 페이지를 만들기로 하였다.그 중 방명록을 담당하였고, 그 기록을 남긴다. 기능기초적인 기능들로만 구성할 예정이다.[이름, 내용] 을 입력해 기록하기 버튼을 누르면 본문에 내용이 담기고,추가적으로 [기록한 날짜, 시간]을 받아와서 같이 저장시킬 것이다. 다음과 같이 제작하였다.추가적으로, 기록하기 중 이름/내용을 작성하지 않았을 경우 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

문제다음의 조건으로 배달시간이 늦었는지 판단하는 값을 만들어라* 주중 : 25분 이상* 주말 : 30분 이상1. SQL 문의 기본 구조로 시작2. 조건을 여러번 적용할 때 if, case 문 중 어떤 것을 이용할지 결정3. 조건에 '주중, 주말' 조건과 '배달시간' 조건을 동시에 줄 때 사용 할 논리연산자 결정 풀이1번부터 내용을 보면 SQL의 기본 구조로 시작하라고 안내한다.배달 시간을 판단하기 위한 문제이므로 테이블은 'food_orders' 를 이용한다.SELECT *FROM food_orders fo 2번에서는 조건을 여러번 적용할 때, if와 case 문 중 어떤 것을 사용하겠냐 묻고 있는데이는 지난번 배웠던 것처럼 조건이 여러개일 경우는 case 문을 사용하면 된다. 코드를 작성하면서 조건문의..

내일배움캠프 학습/SQL 2024. 10. 25. 00:29

SQL 코드를 작성하면서, 숫자 가공이나 문자 출력 시 자주 발생할 수 있는 오류에 관해서이다.본인은 맞게 작성했다고 생각할 수 있지만 Data Type Error 라는 문구와 함께 에러가 발생하는 경우가 있다. DATA TYPE 이란?먼저 'Data Type'은 쉽게 설명해 '자료형' 을 의미한다.처음 테이블을 만들면서 컬럼을 만들고 그 자료형을 작성한다.CREATE TABLE (id INT,name VARCHAR(50), age INT);이와 같이 테이블을 만들 때 id의 경우 Data Type 이 int, name의 경우는 Varchar 인 것이다. 따라서 Data Type 에러는 이 데이터 타입에 맞지 않게 코드를 작성했을 경우 발생하는 에러이다. 이 Data Type을 출력 결과에서 쉽게 확..

내일배움캠프 학습/SQL 2024. 10. 23. 18:26