분류 전체보기

[MySQL] WEEKDAY(), CASE문 사용해 차트에서 '요일' 구현

https://cobook.tistory.com/36 안녕하세요 코북입니다. 지난번 차트를 만들다가 차트에 날짜만 표시되는 것이 뭔가 부족하다고 느껴져서 요일도 추가해봤습니다. mysql에 있는 WEEKDAY() 메소드와 CASE문을 사용해서 구현했습니다. 컨트롤러와 Mapper Interface는 수정할 필요 없었고 JavaScript와 Mapper.xml, VO를 수정하여 구현했습니다. 작업 순서는 다음과 같습니다. sql문으로 쿼리 생성 작성한 쿼리에 맞춰 Mapper.xml 수정 VO 수정 JavaScript 수정 1. SQL문으로 쿼리 생성 select * from POSTURE where mb_id='adkim' and pos_type='거북목' and pos_time between DATE_..

[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..

[error/mysql] Unknown column '' in 'field list'

INSERT INTO NOTICES (NOT_TITLE,NOT_CONTENTS,MB_ID) VALUES('거북목 공지 테스트','테스트','관리자') Unknown column 'NOT_CONTENTS' in 'field list' 1. 테이블에 컬럼이 존재하지 않은 경우 저는 컬럼이름을 잘못적어서 오류가 발생했습니다. 2. 문자열 데이터에 따옴표가 없는 경우 참고 https://chobopark.tistory.com/92

[JavaScript/jQuery] 아이디/비밀번호 입력 알림

안녕하세요 코북입니다. 로그인 파트가 거의 완성되어가는 시점이기도 하고 잠깐 쉬어가는 느낌으로 아이디/비밀번호 입력 알림을 구현해봤습니다. ■ jQuery 기존 태그에 id 값을 추가하여 jQuery로 접근했습니다. 로그인 상태 유지 로그인 ■ JavaScript JavaScript의 경우입니다. loginCheck() 함수를 실행시키기 위해 type을 submit에서 button으로 변경했습니다. form태그를 submit 해주는 작업을 처리하기 위해 아이디와 비밀번호가 모두 입력되면 수동으로 submit 처리를 해줍니다. 로그인 상태 유지 로그인 구현 화면 사용 기술 및 언어 JAVA, HTML, CSS, Bootstrap, JavaScript, JQuery, JSP 배운 점 alert에서 개행할 때..

[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 태그를 ..

[JQuery] 비밀번호 일치, 클래스 추가, 클래스 삭제

안녕하세요 코북입니다. 이번 프로젝트에서도 여김 없이 로그인을 구현하게 됐는데, 이번에는 클래스를 변경하는 작업까지 해봐서 기록하러 왔습니다. jquery에서 addClass와 removeClass를 사용해 손쉽게 클래스를 추가하고 지울 수 있었습니다. 말 그대로 addClass는 기존 클래스에 클래스를 추가해주고 removeClass는 기존 클래스에 있는 내용을 지워줍니다. 비밀번호 일치 여부가 변경될 경우, 기존에 있는 값을 지우고 추가해줘야 하기 때문에 removeClass를 addClass보다 앞에서 실행합니다. 아래는 코드와 구현 화면입니다. + https://yenbook.tistory.com/63 자바스크립트 vs 제이쿼리 ( JQuery ) 자바스크립트 vs jQuery, 과연 그 우위는?..