금융앱 화면을 웹으로 구현해보는 프로젝트이다. 5월 6일 저녁부터 시작해서 5월 10일까지, 주말을 제외한다면 약 3일동안 프로젝트를 진행해야 했다.
Figma를 통해 받은 디자인 시안을 보고 HTML과 CSS로 화면을 구성했고, Javascript로 데이터 및 이벤트를 처리했다. 또한, 나는 webpack을 이용해서 프로젝트를 진행했다. 사실 라이브러리(Chart.js, Swiper)를 사용해야 하는데 시간이 모자라서 제대로 사용해보진 못했다.
5월 6일(1일차): 마크업
5월 7일(2일차): 홈화면 페이지 구현(HTML, CSS)
5월 8일(3일차): 지출관리 페이지 구현(HTML, CSS, Chart.js)
5월 9일(4일차): JSON 데이터 처리 및 이벤트 처리(Javascript)
5월 10일(5일차): JSON 데이터 처리 및 이벤트 처리(Javascript)
먼저, Figma에서 조원들과 함께 홈화면 마크업을 진행했다.
최대한 자세하게 사용할 태그와 클래스명을 미리 정하여 코드를 짤 때 어려움이 없도록 하였다.
모든 화면을 구현할 수 있다면 좋겠지만, 시간이 촉박한만큼 홈화면과 지출 관리만큼은 구현하는 것을 목표로 삼고 프로젝트를 시작했었다.
비록 두 페이지 모두 완벽하게 구현하지는 못했지만, 여러 메소드를 익히고 라이브러리를 적용하는 방법에 관해 많은 것을 배울 수 있었다.
원래 두 페이지는 다음처럼 위아래로 붙어있는 상태이다.
두 페이지를 감싸고 있는 태그(container
)에 overflow: hidden
을, 지출 관리를 감싸고 있는 태그(home2
)에는 top: 100%
를 주어서 평소에는 지출 관리 페이지가 보이지 않도록 했다.
.container {
position: relative;
overflow: hidden;
}
.home2 {
position: absolute;
background: #FFFFFF;
border: 1px solid black;
top: 100%;
z-index: 4;
}
그래프 아이콘을 클릭했을 때, 지출 관리 페이지가 나타나야 하므로 이벤트 리스너를 이용해 아이콘 클릭 시 home2
에 top: 0
과 transition-duration: 0.5s
을 주어 아래에서 위로 올라오는 듯한 효과를 낼 수 있었다. (home2
의 z-index
가 home1
의 z-index
보다 크므로 home1
보다 앞쪽에 위치할 수 있는 것이다.)
const home2 = document.querySelector(".home2");
const chart_icon = document.querySelector(".balance_bottom").querySelector("img");
chart_icon.addEventListener("click", () => {
home2.style.cssText = "top: 0; transition-duration: 0.5s";
});
map()
배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.
arr.map(callback(currentValue[, index[, array]]),[, thisArg])
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
filter()
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
arr.filter(callback(element[, index[, array]])[, thisArg])
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
...
(전개 구문)
반복 가능한 객체에 적용할 수 있는 문법으로, 배열이나 문자열 등을 풀어서 요소 하나 하나로 전개시킬 수 있다.
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// expected output: 6
console.log(sum.apply(null, numbers));
// expected output: 6
node_modules
, dist
, package.json
같은 폴더/파일들은 .gitignore
파일에 추가해야 한다..git
폴더를 삭제하고 다른 저장소에 업로드 해야 한다. 그렇지 않으면 서브모듈로 인식한다.