코인마켓캡에서 아직 중간의 슬라이드 애니메이션을 주는 아이템박스와 아래에 자바스크립트 코드를 이용해서 코인들의 데이터 객체들을 넣어주는 작업을 진행하지 않았다. 아직 공부할 부분이 많기 때문에 이 부분을 제외하고 현재 만들 수 있는 로그인 UI를 만들어 오늘 배운 정규표현식을 적용하는 코드를 작성하였다. 아직 정규 표현식을 적용하지는 않았지만, 기본적인 UI 구조와 이를 바탕으로 로그인 화면을 구현하는 것을 진행하였다.
1. UI 레이아웃 설계
빗썸 로그인 UI
빗썸에 있는 로그인 화면을 보고 대략의 레이아웃을 결정하였다. 박스들은 대부분 div로 감싸서 모든 요소들에게 flex를 이용하여 웹이 작아져도 반응형으로 줄 수 있는 웹 UI를 구현하였다.
2. 로그인 UI - HOBIT 화면, Flex 적용
사이즈 줄였을 때
실질적으로 웹의 사이즈를 줄이고 늘렸을 때 사이즈가 안정적으로 줄었다. 웹 UI의 로고는 포토샵을 통해 아발란체 글꼴을 이용하여 만들었고, 호날두를 생각하면서 호빗 로그인 창을 만들었다.
이를 이용하여 코인마켓캡의 클론 화면과 연결을 시키려고 javascript의 버튼 이벤트를 이용하여 코인 마켓캡의 로그인 버튼 클릭 시 이동하는 웹을 구현하였다.
const btn = document.querySelector(".login");
btn.addEventListener("click", clickHandler);
function clickHandler() {
// ... 작업 로직 ... //
window.location.href = "./login.html";
}
자바 스크립트 코드를 이용하여 로그인 화면시 코인마켓캡에서 호빗으로 넘어가는 화면을 구현하였다. 이를 바탕으로 웹사이트의 서버없이 로컬 로그인 화면을 구현하였고, 추가적으로 코인마켓캡 클론과 가입하기 화면을 구현할 예정이다.
오늘 특별하게 한 것도 없는데 시간이 빨리 간 느낌이었다. 오전엔 scroll 애니메이션을 짜는 것을 구현하였고, 9기 블록체인 발표를 본 이후에 어제 하던 클론 코딩을 진행하였다. 진척 사항은 많이 없었지만, 로고들의 이미지와 반응형 웹으로 구현하기 위한 고민을 하였다. 또한 코인마켓캡 로고 옆 버튼들에 드롭바를 주기 위해 고민하였다. 드로바를 이미 해보아서 어떤 식으로 구현할지는 알고 있었지만, 초반에 a 태그를 이용하여 구조를 짜서 시간을 많이 날려 먹었다. 또한 막상 flex 안에서 드롭바 구현과 마진 및 패딩을 줘 적절한 위치에 배치하는 것이 까다로운 부분이 있었다. 이러한 부분을 고민하였고, 이를 바탕으로 드로바를 구현하였다. 하지만, 아직 맨 위 header 부분의 flex와 드롭바에서 위치를 넘어가면 드롭바 내용이 사라지는 에러들이 있어 이 부분을 수정하여야 한다. 또한 hr 태그를 전체 flex 내부에 주니 전체 부분을 차지하는 것이 아닌 다른 영역들과 마찬가지로 잘리는 부분이 생겼다. 이 오류에 대해 고민해 보아서 고쳐야겠다. 아이템 부분엔 적절히 자산들을 배치하고, 인기 커뮤니 계정엔 애니메이션을 이용하여 세 가지 내용이 자연스럽게 이동하는 애니메이션을 주어야겠다. 또한 최종 암호화폐 자산 출력 부분은 암호화폐들을 객체에 담아두고 반복문을 이용하여 append 하여 주었는데, 이를 append 하는 부분에 표(td, th)를 이용하여 추가하여 각각의 객체들에 대한 정보를 가져가는 방식을 선택해야 할 것 같다.
경일게임 아카데미에서 공부한 지 6주 차 벌써 자바스크립트까지 끝나고 한 달이란 시간이 뚝딱 지나갔다. 짧은 시간이었지만, 한 달 만에 html, css, javascript 까지 공부하였고, 기본적인 스킬들은 모두 공부하였다. 이를 바탕으로 요번 주에 시험을 본결과.. 자바스크립트에선 어느 정도 이해도가 있었지만, html, css 구조를 짜는 부분에 있어서 아쉬운 부분이 많았다. 이를 보충하기 위해 오늘은 공부한 것들을 바탕으로 웹을 구현하는 연습을 하였다.
1. 코인마켓캡 홈페이지
2. 예상 레이아웃 구성도
레이아웃을 아래와 같이 나누어 각각의 html 요소들과 배치들을 하였다.
3. 현재 구현된 상태
기본적인 레이아웃을 바탕으로 큰 틀을 구현하였다. 전반적으로 flex를 이용하여 사이즈를 조절할 수 있게하였다.
가상자산추가 부분은 for문으로 div 들을 추가였는데 실제 코인마켓캡에는 여러 요소들을 추가하여야 하기 때문에 th, td를 추가하여 사용하여 표 형식으로 데이터를 추가할 예정이다. 또한 가운데 아이템에는 애니메이션 이동을 추가하여 세 가지 화면을 애니메이션 화 하는 작업을 진행할 예정이다.
쉽게 말해 함수에 인자로 함수로 받거나 함수의 반환형이 함수이다면 고차함수라고 생각할 수 있다.
pleaseCallback안에 console.log를 실행시키기 때문에 인자로 함수를 받았기 때문에 고차함수라고 할 수 있다.
function pleaseCallback(tempLog) {
tempLog("안녕");
}
pleaseCallback(console.log);
또한 콜백함수의 경우에도 pleaseCallback 함수 내에 익명함수를 실행시켰기 때문에 함수를 인자로 사용하여 고차함수라고 말할 수 있다.
pleaseCallback((temp) => {
console.log(temp);
});
이처럼 함수내에 함수 또는 함수를 리턴으로 받는 함수들을 고차함수라고 한다.
sort함수
console.log(
[1, 6, 2, 13123, 3, 1235, 95].sort((a, b) => {
return a - b;
})
);
정렬을 할 때 사용되는 sort 함수 또한 정렬을 하기 위해 뒤에 콜백함수를 호출하므로 고차함수의 예시라고 할 수 있다.
2. 재귀함수
재귀함수
재귀함수는 쉽게 말해 자기 자신을 호출하는 함수이다. 영어에서 흔히 himself, myself, itself 같이 자기 자신을 호출하는 함수이다.
function func2(num) {
console.log(num);
if (!num) return 0;
func2(num - 1);
}
func2(10); 을 실행 시켰을 때 num = 10 이고 콘솔에서 10을 찍은 후 if(! 10) 이 거짓이기 때문에 func2(num-1)을 재귀함수로 함수 내에서 호출한다. 이런 식으로 여러 번 자기 자신을 호출하여 10 ~ 1까지 출력하고 if(! 0) 은 참이기 때문에 마지막으로 0을 리턴하면서 끝내기 때문에 10 ~ 0까지 출력되게 된다.
count id 에 이벤트 리스너로 클릭을 받았을 때 ctrl 키를 클릭하면서 클릭을 하면 참이 되고, +e.target.innerHTML -1;을 하여 숫자가 빼진다 여기서 ` + ` 단항연산자가 없고 e.target.innerHTML을 실행하면 011111로 숫자가 더해지지 않고 문자로 숫자가 더해져서 출력될 것이다. ` + `는 0에 숫자를 연산해 주기 위한 단항연산자로 문자열 타입을 숫자로 변환시킨다. 단항연산자를 사용할 수 없는 문자열이라면 NAN을 출력시킨다.
터치 이벤트는 모바일 환경에서 여러 개의 터치가 들어올 수 있다 때문에 터치 배열로 들어오게 된다. 위 코드는 touchstart로 시작 지점부터 touchend로 끝지점까지 터치된 좌표영역을 나타낸다.
2. 이벤트 핸들러
2 - 1. onclick
document.getElementById("btn").onclick = function (e) {
console.log("click했음");
console.log(e);
};
btn 아이디인 버튼 확인? 을 클릭하게 되면 아래와 같이 click 했음과 PointerEvent 객체가 출력된
2 - 2. onload
window.onload = function () {
console.log("페이지 로딩 완료");
};
window.load()는 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이다.
페이지의 모든 요소들이 로드되어야 출력된다. 즉 전체페이지가 모두 불러와진 후에 동작하는 메서드이다.
2 - 3. onsubmit
onsubmit함수는 제출 이벤트가 발생할 때 동작이 발생한다.
test-form에 데이터를 입력하고 입력 완료를 해도 preventDefault() 함수가 동작하여 a 태그를 눌렀을 때도 href 링크로 이동하지 않게 할 경우와 form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우 (submit은 작동됨)이다. preventDefault() 가없다면 0.1초만 form이 전송되어 console.log의 내용들은 찍히지 않을 것이다.
