[부트캠프] TIL - 코드카타(2016년, MySQL 최댓값), jQuery click & on('click',..)

금일의 코드카타 문제 (2016년) 을 풀면서 도대체 윤년이란게 뭔가?

그리고 날짜관련 내장함수를 내가 외우고 있어야지 풀 수 있는문제인가? 라는 생각이 들었다.

날짜 관련 문제는 몇번 봐왔기 때문에 언젠가 필요할 때가 올거라 생각하므로 

이 부분에 대해 정리해본다.

 

윤년

윤년이 뭔가?

 

윤년의 개념은 일반적으로 사용되는 달력 시스템에서 사용하는 "태양력" 인 그레고리력을 따르면서 나왔다고합니다.

자세한 사항은 생활꿀팁의 답변을 통해 얻을 수 있었습니다.

 

>이것은 태양 주위를 도는 지구의 공전과 정렬하고 달력 연도를 대략 열대년과 동기화하도록 설계되었습니다. 지구가 태양 주위를 한 바퀴 도는 데 걸리는 시간입니다.

 

그레고리력에서 대부분의 달은 30일 또는 31일이지만 예외가 있습니다. 4월, 6월, 9월, 11월은 각각 30일이며 2월을 제외한 나머지 달은 31일입니다. 2월은 가장 짧은 달이며 평년은 28일입니다. 그러나 4년에 한 번씩 오는 윤년에는 2월이 29일까지 있다. 이 조정은 태양년의 길이가 약 365.25일이라는 사실을 설명하기 위해 만들어졌습니다.

윤년이 필요한 이유는 지구가 태양 주위를 공전하는 데 정확히 365일이 아니라 약 365.25일이 걸리기 때문입니다. 4년마다 하루를 더 추가함으로써 우리는 추가 분기일을 설명하고 달력 연도를 계절과 일치하도록 유지할 수 있습니다.

 

4월, 6월, 9월, 11월이 30일이며 2월은 윤년에는 29일 그 외에는 28일이라는 것을 어떻게 외울 수 있을까? 생각한 도중

떠오른 게 있었다, 초등학교 시절에 배웠던 기억이 나는데 바로 주먹을 이용한것.

온라인 커뮤니티에 올라 온 주먹 달력 설명 글 / 오늘의 유머

7~8로 넘어갈 때 제자리에서 다시한번 세야 한다는것만 떠올리면 무난하게 암기가 가능할것이다.

이렇게 해서 오늘의 코드카타 2016년을 내장함수 없이, 적당한 상식의 보유만으로 풀어낼 수 있을 방법을 찾아내었다. 

 

내장함수, 라이브러리 없이 푼 풀이

class Solution {
    public String solution(int a, int b) {
        String answer = "";
        String[] weekstr = {"FRI","SAT","SUN","MON","TUE","WED","THU"};
        int[] dayOfMonth = {31, 29, 31,30,31,30,31,31,30,31,30,31};
        
        int dayAfterStart = 0;
        //a-1월까지의 일수를 더해준다.
        for(int i=0; i<a-1; i++){
            dayAfterStart += dayOfMonth[i];
        }
        
        //b일을 더하고 1일을빼줌. 1월1일부터 시작했으므로
        dayAfterStart += b;
        dayAfterStart--;
        
        return weekstr[dayAfterStart%7];
    }
}

 

풀이 : 어차피 요일, 각 월별 일수는 상수범위 내로 정해져 있기 때문에 미리 배열로 선언해서 사용해도 성능에 지장이 없다

1일이 금요일이며 추후에 %7 연산으로 요일을 찾을 거기때문에 0index를 "FRI"로 시작하는 요일 문자열 배열선언

목표월인 a월의 직전달 a-1월까지의 일수를 그냥 더해준다, 그리고 목표일인 b일을 바로 더해주고

1월1일부터 시작했으므로 1일을 dayAfterStart에서 빼서 맞춰준다

그리고 weekstr의 인자로 dayAfterStart%7의 값을 전달, 

dayAfterStart%7의 의미, 1일이 금요일이므로 weekstr의 범위인 7을 초과할 경우 다시 0 index로 맞춰주는 과정을 

함축한것.

 

내장함수, 라이브러리를 사용한 방식

import java.time.LocalDate;
import java.time.DayOfWeek;

class Solution {
    public String solution(int a, int b) {
        String answer = "";
        String[] weekStr = {"MON","TUE","WED","THU","FRI","SAT","SUN"};
        
        LocalDate date = LocalDate.of(2016,a,b);
        DayOfWeek dow = date.getDayOfWeek();
        
        //DayOfWeek의 getValue()는 월요일=1, 일요일=7의 값을 리턴.
        int daynum = dow.getValue();
        return weekStr[daynum-1];
    }
}

LocalDate와 DayOfWeek 클래스가 존재한다, 년, 월, 일 값을 전달하여 LocalDate객체를 생성하고

LocalDate 객체의 getDayOfWeek() 메소드를 실행하면 DayOfWeek 객체가 생성되고 

getValue()메소드를 통해 월요일은 1, 일요일은 7 값을 리턴한다고 한다,

다만, 무슨 절차가 그냥 딱봐도 외워야하거나 인터넷에 검색해서 사용해야 하듯이 고정되어있다는 것을 느낄 수 있다.

물론, 알고있다면 편하겠지만 문제풀이 당시에 인터넷 검색이 불가능하거나 이것만 외우고 다른 방식은 생각하지 않았는데 순간적으로 기억이 나지않는다면 어찌 할 수가없을것이다.

 

MySQL의 MAX() 와 LIMIT

코딩테스트 연습 - 최댓값 구하기 | 프로그래머스 스쿨 (programmers.co.kr)

프로그래머스

 

가장 최근에 들어온 동물 데이터 하나를 추출하는 문제로

떠오른 대로 풀었다.

SELECT DATETIME 시간
FROM ANIMAL_INS
ORDER BY DATETIME DESC
LIMIT 1;

 물론 답은 맞았지만, 문제 카테고리가 MAX, MIN, SUM 이고 문제명도 최댓값 구하기로 

뭔가 이 문제가 의도한 답이 아니라는거를 느껴 다른 풀이를 찾아보았다.

 

문제가 의도한 풀이

SELECT MAX(DATETIME) AS 시간
FROM ANIMAL_INS;

 

MAX() 함수 하나만을 사용하면 해결이 되는거였다.

MAX()함수는 해당 컬럼에서 최댓값 데이터 하나를 가져오는 함수이지만, 날짜에서 사용할 경우

가장 최근의 날짜 하나를 가져온다고한다, 따라서 기존 풀이에서 ORDER BY로 날짜 데이터를 정렬 할 필요도 없고

LIMIT으로 데이터 하나만 가져올 필요도 없게 되는것이다.

 

---

 

jQeury 클릭 이벤트 처리

1. click()

<div class="container">
	<ul class="myList">
    	<li>apple</li>
        <li>pineapple</li>
        <li>banana</li>
    </ul>
</div>


<!--ul 리스트에 function을 바인딩 시켜 목록을 누르면 삭제가 될 것이다-->
<script>
	$('.myList').children().click(function(){
    	$(this).remove();
     });
</script>

 

여기에서

$('myList').append('<li>peach</li>');

이렇게 새로운 li를 동적으로 추가해 준다고 가정해보면, 위에서 선언했던 click()의 메소드는 실행되지않는다.

click()의 메소드는 처음에 페이지 로딩때 선언되어 있던

element에 이벤트를 바인딩하고 나서는 더이상 동적으로 바인딩을 하지 않기 때문이다.

2.on("click",..)

이 문제는 on("click",..)을 이용해 해결할 수 있다. 부모 태그에 연결된 이벤트를 자식 요소들에게 delegate 시키는 식으로

동작한다고 한다.

이렇게 하면, 동적으로 요소가 추가되더라도 새롭게 추가된 요소에 그대로 이벤트가 전달되게된다.

$('myList').on('click', function(){
	$(event.target).remove();
});

 

우리 팀의 팀페이지 좋아요 버튼의 동작 코드들을 살펴보며 생긴 의문에 대해 정리를 하였다.

페이지에는 click()메소드를 사용하여 구현되어있었는데, 별다른 변화 없이 동적인 페이지를 생성하였기 때문에

click()메소드를 사용했다고 볼 수 있다. 

이게 좋아요 버튼이 하나만 있어서 그렇지 만약 방명록을 예로들면, 방명록들은 동적으로 생겨나고 줄어들기 때문에

방명록에 click()메소드를 사용하여 실행함수를 설정한다고 한다면, 그 상위 div에 on('click', ...) 메소드를 사용하여

생성, 삭제 처리를 할 수 있겠다. 

 

-> + 실제로 방명록 동작 코드들을 살펴보니 역시나 on('click', ..)메소드를 사용하여 구현된 코드를 볼 수 있었다.