값들을 넣은다음 기록하기 버튼을 누르면, 앨범에 추가가 되는 기능 구현 특정한 값의 내용(밸류값)을 가져오는 방법 .val()이용
function makeCard(){
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img
src="${image}"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
//생략//
<button onclick=makeCard() type="button" class="btn btn-dark">기록하기</button>
클라이언트 - 서버 개념 서버는 클라이언트에게 데이터를 제공할 때 키-값 쌍 형식의 JSON으로 제공해준다. 예를 들어, {"MSRSTE_NM":"중구","PM10":4.0,"PM25":2.0}와 같이 키:값 형식으로 제공하는 것을 볼 수 있다.
클라이언트는 서버에게 API를 요청한다. 주요 HTTP 메서드로는 다음과 같은 것들이 있다: GET : 조회 요청 POST : 생성, 변경, 삭제 요청
예를 들어, 다음과 같은 URL이 있을 때: https://movie.daum.net/moviedb/main?movieId=68593 위 링크에서 **GET 방식**에서는 URL의 ? 이후의 내용이 쿼리 문자열로, 서버에 대한 GET 요청의 일부로 볼 수 있다. 여기서 ? 옆을 보면 `movieId=68593`이 있다. 이는 서버에게 `movieId=68593`인 영화를 요청하는 것이다.
fetch() 자바스크립트에서 내장된 함수로 네트워크로 요청을 보내고 그 결과를 받아오는 역할
RealtimeCityAir > row에 미세먼지 데이터가 들어있다.
import java.util.Arrays;
import java.util.*;
import java.lang.*;
// 20번째 06월 15일 정수 내림차순으로 배치하기 : 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.
public class cote20 {
public static void main(String[] args) {
Solution sol = new Solution();
Scanner sc = new Scanner(System.in);
int num1 = sc.nextInt();
long result = sol.solution(num1);
System.out.println(result);
}
}
class Solution {
public long solution(long n) {
long answer = 0;
String str = Long.toString(n);
char [] num = str.toCharArray();
Arrays.sort(num);
StringBuilder sb = new StringBuilder(new String(num));
sb.reverse();
answer = Long.parseLong(sb.toString());
return answer;
}
}
long > string > char > sb > long 으로 변환하였다. 되게 복잡하게 변환했지만 딱히 생각나는게 이거밖에 없었음...
배열에 하나하나 넣는 방법도 생각나긴 했다 예를들어 배열에 값을 하나하나 집어넣고 sort한다음 result = result *10 + 배열[i];
시간복잡도는 비슷해서 패스
여기서 사용한 함수 .toString() : string형으로 타입변환 해준다 .toCharArray() : 문자 배열로 변환한다 Arrays.sort() : 배열을 오름차순으로 정렬한다
StringBuilder : 문자열을 수정할 수 있는 객체 제공 주요 메서드는 아래와 같음 .append(str) : 문자열을 이어 붙임 .reverse() : 문자열을 뒤집음 Long.parseLong() == Integer.parseInt() : 문자열을 타입변환해줌 .toString() : StringBuilder 객체를 String형으로 변환해줌 ㄴ 참고 : StringBuilder객체는 String이 아니기때문에 String을 쓰려면 변환이 필요함
import java.util.Scanner;
// 22번째 06월 18일 두 정수 사이의 합 :두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.
public class cote23 {
public static void main(String[] args) {
Solution sol = new Solution();
Scanner sc = new Scanner(System.in);
int num1 = sc.nextInt();
long result = sol.solution(num1);
System.out.println(result);
}
}
class Solution {
public int solution(int num) {
int answer = 0;
answer = collatz(num,0);
return answer;
}
private int collatz(long num, int count)
{
if(num==1){
return count;
}
else if(count>=500)
{
return -1;
}
else if(num%2 == 0)
{
return collatz(num/2,count+1);
}
else {
return collatz((num*3)+1,count+1);
}
}
}
재귀함수란 위의 코드를 보면 num==1이거나 count가 500이 넘어갈때까지 반복하는 코드이다 else if (num%2==0)에서보면 return값으로 collatz(num/2,count+1)을 주어 collatz함수 안에 또 다른 collatz함수로 들어가는것을 볼 수 있다 이렇게 연산하며 자동으로num==1이거나 count가 500이되면 빠져나오는 식이다.
재귀함수의 예 - 피보나치 수열 피보나치 수열이란? 처음 두항을 1로 한 후, 그 다음 항 부터는 바로앞의 두 항을 더하는 수열이다.. F(0) = 0 F(1) = 1 F(n) = F(n-1) + F(n-2) (n ≥ 2) 위 공식임
public class FibonacciRecursive {
public static void main(String[] args) {
int n = 10; // 예시로 10번째 피보나치 수를 구합니다.
System.out.println(fibonacci(n)); // 출력: 55
}
public static int fibonacci(int n) {
if (n <= 1) {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
재귀를 이용한 피보나치 수열 계산 특징 : 코드가 간결하고 직관적임, F(5)를 계산하려면 F(4)와 F(3)을 계산해야 하고, F(4)를 계산하려면 다시 F(3)과 F(2)를 계산해야 하는 식으로 중복 계산이 많이 발생함. 시간복잡도 :O(2^n)
public class FibonacciIterative {
public static void main(String[] args) {
int n = 10; // 예시로 10번째 피보나치 수를 구합니다.
System.out.println(fibonacci(n)); // 출력: 55
}
public static int fibonacci(int n) {
if (n <= 1) {
return n;
}
int a = 0, b = 1;
for (int i = 2; i <= n; i++) {
int next = a + b;
a = b;
b = next;
}
return b;
}
}
O(2^n)반복문을 이용한 피보나치 수열 계산 특징 : 중복 계산이 없으며 각 피보나치 수를 한번씩만 계산함. 시간복잡도 :O(n)
재귀함수가 비효율적인 것을 알 수 있다. 문제 20번에서도 재귀함수가 중복을 거친다라고 느낄수 있다.
그럼에도 쓴 이유는? 재귀를 사용하는 알고리즘 문제(동적 프로그래밍 문제 제외)에는 재귀함수가 메서드 스택을 추가적으로 사용하고 메서드 호출에 대한 오버헤드가 발생할 수 있지만, 현대 컴퓨터시스템에는 반복문과 큰 차이가 나지않는다. 코드의 간결성과 문제의 논리를 그대로 작성할수 있어서 사용했다.
그럼 모든 경우에서 재귀가 비효율적인가? 아니다, 하노이탑 같은 경우는 재귀와 반복문의 성능 차이가 크지 않으며, 코드작성부문에서 반복문이 훨씬 비효율적인것을 알 수 있다. 만약 스택오버플로 문제가 발생한다면? 동적 프로그래밍(메모이제이션 등)으로 재귀의 비효율성을 제거한다. 동적 프로그래밍이란? 하위 문제의 결과를 저장하고 재사용함으로, 중복계산을 피하는 방법.
데일리 2주차 목요일 과제 - 스파르타 자판기
import java.util.HashMap;
import java.util.Map;
import java.util.Scanner;
public class spartaVendingMachine {
public static void main(String[] args) {
Scanner sc = new Scanner(System.in);
Map<String, Integer> drinks = new HashMap<>();
drinks.put("사이다", 1700);
drinks.put("콜라", 1900);
drinks.put("식혜", 2500);
drinks.put("솔의눈", 3000);
System.out.println("스파르타 자판기 입니다");
for (Map.Entry<String, Integer> entry : drinks.entrySet()) {
System.out.println(entry.getKey() + " : " + entry.getValue() + "원");
}
System.out.print("어떤 상품을 주문하시겠습니까? : ");
String order = sc.nextLine();
if (!drinks.containsKey(order)) {
System.out.println("잘못 입력하셨습니다.");
return;
}
System.out.print("지불할 금액을 입력하세요 : ");
int money = sc.nextInt();
int price = drinks.get(order);
if (money >= price) {
int remain = money - price;
System.out.println(order + "를 구매하셨습니다. 남은 잔액 : " + remain + "원 입니다");
} else {
System.out.println("금액이 부족합니다");
}
}
}
구글의 클라우드 기반 NoSQL 데이터베이스이다. SQL : 정리된 정보를 주로 다룸 NoSQL : 복잡하거나 유연한 정보를 다룰 때 사용
4. 파이어베이스를 웹에 적용하기
파이어베이스 세팅 코드 firebaseConfig : 프로젝트 설정 > 내앱 > 구성 아래 코드를 넣으려면 <script type="module">로 변경한다 위로 변경을 하게되면 onclick 이벤트가 작동하지 않게 된다.
// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// Firebase 구성 정보 설정
const firebaseConfig = {
본인 설정 내용 채우기
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
데이터 넣기 : addDoc 온클릭 이벤트도 아래와 같이 변경. 클래스를 id로 변경해야함.
$("#id").click(async function () {
let doc = {};
await addDoc(collection(db, "콜렉션이름"), doc);
})
위와같이 변경하기.
$("#postingbtn").click(async function () { let image = $('#image').val(); let title = $('#title').val(); let content = $('#content').val(); let date = $('#date').val(); let doc = { 'image':image, 'title':title, 'content':content, 'date':date }; await addDoc(collection(db, "albums"), doc); })
화면 새로고침 window.location.reload()
데이터 불러오기 : getDocs 파이어스토어 데이터에서 불러오는 방법
let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
let row = doc.data();
console.log(row);
});
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image']
let title = row['title']
let content = row['content']
let date = row['date']
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
