비동기

[TIL] JSP 댓글 기능 구현 (Comment)

✍ Today I Learned 댓글을 달 때마다 페이지가 리로딩된다면? 트래픽 양을 감당하기 힘들 것이다. 페이지를 이동하지 않고 자바스크립트 비동기 통신을 이용하여 댓글 기능을 구현해보자. 순서는 VO → mapper → DAO → Service → Controller → 화면단(view) 먼저 프로젝트를 분리하고 톰캣에 올라가 있는 프로젝트를 remove 해준다. [CommentVO.java] comment 테이블의 pk인 cno와 board 테이블의 pk인 bno는 long 타입으로 선언한다. 비동기 통신에서는 register 대신 post라는 단어를 주로 사용한다. post, list, modify 상황별 생성자를 만들고 getter, setter를 생성한다. (list의 상황에서는 전체 컬럼을..

[TIL] JS 숫자 야구 게임 with 서버

✍ Today I Learned 브라우저에서만 저장되던 숫자 야구 게임을 fetch 함수로 비동기 서버 통신을 이용해 데이터베이스에 저장해보았다. 이전에는 Map 객체를 이용하여 유저의 데이터를 저장하였는데 접근성을 생각하며 Array + Object 조합으로 변경하였다. 서버에 전달할 유저의 객체 데이터는 다음과 같이 가공하였다. userObj = { name: 닉네임, description: 등급, price: 기록, category_id: 시도횟수, created: 게임종료시간 }; 닉네임은 게임 시작 전 사용자에게 입력받는다. 등급은 시도 횟수를 기준으로 1회 - S등급, 2~3회 - A등급, 4~5회 - B등급, 6~7회 C등급, 이후는 D등급으로 나누었다. 기록을 받는 price의 타입이 in..

[TIL] JS fetch 비동기 통신을 이용한 CRUD

✍ Today I Learned [Read] 서버와 통신하여 가져오는 데이터의 개수를 알 수 없기 때문에 html의 item card를 미리 만들어 놓는 것이 아니라 1개의 card를 데이터 개수만큼 찍어내야 한다. 대략적인 흐름 [클라이언트가 서버에 데이터 요청 -> 서버가 데이터베이스에서 요청된 데이터를 받아옴 -> 그걸 string으로 클라이언트에게 보냄 -> 프론트에서 데이터의 개수만큼 html을 생성 -> 화면단에 출력] button 타입이 submit 일 경우 자동으로 페이지 이동이 되기 때문에 preventDefault() 메서드를 이용해 기본 속성을 막아주어야 한다. [Read - Detail] 비표준 속성(Non-Standard Attribute)이란? html 태그의 속성이 제한적이므로..

[TIL] JS 콜백, 비동기, Promise, fetch, 서버 세팅

✍ Today I Learned 콜백 함수(Callback function)란? 다른 함수에 인수로 전달되는 함수이다. 콜백 함수는 다른 함수가 완료된 이후에 실행된다. (이때 괄호는 사용하지 않는다.) 외부 리소스를 로드하는 함수를 생성하면 완전히 로드되기 전까지는 그 콘텐츠를 사용할 수 없다. 이럴 때 콜백 함수를 사용한다. Promise 객체란? 실행에 시간이 걸리는 코드와 결과를 기다려야 하는 코드를 연결해주는 객체이다. 데이터 통신에 사용된다. let myPromise = new Promise(function(myResolve, myReject) { // "Producing Code" (May take some time) myResolve(); // when successful myReject(..