2023년 4월 4주차 주간회고

Time tracker

구분	목표시간	사용시간	달성률%	원인분석	다음 주에 적용할 것
🧘‍♀️영적	-	7	-
✏️지적	82	71.5	87%	- 수다로 낭비한 시간만 일주일 합쳐서 4.5시간 +) 기타시간도 많았다.(실급 관련으로도 4시간 쓰고,,)	- 식사 30분컷 : 타이머 맞춰서 밥 20분 컷하고 남은 10분은 양치하고 정리하고 내려가기 - 차주부터는 수다떤시간 낭비시간으로 체크
사회적	1	6.5	650%	2시간은 4기분들 도움드린 것! 4.5시간은 수다로 낭비🥲
🏃‍♀️신체적	-	0.5	-	한 번이라도 했네 잘 했어 하핳
🌔잠	49	49	100%
🧹기타	28	40	143%	이번 주는 유독 기타시간이 많았네..	정상적인 날이면 기타시간 3.5여야 함

시간기록

Weekly Feedback

table

이번 주 목표	이번 주 결과
1. Java 복습 목표 : 6, 7, 8, 10, 11장 백지 복습(매일 한 챕터씩) 시간 : 오전 7시 20분~7시 40분 2. CSS - 1일 1w3schools(how to 분석 - 주석달고 핵심 정리하기)	1. Java 복습 : 달성률 100% 2. CSS : 달성률 100%

금주에 학습한 것들

Spring

스프링의 정석 Ch1~Ch2.21

😎Ch1. 01 Spring 시작하기

Ch2. 02 Spring MVC

스프링 배운지 일주일은 된 것 같은데 수업 3일밖에 안 했구나 하루가 일주일같다 요즘

패키징
내가 만든 프로그램을 배포해야 서비스가 가능한데, 이때 파일을 하나로 다 묶어서 줘야 한다.
- war : web archive
- jar : java archive

Base64 : 이런 건 웹 기본임. 잘 알고 있어야 한다.

빌드도구 : 패키징, 의존성 관리(라이브러리)
1. Maven : 설정 파일 상속 가능
  pom.xml : 메이븐 설정 파일
  pom.xml 수정 시 메이븐 업데이트 해야 한다.
  
  내 프로젝트에 어떤 라이브러리가 필요하면 저장소에 가서 태그를 pom.xml에 넣는다. 그럼 인터넷에서 지가 알아서 가지고 옴. 나는 라이브러리 버전만 추가하면됨. 이런 걸 의존성. 디펜던시 관리라고 한다.
1. Gradle : 설정 파일 상속 불가능

스프링 프로젝트 구조
- target : src의 결과물
- 소스는 java와 resources가 있다.
- web.xml : 톰캣 설정 파일
- 스프링 설정 파일

JS

카드게임 기능 추가

cardGame.html 전체 코드

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 120px;
            height: 180px;
            cursor: pointer;

            transition: transform 1s ease;
        }

        img:hover {
            transform: translateY(-30px);
            outline: black solid 1px;
        }

        #pairDiv, span {
            background-color: greenyellow;
            width: 30%;
            margin-top: 10px;
            font-size: 20px;
        }

        .matched {
            opacity: 0.3;
        }
    </style>

</head>

<body>
    <div>
        <button id="btnShow">show</button>
        <button id="btnHide">hide</button>
        <button id="btnShuffle">shuffle</button>
        <button id="hint">힌트</button>
    </div>
    <div id="pairDiv">
        남은 pair의 개수 : <span id="pairsLeft"></span>
    </div>
    <br><br>
    <div id="board">
        <!-- 카드를 보여줄 곳 -->
    </div>
    
    <script>
        const NUMBER_OF_CARDS = 52; // 카드의 총 개수
        const NUMBER_OF_HINTS = 2;  // 힌트로 보여줄 카드의 개수
        const NUMBER_OF_RANKS = 13; 

        const btnShow = document.getElementById('btnShow');
        const btnHide = document.getElementById('btnHide');
        const btnShuffle = document.getElementById('btnShuffle');


        const btnHint = document.getElementById('hint');
        const pairsLeft = document.getElementById('pairsLeft');

        let cardArr = new Array(NUMBER_OF_CARDS);

        window.onload = function () { // main 메서드
            initGame(); // 게임 초기화
            startGame(); // 게임 시작
        }

        // show 버튼을 누르면 카드를 전부 보여준다.
        btnShow.onclick = function() { flipAllCards(cardArr, false); };
        // hide 버튼을 누르면 카드를 전부 숨긴다.
        btnHide.onclick = function() { flipAllCards(cardArr, true); };

        btnShuffle.onclick = function() {
            initGame(cardArr);
            startGame(cardArr);
        };

        btnHint.onclick = showHint;

        const A = 1;
        const J = 11
        const Q = 12;
        const K = 13;

        const DIAMOND = 1;
        const CLOVER = 2;
        const HEART = 3;
        const SPADE = 4;
        
        function Card(number, suit) {
            //TODO suit랑 number 지역변수화하기
            this.number = number;
            this.suit = suit;
            this.isFront = true; // 현재 카드가 앞면인지를 확인하는 변수
            this.isPaired = false; // pair 여부를 확인하는 변수
        }

        Card.prototype.toString = function() {
            let suit = "";
            let number = "";

            switch (this.suit) {
                case 1: suit = "◆"; break;
                case 2: suit = "♧"; break;
                case 3: suit = "♡"; break;
                case 4: suit = "♠"; break;
                default:
            }

            switch (this.number) {
                case 1:  number = "A"; break;
                case 11: number = "J"; break;
                case 12: number = "Q"; break;
                case 13: number = "K"; break;
                default: number = this.number + "";
            }

            return suit + number;
        }

        // 카드의 아이디(number + "" + suit)를 가져온다.
        Card.prototype.getId = function() {
            return this.number + "" + this.suit;
        }

        // 게임 초기화
        function initGame() {
            // 1. card를 담을 배열을 만든다.
            
            // 2. 배열을 초기화한다.
            initCard(cardArr);
            
            // 3. 배열을 섞는다.
            shuffleCard(cardArr);

            // 4. 카드를 div#board에 보여준다.
            showCard(cardArr);

            // 5. 각 카드에 클릭 이벤트를 등록한다.
            let imgArr = document.getElementsByTagName("img");

            for (let i = 0; i < imgArr.length; i++) {
                imgArr[i].onclick = cardClick;
            }

            // 6. 남은 pair의 개수 초기값 보여주기
            pairsLeft.innerHTML = NUMBER_OF_CARDS / 2;
        }

        function startGame() {
            // 카드 전부를 뒷면 보여준다.
            flipAllCards(cardArr, true);
        }

        // 카드 배열을 초기화한다.
        function initCard(cardArr) {
            let suitChk = 1;
            let numberChk = 1;

            for (let i = 0; i < NUMBER_OF_CARDS; i++) {
                cardArr[i] = new Card(numberChk++, suitChk++);

                if (suitChk > 4) suitChk = 1; // 다이아몬드(◆) = 4 그림 카드까지 만들었을 경우 다시 스페이드(♠) = 1 카드를 만들기 위해 1로 변경
                if (numberChk > 13) numberChk = 1; // K(13)까지 카드를 만들었을 경우 다시 A(1)를 넣어주기 위해 1로 변경
            }

            // 기본 정렬
            cardArr.sort(cardDefaultSortComparator);
        }

        // 두 카드의 짝이 일치하는지 체크한다.
        function checkPair(twoCards) {
            return twoCards[0].number == twoCards[1].number && Math.abs(twoCards[0].suit - twoCards[1].suit);
        }

        // 남은 pair의 개수 update
        function updatePairsLeft() {
            // 남은 pair의 개수 구하는 법 = getBackCardIndexArr 해서 가져온 배열의 length / 2하면 됨

            const leftCardIndexArr = getLeftCardIndexArr();
            pairsLeft.innerHTML = leftCardIndexArr.length / 2;

            // 남은 카드의 개수가 1개 이하면 다시하겠냐고 물어보고 Y면 shuffle N이면기끝내기
            if (leftCardIndexArr.length < 1) {
                // 걍 물어보지 말고 1개 이하면 카드 다 지우고 다시하기 버튼이랑 시도 횟수 보여주기
                if (confirm("성공. 게임을 종료하시겠습니까? | 게임 종료 = 확인 | 재시도 = 취소")) {
                    alert("게임 종료");
                } else {
                    btnShuffle.onclick();
                }
            }
        }

        // 매치 여부를 변경한다.
        function updateIsPaired(cards, isPaired) {
            let card;
            for (let i = 0; i < cards.length; i++) {
                card = cards[i];

                document.getElementById(card.getId()).classList.add("matched");
                card.isPaired = isPaired;
            }
        }

        // 카드 클릭 시 발생되는 이벤트
        function cardClick() {
            // 카드를 찾는다.
            const card = findCard(this);

            // 1. 카드가 앞면인지 확인한다.
            if (isFront(card)) 
                // 1-1. 앞면이면 return
                return;

            // 1-2. 뒷면이면 뒤집는다.
            flip(card);

            // 2. 뒤집은 카드가 2장인가?
            const chkTwoCards = checkFrontCardCountTwo();
            if (chkTwoCards) {
                // 2-1. 두 카드의 짝이 일치하는지 체크한다.
                if (checkPair(chkTwoCards)) {
                    // 2-2. 일치하면 계속 진행한다.
                    // pair인 카드들의 isMatched = true로 변경
                    updateIsPaired(chkTwoCards, true);
                    // 남은 pair의 개수 변경해주기
                    updatePairsLeft();

                } else {
                    // 2-3. 일치하지 않으면 클릭했던 카드들을 다시 뒤집는다.
                    setTimeout(function() {
                        flipAllCards(chkTwoCards, true);
                    }, 600);
                }
            } 
        }

        // 기본 정렬 - 1순위 suit 2순위 숫자
        function cardDefaultSortComparator(c, c2) {
            if (c.suit == c2.suit) {
                return c.number - c2.number;
            } else {
                return c.suit - c2.suit;
            }
        }
        
        // 카드를 섞는다. 
        function shuffleCard(cardArr) {
            cardArr = cardArr.sort(() => Math.random() - 0.5);
        }

        // 카드를 div#board에 보여준다.
        function showCard(cardArr) {
            // 이미지 파일명 구해오는 공식 = (number - 1) + (suit - 1) * 13

            let c;
            let result = "";
            // 1. 카드의 개수만큼 반복문 돌린다.
            for (let i = 0; i < NUMBER_OF_CARDS; i++) {
                // 2. 카드 객체를 하나 가져와서 <img src="${(c.number - 1) + (c.suit - 1) *13}.png">
                c = cardArr[i]; 
                // 3. 위의 결과를 result 문자열에 집어넣은 뒤
                // 처음에 카드 10초간 보여주고 gameStart()에서 hide하자
                result += `<img src="${(c.number - 1) + (c.suit - 1) * NUMBER_OF_RANKS}.png" id=${c.getId()} data-number="${c.number}" data-suit=${c.suit} data-isFront=true>`;
                // 12개가 한줄 = 만약 i가 12라면 br태그 넣어주기
                if ((i + 1) % 13 == 0) {
                    result+= `<br>`;
                }
            }
            // 4. div#board에 innerHTML로 넣어준다.
            document.getElementById('board').innerHTML = result;

        }

        // card가 앞면이면 true 아니면 false를 반환
        // card는 Card 객체가 들어와야 한다.
        function isFront(card) {
            return card.isFront;
        }

        // 카드를 뒤집는다.
        function flip(card, isFront) {
            // 1. 카드가 앞면인지 확인한다. +) hide시에 pair된 카드들은 여젼히 보여져야 한다.
            if (isFront && !card.isPaired) {
                // 1-1. 앞면(그림)이면 뒷면(농담곰)을 보여준다.
                showBack(card);
            } else {
                // 1-2. 뒷면(농담곰)이면 앞면(그림을 보여준다.)
                showFront(card);
            }
        }
        
        // 카드의 앞면을 보여준다.
        function showFront(card) {
            let cardImg = document.getElementById(card.getId());
    
            cardImg.src = `${(card.number - 1) + (card.suit - 1) *13}.png`;
            card.isFront = true;
        }
        
        // 카드의 뒷면(농담곰)을 보여준다.
        function showBack(card) {
            let cardImg = document.getElementById(card.getId());
            
            cardImg.src = 'bear.png';
            card.isFront = false;
        }

        // 카드를 모두 뒤집는다.
        function flipAllCards(cardArr, isFront) {
            // 카드의 총 개수만큼 반복문 돌면서 flip(card)를 호출
            for (const card of cardArr) {
                flip(card, isFront);
            }
        }

        // 뒤집혀있는 카드의 개수가 2장인지 체크한다. 
        function checkFrontCardCountTwo() {
            // 뒤집혀있는 카드의 조건 : isFront = true && isMatched = false
            let returnCards = [];

            for (let i = 0; i < NUMBER_OF_CARDS; i++) {
                let card = cardArr[i];
                if (card.isFront && !card.isPaired) {
                    returnCards.push(card);
                }
            }

            if (returnCards.length == 2) { // 뒤집혀있는 카드의 개수가 2개면 2장의 카드를 담은 배열반환
                return returnCards;
            } else { // 아니라면 false반환
                return false;
            }
        }

        // carImg 엘리먼트에서 cardArr중에 일치하는 카드를 찾는다.
        function findCard(cardImg) {
            const number = parseInt(cardImg.getAttribute('data-number'));
            const suit = parseInt(cardImg.getAttribute('data-suit'));

            for (let i = 0; i < NUMBER_OF_CARDS; i++) {
                let card = cardArr[i];
                if (card.number == number && card.suit == suit)
                    return card;
            }
        }

        // 뒷면인 카드들의 index를 가져온다. (이미 앞면인 카드들은 제외)
        function getLeftCardIndexArr() {
            let notFrontCardIndexArr = [];
            for (let i = 0; i < NUMBER_OF_CARDS; i++) {
                if (!cardArr[i].isPaired)
                    notFrontCardIndexArr.push(i);
            }

            return notFrontCardIndexArr;
        }

        function getRandom(max, count) {
            // 이걸 Set으로 바꾸고 frontIndexArr의 length가 2가 될 때까지 반복문 돌기
            let randomNumArr = new Set();

            while (randomNumArr.size < count) {
                randomNumArr.add(parseInt(Math.random() * max));
            }
            return randomNumArr;
        }

        function showHintRandom(cards) {
            // notFrontCardIndexArr에서 랜덤한 카드의 index를 가져와서 해당하는 index의 카드의 앞면을 보여준다.
            const frontIndexArr = []; // 힌트로 보여준 card의 index를 저장하기 위한 변수
            const randomNumArr = getRandom(cards.length, NUMBER_OF_HINTS);

            for (const random of randomNumArr) {
                flip(cardArr[cards[random]], false); // 랜덤한 카드의 앞면을 보여준다.
                //  [조건2] 보여지는 2개의 카드가 같은 카드면 안 된다.
                cards.splice(random, 1);

                frontIndexArr.push(cards[random]);
            }
            
            return frontIndexArr;
        }

        // 랜덤한 2개의 카드의 앞면을 2초동안 보여준다.
        function showHint() {
            //  [조건1] 이미 짝이 맞춰진 카드는 제외해야 한다. - 뒷면인 카드들의 index를 가져온다. (이미 앞면인 카드들은 제외)
            let backCardIndexArr = getLeftCardIndexArr();
            // 뒷면인 카드들 중에서 랜덤으로 앞면을 보여준다.
            let frontIndexArr = showHintRandom(backCardIndexArr);

            // 1초 후에 보여주었던 2개의 카드의 뒷면을 다시 보여준다.
            btnHint.disabled = true; // 기다리는 1초동안 또 힌트 버튼을 누를 수 없도록 disabled 처리
            setTimeout(function() {
                for (let i = 0; i < NUMBER_OF_HINTS; i++) {
                    flip(cardArr[frontIndexArr[i]], true);
                }
                btnHint.disabled = false;
            }, 1000);
        }

        // from과 to 범위의 정수(int)값을 반환한다. from과 to 모두 범위에 포함된다.
        function getRand(from, to) {
            return parseInt(((Math.random() * Math.abs(to-from) + 1))) + Math.min(from, to);
        }

    </script>
</body>

</html>

기존 : 1 pair만 맞추면 게임 종료

변경 : 모든 pair 맟춰야 게임 종료

기존에는 한 쌍의 카드만 맞추면 게임이 종료되었기 때문에, hide와 show 기능을 구현할 때 모든 카드를 숨기고 뒤집기만 하면 됐었다. 하지만 이제 모든 카드 쌍을 맞추어야 게임이 종료되도록 수정해서, 이미 맞춰진 카드 쌍이 존재할 때 show와 hide 기능이 제대로 작동하지 않는 문제가 발생했다.

그래서 Card 생성자 함수에 isFront뿐만 아니라 isPaired라는 구분값을 추가하여 문제를 해결했다. 카드를 뒤집을 때 이미 매치된 카드는 뒷면을 보여주지 않도록 처리했다.

function Card(number, suit) {
    //TODO suit랑 number 지역변수화하기
    this.number = number;
    this.suit = suit;
    this.isFront = true; // 현재 카드가 앞면인지를 확인하는 변수
    this.isPaired = false; // pair 여부를 확인하는 변수
}

// 카드를 뒤집는다.
function flip(card, isFront) {
    // 1. 카드가 앞면인지 확인한다. +) hide시에 pair된 카드들은 여젼히 보여져야 한다.
    if (isFront && !card.isPaired) {
        // 1-1. 앞면(그림)이면 뒷면(농담곰)을 보여준다.
        showBack(card);
    } else {
        // 1-2. 뒷면(농담곰)이면 앞면(그림을 보여준다.)
        showFront(card);
    }
}

힌트 기능 : 랜덤한 2개의 카드의 앞면을 2초동안 보여준다.

// 랜덤한 2개의 카드의 앞면을 2초동안 보여준다.
function showHint() {
    //  [조건1] 이미 짝이 맞춰진 카드는 제외해야 한다. - 뒷면인 카드들의 index를 가져온다. (이미 앞면인 카드들은 제외)
    let backCardIndexArr = getLeftCardIndexArr();
    // 뒷면인 카드들 중에서 랜덤으로 앞면을 보여준다.
    let frontIndexArr = showHintRandom(backCardIndexArr);

    // 1초 후에 보여주었던 2개의 카드의 뒷면을 다시 보여준다.
    btnHint.disabled = true; // 기다리는 1초동안 또 힌트 버튼을 누를 수 없도록 disabled 처리
    setTimeout(function() {
        for (let i = 0; i < NUMBER_OF_HINTS; i++) {
            flip(cardArr[frontIndexArr[i]], true);
        }
        btnHint.disabled = false;
    }, 1000);
}

남은 pair의 개수 보여주기

JS 요약정리 +) 클로저

JavaScript 핵심요약

JavaScript.pdf

클로저 : 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

약간 모호했던 클로저의 개념을 코어 자바스크립트 보고 완벽하게 이해했다 ㅎㅎ!

CSS

일 : Make a Website

월 : Hover Tabs

화 : Slideshow Gallery

수 : Outline Buttons Alert Buttons

목, 금 : Login Form

토 : CSS/JS Modal

Java

자바의 정석 6, 7, 8, 10, 11장 백지복습, 원보카로 암기

이번 주의 생각

이번 주 완전 헤이해졌다.. 정신차려~!!~!~!

언넝 프로젝트 끝나고 코틀린 배우고 싶다 그뒤로는 Scala, Rust까지..

차주 목표

구분	차주 목표
✏️지적	1. 스프링의 정석 ch2-22~ch3-21(총 35강) 평일 하루 7강씩 목표, 주말에는 복습 2. Java 복습 목표 : 자바의 정석 12, 13, 14, 15, 6장 백지복습, 원보카로 암기 시간 : 1) 아침 이동 시간(7:20~7:50) - 백지 복습 2) 걸을 땐 복기시키기 3) 저녁 이동 시간 - 아침에 못 적었거나 틀렸던 거 원보카로 암기 3. CSS - 1일 1w3schools(how to 분석 - 주석달고 핵심 정리하기) 일 Filter/Search List 월 : Top Navigation 화 : Modal Images 수 : Split Buttons 목 : Sign Up Form 금 : Skill Bar 토 : Delete Modal
🧘‍♀️영적	매일 논어 한 마디 읽기(오전 8시~8시 10분)
🏃‍♀️신체적	자기 전 폼롤러 스트레칭 10분(오후 10시 50분~11시)

다음주도파이팅!😄

담주거
구분 목표시간 사용시간 달성률% 원인분석 다음 주에 적용할 것
🧘‍♀️영적 (일)피드백 + 3.5
✏️지적 (일) + 77
사회적 1
🏃‍♀️신체적 1
🌔잠 49
🚿기타 28

Uploaded by N2T

2023년 5월 2주차 주간회고 (0)	2024.01.24
2023년 5월 1주차 주간회고 (0)	2024.01.24
2023년 4월 3주차 주간회고 (0)	2024.01.24
2023년 4월 2주차 주간회고 (0)	2024.01.24
2023년 4월 1주차 주간회고 (0)	2024.01.24

Done is better than perfect