첫 api 구현 성공! 그리고 자바스크립트 날짜 형식 지정하기

 

#️⃣ 첫 rest api 구현

피드 가로카드는 아래로 쭉쭉 출력됨!

 

원래 단체/개인 메뉴바를 파라미터로 해서 넘어다녔는데, 이제 자바스크립트를 작동시켜야 하니 메뉴 아래 화면은 CSR방식으로 출력할 수 밖에 없게 되었다.

 

그래서, 각 단체미션/ 개인미션 a태그에 대한 onclick은 구현되어있는데, 그 onclick마다 request.open()으로 값을 받아오고 일일히 innerHTML을 갈아끼는 식을 넣을수는 없으니 (한 파일에서 전체코드를 두번 반복해야함) 어떻게 해야 클릭한번으로 움직이는 애니메이션과 값처리를 할 수 있을까 고민하게 됐고, 얼마전 수업에서 들었던 버블링을 이용할 수 있을까 생각해보게됨.

 

window.addEventListener("load", function() {

	//querySelector 생략

	/*api교체영역*/
	let feedList = this.document.querySelector(".feed-list");

	//개별이벤트
	team.onclick = function(e) {
		isSolo = 0;

		console.log("팀");
		line.style.left = "0px";
		team.style.fontWeight = "bold";
		personal.style.fontWeight = "";
		gathering.style.fontWeight = "";
	}

	personal.onclick = function(e) {
		isSolo = 1;

		console.log("개인");
		line.style.left = "calc((375px / 3))";
		personal.style.fontWeight = "bold";
		team.style.fontWeight = "";
		gathering.style.fontWeight = "";
	}

	gathering.onclick = function(e) {
		console.log("카테고리");
		line.style.left = "calc((375px / 3) * 2 )";
		gathering.style.fontWeight = "bold";
		personal.style.fontWeight = "";
		team.style.fontWeight = ""
	}

	//부모이벤트
	feedMenu.onclick = function(e) {
		console.log(isSolo);
		e.preventDefault(); //엘리먼트노드가 가진 기본 행위를 막는다
		let request = new window.XMLHttpRequest();
		request.open("GET", `/api/feeds?isSolo=${isSolo}`, true);

		request.send();

		request.onload = function() {

			//리스트 parse처리
			let list = JSON.parse(request.responseText);

			//초기화
			feedList.innerHTML = "";

			for (let f of list) {
				/*단체개인 출력*/
				let solo = (isSolo == 0) ? "단체" : "개인";
				/*로그 날짜 연산*/
				let logDate_ = new Date(f.missionLogDate);
				let month = logDate_.getMonth() + 1;
				let date = logDate_.getDate();
				let logDate = month + "월 " + date + "일";

				let template = `
				// html 가져오기
				`;
				feedList.insertAdjacentHTML("beforeend", template);
			};
		}; //request.onload ends
	}
});

 

수업에선 e.stopPropagation(); 으로 부모객체의 버블링을 막아서 개별 이벤트가 부모이벤트를 이용하지 못하게했지만,

지금은 각 클릭값 (개별이벤트) + 공통 이벤트 (부모이벤트) 를 모두 적용해야하므로 해당 액션을 지웠다.

그리고 기존에 파라미터로 받던 부분을 클릭할 시 변수로 세팅해서 request할때 넘겼음!

 

이게 될까될까 하면서 반신반의로 설계하고 해본건데 잘돼서 진짜 기뻤다!!!!!!!

let request = new window.XMLHttpRequest();
request.open("GET", `/api/feeds?isSolo=${isSolo}`, true); // api 절대경로로 쓰기

 

 

 

#️⃣ 자바스크립트로 날짜구현하기

 

Json형식으로 데이터를 뽑아왔는데, 해당 객체의 변수(f.logDate) 를 출력하면 일단 String으로 나와서 내가 원하는대로 형태변환이 불가했다. 찾아보니 자바스크립트 new Date()가 자꾸 나오길래 얘는 새 객체 아닌가 했더니만, 다시 여기로 넣어서 치환해서 쓰는게 가능했다!

/*로그 날짜 연산*/
let logDate_ = new Date(f.missionLogDate);
let month = logDate_.getMonth() + 1; // 9월이면 숫자 8을 반환하므로 +1 해주기
let date = logDate_.getDate();
let logDate = month + "월 " + date + "일";

String을 다시 Date에 넣어서 타입을 바꿔주고 (console.log로 typeof 뽑으면 Object로 나온다)

month와 date를 뽑아서 내가 원하는 형태로 바꿔줬다(string)

자바스크립트에 쓸수있는 변환메서드는 월,일이 나오는 세팅이 없었음.