전체 글 5

HTML에 Database 연동하기

Firestore Database를 사용한다.Firestore란? : 구글 클라우드 기반 NoSQL데이터베이스이다.Firestore를 왜 사용하는가?(장점) : 사용자가 데이터베이스에 접근하려면 서버를 통해야하고 서버와 통신을 주고받으려면 백엔드 코드를 짜야한다. Firestore는 프로젝트를 만들 때 이 과정을 자동적으로 처리해준다. 또한 백엔드 코드를 짤 필요없이 프론트엔드 지식만으로 데이터베이스를 사용할 수 있게 도와준다.Firestore 단점 : 서버 구축과 백엔드 코드없이 사용한다는 것이 단점이다. 내가 서버나 백엔드 부분을 커스텀할수없다. 1. Firestore Database만들고 적용하기https://console.firebase.google.com/?hl=ko 로그인 - Google 계정..

HTML,CSS,Javascript 2024.10.04

Fetch

Fetch는 무엇인가?=> JavaScript에서 서버와 통신이 가능하게 해주는 매서드다.Fetch를 왜 쓰는가?=> HTML에서 어떠한 정보를 바꾸고 싶을때 화면전체를 바꾸지않고 바꾸고싶은 특정 정보만 바꾸기 위해 사용한다.(만약 특정 정보를 바꾸기 위해 화면 전체를 새로고침할 때 페이지의 용량이 크다면 로딩시간이 길어지고 중복으로 불러오는 데이터가 많아 메모리 소모도 클 것이기 때문이다.)  1. Fetch 연습하기-서울시 미세먼지 데이터(openAPI)를 가지고 연습한다.(딕셔너리 형태)  1)미세먼지 데이터에서 첫번째 데이터를 가져오기fetch(url).then(res => res.json()).then(data => {                console.log(data['RealtimeC..

HTML,CSS,Javascript 2024.10.04

Javascript 기초

Javascript를 쓰는 이유 : 웹을 동적으로 구현하기 위해 사용 -> 웹페이지에서 사용자의 입력에 따라 이벤트를 만들거나 특정 내용을 출력한다.웹에서는 안에 를 붙여넣고 사용한다. JQuery 사용$('#q1').empty(); -> id값이 q1인 구역 값을 비운다.let temp_html = `감자`; -> temp_html에 감자라는 값 선언$('#q1').append(temp_html); -> id값이 q1인 구역에 temp_html값(감자)을 붙인다.tip)`는 백틱으로 HTML요소를 통째로 넣을 때 사용한다, 문자와 변수 함께 쓸 수 있게 하는 특수기호

HTML,CSS,Javascript 2024.10.02

CSS 기초

CSS : HTML에 디자인적 요소를 넣기 위해 사용1. 자주 쓰이는 cssclass : 태그에 대한 이름을 지정해주는 것과 같다.  안에서 .클래스이름{속성 값}으로 세부정보를 설정한다.width : 가로길이height : 세로길이color : 폰트 색text-align : 텍스트 정렬(start, center, end, justify(양쪽정렬))padding : 안쪽 여백(-bottom, top, right, left로 특정 구역만 여백 설정이 가능하다)margin : 바깥쪽 여백 (-bottom, top, right, left로 특정 구역만 여백 설정이 가능하다)(auto를 사용해 끝까지 설정할 수 있)border : 테두 설정(-radius로 모서리를 둥글게 설정할 수 있다) background-..

HTML,CSS,Javascript 2024.10.01

HTML 기초

Spring을 본격적으로 공부하기 전에 기본적인 웹개발 형식을 이해하고 익히기 위해 HTML,CSS,Javascript를 공부한다. 우선 개발 툴은  Visual Studio Code를 사용한다.https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging m..

HTML,CSS,Javascript 2024.09.30