boo_choo.log

인텔리제이 빌드 오류

Wed, 18 May 2022 06:01:36 GMT

java: package jdk.nashorn.internal.objects.annotations does not exist java: package sun.security.util does not exist

SVN에서 체크아웃 받아서 빌드하는데 계속 오류가 나길래 다 지우고 다시 받고를 반복하기를 수십번..

구글링을 해봐도..아무리 생각해도 이건 컴파일 오류고 jdk설치가 안됐다는건데.. 설치도 제대로 해놓은 마당에 이런 오류가 뜨니까 어이가 없을뿐.. 어차피 이클립스로도 잘만되고 그냥 포기할까 하다가..

이 글발견

SDK부분이 왜 인지는 모르겠지만 아마존 코레토 어쩌고로 설정돼있어서 이런 오류가 난거였다 하..아놔..

RealGrid

Wed, 11 May 2022 06:18:39 GMT

getValue(itemIndex:number,field:string | number):any

행의 순서와 데이터 필드 인덱스로 지정되는 데이터셀의 값을 반환한다.

매개변수

itemIndex: number
행의 순서
field: string | number
필드 인덱스 또는 필드명

반환값

타입: any

데이터 필드의 값

상세 설명

지정한 행이 수정중인 경우 수정된 값을 반환한다. 편집이 완료되지 않은 셀의 값은 가져올수 없다.

예제 코드

gridView.getValue(3, 'UnitPrice');

HTML 렌더러 HTML 셀 렌더러는 셀에 표시되는 데이터를 HTML형태로 표현할 수 있습니다. 표시하고 싶은 데이터를 inline HTML의 형태로 return 하면 됩니다.

Day3

Wed, 11 May 2022 05:33:13 GMT

콜백함수

https://bigtop.tistory.com/35

jsonp?(JSON with Padding)

https://blog.kingbbode.com/26 https://js2prince.tistory.com/entry/Ajax-JSONP%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Cross-Domain-%ED%95%B4%EA%B2%B0

자바 스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한한다. 이 정책을 동일근원정책(Same-Origin Policy, SOP) 정책이라고 하며, 이러한 정책으로 인해 생기는 이슈를 cross-domain 문제라고 한다. 데이터를 호출하는 도메인과 데이터를 반환하는 도메인의 주소가 다르면 Ajax를 이용할 수 없다. 이를 해결하기 위한 방법 중 하나가 jsonp

selectpicker('refresh');?

https://qiita.com/zinbe/items/45c41251d9b2644f3431

JS로 속성 변경할 경우, 미반영될 가능성을 미연에 방지하기 위함

typeahed js < 자동완성 플러그인

https://programmer93.tistory.com/59

출근 둘째날

Tue, 10 May 2022 05:11:22 GMT

https://kaludin.tistory.com/39

validate() : 룰 정하기 valid() : 룰 실행하기

https://coder-question-ko.com/cq-ko-blog/611

출근 첫째날

Mon, 09 May 2022 07:46:15 GMT

api 그룹 설정 : @Tag

name : 태그의 이름 description : 태그에 대한 설명

Tag에 설정된 name이 같은 것 끼리 하나의 api 그룹으로 묶습니다. 주로 Controller Class 나 Controller Method 영역에 설정합니다.

import io.swagger.v3.oas.annotations.tags.Tag;

@Tag(name = "user", description = "사용자 API")
@RequestMapping(value = "${demo.api}/users")
@RestController
public class UserController {
  ...
}

UserController 에 @Tag를 설정해 보았습니다.

@Tag 애너테이션 설정을 완료한 후 Swagger UI 화면입니다. 태그명과 설명이 각 태그에 설정되었습니다.

api 상세 정보 설정 : @Operation

summary : api에 대한 간략 설명 description : api에 대한 상세 설명 responses : api Response 리스트 parameters : api 파라미터 리스트

애너테이션으로 api 동작에 대한 명세를 작성하는 애너테이션으로, Controller method에 설정합니다.

Swagger UI가 fold상태일때도 간략히 확인할 수 있는 간략정보는 summary에 작성하고, 필요에 따라 상세 정보를 표기하고자 한다면 description에 설명을 추가하면 됩니다. responses는 아래에서 설명할 @ApiResponse 리스트들 설정하는 요소입니다. parameters는 path, query, header, cookie 등의 형태로 들어오는 파라미터에 대한 정보를 설정하는 요소입니다.

@GetMapping("/{id}")
@Operation(summary = "회원 조회", description = "id를 이용하여 user 레코드를 조회합니다.")
public ResponseEntity select(
    @Parameter(description = "user 의 id") @PathVariable("id") long id) {
  ...
}

위의 코드는 summary와 description을 설정한 회원조회 api입니다.

@Operation 설정 후, Swagger UI에 메서드에 대한 설명글이 추가되었습니다.

https://blog.jiniworld.me/91#a01

https://intrepidgeeks.com/tutorial/simplify-spring-jdbc-templates

jsp > ajax > controller > dao ( jdbc templates > listforquery 실행 > sql 실행 결과 반환 ) > controller > ajax > jsp

자바와 jsp로 캘린더 만들기 下

Sat, 16 Apr 2022 14:18:44 GMT

전글에 이어서..

CalendarVO[][] contents_data_arr = new CalendarVO[32][4];
        if (contents_list.isEmpty() != true) {
            int j = 0;
            for (int i = 0; i < contents_list.size(); i++) {

                int date = Integer.parseInt(String.valueOf(contents_list.get(i).getCustom_date()).substring(
                        String.valueOf(contents_list.get(i).getCustom_date()).length() - 2,
                        String.valueOf(contents_list.get(i).getCustom_date()).length()));

                // 저장되어 있는 총 컨텐츠 갯수가 1개가 넘을 경우
                if (i > 0) {

                    // i번째 컨텐츠 등록 날짜와 i-1번째 컨텐츠 등록 날짜를 비교
                    int date_check = Integer.parseInt(String.valueOf(contents_list.get(i - 1).getCustom_date())
                            .substring(String.valueOf(contents_list.get(i - 1).getCustom_date()).length() - 2,
                                    String.valueOf(contents_list.get(i - 1).getCustom_date()).length()));
                    // i번째 컨텐츠 등록 날짜와 i-1번째 컨텐츠 등록 날짜가 같을 경우
                    // 즉, 같은 날에 등록된 컨텐츠 갯수가 1개 이상일 경우
                    if (date_check == date) {
                        j = j + 1;
                        contents_data_arr[date][j] = contents_list.get(i);
                        // 같은 날에 등록된 컨텐츠 갯수가 1개일 경우
                    } else {
                        j = 0;
                        contents_data_arr[date][j] = contents_list.get(i);
                    }
                    // // 저장되어 있는 총 컨텐츠 갯수가 1개일 경우
                } else {
                    contents_data_arr[date][j] = contents_list.get(i);
                }
            }
        }

        // 실질적인 달력 데이터 리스트에 데이터 삽입 시작
        // 일단 시작 인덱스까지 아무것도 없는 데이터 삽입
        for (int i = 1; i < Integer.parseInt(String.valueOf(today_info.get("start"))); i++) {
            calendarData = new DateUtil(null, null, null, null, null);
            dateList.add(calendarData);
        }

        // 날짜 삽입
        for (int i = Integer.parseInt(String.valueOf(today_info.get("startDay"))); i <= Integer
                .parseInt(String.valueOf(today_info.get("endDay"))); i++) {
            CalendarVO[] contents_data_arr3 = new CalendarVO[4];
            contents_data_arr3 = contents_data_arr[i];

            // 특정 날짜가 오늘에 해당할 경우 value에 'today'라는 값을 넣어준다.
            if (i == Integer.parseInt(String.valueOf(today_info.get("today")))) {
                calendarData = new DateUtil(String.valueOf(dateData.getYear()), String.valueOf(dateData.getMonth()),
                        String.valueOf(i), "today", contents_data_arr3);
            } else {
                calendarData = new DateUtil(String.valueOf(dateData.getYear()), String.valueOf(dateData.getMonth()),
                        String.valueOf(i), "normal_date", contents_data_arr3);
            }
            dateList.add(calendarData);
        }

        // 달력 빈 곳 빈 데이터로 삽입
        int index = 7 - dateList.size() % 7;

        if (dateList.size() % 7 != 0) {

            for (int i = 0; i < index; i++) {
                calendarData = new DateUtil(null, null, null, null, null);
                dateList.add(calendarData);
            }
        }

적절히 주석을 달아놔서 크게 어려운 부분은 없을 텐데, 아마 [32][[4]의 2차원 배열을 생성하는 부분이 의아할 것이다. 사실 별 의미 없다 [32]는 한 달의 일(DATE)수를 의미하고 [4]는 같은 날짜에 등록할 수 있는 최대 컨텐츠 갯수이다. (4로 한건 별 의미 없다 코드 원작성자 분이 최대 등록 갯수를 4개로 지정하셨길래 그냥 나도 굳이 수정하지 않은것 뿐)

이걸 왜 이렇게 하냐. 순수하게 달력만을 그릴 때, 루프를 돌며 며칠인지, 무슨 요일인지, TODAY여부 등의 여러가지 정보를 담은 순수한 날짜 정보만 담겨있는 달력 배열을 만들게 된다. 그리고 나중에 컨텐츠 정보를 추가하게 되는건데 만약에 [32]라는 길이가 정해져 있는 배열이 아니라 List를 이용한 유동적 길이를 가지는 배열에 정보를 담고 같이 합치게 된다면 엄청난 오류가 발생한다. 해당 날짜에 상관 없이 배열의 길이상, 위치상 1에 해당하게 되니 이를 달력 배열과 합치게 된다면 무조건 1~4일에 컨텐츠가 들어가게 되는 것이다. 따라서 길이를 [32]로 고정시켜 놓고 루프를 돌면서 해당 날짜(DATE)에 컨텐츠 정보가 같이 들어갈 수 있게 하는 것.. 말이 중구난방이라 이해가 될 지는 모르겠지만.. 하여튼 대충 그런 이유이다.

어쨌뜬 위의 과정을 통해 하루하루마다 날짜의 정보와 컨텐츠의 정보가 담겨있는 배열이 완성된다! 이제 이걸 뷰(jsp)에 뿌려주기만 하면 완성. 코드 원작성자 분이 너무나도 친절하시게 jsp의 코드까지 작성해주셔서 자세한 설명은 생략하고 컨텐츠 정보가 출력되는 부분만 언급하겠다.

위의 과정을 통해서 짜잔 완성 적절히 css를 수정해서 호버 및 클릭 효과를 줘봤다 역시 프론트엔드가 제일 어렵다.. 휴

자바와 jsp로 캘린더 만들기 上

Fri, 15 Apr 2022 13:55:34 GMT

대충 이런 느낌의 기능이다.

전 글에서 insert한 데이터들을 마이 프로필 - 캘린더 페이지에서 확인하는 기능이다. 짤에는 지난달 전달 밖에 안보여줬지만 더 예전, 더 과거의 달력도 열람할 수 있다. 해당 날짜에 등록된 컨텐츠의 포스터가 출력되며 해당 날짜에 2개 이상 컨텐츠가 등록된다면 포스터 오른쪽 하단에 + 아이콘이 생기며 마우스 오버 및 클릭시 드롭다운 형식으로 나머지 컨텐츠들의 포스터가 보이는 기능이다.

내가 맡았던 기능은 아니었는데 어쩌다보니 내가 구현하게 됐다. 원래 담당자였던 조원은 구글 캘린더나 풀 캘린더 등의 API를 사용해서 구현하려고 했었는데 내가 생각하기에는 아무리 생각해도 API를 사용하는 의미가 없고 오히려 우리가 구현하려는 기능을 구현하지 못할 것 같아서 정말 미안하지만 내가 API 사용을 포기하자고 했다. 지금생각해도 넘 미안하군.. 어쨌든 각설하고..

자바의 calendar 클래스와 jsp의 for:each 반복문을 이용해서 구현했다. 이글을 참조해서 만들었는데 자바 부분만 이해하는데 반나절이 걸렸다. 그래도 덕분에 너무 간편하게 구현할 수 있었습니다.. 감사합니다..

원글 작성자 분은 순수히 날짜만 계산하는 DateUtil클래스를 별도로 두고, Controller와 뷰(jsp) 이렇게 세개를 적절히 활용해서 구현하셨는데 조원을 이해하기 위해 따로 주석을 많이 달아놨던 부분은 아래와 같다.

먼저 DateUtil 클래스의 일부

public Map today_info(DateUtil dateData) {
        Map today_Data = new HashMap();

        // 날짜 함수를 이용하기 위한 Calendar 클래스의 인스턴스 호출
        Calendar cal = Calendar.getInstance();

        // getter setter를 이용해서 지정된 연도와 월의 값이 있을 경우 캘린더 값을 초기 설정해준다
        cal.set(Integer.parseInt(dateData.getYear()), Integer.parseInt(dateData.getMonth()), 1);

        int startDay = cal.getMinimum(java.util.Calendar.DATE);
        int endDay = cal.getActualMaximum(java.util.Calendar.DAY_OF_MONTH);
        int start = cal.get(java.util.Calendar.DAY_OF_WEEK);

        // 오늘 날짜에 해당하는 연도와 월 등의 정보를 알기 위한 호출
        Calendar todayCal = Calendar.getInstance();

        // 연도의 표시 형식 지정
        SimpleDateFormat ysdf = new SimpleDateFormat("yyyy");
        SimpleDateFormat msdf = new SimpleDateFormat("M");

        // 현재 연도를 위에 지정한 yyyy의 형식으로 int 타입 변수에 저장
        int today_year = Integer.parseInt(ysdf.format(todayCal.getTime()));
        int today_month = Integer.parseInt(msdf.format(todayCal.getTime()));

        // 지정한 연도와 달이 있을 경우
        int search_year = Integer.parseInt(dateData.getYear());
        int search_month = Integer.parseInt(dateData.getMonth()) + 1;

        int today = -1;
        // 지정한 연도와 달이 현재 연도와 달과 일치할 경우
        if (today_year == search_year && today_month == search_month) {
            SimpleDateFormat dsdf = new SimpleDateFormat("dd");
            today = Integer.parseInt(dsdf.format(todayCal.getTime()));
        }

        search_month = search_month - 1;

        Map before_after_calendar = before_after_calendar(search_year, search_month);

        today_Data.put("start", start);
        today_Data.put("startDay", startDay);
        today_Data.put("endDay", endDay);
        today_Data.put("today", today);
        today_Data.put("search_year", search_year);
        today_Data.put("search_month", search_month + 1);
        today_Data.put("before_year", before_after_calendar.get("before_year"));
        today_Data.put("before_month", before_after_calendar.get("before_month"));
        today_Data.put("after_year", before_after_calendar.get("after_year"));
        today_Data.put("after_month", before_after_calendar.get("after_month"));

        // sql문 조건 설정을 위한 시작 날짜와 끝 날짜 값 설정
        this.db_startDate = String.valueOf(search_year) + "-" + String.valueOf(search_month + 1) + "-"
                + String.valueOf(startDay);
        this.db_endDate = String.valueOf(search_year) + "-" + String.valueOf(search_month + 1) + "-"
                + String.valueOf(endDay);

        // 인자값으로 사용하기 위해 Map에 넣어준다
        today_Data.put("db_startDate", db_startDate);
        today_Data.put("db_endDate", db_endDate);

        return today_Data;
    }

초반에 저 db_startDate와 db_endDate의 역할이 뭔가 했는데 매퍼사용을 위해 sql문을 작성하고 실행해보면서 알게됐다. 위의 두 값이 없으면 만약에 2022년 4월 16일에 컨텐츠를 등록했다고 하더라도 모든 연/월 16일에 컨텐츠가 계속해서 출력되는 치명적인 오류가 발생한다. db_startDate와 db_endDate의 설정으로 연/월의 조건체크가 가능한 것.

위와 같이 작성한 DateUtil 클래스는 컨트롤러에서 이렇게 사용된다.

public String calendar(Model model, HttpSession session, HttpServletRequest request, DateUtil dateData) {

        // 날짜 함수를 이용하기 위한 Calendar 클래스의 인스턴스 호출
        Calendar cal = Calendar.getInstance();

        DateUtil calendarData;

        // 따로 지정한 연도와 월이 없는경우 현재 연도와 월을 set
        if (dateData.getDate().equals("") && dateData.getMonth().equals("")) {
            dateData = new DateUtil(String.valueOf(cal.get(Calendar.YEAR)), String.valueOf(cal.get(Calendar.MONTH)),
                    String.valueOf(cal.get(Calendar.DATE)), null, null);
        }

        Map today_info = dateData.today_info(dateData);
        List dateList = new ArrayList();

        String db_startDate = String.valueOf(today_info.get("db_startDate"));
        String db_endDate = String.valueOf(today_info.get("db_endDate"));

        // 본 컨텐츠 내역 불러와서 저장
        ArrayList contents_list = calenderService.selectList(mem_num, db_startDate, db_endDate, dateData);

맨 마지막 문장이 mapper실행을 위한 service 호출이다. 아래가 mapper문장인데 어쩌다보니 많이 길어졌다.

@Select(
"SELECT 
    TO_CHAR(custom_date, 'YYYY-MM-DD') custom_date, 
    contents_num, 
    contents_type, 
    poster_path 
FROM dcontents_cal 
WHERE mem_num=#{mem_num} 
    AND custom_date BETWEEN #{db_startDate} AND #{db_endDate} "
)
public ArrayList selectList(
@Param("mem_num") Integer mem_num, 
@Param("db_startDate") String db_startDate, 
@Param("db_endDate") String db_endDate, 
DateUtil dateData);

@param의 역할은 여러개의 인자를 받을 경우에 각각을 연결시켜주는 역할

1. 뷰에서 날짜 정보를 가져옴 
2-1. (특정 날짜의 달력을 열람하고 있을 경우)
해당 달력의 연/월/일의 값을 db_startDate와 db_endDate에 입력
2-2. (특정 날짜의 달력을 열람하고 있는게 아닐 경우)
오늘에 해당하는 연/월/일의 값을 db_startDate와 db_endDate에 입력
3. custom_date BETWEEN @@년 @@월 1일 AND @@년 @@월 말일 의 where절을 갖게 되는 것이다.

위의 과정을 통해 특정 달의 컨텐츠 정보만 불러올 수 있는 것이다! (아직 달력 그리는 코드는 보지도 못했다 다음글에 이어서..)

자바스크립트를 이용한 캘린더 기능

Wed, 13 Apr 2022 16:38:02 GMT

어떤 기능인지부터 간단하게 설명하자면, 컨텐츠 시청 날짜를 등록할 수 있는 기능이다. 보이는 바와 같이 모달창으로 달력을 띄워서 날짜를 선택 후, 등록버튼을 누르면 컨텐츠 및 날짜 정보가 DB에 저장되는 방식이다.

이 기능 구현과 관련해서도.. 우여곡절이 정말 많았는데.. 각설하고.. 먼저 모달을 위한 기본 설정부터 하도록 하겠다.

(모달 기능은 다른 조원이 구현한 기능을 긁어다 쓴거라서 대략적인 흐름밖에 모르겠다.) 모달로 구현하기 위해서는 먼저 모달창에 보여질 영역에 대해서만 작성한 별도의 jsp가 필요하(ㄴ것같)다. 이런식으로 별도의 jsp를 생성한 뒤, 모달로 보여질 영역의 ①id를 지정해주고 jsp:include 기능을 통해서 아까 생성한 jsp파일을 불러와준다. 불러올 페이지에서는 버튼 태그 안에 data-bs-target 속성에 ①의 id값을 부여해주고, data-bs-toggle의 속성으로는 modal을 지정해준다. 해당 버튼을 누르면 사실은 존재하지만 JS와 CSS등으로 숨겨져있던 영역(①)이 모달창으로 보여지게 되는 것. 자세한건 여기서 확인하면 되겠다.

모달 설정이 끝났다면 이제 자바스크립트로 달력을 그려보자. 이 글을 참고했다. 적게 일하고 많이 버세요..

이미 완벽하게 짜여져있는 코드라서 정말 일부분만 우리 프로젝트 방향성에 맞게 수정했다. 추가 및 수정된 기능은 아래와 같다.

캘린더 최초 등록

이미 등록되어있는 날짜가 있고, 그와 다른 날짜를 누르면 날짜가 변경된다.

이미 등록되어있는 날짜가 있고, 그와 같은 날짜를 누르면 날짜가 삭제된다.

2만 설명해보자면 먼저 contents controller에서 캘린더 등록 여부와 관련된 정보를 컨텐츠 디테일 페이지에 뿌려준다.

이를 JS로 확인하여

만약 값이 있을 경우 위에 보이는 것처럼 해당 날짜를 하늘색으로 색을 칠해준다.

간단히 말해서

컨텐트 컨트롤러에서 컨텐츠 디테일에 뿌린 값을
JS에서 연/월/일로 분리하여 별개의 변수에 저장
열람 중인 달력의 연/월과 2에서 구한 연/월을 비교.
동일할 경우 날짜(date)를 그리는 반복문 안에 적절히 삽입. 의 과정을 거친다.

라고 간단히 말은 했지만.. 이 부분 또한 조원들에게 설명하는 것을 포기했다. 뭐 어쨌든 해당 날짜에 dayMark라는 css 클래스를 추가하게 됨으로써 위와 같이 색이 바뀌게 되는 것.

이 상태에서 다른 날짜를 클릭하게 되면 아래와 같이 변하는데,

위와 같은 클릭 이벤트 액션을 만들어 주었기 때문이다. 'day-active'가 새로 선택한 날짜, dayMark가 기존에 등록되어있는 날짜이다.

다시 백엔드쪽으로 넘어와서, 새로운 날짜를 선택한 뒤 등록 버튼을 누르면 ajax를 통해 캘린더 컨트롤러로 데이터를 넘기게 된다. 선택되어 있는 날짜의 연/월/일 값들을 각각 뽑아내서 custom_date라는 변수에 저장한 뒤,

다음과 같은 조건 체크를 통해 데이터를 넘기면 된다. insert와 delete도 같은 로직이라 이 둘은 설명을 생략하도록 한다.

이 기능 관련해서 정말 많은 고생을 했는데 역시 결과물은 너무나도 심플하다. 가슴아프게..

별점 + 코멘트 기능

Wed, 13 Apr 2022 13:07:38 GMT

왓챠피디아를 이용해봤다면 알 수 있을 것이다. 코멘트만 남길 수도, 별점만 남길 수도, 코멘트도 별점도 남길 수도 있다는 것을.. 다양한 경우의 수가 존재한다.

처음에 테이블 설계 때 막연하게 별점 테이블의 PK를 코멘트 테이블에서 FK로 받아서 둘을 연결시켜주면 되겠다고 생각만 했다. 프로젝트 초반에 설계했던 ERD

공교롭게 별점, 코멘트 기능이 내가 담당하던 기능이 아니었어서 신경을 못썼었다. 일단 각자 insert는 되고 있었기에 잘 되고 있구나 생각하다가 내가 코멘트 목록 출력 부분을 구현하게 되면서 이상한 점을 깨닫게 됐다.

보이는 바와 특정 컨텐츠에 대한 각 유저마다의 코멘트 내용과 출력이 같이 출력되어야 하는데, 이 때

SELECT a.*, s.star FROM (
SELECT d.name, d.photo_name, c.* FROM dmember_detail d JOIN dcomment c ON d.mem_num=c.mem_num ) a 
LEFT OUTER JOIN dcontents_star s ON a.star_num = s.star_num 
WHERE a.contents_type=#{contents_type} and a.contents_num=#{contents_num} 
ORDER BY a.comment_num DESC

위의 sql문을 사용해서 리스트를 불러오는데 분명 별점이 존재하는데도 불구하고 별점이 불러와지지 않는 것이다. sql문을 다시 살펴보고 sql developer에서 실행해보고 결과 값도 확인한 뒤에야 알 수 있었다.

기존에 설계했던 대로 코멘트 테이블과 별점 테이블을 FK로 엮어줘야 하는데 코멘트 테이블의 star_num 컬럼은 그대로 계속 null인 상태로 새로운 row가 생성되고 별점 테이블에서는 또 별도의 row가 생성되고 있으니 둘이 연결이 될 수 있을리가.. 너무나도 당연한 이야기긴한데 그때 당시에는 눈에 잘 안보였다 ㅎ;

별점만 주는 경우

코멘트만 작성하는 경우

별점을 먼저 준 뒤 코멘트를 작성하는 경우

코멘트를 먼저 작성한 뒤 별점을 주는 경우

1,2 는 문제가 없고 결국 3,4가 문제인 건데.. 조건체크와 insert 문장을 어떻게 작성해야 하나 고민 꽤나 했었다. star_num의 존재 여부를 먼저 확인한 뒤, 없으면 새롭게 ①star_num을 생성. 그리고 나중에 생성되는 row에 기존에 생성된 ①의 star_num을 입력해주는 걸로 해결했다. 텍스트로만 보면 감이 안오니까 같이 봐보도록 하자.

1. 먼저 컨트롤러에서 컨텐츠 디테일 페이지로 데이터를 뿌릴 때, 해당 컨텐츠에 유저가 평가한 별점 정보(star_num 등)를 같이 뿌려준다.

해당 jsp에서는 hidden타입으로 어딘가에 저장해놨었다.

2. 그리고 코멘트 등록 이벤트 발생 시, ajax로 코멘트 컨트롤러로 star_num을 전달한다.

이 때 만약 star_num이 존재하지 않는다면 임의로 star_num 값을 0으로 명시해준다. (단순한 조건체크 용 값 때문에 어떤 값이든 상관없음)

3. 코멘트 컨트롤러로 이동해서, 넘겨받은 데이터들을 매퍼로 또 전달한다.

xml 타입의 mapper를 사용할 것이고 이것저것 데이터를 넘길거라 map 객체에 넘겨받은 데이터를 저장해서 mapper로 전달했다. 약간 여기서부터 조원들에게 설명하기를 포기했다.

4. insert문을 실행시켜보자.


        INSERT INTO dcomment 
                (
                    comment_num,
                    contents_num,
                    contents_type,
                    content,
                    mem_num,
                    reg_date,
                    star_num)
        VALUES 
                (
                    dcomment_seq.nextval,
                    #{commentVO.contents_num},
                    #{commentVO.contents_type},
                    #{commentVO.content},
                    #{commentVO.mem_num},
                    SYSDATE,
                 
                    dcontents_star_seq.nextval
                
                 
                    #{star_num}
                
                )

일반적인 insert문과 크게 다를 건 없고 중간에 if로 조건문이 추가적으로 있을 뿐이다. 앞서 ajax에서 설정했듯이 star_num이 0이라면 (기존에 평가한 별점이 없다면) 그동안은 별점 테이블에서만 사용되었던 별점 시퀀스를 이용해 (일단)새롭게 star_num을 생성해서 insert를 한다. 반면 star_num 값이 존재한다면 (기존에 평가한 별점이 있다면) 별점 테이블에 존재하는, 3의 과정에서 뷰단에 뿌려졌던 star_num값을 가져와서 똑같이 입력한 뒤 insert해주면 된다.

즉, 간단히 말해서

star_num이 존재하든 안하든 일단 contents controller에서 contents detail page로 값을 뿌려준다.
ajax를 통해 contents detail page에 뿌려졌던 star_num을 comment controller로 전달
controller에서 다시 mapper로 전달
if문을 통해 insert되는 value를 다르게 설정 의 과정을 반복하는 것.

별점이 없었을 경우 : 코멘트 테이블에새로운 star_num이 생성됨 (나중에 별점을 줄 경우에 사용되어야 하기 때문에 임의로 일단 생성해준다) 별점이 있었을 경우 : 별점 테이블에 존재하는 star_num을 끌고와서 코멘트 테이블에 저장

또한 제약조건도 변경해야했다. 코멘트를 먼저 작성하는 경우 star_num을 FK로 한다면 FK 무결성 제약조건에 위반돼서 어쩔 수 없이 FK 제약 조건을 삭제했다. 별개의 테이블이 되어버린 둘..

코멘트 작성의 케이스로 설명을 했는데 반대의 경우도 똑같이 진행하면 된다. 분명 좀더 깔끔한 코드가 있을 것 같은데.. 내 머리로는 이게 한계..

TMDB API로 정보 불러오기 下

Mon, 11 Apr 2022 15:23:53 GMT

위와 같이 컨텐츠 타입별로 출력 결과를 다르게 하기 위한 작업

jsp에서 url을 통해 parameter 값을 컨트롤러로 전달할 수 있도록 한다.

3. 컨트롤러에서 데이터 처리하기

@Controller
public class MainController {
    @RequestMapping("/main/main.do")
                                            // jsp에서 전달받은 컨텐츠 타입
    public ModelAndView main(@RequestParam(value = "type", defaultValue = "movie") String contents_type) {

        // 영화 정보를 불러오는 클래스 (이전 글에서 설명한 데이터 파싱 전용 클래스)
        GetInfoUtil util = new GetInfoUtil();

        List release_date = null;
        release_date = util.getInfoList(contents_type);

        // List에 담긴 ContentsVO를 날짜 내림차순으로 정렬
        Collections.sort(release_date, new SortByDate());

        ModelAndView mav = new ModelAndView();
        mav.setViewName("main");

        mav.addObject("release_date", release_date); // 최신 공개 순

        return mav;
    }
}

VO의 특정 값으로 List 정렬하기

또한 VO의 특정 값으로 List를 정렬하기 위해(평점 순, 공개 순) Comparator 인터페이스를 사용해서 클래스를 생성해줬다. → 참조

public class SortByDate implements Comparator {
    @Override
    public int compare(ContentsVO o1, ContentsVO o2) {
        Date first = o1.getRelease_date();
        Date second = o2.getRelease_date();
        return second.compareTo(first);
    }
}

4. 뷰(jsp)에서 데이터 출력하기

그리고 jsp에서는 아래와 같이 c:forEach 를 사용해서 데이터를 반복해서 출력해주면 된다!


    
         // 한 row에 최대 20개까지만 출력되도록
            
                
                    
                        
                    
                
                
                    ${release_date.title }
                    
                        
                    
                    
                        평균
                        
                            ${Math.ceil((release_date.vote_average)/2*10)/10} 
                    
                    인기도 :
                        ${release_date.popularity }

결과물!

TMDB API로 정보 불러오기 上

Mon, 11 Apr 2022 04:57:31 GMT

디즈니 플러스에서 제공하는 컨텐츠 데이터를 불러오기 위해서 TMDB에서 제공하는 오픈 API를 사용했다. 로컬 DB에 데이터를 저장하지 않고 데이터를 불러와서 바로 출력하는 방식은 처음이라 조금 헤맸었다.

1. TMDB API 사용법

가입과 API KEY발급 설명은 이 글을 참조해주세요. 가입과 KEY발급까지 끝났다면 https://developers.themoviedb.org/3/ < 여기로 이동해줍니다. TMDB API는 URL을 통해서 데이터를 얻는 방식으로 사용이 가능한데, 친절하게도 사용자가 얻고자 하는 데이터에 따라서 탭을 분할해서 자세히 설명해주고 있다.

내가 만약 특정 회사에서 제공하는 컨텐츠(우리 프로젝트에 있어서는 디즈니 플러스가 되겠다)의 목록을 알고 싶다면 DISCOVER탭을 선택해서 진행할 수 있다.

해당 페이지로 이동해서 하단을 보면 이런 화면이 보인다. 원하는 데이터를 불러올 때 필요하고, 사용할 수 있는 parameter들을 확인할 수 있다.

사용할 조건들의 value값을 오른편의 입력칸에 입력해주면 정말 친절히도 TMDB측에서 알아서 쿼리 스트링으로 엮어서 url을 생성해준다.

이 때 적절한 parameter의 value값을 모르겠다면 헤더의 OAS버튼을 눌러보자.

json 형식으로 API의 스펙이 명시되어 있다. Ctrl+F로 검색해서 필요한 정보를 찾아내면 된다. 내가 사용할 정보는 디즈니 플러스에 해당하는 provider_id의 value값! 337이라고 명시되어있는 것을 알 수 있다.

2. 자바로 json 타입 데이터 파싱하기

위와 같은 방법을 통해 url을 완성시켜서 아무 웹 브라우저에서 실행시켜보자.
(예를 들어 디즈니 플러스에서 제공하는 컨텐츠 중 한국에서 이용할 수 있는 영화 목록을 불러오기 위한 url은 다음과 같다 : https://api.themoviedb.org/3/discover/movie?api_key=본인API KEY값&with_watch_providers=337&watch_region=KR&language=ko&page=)

위의 url을 실행하면 위와 같은 보자마자 정신이 아득해지는 결과물을 얻을 수 있다.
맨 첫줄부터 해석해보자면 "page" : 1의 의미는 총 검색 결과 중 첫 페이지를 출력하고 있으며, "results" : 의 의미는 해당 페이지의 검색 결과는 다음과 같다라는 의미다.
또한 대괄호로 크게 묶고 그 안에 또 다시 중괄호와 쉼표로 나열돼있는데 { }로 묶여져있는 텍스트들이 하나의 컨텐츠 정보가 담긴 하나의 객체라고 생각한다면 쉽다.

이해를 돕기 위한 이미지.. 이걸 조원들한테 이해시키느라 정말 힘들었다.
이제 또 하나의 컨텐츠 객체 안에서 내가 필요한 정보들만 적절히 뽑아내서 사용하면 된다!

프로젝트 시작 당시에는 파이썬을 배우지 않았어서 자바를 이용한 데이터 파싱 방식을 사용했다. 이 글을 참조해서 코드를 작성했다. 너무너무 감사하고 적게 일하고 많이 버시길..

public List getInfoList(String type) {
        int pages = getPages(type);

        DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
        String date = "0001-01-01";

        List infoList = null;
        List genreList = null;

        try {

            infoList = new ArrayList();

            // 페이지 마다 루프를 돌며 값 추출 및 저장
            for (int i = 1; i <= pages; i++) {
                String apiURL = "https://api.themoviedb.org/3/discover/" + type + "?api_key=" + KEY
                        + "&with_watch_providers=337&watch_region=KR&language=ko&page=" + i;
                URL url = new URL(apiURL);

                BufferedReader bf;

                bf = new BufferedReader(new InputStreamReader(url.openStream(), "UTF-8"));

                result = bf.readLine();

                JSONParser jsonParser = new JSONParser();
                JSONObject jsonObject = (JSONObject) jsonParser.parse(result);
                JSONArray list = (JSONArray) jsonObject.get("results");

                for (int j = 0; j < list.size(); j++) {
                    ContentsVO vo = new ContentsVO();
                    JSONObject contents = (JSONObject) list.get(j);

                    vo.setContents_num(Integer.parseInt(String.valueOf(contents.get("id"))));
                    vo.setContents_type(type);
                    vo.setOverview(contents.get("overview").toString());
                    vo.setVote_average(Float.parseFloat(String.valueOf(contents.get("vote_average"))));
                    vo.setPopularity(Float.parseFloat(String.valueOf(contents.get("popularity"))));

                    // 컨텐츠 타입(영화/시리즈)에 따라서 파싱 방법 다르게 설정
                    if (type.equals("movie")) {

                        // 시리즈일 경우 release_date를 key로 데이터 파싱
                        if (contents.get("release_date") == null || contents.get("release_date").equals("")) {
                            vo.setRelease_date(dateFormat.parse(date));
                        } else {
                            Date release_date = dateFormat.parse((String) contents.get("release_date"));
                            vo.setRelease_date(release_date);
                        }
                        vo.setTitle(contents.get("title").toString());
                    } else if (type.equals("tv")) {

                        // 시리즈일 경우 first_air_date를 key로 데이터 파싱
                        if (contents.get("first_air_date") == null || contents.get("first_air_date").equals("")) {
                            vo.setRelease_date(dateFormat.parse(date));
                        } else {
                            Date first_air_date = dateFormat.parse((String) contents.get("first_air_date"));
                            vo.setRelease_date(first_air_date);
                        }

                        // 시리즈일 경우 title이 아닌 name을 key로 데이터 파싱
                        vo.setTitle(contents.get("name").toString());
                    }
                    if (contents.get("poster_path") == null || contents.get("poster_path").toString().equals("")) {
                        vo.setPoster_path("");
                    } else {
                        vo.setPoster_path(contents.get("poster_path").toString());
                    }

                    // 장르 id를 List 형태로 저장 → 장르 비교를 위한 작업
                    JSONArray genre_list = (JSONArray) contents.get("genre_ids");
                    genreList = new ArrayList();
                    for (int k = 0; k < genre_list.size(); k++) {
                        genreList.add(Integer.parseInt(String.valueOf(genre_list.get(k))));
                    }
                    vo.setGenres(genreList);
                    infoList.add(vo);
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        return infoList;
    }

배열 형태로 저장돼있는 각각의 객체들에서 해당 key 값에 해당하는 value 값을 추출해서 VO에 저장한다고 생각하면 간단하다!

...이어서

왓챠 피디아 클론 코딩 : 디즈니 피디아

Sun, 10 Apr 2022 12:24:53 GMT

왓챠피디아를 레퍼런스로 하여 클론 코딩하기. 간단히 말해서 컨텐츠의 범위를 디즈니 플러스에서 이용할 수 있는 컨텐츠로만 축소한 버전이라고 생각하면 되겠다.

실제 구현 페이지 >> 디즈니 피디아
(현재 회원가입은 막아놓은 상태. ID/PW : boochoo로 로그인하여 조회만 가능)
깃허브 >> 깃허브

프로젝트 개요

🛠️ 개발 환경

Tool : eGov Spring Framework
DBMS : Oracle 11g
Server : Apache Tomcat v9.0
Language : JAVA / SQL / JSP / jQuery / JavaScript / HTML / CSS

🔥 프로젝트 진행

진행 기간 : 2022/03/15 ~ 2022/04/11
2022/03/15 ~ 2022/03/18 : 주제 선정 및 테이블 설계, Git Hub 연동
2022/03/19 ~ 2022/04/03 : 기능 및 화면 구현
2022/04/04 ~ 2022/04/10 : 오류 수정, UI 정리, 발표 준비
2022/04/11 : 발표

🎥 왓챠피디아 클론 기능

'디즈니 플러스'에서 제공하는 컨텐츠의 정보를 확인할 수 있습니다.
해당 컨텐츠에 평점과 코멘트를 작성할 수 있습니다.
다른 사람들이 작성한 평점과 코멘트를 열람할 수 있습니다.
다른 사람들이 작성한 코멘트에 좋아요를 할 수 있습니다.
보고싶어요와 평점, 코멘트 기능을 통해 내가 아직 시청하지 못한 컨텐츠와 이미 시청한 컨텐츠를 구분하여 확인할 수 있습니다.
프로필에서 내 정보 및 타유저 정보를 확인할 수 있습니다.

🆕 새롭게 추가된 기능

캘린더 기능을 통해 언제 해당 컨텐츠를 시청했는지 확인할 수 있습니다.
채팅 기능을 통해 디즈니 플러스를 같이 이용할 사람들을 모집할 수 있습니다.
내가 작성한 코멘트 뿐만 아니라 타유저가 작성한 코멘트 및 타유저가 좋아한 코멘트를 열람할 수 있습니다.

🌿 내가 구현한 기능

프론트 엔드

거의 모든 페이지 프론트 엔드 제작 및 수정에 참여했기 때문에.. 처음부터 끝까지 담당했던 페이지는 아래와 같다.
✔️ 헤더, 푸터, 메인, 검색, 컨텐츠 디테일 페이지

로그인, 로그아웃

✔️ 로그인 시 해당 페이지에 머물 수 있도록 설정
✔️ 로그아웃 시 페이지별로 리다이렉트 페이지 별도 설정

메인 페이지

✔️ TMDB API를 활용하여 컨텐츠 정보 출력
✔️ 컨텐츠 타입, 평균 평점, 코멘트 수(자체 DB 활용) 등의 기준으로 데이터 필터링
✔️ 버튼으로 조작하는 횡스크롤

검색 페이지

✔️ 데이터 필터링
✔️ 검색 카테고리 별로 다른 화면 출력

컨텐츠 상세 페이지

✔️ 컨텐츠 정보 출력
✔️ 보고싶어요 기능
✔️ 캘린더 기능
✔️ light box 플러그인을 활용한 이미지 캐러셀 팝업기능
✔️ 코멘트 좋아요 기능

코멘트 상세 페이지

✔️ 컨텐츠 정보 및 코멘트 정보 출력
✔️ 코멘트 좋아요 및 댓글 기능

채팅 페이지

✔️ ajax로 구현한 채팅 메시지 입출력 기능
✔️ ajax로 구현한 모집현황 변경 기능

마이 페이지

✔️ 내 프로필 및 타유저 프로필 열람 기능
✔️ 캘린더 기능
✔️ 마이 컨텐츠 조회 기능(보고싶어요 및 평가)
✔️ 내가 작성한 코멘트 조회 및 수정,삭제 기능
✔️ 내가 좋아한 코멘트 조회 및 좋아요 취소 기능

이 외에도 전반적으로 자잘한 기능 구현 및 오류 수정 담당..

💪 후기 및 소감

소통, 소통, 소통..

프로젝트 초반 제일 힘들었던건 파이널때 갑자기 변경된 팀이었다. 두번의 프로젝트 동안 맞춰온 팀워크가 있었는데 이제와서 새롭게 합을 맞추려니 조금 어려움이 있었다.
각자가 그동안 배우고 해왔던 프로젝트의 방향과 방법이 다르다보니 처음에 이를 서로 공유하고 의견을 합치하는 데에도 꽤나 시간이 걸렸다.
큰 틀이든 세세한 부분이든 뭐든 확실히 정하고 진행해야 하는 나와, 일단 진행 먼저 하고 세세한 부분은 담당자가 알아서 하자는 다른 조원들간의 의견 불합치.. 다행히 팀원들이 내 의견을 따라줘서 적어도 '나'는 만족스럽게 진행할 수 있었다.

빠른 상황 판단과 과감한 포기의 중요성

내가 얼마나 이 기능을 구현하기 위해 많은 시간과 노력을 쏟았는지와는 별개로 프로젝트의 진행과 완성을 위해서 과감히 포기할 줄도 알아야 한다는 점을 다시한번 느꼈다. 이를 위해서는 제대로 된 상황 판단이 받쳐줘야 가능하겠지. 본인이 판단이 서지 않는다면 다른 사람에게 도움을 청해서라도 판단을 내려야 할 필요가 있다.

기능 구현 관련

개념조차 모호했던 '데이터 분석', '데이터베이스 모델링'의 중요성
API 활용 가능 여부도 불분명했고 마음이 급해서 초반에 제대로 데이터 분석을 못했던 것이 아쉽다.
좀 더 마음의 여유를 갖고 제대로 분석한 뒤 진행했다면 계속해서 테이블을 수정할 필요도 없었을 터.. 다음 프로젝트(가 있다면) 때는 좀 더 여유를 갖도록 하자.

배움에는 끝이 없고 의미없는 실수와 과정은 없다.
지난 세미 프로젝트때 엄청난 고생을 했던 '정렬'기능.. 비록 내가 담당했던 기능은 아니지만 해당 조원에게 도움을 줄 수 있어서 너무 뿌듯했다. 이래서 여러번의 프로젝트 경험이 중요한 거구나 다시한번 느꼈다. 계속해서 쌓여가는 지식들. 까먹지 않도록 잘 정리해놔야지

처음 해보는 코드 리뷰
지난 두번의 프로젝트를 같이 해왔던 팀은 다들 개인적인 성향이 강해서 본인이 맡은 담당한 부분만 구현하고 담당하지 않은 부분의 코드분석은 개인적으로 알아서 진행해왔었다. 물론 이해가 어려운 부분이 있다면 담당자에게 개인적으로 물어보긴 했었지만..
이번 팀은 그런 지난 팀 프로젝트 경험에서 얻어가는게 없었다는 의견이 있어서 각자 새롭게 구현한 기능이 생길 때 마다 코드리뷰를 하며 설명하는 시간을 갖자고 했다. 비록 그 코드리뷰는 거의 내 담당 발표시간이 되어버리긴 했지만 ㅎ..
코드 리뷰는 처음 해보는거라 초반에는 어떤식으로 해야할지도 막막하고 청자도 이해하기 힘들어 했었는데 역시나 해봐야 는다고 점점 실력이 좋아지는게 스스로 느껴졌다.
코드 리뷰를 준비하면서 왜? 라는 질문을 스스로 끊임없이 했다. 팀원들의 쉬운 이해를 위해 텍스트도 정리해보고 그림도 그려보고.. 솔직히 당시에는 이게 웬 고생이냐 싶었지만 결론적으로는 내가 더 얻어가는게 많았던 시간이었다. 너무너무 좋은 경험이되었다.