[Javascript] 금융앱 토이 프로젝트

JY·2022년 5월 15일
0

Javascript 프로젝트

목록 보기
1/2

🪙 Fintech App


금융앱 화면을 웹으로 구현해보는 프로젝트이다. 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)

📐 Markup


먼저, Figma에서 조원들과 함께 홈화면 마크업을 진행했다.
최대한 자세하게 사용할 태그와 클래스명을 미리 정하여 코드를 짤 때 어려움이 없도록 하였다.

📝 리뷰 및 배운 것


리뷰

모든 화면을 구현할 수 있다면 좋겠지만, 시간이 촉박한만큼 홈화면과 지출 관리만큼은 구현하는 것을 목표로 삼고 프로젝트를 시작했었다.
비록 두 페이지 모두 완벽하게 구현하지는 못했지만, 여러 메소드를 익히고 라이브러리를 적용하는 방법에 관해 많은 것을 배울 수 있었다.

배운 것

1. 애니메이션 효과

원래 두 페이지는 다음처럼 위아래로 붙어있는 상태이다.

두 페이지를 감싸고 있는 태그(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;
}

그래프 아이콘을 클릭했을 때, 지출 관리 페이지가 나타나야 하므로 이벤트 리스너를 이용해 아이콘 클릭 시 home2top: 0transition-duration: 0.5s을 주어 아래에서 위로 올라오는 듯한 효과를 낼 수 있었다. (home2z-indexhome1z-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";
});


2. 자바스크립트 메소드

  • 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

3. Git

  • webpack 사용 시 node_modules, dist, package.json 같은 폴더/파일들은 .gitignore 파일에 추가해야 한다.
  • 내 저장소에 업로드한 프로젝트를 다른 저장소에 업로드할 때, 깃이 버전 관리를 하고 있다고 인식할 수 있는 .git 폴더를 삭제하고 다른 저장소에 업로드 해야 한다. 그렇지 않으면 서브모듈로 인식한다.

profile
🙋‍♀️

0개의 댓글