통합 후 데이터베이스에서 팀원들의 정보를 가져와 carousel에 넣는 기능 추가
이때 기존과 같은 방법으로 실행 시 모든 carousel가 active 상태가 되어 겹치는 오류, 버튼도 carousel마다 하나씩 생기는 오류가 발생
아래와 같이 코드 수정
function member_desc() {
fetch('/member').then(res => res.json()).then((data) => {
let desc = data['result']
$('#desc').empty()
desc.forEach((a) => {
let name = a['name']
let mbti = a['mbti']
let strength = a['strength']
let style = a['style']
let blog = a['blog']
let img = a['img']
/* 반복문으로 가져왔을 때 데이터를 가져오는 순서가 되면 active문자열을 추가하도록 */
let activeClass = a === desc[0] ? 'active' : '';
let temp_desc = `<div class="carousel-item ${activeClass}" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="${img}" class="img-thumbnail">
<div class="myContent" >
<p class="myName"><b>소개: </b>${name}</p>
<p class="myMBTI"><b>MBTI: </b>${mbti}</p>
<p class="myStr"><b>자신만의 강점: </b>${strength}</p>
<p class="myStyle"><b>자신의 스타일: </b>${style}</p>
<br>
<p class="myBlog"><b>블로그(Tistory): </b><a href="${blog}"</a>${blog}</p>
</div>
</div>
</div>`
$('#desc').append(temp_desc)
})
/* button은 일일이 추가할 필요가 없으므로 따로 한 번만 추가되도록 수정 */
let temp_button = `<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>`
$('#desc').append(temp_button)
})
}
가시성을 위해 mbti 투표 결과와 팀원 소개 슬라이드 위치를 바꾸기로 결정
어진님이 추가 기능으로 게시판 or 방명록을 만들기로 결정
남은 시간 다시 자바공부
package nadocoding.Chap_07;
import nadocoding.Chap_07.Camera.Camera;
public class _16_Reference {
public static void main(String[] args) {
// 참조
// 기본 자료형 (Primitive Data Types) : int, float, double, long, boolean, ...
// 기본 자료형은 기본적으로 소문자로 시작
int[] i = new int[3];
System.out.println(i[0]); // 0
double[] d = new double[3];
System.out.println(d[0]); // 0.0
// 참조 자료형 (Non-Primitive, Reference Data Types) : String, Camera, FactoryCam, SpeedCam, ...
// 참조 자료형은 대문자로 설정해서 구분 (class를 대문자로 시작하는 이유)
String[] s = new String[3];
System.out.println(s[0]); // null
Camera[] c = new Camera[3];
System.out.println(c[0] == null); // true
System.out.println("-----------------------------");
int a = 10;
int b = 20;
b = a;
System.out.println(a); // 10
System.out.println(b); // 10
b = 30;
System.out.println(a); // 10
System.out.println(b); // 30
// b의 값을 바꿔도 1에는 영향이 가지 않음.
// 기본 자료형은 각자 다른 메모리를 할당 받고 있기 때문
System.out.println("-----------------------------");
Camera c1 = new Camera();
Camera c2 = new Camera();
c1.name = "카메라1";
c2.name = "카메라2";
System.out.println(c1.name); // 카메라1
System.out.println(c2.name); // 카메라2
c2 = c1;
System.out.println(c1.name); // 카메라1
System.out.println(c2.name); // 카메라2
c2.name = "고장난 카메라";
System.out.println(c1.name); // 고장난 카메라
System.out.println(c2.name); // 고장난 카메라
// c2의 이름을 바꿨더니 c1도 바뀜
// 참조 자료형은 각자 메모리의 주소만 할당 받는데, c2 = c1에서 c2의 주소와 c1의 주소가 같아져 c2의 값을 바꾸면
// c2와 같은 주소를 쓰는 c1의 값도 바뀜
System.out.println("-----------------------------");
changeName(c2);
System.out.println(c1.name); // 잘못된 카메라
System.out.println(c2.name); // 잘못된 카메라
c2 = null; // c2의 참조 없애기
// System.out.println(c2.name); // NullPointerException 오류 발생
}
public static void changeName(Camera camera) {
camera.name = "잘못된 카메라"; // 이 인스턴스도 c2가 가리키는 주소를 할당받아 c1도 영향을 받게 된다.
}
}