2023년 4월 월간회고

4월의 시간기록

주간회고

매주 주간회고 쓰기 성공!

4월 한 달간 학습한 것들

설계의 중요성

과제2 : 요소 옮기기

💡

>, < : 선택한 요소 옮기기

>>, << : 전체 요소 옮기기

1차

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>
        select {
            float: left;
            width: 70px;
            height: 100px;
        }

        select > option {
            /* font-size: 30px; */
            /* margin: 10px; */
        }

        #buttons {
            float: left;
        }

        #buttons > button{
            width: 30px;
            margin: 0 10px;
            display: block;
        }
    </style>
</head>
<body>
    <!--
        1. html 요소 그리기
            1) select 생성
            2) 버튼 생성
            3) 오른쪽 select 생성

    -->
    <select id="sports" multiple>
        <option id="basketball">🏀농구🏀</option>
        <option id="soccer">⚽️축구⚽️</option>
        <option id="baseball">⚾️야구⚾️</option>
        <option id="volleyball">🏐배구🏐</option>
    </select>

    <div id="buttons">
        <button id="add">></button>
        <button id="addAll">>></button>
        <button id="minus"><</button>
        <button id="minusAll"><<</button>
        
    </div>
    
    <select id="sports2" multiple></select>
</body>


<script>
    const originalSports = document.getElementById('sports'); // 왼쪽 select(원본)
    const movedSports = document.getElementById('sports2'); // 오른쪽 select(이동)

    // 선택 넣기 버튼(add), 선택 빼기 버튼(minus) 합침
    function addOption(event) {
        const id = event.srcElement.id; // 이벤트가 발생한 요소의 id를 가져온다.
        // 1. 선택한 요소를 가져온다 => id가 add면 선택한 options를 original에서 가져오고 minus면 선택한 options를 moved에서 가져온다.
        const selectedOptions = id == 'add' ? Array.from(originalSports.selectedOptions) : Array.from(movedSports.selectedOptions);
        // 선택한 요소가 이동될 select => id가 add면 앞으로 추가될 select가 movedSports, id가 minus면 앞으로 추가될 select가 originalSports
        const toBeAdded = id == 'add' ? movedSports : originalSports; 

        // 2. 선택한 요소를 이동시킨다.
        for (let i = 0; i < selectedOptions.length; i++) {
            toBeAdded.appendChild(selectedOptions[i]);
        }
    }
    
    // 전체 넣기 버튼(addAll), 전체 빼기 버튼(minusAll)합침
    function addAllOption(event) {
        const id = event.srcElement.id; // 이벤트가 발생한 요소의 id를 가져온다.
        // 1. select의 모든 option을 가져온다. => id가 addAll이면 options를 original에서 가져오고 minusAll이면 moved에서 가져온다.
        const options = id == 'addAll' ? Array.from(originalSports.children) : Array.from(movedSports.children);
        // 요소가 이돌될 select => id가 addAll면 앞으로 추가될 select가 movdedSports, id가 minusAll이면 앞으로 추가될 select가 originalSports
        const toBeAdded = id == 'addAll' ? movedSports : originalSports; 

        // 2. option들을 이동시킨다.
        for (let i = 0; i < options.length; i++) {
            toBeAdded.appendChild(options[i]);
        }
    }

    // 선택 추가 버튼
    document.getElementById('add').addEventListener("click", addOption);
    // 선택 빼기 버튼
    document.getElementById('minus').addEventListener("click", addOption);

    // 전체 추가 버튼
    document.getElementById('addAll').addEventListener("click", addAllOption);
    // 전체 빼기 버튼
    document.getElementById('minusAll').addEventListener("click", addAllOption);

</script>
</html>

2차 : 1차 원장님 피드백 후 다시

const originalSports = document.getElementById('sports'); // 왼쪽 select(원본)
const movedSports = document.getElementById('sports2'); // 오른쪽 select(이동)

// 선택된 option을 왼쪽에서 오른쪽으로 옮긴다.
function moveSelectedLeftToRight() {
    moveSelected(left, right);
}
// 선택된 option을 오른쪽에서 왼쪽으로 옮긴다.
function moveSelectedRightToLeft() {
    moveSelected(right, left);
}

// 모든 option을 옮긴다. 
function moveAll(from, to) {
    // 1. 모든 option을 선택한다.
    selectAll(from);

    // 2. 선택된 option을 옮긴다.
    moveSelected(from, to);
}

// 선택된 option을 from에서 to로 옮긴다.
function moveSelected(from, to) {
}

// target의 모든 option을
function selectAll(target){

}

const leftSelect = document.getElementById('leftSelect'); // 왼쪽 select(원본)
const rightSelect = document.getElementById('rightSelect'); // 오른쪽 select(이동)

// 선택된 option을 왼쪽에서 오른쪽으로 옮긴다.
function moveSelectedLeftToRight() { 
    moveSelected(leftSelect, rightSelect); 
}

// 선택된 option을 오른쪽에서 왼쪽으로 옮긴다.
function moveSelectedRightToLeft() { 
    moveSelected(rightSelect, leftSelect); 
}

// 모든 option을 왼쪽에서 오른쪽으로 옮긴다.
function moveAllLeftToRight() { 
    moveAll(leftSelect, rightSelect); 
}

// 모든 option을 오른쪽에서 왼쪽으로 옮긴다. 
function moveAllRightToLeft() { 
    moveAll(rightSelect, leftSelect); 
}

// 모든 option을 옮긴다.
function moveAll(from, to) { 
    // 1. 모든 option을 선택한다.
    selectAll(from);

    // 2. 선택된 option을 옮긴다.
    moveSelected(from, to);
}

// 선택된 option을 from에서 to로 옮긴다.
function moveSelected(from, to) {
    const selectedOptions = Array.from(from.selectedOptions);

    for (let i = 0; selectedOptions.length; i++) {
        to.appendChild(selectedOptions[i]);
    }
}

// target의 모든 option을 선택한다.
function selectAll(target){
    const options = target.children;

    for (let i = 0; i < options.length; i++) {
        options[i].selected = true;
    }
}

내가 작성한 코드는 선택한 요소를 가져오는 걸 삼항 연산자로 처리한 것 때문인지 코드가 전혀 한 눈에 들어오지 않았다.

원장님이 작성해주신 코드는 moveSelectedLeftToRight()와 moveSelectedRightToLeft()를 만들어서 moveSelected()에 인수만 자리 바꾸어서 넣어주니까 함수 재사용도 하면서 이 함수가 어떤 동작, 역할을 하는지 보여 훨씬 의도를 파악하기 쉬워졌다.

객체지향 5원칙중 단일 책임 원칙… 전혀 와닿지 않았는데 요소 이동 과제 하면서 이제야 이해했다. 인터넷에서 떠드는 주석 달지 말라고 하는 게 말도 안 되는 소리라고 생각했었는데 주석이 필요없을 정도로 의도가 다 보이고 깔끔한 코드를 작성하라는 뜻이 아니었을까? 하나의 함수가 하나의 역할만 가지고 있으니 굳이 주석을 달지 않아도 코드의 의도를 파악하기 쉬워졌다. 이게 바로 객체지향적인 코드구나하고 깨달음을 얻어서 너무 짜릿했다..!

원래는 절대 답을 알려주지 않으시고 오랫동안 고민해서 나만의 문제 해결방법을 찾아가라고 하시는데 주석 열심히 달았고 발전 가능성의 여지 ㅋㅋㅋㅋ? 가 보여서 앞으로 이런 방식으로 설계, 구현하라고 가이드를 주신 것 같다. 처음에 가이드 주셨을 때 와 진짜 감탄만 나왔다. 어떻게 저렇게 바로바로 추상화된 코드를 뚝딱 작성하시는 거지..? 나도 저런 고수가 되고 싶어요🥹

앞으로 굵직하게 내가 뭘 하겠다 주석으로 적고, 그 단계들을 함수화하는 연습 꾸준히 하기! 계속 왼쪽 처럼 짜고 나쁜 습관을 고치지 않으면 원장님께 배우는 의미가 없다. 이것만큼은 확실히 고치고, 발전시켜서 가져가야 한다.

    // 선택 넣기 버튼(add), 선택 빼기 버튼(minus) 합침
    function addOption(event) {
        const id = event.srcElement.id; // 이벤트가 발생한 요소의 id를 가져온다.
        // 1. 선택한 요소를 가져온다 => id가 add면 선택한 options를 original에서 가져오고 minus면 선택한 options를 moved에서 가져온다.
        const selectedOptions = id == 'add' ? Array.from(originalSports.selectedOptions) : Array.from(movedSports.selectedOptions);
        // 선택한 요소가 이동될 select => id가 add면 앞으로 추가될 select가 movedSports, id가 minus면 앞으로 추가될 select가 originalSports
        const toBeAdded = id == 'add' ? movedSports : originalSports; 

        // 2. 선택한 요소를 이동시킨다.
        for (let i = 0; i < selectedOptions.length; i++) {
            toBeAdded.appendChild(selectedOptions[i]);
        }
    }
    
    // 전체 넣기 버튼(addAll), 전체 빼기 버튼(minusAll)합침
    function addAllOption(event) {
        const id = event.srcElement.id; // 이벤트가 발생한 요소의 id를 가져온다.
        // 1. select의 모든 option을 가져온다. => id가 addAll이면 options를 original에서 가져오고 minusAll이면 moved에서 가져온다.
        const options = id == 'addAll' ? Array.from(originalSports.children) : Array.from(movedSports.children);
        // 요소가 이돌될 select => id가 addAll면 앞으로 추가될 select가 movdedSports, id가 minusAll이면 앞으로 추가될 select가 originalSports
        const toBeAdded = id == 'addAll' ? movedSports : originalSports; 

        // 2. option들을 이동시킨다.
        for (let i = 0; i < options.length; i++) {
            toBeAdded.appendChild(options[i]);
        }
    }

const leftSelect = document.getElementById('leftSelect'); // 왼쪽 select(원본)
const rightSelect = document.getElementById('rightSelect'); // 오른쪽 select(이동)

// 선택된 option을 왼쪽에서 오른쪽으로 옮긴다.
function moveSelectedLeftToRight() { 
    moveSelected(leftSelect, rightSelect); 
}

// 선택된 option을 오른쪽에서 왼쪽으로 옮긴다.
function moveSelectedRightToLeft() { 
    moveSelected(rightSelect, leftSelect); 
}

// 모든 option을 왼쪽에서 오른쪽으로 옮긴다.
function moveAllLeftToRight() { 
    moveAll(leftSelect, rightSelect); 
}

// 모든 option을 오른쪽에서 왼쪽으로 옮긴다. 
function moveAllRightToLeft() { 
    moveAll(rightSelect, leftSelect); 
}

// 모든 option을 옮긴다.
function moveAll(from, to) { 
    // 1. 모든 option을 선택한다.
    selectAll(from);

    // 2. 선택된 option을 옮긴다.
    moveSelected(from, to);
}

// 선택된 option을 from에서 to로 옮긴다.
function moveSelected(from, to) {
    const selectedOptions = Array.from(from.selectedOptions);

    for (let i = 0; selectedOptions.length; i++) {
        to.appendChild(selectedOptions[i]);
    }
}

// target의 모든 option을 선택한다.
function selectAll(target){
    const options = target.children;

    for (let i = 0; i < options.length; i++) {
        options[i].selected = true;
    }
}

과제3 : 카드 게임

💡

<요구사항>
show : 모든 카드 보여주기

hide : 모든 카드 숨기기

shuffle : 카드 섞기

두 장의 카드를 뒤집었을 때 게임 성공. 일치하지 않으면 다시 뒤집어진다.

전체 코드

<!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;
        }
    </style>

</head>

<body>
    <button id="showBtn">show</button>
    <button id="hideBtn">hide</button>
    <button id="shuffleBtn">shuffle</button>
    <br><br>
    <div id="board">
        <!-- 카드를 보여줄 곳 -->
    </div>
    
    <script>
        let cardArr = new Array(52);

        window.onload = function () { // main 메서드
            initGame(cardArr); // 게임 초기화
            // for (let i = 0; i < 10000000000; i++) {

            // }
           startGame(cardArr); // 게임 시작
        }

        // show 버튼을 누르면 카드를 전부 보여준다.
        document.getElementById('showBtn').onclick = function() { flipAll(cardArr, false); };
        // hide 버튼을 누르면 카드를 전부 숨긴다.
        document.getElementById('hideBtn').onclick = function() { flipAll(cardArr, true); };

        document.getElementById('shuffleBtn').onclick = function() {
            initGame(cardArr);
            startGame(cardArr);
        };

        const A = 1;
        const J = 12
        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;
        }

        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;
            }

            return cardArr;
        }

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

        // function printCardArr(cardArr) {
        //     for (let i = 0; i < cardArr.length; i++) {
        //         console.log(cardArr[i].toString());
        //     }
        // }

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

            for (let i = 0; i < cardArr.length; 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 cardClick() {
            // 카드를 찾는다.
            const card = findCard(this);

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

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

            // 2. 뒤집혀있는 카드가 2장인가?
            const chkTwoCards = checkFrontCardCountTwo(cardArr);
            if (chkTwoCards) {
                // 2-1. 2장이라면 두 카드의 짝이 일치하는지 체크한다.
                checkPair(chkTwoCards);
            }
        }

        // 기본 정렬 - 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 < cardArr.length; 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) *13}.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. 카드가 앞면인지 확인한다.
            if (isFront) {
                // 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 flipAll(cardArr, isFront) {
            // 카드의 총 개수만큼 반복문 돌면서 flip(card)를 호출
            for (let i = 0; i < 52; i++) {
                flip(cardArr[i], isFront);
            }
        }

        // 두 카드의 짝이 일치하는지 체크한다.
        function checkPair(twoCards) {
            // 짝 일치 기준 : 숫자 동일, 색상 동일
            if (twoCards[0].number == twoCards[1].number && Math.abs(twoCards[0].suit - twoCards[1].suit)) {
                // 2-2. 일치하면 게임 종료
                setTimeout(function() {
                    alert("성공");
                }, 500);

            } else {
                // 2-3. 일치하지 않으면 클릭했던 카드들을 다시 뒤집는다.
                setTimeout(function() {
                    alert("실패"); // 아니 왜 안 뒤집어져;;;;
                    flipAll(cardArr, true);
                }, 500);

            }
        }

        // 뒤집혀있는 카드의 개수가 2장인지 체크한다. 
        function checkFrontCardCountTwo(cardArr) {
            // cardArr의 length만큼 반복문을 돌면서 card의 isFront가 true인 카드의 개수가 2개면 true를 반환한다.
            let card;
            let returnCards = [];
            for (let i = 0; i < cardArr.length; i++) {
                card = cardArr[i];
                if (card.isFront)
                    returnCards.push(card);
            }

            if (returnCards.length == 2) {
                return returnCards;
            } else {
                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 < cardArr.length; i++) {
                let card = cardArr[i];
                if (card.number == number && card.suit == suit)
                    return card;
            }
        }

        // 구조 잡을 때 코드 절대 적기 x

        // show랑 hide는 힌트 shupple은 섞기
    </script>
</body>

</html>

과제2번에서 배웠던 것 처럼 굵직하게 내가 뭘 하겠다 절차를 단계별로 주석으로 적고, 그걸 다 추상 메서드처럼 작성했다. 전체적인 틀이 나올 때까지 디테일은 저어어얼대 구현하지 않으려고 노력했다.

그림으로 비유를 하자면, 먼저 전체적인 밑그림을 그리고 그 뒤에 채색을 해야 하는데 나는 요만큼 밑그림 그리고 바로 채색하고 이런 방식으로 해왔던 것(구현하지 전에 주석 먼저 적긴 했었지만 머리속에서 나오는대로 일단 다 적고 작은 부분부터 세세하게 구현을 했었다).. 이렇게 하면 바로 채색했던 부분이 잘못되면 나중에 고치기 힘들어진다.

전체적인 틀 다 짜고 이 틀에서 함수를 쉬운 것부터 하나하나 구현해나가니까 이게 이렇게 쉬운 거였나?라는 생각이 들정도였다. 완료하고 피드백 받았을 때 잘 짰다고 칭찬받았다….!!! 넘 기분 조음

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

function initGame() {
    // 1. card를 담을 배열을 만든다.
    let cardArr = [];

    // 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;
    }
}

// card가 앞면이면 true 아니면 false를 반환
function isFront(card) {
    return false;
}

// 카드를 모두 뒤집는다.
function flipAll(cardArr) {
    // 카드의 총 개수만큼 반복문 돌면서 flip(card)를 호출
    flip(card[0]);
}

// 카드를 뒤집는다.
function flip(card) {
    // 1. 카드가 앞면인지 확인한다.
    if(isFront()) {
        // 1-1. 앞면(그림)이면 뒷면(농담곰)을 보여준다.
        showBack(card);
    } else {
        // 1-2. 뒷면(농담곰)이면 앞면(그림을 보여준다.)
        showFront(card);
    }
}

// 카드를 클릭했을 때 발생되는 이벤트
function cardClick(card) {
    let card = this;
    // 1. 카드를 앞면인지 확인한다.
    if (isFront(card))
        // 1-1. 앞면이면 return
        return;
    // 1-2. 뒷면이면 뒤집는다.
    flip(card);

    // 2. 뒤집혀있는 카드가 2장인가?
    if (checkCard()) {
        // 2-1. 2장이라면 두 카드의 짝이 일치하는지 체크한다.
        if (checkPair()) {
            // 2-2. 일치하면 게임 종료
            alert("성공")
        } else {
            // 2-3. 일치하지 않으면 클릭했던 카드들을 다시 뒤집는다.
            alert("실패");
            flipAll(cardArr);
        }
    }

}

Javascript

JavaScript 핵심요약

자바와 유사한 부분은 제거하고 자바스크립트만의 고유한 특징들을 핵심으로 모아서 3일만에 속성으로 배웠다. 그 3일동안 ㅇㅁㅇ….? 계속 이 표정이었음 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진도는 미친듯이 빠르고 복습할 시간은 부족한데 근데 또 너무 재밌고………

자바스크립트 배우면서 여기 오길 잘 했구나 정말 선택 잘 한 것 같다는 생각을 정말 많이 했다. 혼자서 책 보면서 공부했다면 시간만 낭비하고 헤매었을 것 같은데, 선생님께서 핵심만 짚어서 설명해주시니까 너무 좋았다. 남궁성 선생님께 배우는게 정말 영광,,,

자바랑 유사한 부분도 많이 있었고(람다는 자바에서 쓰던 대로 똑같이 써도 작동하니 신기했음 ㅋㅋ) 다른 부분에서는 자바스크립트에서 객체는 동일한 생성자를 사용해서 생성해도 모든 걸 개별적으로 가지고 있기 때문에 프로토타입이라는 걸 써야 한다는 게 신기했다. 처음에 배울 땐 좀 어려웠는데 이해가 안 되면 그려보라고 하셔서 직접 그려보았더니 조금은..? 이해가 된 것 같다. 뭐든 이해 안 되면 쓰고 그려보자 머리속으로 생각만하면 해결되지 않음

자바

자바의 정석 12장~15장

2️⃣12장 : 지네릭스, 열거형, 애너테이션

3️⃣13장 : 쓰레드(thread)

4️⃣14장 : 람다와 스트림(Lamda & Stream)

자바의 정석 15장 : 입출력(I/O)
FileStream 업무를 하면서 가끔씩 볼 때도 있었고, 직접 사용해보기도 했었는데, 원리도 모른채 그저 복붙해서 사용하다보니 응용이 전혀 되지 않았다. 하지만 이번에 기회를 통해 책을 정독하면서 기초부터 하나씩 알아가니 너무 흥미로웠다.

자바의 정석 7, 8, 11, 12, 13장 칠판에 백지 복습

제일 중요한 동기화에 대한 부분을 많이 못 썼다. 다음에는 동기화쪽 먼저 써볼 것

15장은 짧은 주기로 자주 복습해야 될 것 같다.. 절반은 못씀..

독서 - 어떻게 공부할 것인가

인출 - ex) 시험

간격 두기
ex) 플래시 카드
연습이 생각없는 반복이 되지 않을 정도의 간격이면 된다. but 너무 많이 잊어버려서 새로 배우는 셈은 xx 약간의 망각이 중요. 적어도 하루

교차하기
한 가지 연습이 완전히 끝나기 전에 주제를 바꾸어야 한다. 기억을 약간 흐려지게 하면 인출이 힘들어지고 능숙하게 발휘하지 못하지만, 한 층 더 깊이 학습하게 되고 나중에 수월하게 인출할 수 있게 된다. → 이론적으로는 알겠는데 나한테 적용하는 게 잘 안 된다 ㅠ

변화주기

반추 : 어떤 일이 일어났는가? 내가 무엇을 했는가? 그것이 어떤 효력을 발취했는가? → 회고랑 비슷한듯

정교화 : 이번과 다르게 다음에는 어떤 행동을 할 것인가? → 적용점 찾기

학습법에 대한 조언은 무턱대고 믿지 않는 것이 좋다.

CSS

하루에 하나씩 w3school에 있는 how to를 분석하기로 했다.

업무를 할 때 CSS를 굉장히 싫어했었는데, 이번에 매일 하나씩 분석하며 공부하니 사실은 모르니까 어려워서 싫어했던 것이었다는 걸 깨달았다. 처음에는 모르는 속성들이 많아서 겁 먹었지만, 차근차근 책 찾아가면서 공부하니 생각보다 어렵지 않았다. 왜 이렇게 두려워하고 회피해왔는지.. 아는 게 많아지니 두려움이 사라지고 재밌다. "잘하면 재미있고 못하면 재미없다"는 말이 정말 맞다.

또, CSS를 책 보고 개념적인 것만 주구장창 배우는 것보다는 w3school에서는어 떤 레이아웃이 있고 이를 이거 구현하기 위해서 어떤 CSS 속성을 사용해야 하는지를 공부하는 거라 더 잘 와닿고 재밌었다.

w3schools - how to

이름	분류	날짜	URL
Icon Bar - Vercical(메뉴바 - 수직)	[월] Menu(55)	@2023년 4월 12일	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_v
Icon Bar - Horizontal(메뉴바 - 수평)	[월] Menu(55)	@2023년 4월 13일	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_v
menu icon	[월] Menu(55)	@2023년 4월 13일	https://www.w3schools.com/howto/howto_css_menu_icon.asp
Animated Menu Icon	[월] Menu(55)	@2023년 4월 13일	https://www.w3schools.com/howto/howto_css_menu_icon.asp
Collapsibles/Accordion(접이식 메뉴?)	[월] Menu(55)	@2023년 4월 15일	https://www.w3schools.com/howto/howto_js_accordion.asp
Tabs	[월] Menu(55)	@2023년 4월 17일	https://www.w3schools.com/howto/howto_js_tabs.asp
Vertical Tabs	[월] Menu(55)	@2023년 4월 18일	https://www.w3schools.com/howto/howto_js_vertical_tabs.asp
Tab Headers	[월] Menu(55)	@2023년 4월 19일	https://www.w3schools.com/howto/howto_js_tab_header.asp
Full Page Tabs	[월] Menu(55)	@2023년 4월 21일	https://www.w3schools.com/howto/howto_js_full_page_tabs.asp
Slideshow	[화] Images(39)	@2023년 4월 21일	https://www.w3schools.com/howto/howto_js_slideshow.asp
Fullscreen Video	[토] More(112)	@2023년 4월 22일	https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
Make a Website	[일] Website(20)	@2023년 4월 23일	https://www.w3schools.com/howto/howto_make_a_website.asp
Hover Tabs	[월] Menu(55)	@2023년 4월 24일	https://www.w3schools.com/howto/howto_js_hover_tabs.asp
Slideshow Gallery	[화] Images(39)	@2023년 4월 25일	https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp
Alert Buttons	[수] Buttons(19)	@2023년 4월 26일	https://www.w3schools.com/howto/howto_css_alert_buttons.asp
Outline Buttons	[수] Buttons(19)	@2023년 4월 26일	https://www.w3schools.com/howto/howto_css_outline_buttons.asp
Login Form	[목] Forms(34)	@2023년 4월 27일 → 2023년 4월 28일	https://www.w3schools.com/howto/howto_css_login_form.asp
CSS/JS Modal	[토] More(112)	@2023년 4월 29일	https://www.w3schools.com/howto/howto_css_modals.asp

CSS 속성

이름	URL	날짜	생성 일시	태그
margin과 padding의 차이		@2023년 4월 12일	@2023년 4월 12일 오후 4:43	속성
float		@2023년 4월 13일	@2023년 4월 13일 오후 12:14	속성
변형 : transition		@2023년 4월 13일	@2023년 4월 13일 오후 4:28	속성
변환 : transform		@2023년 4월 14일	@2023년 4월 14일 오후 7:54	속성
display		@2023년 4월 21일	@2023년 4월 21일 오후 1:21	속성
visibility		@2023년 4월 21일	@2023년 4월 21일 오후 1:43	속성
border(테두리)		@2023년 4월 21일	@2023년 4월 21일 오후 1:54	속성
overflow 속성		@2023년 4월 12일	@2023년 4월 12일 오후 4:46	위치속성
position 속성		@2023년 4월 13일	@2023년 4월 13일 오전 10:19	위치속성
css 선택자		@2023년 4월 12일	@2023년 4월 12일 오후 4:43	선택자
구조 선택자		@2023년 4월 13일	@2023년 4월 13일 오후 5:00	선택자
문자 선택자		@2023년 4월 15일	@2023년 4월 15일 오후 7:41	선택자
동위 선택자			@2023년 5월 5일 오후 3:31	선택자
@media 규칙			@2023년 5월 5일 오후 4:13	반응형 웹
반응형 웹			@2023년 5월 5일 오후 4:29	반응형 웹
Ch5. 웹 페이지 레이아웃			@2023년 6월 18일 오후 8:17	Ch5. 웹 페이지 레이아웃
Ch.8 소셜커머스 메인 페이지			@2023년 6월 20일 오후 2:08	Ch5. 웹 페이지 레이아웃
@import 규칙			@2023년 6월 23일 오후 5:37	Ch11. CSS 추가 규칙과 반응형 웹
제목 없음			@2023년 6월 23일 오후 5:38	Ch11. CSS 추가 규칙과 반응형 웹
시험문제			@2023년 10월 19일 오후 4:42	기타
CSS 레퍼런스	https://www.w3schools.com/cssref/index.php		@2023년 10월 27일 오전 10:27	기타

자료구조

LinkedList 구현

MyLinkedList.java

/**
 * 1. Node class 만들기
 * 2. 기본 생성자
 * 3. add 메서드 추가
 * 4. 테스트
 * 5. 지네릭 클래스로 변경
 */
public class MyLinkedList {
    private class Node {
        Node next; // 다음 노드
        Object obj; //  값

        private Node(Object obj) {
            this.obj = obj;
        }

        @Override
        public String toString() {
            return obj + "";
        }
    }

    public MyLinkedList() {}

    private Node firstNode;

    /**
     * 메서드명 : add
     * 기능    : 지정된 객체(o)를 리스트의 끝에 추가
     * 반환값   : 없음
     * 매개변수 : Object o
     */
    public void add(Object o) {
        Node newNode = new Node(o); // Node객체를 생성하고, Node의 obj에 저장된 객체(o)의 주소값을 넣는다.

        if (firstNode == null) {
            firstNode = newNode; // 첫 번째 노드일 경우 값만 넣어주고 끝냄
        } else {
            Node lastNode = getLastNode(); // 마지막 노드를 가져온다.
            lastNode.next = newNode; // 마지막 노드의 next에 새로 생성한 Node 객체의 주소값을 넣어준다.
        }
    }

    /**
     * 메서드명 : getLastNode
     * 기능    : 마지막 노드를 반환한다.
     * 반환값   : Node
     * 매개변수  : 없음
     */
    private Node getLastNode() {
        Node nextNode = firstNode.next;

        // nextNode가 null이라는 것은 연결되어있는 node가 하나뿐이라는 뜻.
        // 하나밖에 없으니까 firstNode가 lastNode이므로 firstNode를 반환해준다.
        if (nextNode == null)
            return firstNode;

        // 마지막 노드라는 것은 참조변수의 next의 값이 null이라는 것을 의미함.
        // nextNode.next의 값이 null이 아닐 때까지 반복문을 돌면 마지막 노드를 얻을 수 있다.
        while (nextNode.next != null) {
            nextNode = nextNode.next;
        }

        return nextNode;
    }

    @Override
    public String toString() {
        if (firstNode == null) return ""; // 연결되어있는 Node가 없으면 공백 반환

        String tmp = firstNode + ""; // 링크드 리스트에 연결되어있는 모든 obj 값을 더하기 위한 변수
        Node nextNode = firstNode.next;
        // nextNode가 null이라는 것은 연결되어있는 node가 하나 뿐이라는 뜻. 하나밖에 없으니까 firstNode의 obj값만 반환해준다.
        if (nextNode == null) return tmp;
        tmp += (", " + nextNode);

        while (nextNode.next != null) {
            nextNode = nextNode.next;
            tmp += (", " + nextNode);
        }

        return tmp;
    }
}

MyLinkedListGeneric.java (지네릭 클래스로 변경)

/**
 * 1. Node class 만들기
 * 2. 기본 생성자
 * 3. add 메서드 추가
 * 4. 테스트
 * 5. 지네릭 클래스로 변경
 *    Object를 타입 변수로 변경
 */
public class MyLinkedListGeneric<E> {
    private class Node<E> {
        Node<E> next; // 다음 노드
        E obj; //  값

        private Node(E obj) {
            this.obj = obj;
        }

        @Override
        public String toString() {
            return obj + "";
        }
    }

    public MyLinkedListGeneric() {}

    private Node<E> firstNode;

    /**
     * 메서드명 : add
     * 기능    : 지정된 객체(o)를 리스트의 끝에 추가
     * 반환값   : 없음
     * 매개변수 : Object o
     */
    public void add(E e) {
        Node<E> newNode = new Node(e); // Node객체를 생성하고, Node의 obj에 저장된 객체(o)의 주소값을 넣는다.

        if (firstNode == null) {
            firstNode = newNode; // 첫 번째 노드일 경우 값만 넣어주고 끝냄
        } else {
            Node<E> lastNode = getLastNode(); // 마지막 노드를 가져온다.
            lastNode.next = newNode; // 마지막 노드의 next에 새로 생성한 Node 객체의 주소값을 넣어준다.
        }
    }

    /**
     * 메서드명 : getLastNode
     * 기능    : 마지막 노드를 반환한다.
     * 반환값   : Node
     * 매개변수  : 없음
     */
    private Node<E> getLastNode() {
        Node<E> nextNode = firstNode.next;

        // nextNode가 null이라는 것은 연결되어있는 node가 하나뿐이라는 뜻.
        // 하나밖에 없으니까 firstNode가 lastNode이므로 firstNode를 반환해준다.
        if (nextNode == null)
            return firstNode;

        // 마지막 노드라는 것은 참조변수의 next의 값이 null이라는 것을 의미함.
        // nextNode.next의 값이 null이 아닐 때까지 반복문을 돌면 마지막 노드를 얻을 수 있다.
        while (nextNode.next != null) {
            nextNode = nextNode.next;
        }

        return nextNode;
    }

    @Override
    public String toString() {
        if (firstNode == null) return ""; // 연결되어있는 Node가 없으면 공백 반환

        String tmp = firstNode + ""; // 링크드 리스트에 연결되어있는 모든 obj 값을 더하기 위한 변수
        Node<E> nextNode = firstNode.next;
        // nextNode가 null이라는 것은 연결되어있는 node가 하나 뿐이라는 뜻. 하나밖에 없으니까 firstNode의 obj값만 반환해준다.
        if (nextNode == null) return tmp;
        tmp += (", " + nextNode);

        while (nextNode.next != null) {
            nextNode = nextNode.next;
            tmp += (", " + nextNode);
        }

        return tmp;
    }
}

3월에는 배열 기반의 Vector를 구현해보았는데, 이번 4월에는 연결 기반 자료구조인 LinkedList를 직접 구현해보았다. 링크드 리스트와 더 친해진 것 같다 ㅋㅋ

이번 달에는 자바 진도를 나가는데에 더 많은 시간을 투자해야 했기 때문에 add와 toString 메서드만 구현했지만 추후 틈틈히 해서 remove랑 indexOf 등등..도 구현해보고 싶다.

SQL - 오라클

SQL의 정석 요약본 (1)

불친절한 SQL (1)

생각

나중에 이 시기를 돌아봤을 때 후회하는 기억으로 남지 않도록 매일매일 최선을 다하자 파이팅

항상 강조하시는 것 : 도메인, 업무 지식이 제일 중요하다. 코드는 AI가 훨씬 더 잘 짬. 그걸 이용해 재사용성이 높은 설계를 하는 게 개발자의 몫 이걸 하려면 업무를 잘 이해하고 있어어야 한다.

질문
무턱대고 질문하기 전에
1. 책 보다가 모르는 부분이 나오면 일단 회색 형광펜으로 밑줄치고 넘어가기
1. 그 챕터 다 마치고 이해 안 됐던 부분 다시 읽어보기
1. 그래도 이해 안 되면 검색 or chatGPT통해서 찾아보고
1. 내가 이해한 게 맞는지 체크하는 정도로 질문

굵직한 오픈 소스 하나 정해서 자주 소스 까봐야함(ex 스프링) 배우는 게 정말 많음..!

자기계발 시간(지적/영적)	1주차	2주차	3주차	4주차	5주차
3월			73 (67/6)	84.5 (74/10.5)	70 (61.5/8.5)
4월	81 (73.5/7.5)	79 (74/5)	82.5 (77.5/5)	78.5 (71.5/7)	-

Uploaded by N2T

[비공개] 2023년 6월 월간회고 (0)	2024.01.25
2023년 5월 월간회고 (0)	2024.01.24
2023년 3월 월간회고 (0)	2024.01.24
[비공개] 2023년 2월 월간회고 (0)	2024.01.24
[비공개] 2023년 1월 월간회고 (0)	2024.01.24

Done is better than perfect