JavaScript 10

Springboot 게시판 만들기!(7) 댓글 등록 with Ajax

vo/dto/dao 세팅하고 html 로그인 여부에 따라 다르게 표시해주고 js 클릭 시 행할 함수를 만들어준다 정상적으로 등록했다면 등록한 게시물 페이지로 이동된다 service로가서 db에 넣을 수 있게 짜주고 restcontroller로가서 이메일 인증이 된 사람만 댓글을 적을 수 있게 해 준다! 이메일 미인증시 인증시 db로 잘 들어왔다 다음번엔 댓글이 달린 게시글에 댓글을 출력시켜 주자!

Springboot js파일정리!

잠시 혼란해진 js파일들을 정리해보자 어차피 다 똑같은 전송인데 너무 파일들이 나눠져 있다 현재 무슨 페이지 몇 개 만들었다고 저렇게 js가 많은가 ㅋㅋㅋㅋㅋ 일단 doAjax로 바꿔서 한 번에 다모아 놓자 사실 이런건 시작할 때부터 정해놔야 안위험한데 ㅋㅋㅋ 일단 연습이니까 addeventlistener/window.onload가 현재는 필요없어서 이런 식으로 묶었다 원래 사용자가 자주 돌아다니는 위주나 페이지별로 묶는다고 들었는데 그냥 토이 프로젝트니까 심플하게 묶었다 이제 대망의 댓글을 하러가자!

Spring boot 회원가입 만들기!(2) 아이디중복검사 with ajax

이제 아이디 중복검사를 할 건데 바닐라 js 비동기 통신을 할 것이다 원래는 j쿼리를 사용했지만 바닐라 js로 사용하는 습관을 들일 예정이다 순서는 이렇게 된다 ajax요청->requestcontroller요청->userdao탐색->userservice반환->requset반환->ajax가 받음 userdao에 jpa 식으로 써준다 크정말 신기하다 저렇게 대소문자를 구별해서 써주면 혼자서 db에 select *from 테이블 이름 where email=?! 이렇게 쏴준다! 이제 userservice를 만들어준다 비웠다면 true가 들어있는 yes를 줄 거고 아니라면 false가 있는 no를 줄 것이다! (추후 existsByEmail로 변경했다) requsercontroller를 지정해준다 import 맞..

마치며

부연설명 양이 현재 걷는 방식은 어떻게 보면 현실적이지가 않다 이유는 그냥 양 x좌표에 대한 언덕의 x/y/기울기를 가져오는 것뿐이다 왜 그렇게 해야 하냐면 난 "수학을 잘 모른다" 양이 평지를 걸었다면 그냥 걸음수로 컨트롤하면 된다 왜? 1km로 달리는 러닝머신 위에서 내가 한 시간 동안 1km를 가고 싶다면 내가 2km로 뛰면 된다 하지만 양이 걷는 건 평지 즉 직선이 아니다 그러려면 둘 중 하나의 방법이 있다 양의 x값에 언덕의 좌표를 가져올 터인지 아니면 내가 수학을 겁나 잘해서 그걸 계산해서 걸을 수를 늘려줄 것인지! 진짜 멘붕이었고 다시 한번https://youtu.be/hCHL7sydzn0 이분의 영상을 봤고 이분의 영상을 참고해서 나만의 방법을 만들었다 처음 봤을 때와 막바지에 봤을 때 걱..

언덕위를 걷는양!

언덕 그리기->언덕 움직이기 양 이미지 가져오기->양 프레임 올리기->양 움직이기->양이 곡선 위를 걷기 이렇게 따로따로 해왔다 이제 대망의 하이라이트 양이 우리가 그린 언덕 위를 걷게 만들겠다! 두 가지 방법이 있다 1. 현실처럼 걷게 하는 법 2.x좌표에 따른 y좌표와 기울기를 걷는 법 우리는 2번을 쓸 것이다 이유는 "곡선 위에 일정한 속도로 오브젝트를 움직이게 하는 공식을 모른다"(나는) 과정 1. 클라이언트 접속 시 처음 양위치 계산 2. 베지어 클래스에 어떤 포인트 차례인지 알려주는 함수를 만든다 3. 언덕에 맞게 좌표를 넣어줄 함수를 만든다 4. 그거에 맞게 좌표를 계산해 주는 함수를 만든다 5. 그거를 받아서 양에게 준다 진짜 여기가 헬이었다 비슷하게 만드는 방법은 많지만 오차가 많기에....

언덕을 그리자!(4)

이전 글에서는 한 개의 언덕을 이동시켰다! 그러면 이제 이어 언덕이 나타나게 해 보자! 과정 1.point 클래스 고치기 2.draw 함수 고치기 3.bezier 클래스 고치기 과정이 좀 많아서 이렇게 적겠다 세부과정은 각 Step으로 적어 놓겠다! 1.point 클래스 고치기 stepup 에서 pointsx[0]에 초기값을 할당하게 하고 그다음 pointsx[1], pointsx[0]은 계속 스위치 하면서 화면 뒤에서 부터 언덕이 그려지게 만들기 위해 저렇게 설정해준다! 2.draw 함수 고치기 Step one 2차원 배열 생성! 2차원 배열을 만들어주는 함수를 만들어준다! setup함수에서 pointx/y에게 할당해준다! Step two 초기값 할당! 초기 값으로 설정해준다 이유는 이제 언덕이 뒤에서..

언덕을그리자!(3)

오늘은 그린 언덕을 움직이게 할 것이다 이거는 이전 작업에 비해 어렵지 않다 는 뻥이고 이것도 알고 보면 쉬운 거지 우리 같은 코린이 들 시간 잡아먹기 딱 좋은 작업이다 ㅋㅋㅋㅋ 과정 1.언덕움직이는 메서드 만들기 2. 스위치 메서드 만들기 3. 리턴 받는 함수를 다른 메서드로 따로 만들기 1. 언덕 움직이는 메서드 만들기 -자 일단 움직이는 메서드를 만들어보자! 이름은 무브 시스템이라 하겠다 왜냐면 별/구름도 이 함수를 같이 쓰게 될 것이다 자 이제 결과를 보면 띠용? 움직이지 않는다 난 분명 pointx를 1씩 늘려주고 있는데 이유는 바로 여기 있다 function draw() { background('gray'); pointsx=point.returnx(); pointsy=point.returny(..

언덕을 그리자(2)!

이전까지는 단순한 하나의 베지어로 언덕을 그렸다!이번엔 한 화면에 규칙적인 언덕 여러 개를 만드려 보려 한다!과정1. 포인트(좌표 받아오는 클래스) 수정2.bezier(좌표를 받아서 그리는 클래스) 수정! 1. 포인트 수정! 이전까지는 x, y배열 안에고정점 x, 제어점 x, 고정점 x, 제어점 x고정점 y, 제어점 y, 고정점 y, 제어점 y이렇게 줬지만 이제 제어점은 베지어한테 주고 고정점 x, 고정점 x, 고정점 x, 고정점 x고정점 y, 고정점 y, 고정점 y, 고정점 y으로 만들어 줬다!물론 제어점도 이전처럼 여기다가 넣어줘도 되지만 나는 bezier에서 관리를 했다! 2.bezier수정! 자 이제 this.secondx/y를 만들어서 +/-해줘서 제어점을 준다만들고 싶은 언덕을 대충 생각 해보..

스프라이트 이미지 움직이기(1)!

youtu.be/3noMeuufLZY 스프라이트 이미지를 움직이는 데는 두 가지 방법이 있다 1. 예를 들어 프레임이 8개면 an1.jpg~an8.jpg 이렇게 나누는 것! 2. 하나의 파일에 다그려 넣고 그때그때 좌표를 얻어오는 것! 난 개인적으로 어렵게 느껴졌지만 효율적이라고 생각해서 2번째 방법을 선택했다! 코드를 보자! 1. 이미지/좌표 불러오기! -p5js에서 preload를 만들어준다 저기에 이제 뭐 mp3나 이런 거를 불러올 때 쓰는 기능 같다! spritedata= loadJSON('p5/horse/horse.json'); spritesheet = loadImage('p5/sheep.png'); 자바스크립트는 별게 다된다 ㅋㅋ 2. 좌표를 지정해 배열에 하나하나 하나 넣어준다!] -setu..

이게dom..?이라는 건가...

잠깐 글 순서를 멈추고 급하게 찾은 기능인데 너무 신기해서 쓰려고 한다 야간 모드가 필요했다 밤이 되면 배경이 검은색이 돼서 글자가 식별이 어려워서 이것저것 찾아봤다. 그 와중에 corearoot.tistory.com/3 JavaScript와 CSS의 만남1 (객체의 색상 변경) [li태그를 추출하여 글자색을 변경함] function test2() { var li = document.getElementsByTagName('li'); for(var i = 0; i li[i].style.color = '#f00'; } } window.onload = test2; Introduction there are nu.. corearoot.tistory.com 진짜 깜짝 놀랐다.. 내가 상상만 했던 일이 되는 것이었다..