23.05.18

통합 후 데이터베이스에서 팀원들의 정보를 가져와 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도 영향을 받게 된다.
    }
}