2023년 2월 2주차

스프링 model.addAttribute로 값 전달 및 그래프로 시각화 필요성 

 

비교 및 손실율을 그래프로 나타내야 하기 때문에 직관적이고 유용한 막대 그래프 선정

 

우선은 협업 때문에, 로컬 DB 서버 외부 접속을 허용해야 했다.

 

1, mysql -u 유저네임 -p 패스워드 

MySql 윈도우 터미널로 접속

 

https://nickjoit.tistory.com/144

mysql 사용자추가/DB생성/권한부여

 

2, mysql 사용자 추가/DB 생성/권한 부여를 통한 외부 접속 허용

 

https://nickjoit.tistory.com/144

mysql 사용자추가/DB생성/권한부여

 

1) use mysql; 후 select host, user from user; 로 host와 user 확인

2) 외부 접근 허용된 사용자 추가

 

!) 로그인 오류 Access denied for user '' @ ''(using password: YES) 해결 방법

https://changun516.tistory.com/55

[Mysql 2059] 로그인 오류 Access denied for user '' @ ''(using password: YES)

 

!) 유저 권한 주기 에러 ERROR 1410 (42000): You are not allowed to create a user with GRANT 해결 방법

https://dzzienki.tistory.com/22

MYSQL 유저 권한 주기 에러 ERROR 1410 (42000): You are not allowed to create a user with GRANT

 

3, highcharts로 그래프 구현

 

1) 해당 사이트로 예제 확인하기

 

https://www.highcharts.com/blog/download/

Download Highcharts | Highcharts

 

4. highchart에서 json 데이터를 전달하는 과정이 담긴 유튜브 영상.

 

https://www.youtube.com/watch?v=LolL95k57_Y 

 

1) highchart에서 json 데이터를 전달하기 위해 프론트 단의 $.ajax과 백 단의 @ResponseBody를 사용해야 했다.

 

https://velog.io/@nestour95/Spring-Json-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C-%ED%86%B5%EC%8B%A0

Spring) Json 데이터로 통신

 

https://lifejusik1004.tistory.com/entry/Spring-%EC%8A%A4%ED%94%84%EB%A7%81-RequestBody-ResponseBody-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[Spring] 스프링 @RequestBody, @ResponseBody 사용하기

 

5, ajax 쓰던 도중 CORS 오류 발생

 

 

SOP란 같은 Origin에만 요청을 보낼 수 있게 제한하는 보안 정책을 의미하며,

Origin은 아래와 같은 구성으로 이루어져 있다.

* URI Schema(ex. http, https)
* Hostname(ex. localhost, naver.com)
* Port(ex. 80, 8080)

 

이 중에 하나라도 구성이 다르면 SOP 정책에 걸리기 때문에 ajax 요청 전송 불가

 

https://shinsunyoung.tistory.com/86

Spring Boot에서 CORS 적용해보기

 

!) 원인 파악

 

인텔리제이의 html 작성 중 built in preview라는 기능을 사용하면 포트가 63442가 됐는데, 인텔리제이의 임시 서버라고 예상하고 있다. 포트가 달라 SOP에 걸렸고, 우선 ajax 쓰는 도중 built in preview 기능을 쓰지 않는 게 좋다고 판단하였다.

 

https://velog.io/@gnoesnooj/CORS-%ED%95%B4%EA%B2%B0

CORS 해결

 

6, 프론트 단이 백 단에서 받아온 json 에서 json 안에 json 접근 방법

 

sample = '{ "key1": "val1", "key2": { "key3": "val2"} }'
json = JSON.parse(sample)
console.log(json['key2']['key3'])

 

https://okky.kr/articles/974197

OKKY - json 객체 배열안에 json객체 배열 접근 방법 알려주세요 제발...ㅜㅜㅜ

 

7. 자바스크립트에서 문자열에 변수 사용하기(템플릿 리터럴)

 

var t1,t2;
t1 = 3;
t2 = 6;

console.log(`t1 = ${t1}, t2 = ${t2}`);

 

단 주의해야할 게,무조건 ` ` 으로 문자열을 묶어야 한다.

 

https://pang2h.tistory.com/116

JS: 문자열에 변수 사용하기(템플릿 리터럴)

 

!) $ 사용 도중, Uncaught ReferenceError: $ is not defined 오류가 발생했는데 제이쿼리 (jQuery)가 제대로 로드 되지 않아서 발생한 것이다.

 

아래의 <script> 중 하나를 선택해서 추가한다.

// jQuery에서 제공하는 최신 버전의 jQuery URL
<script src="http://code.jquery.com/jquery-latest.js"></script> 
// jQuery에서 제공하는 3.5.1 버전의 jQuery CDN 호스트
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

 

https://joonpyo-hong.tistory.com/entry/JS-jQuery-is-not-defined-is-not-defined-%EC%98%A4%EB%A5%98

[JS] jQuery is not defined, $ is not defined 오류

 

8. JSON에서 object에 접근하기

 

 hobby : [
    { hobbys : "농구"}, //0
    { hobbys : "축구"}, //1
    { hobbys : "게임"}  //2
  ],

 

{ hobbys : "축구"} 에 접근하기 위해서는 obj.hobby[1].hobbys 로 접근하면 된다.

 

https://gamepp.tistory.com/18

[JSON] object에 접근하기

 

9. 자바스크립트에서 배열의 끝에 요소를 추가하는 방법 중 push()가 있다.

 

var arr = ['a', 'b', 'c'];
arr.push('d');

// arr = ['a', 'b', 'c', 'd']

 

https://stonefree.tistory.com/50

[JavaScript] 배열(array) 생성, 추가, 삭제_new, push(), pop()...

 

10. 자바스크립트에서 Date의 set API로 시간을 더할 수 있다.

 

let date = new Date();
console.log(date)
// Add 1 day
date.setDate(date.getDate() + 1);
// Add 1 hour
date.setHours(date.getHours() + 1);
// Add 10 minutes
date.setMinutes(date.getMinutes() + 10);
// Add 10 seconds
date.setSeconds(date.getSeconds() + 10);
console.log(date)

 

https://codechacha.com/ko/javascript-add-time-to-date/

JavaScript - Date에 시간(일/시/분/초) 더하기

 

console.log로 그래프에 넣을 배열을 확인하면서 데이터 바인딩 완료

더 가다듬을 필요가 있지만, 그래프는 나중에 쓰이기 때문에 여기까지 작업

 

 

부연 참고)

 

1) meta viewport (메타 뷰포트 태그) 사용법

 

다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있는 뷰포트 설정

 

https://aboooks.tistory.com/352

meta viewport (메타 뷰포트 태그) 사용법

 

2) JSONObject는 순서가 상관이 없지만, JSONArray는 순서가 중요하다.

 

https://velog.io/@jonmad/Til.-%EC%BD%94%ED%8B%80%EB%A6%B0-JSON-%ED%8C%8C%EC%8B%B1

Til. 코틀린 JSON 파싱

 

3) JSONParser.parse()로 문자열을 JSON으로 변환하기

 

https://hianna.tistory.com/623

[Java / json-simple ] 문자열을 JSON으로 변환하기

 

4) String <-> Json 쉽게 변환할 수 있는 Gson 라이브러리

 

https://kkh0977.tistory.com/2775

110. (spring/스프링) GSON 사용해 Map , Json 데이터 변환 수행 실시

 

5) Ajax 메소드 설명

 

http://www.tcpschool.com/jquery/jq_ajax_method

코딩교육 티씨피스쿨

 

6) 스프링과 자바 스크립트 간의 Json 데이터로 통신 예제

 

https://velog.io/@nestour95/Spring-Json-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C-%ED%86%B5%EC%8B%A0

Spring) Json 데이터로 통신

 

7) try 구문 내에서 return에 도달하지 못하고 예외 발생했을 경우 catch-finally문이 작동한 뒤,

이 후 코드를 계속 실행해 나가다가 리턴값을 만나면 리턴, 해당 방식을 통해 예외 처리

 

https://codevang.tistory.com/211

메소드 내 예외처리(try-catch-finally)에서의 리턴 처리

 

8) 자바스크립트에서 스코프(scope)는 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위를 뜻하며, var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 이 때문에 var 사용을 주의해야 한다.

 

https://www.howdy-mj.me/javascript/var-let-const

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프

 

9) '==' 연산자를 이용하여 서로 다른 유형의 두 변수의 [값]을 비교하지만,  '==='는 엄격한 비교를 하는 것으로 알려져 있다. ([값 & 자료형] -> true).

 

https://velog.io/@filoscoder/-%EC%99%80-%EC%9D%98-%EC%B0%A8%EC%9D%B4-oak1091tes

자바스크립트: '==' 와 '===' 는 다르다!

 

10) Ajax 통신 url 보낼 때 쿼리스트링을 보내는 방법이, url:"detailMovie.com?m_number='"+ms_mid+"'", 형식 말고 url: "detailMovie.com?m_number=" + ms_mid, 형식으로 바꾸기

 

https://qna.programmers.co.kr/questions/4251/ajax-%ED%86%B5%EC%8B%A0-url-%EB%B3%B4%EB%82%BC%EB%95%8C-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81%EB%8F%84-%EA%B0%99%EC%9D%B4-%EB%AA%BB%EB%B3%B4%EB%82%B4%EB%82%98%EC%9A%94

Ajax 통신 url 보낼때 쿼리스트링도 같이 못보내나요..?

 

11) Intelijj IDEA state, that success function in AJAX request in never used. 라 해서 success 함수가 unused property success 인 상태일 때 밑처럼 [] 로 묶어서 사용할 수 있다.

 

$.ajax({
    type : "POST",
    contentType : "application/json",
    url : "dotheajax",
    data : JSON.stringify(dataToSend),
    dataType : "json",
    success : [
        function(response) {
            $("#typeAjaxHere").html(response);
        }
    ]
});

 

https://stackoverflow.com/questions/33528364/intelijj-idea-state-that-success-function-in-ajax-request-in-never-used

Intelijj IDEA state, that success function in AJAX request in never used.