240613(구현 방법을 알게됨)

1. consumes: 클라이언트 → 서버
2. produces: 서버 → 클라이언트
3. @RequestBody: 클라이언트 →  서버 JSON 받을때 객체의 name에 매핑
4. @RestController
   • Ajax 사용하면 데이터를 화면단에 사용 가능
   • URI 사용하면 데이터 조회 가능
5. 앞서 동기식 구현을 비동기로 한번더 구현함
   • 이때 Ajax를 모듈화 하는것이 편리함(객체처럼 사용)
   • 이 모듈은 Service와 비슷한 역할을 담당함

   • 모듈 패턴
     
     널리 사용되는 JavaScript의 패턴 중 하나로
     전역 객체에 필요한 함수(기능), 값 등을 모아 놓는다.
     
     익명 함수로 변수에 할당하는 것이 시작이다
     이 익명 함수 안에 값과 함수를 구현하여 전달받고 싶은 결과를 딕셔너리({})에 담아 리턴(반환)한다.

6. const fruit = 'cherry';
   const bucket = fruit || 'kiwifruit';
   
   // const bucket = fruit !== null ? fruit : 'kiwifruit';

   
   
   
7. Ajax를 써보면서 callback 함수, error 함수를 확실히 알게됨

   • function foo(data, callback, error) {
     	fetch( url, {여러 필요한 설정 || data || JSON.stringify(data)} ) //
         .then( response => return response.json(); || return response.text(); ) // fetch 결과(response)
         .then( result => callback(result) ) // response 결과(result), 결과를 callback 함수로 실행
         .catch( err => error(err) ) // 과정 중 에러 발생 시 error 함수로 실행    
     }
     
     foo(
     	{"menu":"cookie"},
     	result => { console.log(result); },
         err => { console.log(err); }
         )
     
     // foo의 인자에 함수를 파라미터로 넣어 foo 함수 안에서 파라미터로 받은 함수를 실행
     // 함수를 외부에서 넘겨준 변수값이라고 생각

     
     
     
8. Index 생성과 사용

   • CREATE INDEX idx_no on some_table(no desc, title asc);
     
     SELECT
     	no, title
     FROM some_table USE INDEX(idx_no)
     WHERE no > 0;

     
     
     
   • 검색 속도 차이가 엄청남
9. java.util.Date 숫자로 표현된 날짜를 변환

   • 	function displayTime(timeValue) {
     		const today = new Date();
     		const gap = today.getTime() - timeValue;
     		
     		const dateObj = new Date(timeValue);
     		let str = '';
     		
     		if (gap < 1000 * 60 * 60 * 24) {
     			const hh = dateObj.getHours();
     			const mm = dateObj.getMinutes();
     			const ss = dateObj.getSeconds();
     			
     			return [
     				(hh > 9 ? '' : '0') + hh, ':',
     				(mm > 9 ? '' : '0') + mm, ':',
     				(ss > 9 ? '' : '0') + ss
     			].join('');
     		} else {
     			const yy = dateObj.getFullYear();
     			const mm = dateObj.getMonth() + 1; // getMonth() is zero-based
     			const dd = dateObj.getDate();
     			
     			return [
     				yy, '/',
     				(mm > 9 ? '' : '0') + mm, '/'
     				(dd > 9 ? '' : '0') + dd
     			].join('')
     		}
     	}

 

 

 

 

구현하는 순서와 기능을 점차 고도화하는 방법에 대해 알게되었다.

서로 영향을 주지 않는 카테고리 별로 만들면서

흐름을 만들 수 있는 포괄적이고 대표적인 기능을 만들고 

섬세하게 작업하며 고도화를 한다.

 

그동안은 최종형태를 만들기 위해 처음부터 세부적인 요소까지 가미하며 만들었다. 하지만 결과는 에러 투성이에 여기저기 꼬여서 처음부터 다시 만들어야 하는 형태로 마무리하게 된다. 

 

그때마다 다시 시작한다면 어떻게 해야 할지 막막했는데 조금은 더 효과적인 방법을 알게 되었다.

단지 효율과는 거리가 멀기때문에 기본을 잘 다져놔야

이후 비교적 간단한 과정은 생략하며 한단계씩 앞서 갈거라 생각한다.