본문 바로가기

Javascript

 (17)
웹 페이지에서 입력된 데이터를 Firebase DB에 저장하는 코드 // 'makeBtn' 버튼이 클릭되었을 때 실행되는 함수 $('#makeBtn').click(async function () { //사용자가 입력한 값들을 변수에 저장 let image = $('#image').val(); // 이미지 URL let title = $('#title').val(); // 영화 제목 let star = $('#star').val(); //평점 let comment = $('#comment').val(); // 코멘트 //Firestore에 추가할 데이터 객체 생성 let doc = { image: image, title: title, star: star, comment: comment, }; // Firestore의 're-movies' 컬렉션에 데이터 객체 추가 awai..
관계형 데이터베이스 VS 비관계형 데이터베이스 사용 이유 기초 관계형 데이터베이스 비관계형 데이터베이스 [데이터 정리] 데이터를 표 형태로 정리해서 저장함. 각 표는 항목별로 정해진 규칙을 따라 데이터를 담고 있다. [자유로운 형태] 데이터를 훨씬 자유롭게 저장할 수 있다. 규칙이 덜 엄격하다. [정해진 규칙] 표 안의 데이터 형식과 관계가 정해져 있어, 마치 엑셀 시트처럼 각각의 행과 열이 정돈되어 있다. [구조적인 규칙이 없음] 표가 아니라 문서, key-value 쌍 등 다양한 형태로 데이터를 담을 수 있다. [SQL 사용] 데이터를 다룰 때 SQL이라는 언어를 사용한다. SQL은 구조적인 질문을 할 수 있게 해주는 언어이다. [NoSQL사용] NoSQL언어를 사용함. Not Only SQL의 약자로, 다양한 형식의 데이터를 다룰 수 있는 데이터베이스를 의미한..
[fetch] fetch 기본 예시 쉽게 풀어보기 `fetch`는 컴퓨터에게 다른 곳에서 정보를 가져오라는 하는 명령이다. 간단히 말하면, `fetch`는 우리가 인터넷에서 무언가를 찾을 때 사용하는 도구이다. 우리가 컴퓨터에게 "이 주소로 가서 정보를 가져와줘!"라고 말하면, `fetch`는 그 주소로 가서 정보를 가져오고, 우리가 그 정보를 활용할 수 있게 도와주는 것이다. 간단한 예제를 들어보자. fetch('https://www.exampleapi.com/data') .then(response => { return response.json(); // 서버에서 데이터가 도착하면 이 부분이 실행됨. //JSON 형식으로 변환하여 데이터 출력 }) .then(data => { // JSON 형식으로 변환된 데이터를 사용하여 다른 작업을 수행함 cons..
[jQuery] box를 toggle 할 때 왜 getElementById는 안될까? 추억 저장하기 사진 제목 - 문제 `추억 저장하기` 버튼을 누르면 postingBox 메뉴가 열리고 닫히는걸 구현하고자 한다. - 오답 function openClose() { document.getElementById('postingBox').toggle(); } //error 이렇게 지정했더니 안먹었다. 왜 그럴까 ? -해결 방법 - getElementById('postingBox') getElementById('postingBox')는 문서에서 ID가 'postingBox'인 요소를 찾아온다. 그 요소를 반환하고, 반환된 요소에 대해서는 순수 JavaScript로 다양한 작업을 수행할 수 있다 function openClose() { let postingBox = document.getElement..
[foreach 함수] 기초 문제 1 자바스크립트 문법 연습 1. 함수 결과 확인하기! 2. 붙이기 영수는 24살입니다. 세종은 30살입니다. 수영은 20살입니다. - 문제 기존에 있던 id = "q2"의 text들을 지우고 people 객체를 foreach 함수를 사용해 q2에 `서영의 키는 165cm 입니다.`이런 문장을 띄워보자. - 오답 과정 및 해결 방법 1. empty 대신에 remove를 써봤더니 html을 append해도 화면에 나오지 않았다. remove() 말고, 다시 text 자리를 위해 empty() 로 쓰기. $('#q2').empty(); 2. name과 height을 따로 변수로 빼주는데 앞에 people로 썼다가 error. a는 element를 a로 줄여서 썼고 people의 index들 하나하나가 돌아가면서 ..
[배열] toString 메서드 배열엔 `toString` 메서드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환된다. `toString` 메서드는 배열에 있는 숫자, 문자열, 다른 종류의 값들을 쉼표로 이어붙여서 하나의 문자열로 만들어준다. 간단히 말하자면, 배열 안에 있는 것들을 쭉 나열한 문자열을 만들어준다고 생각하면 된다. 배열에 있는 모든 요소를 하나의 문자열로 합쳐서 반환해주는 역할을 한다. let numbers = [1, 2, 3, 4, 5]; let result = numbers.toString(); console.log(result); //'1,2,3,4,5' 여기서 `toString`을 사용하면 배열 `[1, 2, 3, 4, 5]` 이 쭉 이어져서 '1, 2, 3, 4, 5' 라는 문자열이 만들어진다..
[조건문] if문이란? if문 : 조건에 따라 다른 행동을 취해야 할 때가 있다. 이럴 땐, if문과 '물음표' 연산자라고도 불리는 조건부 연산자 ? 를 사용하면 된다. ' if ' 문 if( ... ) 문은 괄호 안에 들어가는 조건을 평가하는데 그 결과가 true이면 코드 블록이 실행된다. let study = prompt('지금 공부하는 과목이 무엇입니까?', ''); if (study == javascript) { alert( "정답입니다."); alert( "good!"); } 조건이 true 일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야 한다. if 문을 쓸 때는 조건이 참일 경우 실행되는 구문이 한 줄이더라도 코드의 가독성을 위해 중괄호 { }를 사용해 코드를 블록으로 감싸는걸 추천한다. boole..
[자료와 변수] - 자료형 자바스크립트에는 8가지 기본 자료형이 있다. 숫자형 - 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용. 정수의 한계는 ±253. bigInt - 길이 제약 없이 정수를 나타낼 수 있다. 문자형 - 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 단일 문자를 나타내는 별도의 자료형은 없다. boolean형 - true, false를 나타낼 때 사용한다. null - null 값을 위한 독립 자료형이다. null은 알 수 없는 값을 나타낸다. undefined - undefined 값을 위한 독립 자료형이다. undefined는 할당되지 않은 값을 나타낸다. 객체형 - 복잡한 데이터 구조를 표현할 때 사용한다. 심볼형 - 객체의 고유 식별자를 만들 때 사용한다. 자세하게 알아보자. 자바스..
배열의 마지막으로 데이터 추가하기 배열의 마지막에 데이터를 추가하고 싶다면 push() 를 통해 배열에 데이터가 추가됩니다. push를 사용하여 배열에 cd, ef 라는 값을 추가해 보자. DOCTYPE HTML> Array Syntax let boom = ["A", "B"]; boom.push('cd'); boom.push('ef'); get document.write(boom[0]); //A document.write(boom[1]); //B document.write(boom[2]); //cd document.write(boom[3]); //ef add count document.write(boom.length); //4
배열에서 데이터 꺼내기 배열에 첫 번째로 들어가 있는 데이터를 꺼내고 싶은 경우, coworkers[0]이라고 쓰면 첫 번째 자리에 있는 값 = 0번째 자리에 있는 값이 나옵니다. 이를 index 라고 하는데, index(인덱스) 0번은 "a" 가 되고, 인덱스 1은 "b" 를 가리킨다고 볼 수 있습니다. DOCTYPE HTML> Array Syntax const boom = ["a", "b"]; document.write(boom[0]); //a document.write(boom[1]); //b get

티스토리툴바