Spring

[Spring/Ajax] Chart.js로 차트 만들기 2

안녕하세요 코북입니다. 지난번 https://cobook.tistory.com/36 에서 Chart.js를 이용해 차트 만들기를 해봤었습니다. 그때는 DB에 넣은 값을 단순하게 보여주는 것이 끝이었다면 오늘은 DB에 있는 값들을 연산하여 차트로 만들어봤습니다. 작업 진행 순서는 다음과 같습니다. VO Mapper.xml Mapper Interface Controller JavaScript 1. VO 사용할 변수에 맞춰 VO를 작성해줍니다. package city.turtle.vo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstr..

[Spring] @Param 어노테이션으로 mapping하기

안녕하세요 코북입니다. 차트 만드는데 계속 이런 오류가 발생했습니다. '이용 가능한 변수들이 4개가 있는데 그중에서 "mb_id"라는 변수를 찾을 수 없다.'라는 내용입니다. Mapper Interface에서 실행한 메소드가 xml에서 변수들을 찾아가지 못해서 발생한 오류인데요. @Param 어노테이션을 사용하여 mapping 할 변수의 이름을 명시해 주었더니 오류가 해결됐습니다. mapping이란 하나의 값을 다른 값으로 대응시키는 것을 말합니다. ■ Mapper Interface public int countSum(GraphVO vo, int num1) throws Exception; ■ Mapper.xml select sum(pos_count) as pos_sum from POSTURE where ..

[Spring] 회원 정보 수정하기

안녕하세요 코북입니다. 오늘은 회원 정보 수정 기능을 구현했습니다. 앞에서 회원가입과 로그인을 구현했다면 회원 정보 수정은 쉽게 구현할 수 있습니다. 작업순서는 다음과 같습니다. MyBatis XML Mapper Mapper Interface Controller JSP 1. MyBatis XML Mapper 먼저 회원정보를 수정할 수 있는 sql 쿼리를 만들어줍니다. update set 명령어를 사용했고 id값을 조건으로 합니다. update MEMBERS set mb_nick=#{mb_nick}, mb_pwd =#{mb_pwd}, mb_name=#{mb_name}, mb_birth=concat(#{mb_yy}, #{mb_mm}, #{mb_dd}), mb_gender=#{mb_gender}, mb_ema..

[Spring/Ajax] Chart.js로 차트 만들기

안녕하세요 코북입니다. 이번 프로젝트에서 측정한 거북목 DB를 사용자에게 시각화하여 보여주기 위해 차트를 만들게 됐습니다. 자료를 찾아보니까 Chart.js라는 사이트에서 Javascript를 사용하여 간편하게 차트를 구현할 수 있게 오픈 소스를 제공하고 있었습니다. 세상에는 정말 많은 천재들이 있구나 하는 생각이 들었습니다. 사이트 링크와 작업 진행 순서입니다. https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom sca..

[Spring] 카카오 로그인 Open API

안녕하세요 코북입니다. 지난번에 네아로 Open API를 사용해 네이버 아이디로 로그인 연동을 구현해봤는데요. 카카오 Open API도 같은 방식으로 구현이 돼서 기록하러 왔습니다. API의 흐름은 앞에서 언급했던 것과 동일하니 생략하도록 하겠습니다. 참고해주시면 감사하겠습니다. https://cobook.tistory.com/31 작업 진행순서도 똑같습니다. 1. 카카오 Open API 이용신청 2. OAuth2.0 Java OpenSource Library 설정 3. Scribe Library를 이용하여 카카오 인증 버튼 적용 4. Controller 5. jsp 1. 카카오 Open API 이용신청 https://developers.kakao.com/docs/latest/ko/kakaologin/c..

[Spring] 회원가입 기능

안녕하세요 코북입니다. 지난번에 회원가입 화면을 Bootstrap을 이용해 구성해봤었습니다. 오늘은 그 화면에 맞춰 DB에 값을 넣어 회원가입을 할 수 있도록 만들겠습니다. 작업 진행 순서는 다음과 같습니다. 1. sql, jsp, vo 참고 2. mapper.xml 3. mapper 4. controller 5. jsp 1. sql, jsp, vo 참고 DB에 값을 넣을 쿼리를 작성하기에 앞서, 테이블 구조와 회원가입 화면 jsp, 미리 만들어 놓은 vo를 통해 회원가입 sql을 을 어떻게 작성할지 생각해봅니다. ■ sql DB에 넣을 회원 테이블의 컬럼은 다음과 같습니다. join_date 컬럼을 default now()로 설정하면 가입이 완료됐을 때의 시간이 가입일자가 됩니다. CREATE TABL..

[Spring] 네이버 로그인 Open API

안녕하세요 코북입니다. 이번 프로젝트에서는 기존 홈페이지 DB를 통한 로그인 이외에 추가로 소셜 계정 로그인을 구현할 계획입니다. 목표는 네이버, 구글, 카카오 로그인이고 먼저 네아로 오픈 API를 사용해 네이버 로그인을 연동해봤습니다. API 흐름은 다음과 같습니다. 1. Resource Owner가 네이버 로그인 버튼을 클릭합니다. 2. 버튼 클릭 시 Service Provider에서 Client에 발급해준 웹 애플리케이션 Client ID, Client Secret를 통해 네이버 로그인 API를 호출하면 네이버 로그인 폼으로 이동합니다. 3. Resource Owner가 Service Provider에 id, pw를 입력합니다. ( Client에 입력 X ) 4. 계정 액세스 권한 요청 동의를 거친..

[Spring] session으로 로그인 유지하기

안녕하세요 코북입니다. 오늘은 session을 사용해 로그인 기능을 구현해보겠습니다. 들어가기에 앞서 간단하게 session에 대해서 정리해보자면, session은 우선 cookie의 트래픽 문제와 보안적인 문제를 해결하기 위해 등장했습니다. 사용자의 로컬 컴퓨터에 정보를 저장하는 cookie와 다르게 session은 해당 서버(웹)와 사용자의 메모리(브라우저)에 정보를 저장합니다. 정보를 서버에 저장하기 때문에 관리하기가 편하고 효율적입니다. session의 동작 절차는 다음과 같습니다. 1. 사용자가 서버에 접속을 요청하면 서버에서는 HTTP Request를 통해 쿠키에서 session id를 확인한 후, session id가 없다면 set-cookie값을 통해 새로 발행한 session id를 보냅..

[Spring] 비동기 ID 중복 체크 기능

안녕하세요 코북입니다. 1차 때는 JDBC와 서블릿을 사용해서 ID 중복 체크를 구현했었는데, 이번 프로젝트에서는 스프링으로 구현해봤습니다. 흐름이 조금 더 익숙하지 않긴 하지만 확실히 스프링 프레임워크가 좀 더 코드가 짧고 간결해서 익숙해지면 훨씬 쉽게 작업을 할 수 있을 것 같습니다. 작업순서는 JSP로 view단 먼저 만든 후 ajax를 이용해 json데이터를 요청했고, 그 후 controller와 mapper를 연결시켰습니다. 작업순서 1. jsp, ajax 2. controller 3. mapper 1. JSP, AJAX 아이디 먼저 bootstrap을 이용해 id를 입력할 수 있는 입력창을 먼저 만들었습니다. 그 밑에는 사용자가 id를 사용할 수 있는지 없는지 알림을 주기위해 font 태그를 ..

[Spring] Spring에서 html 열기

Spring에서 html 파일을 불러올 때 404 Error가 발생하는 경우가 있습니다. web.xml 파일에 다음과 같이 servlet 코드를 입력하면 html 파일도 열 수 있게 됩니다. htmlServlet org.apache.jasper.servlet.JspServlet 2 htmlServlet *.html