패스트 캠퍼스 : 토이 프로젝트

 

패스트 캠퍼스에서 첫번째 토이 프로젝트를 진행하였다.
모바일 은행 앱을 모방한 웹을 만드는 것이었다.
HTML, CSS, 바닐라 JS를 사용하여 프로젝트를 만들었다.

 

BEM

HTML은 BEM 방식으로 class를 만드는 데 초점을 두었다.
처음 만들때에는 클래스 이름이 너무 길어져서 굉장히 귀찮았는데, CSS를 만들때 굉장히 편리했다.
BEM 방식이 아니라 간단한 클래스로 엘리먼트를 만들면 CSS 선택자가 너무 길어진다.
예를 들어 account클래스를 가진 div 엘리먼트 안에 header 엘리먼트 안에 feature클래스를 가진 div 엘리먼트 안에 qr 클래스를 가진 div 엘리먼트를 선택하려면 CSS 선택자와
account__header--feature--qr 클래스를 가진 div 엘리먼트를 선택하는 CSS 선택자는 다음과 같다.

<!--NOT BEM--> 
.account > header > .feature > .qr {} 

<!--BEM--> 
.account__header--feature--qr {}

물론 BEM 방식을 선택해도 클래스의 이름이 길어서 코드가 짧아지지는 않지만 사용성에 굉장한 차이가 있다.
처음 방식으로 하위 엘리먼트를 찾아 내려가는 방식은 바로 알기 굉장히 힘들다.
따라서 HTML을 하나하나씩 훑으면서 선택자를 찾아가야 한다.
또한 저런 방식으로 선택자를 고르면 실제로 내가 원하는 엘리먼트가 아닌 다른 엘리먼트가 선택될 일도 생길 수 있다.
특히 선택자의 갯수가 쌓이면서 CSS 우선 순위가 바뀌어 버리면 뭐가 문제인지 어떤 선택자가 우선 순위인지 알기 굉장히 어려워진다.

하지만 BEM 방식은 일단 하나의 클래스만 사용하기 때문에 상위부터 하위까지 훑으면서 여러 선택자를 고르지 않아도 되서 선택자를 적는 과정 자체가 쉽다.
또한 클래스 이름 자체가 명확하고 중복이 적거나 없어서 내가 원하지 않는 엘리먼트가 선택될 일은 굉장히 적다.
선택자를 하나씩만 사용하기 때문에 선택자 갯수에 따른 우선순위가 바뀔 걱정이 없기 때문에 CSS에 적힌 순서만 유의하면 우선 순위 혼동도 적다.

앞으로도 BEM 방식을 사용하도록 노력해야겠다.

 

JSON

이번 프로젝트에서는 JSON 파일을 이용하여 데이터를 불러왔다.
이전에는 JSON 파일을 다룰 때 아무 생각없이 사용하였는데 JSON이 JavaScript Object Notation의 약자였다.
그냥 이름부터 자바스크립트가 들어간다.
이전에는 그것도 모르고 그냥 썼었는데 프론트엔드 공부를 하면서 좋은 정보를 얻었다.
JSON은 NoSQL 형식의 데이터로 큰 데이터가 아닌 경우 비교적 쉽게 사용할 수 있다. (애초에 큰 데이터는 SQL로 쓰는 경우가 대부분이다.)

하지만 이를 자바스크립트로 불러오는 것이 조금 어려웠다.
이전의 데이터 분석은 보통 데이터를 로컬로 가져와서 작업을 하거나 서버의 데이터를 써도 보통 작업 자체를 서버에서 했기 때문에 데이터의 송수신에 대해서는 생각해 본 적이 없다.
이번 프로젝트에서는 강의에서 배운 fetch를 이용해 JSON을 불러왔다.

const jsonMe = fetch(url).
  then(function (response) {
  return response.json(); 
  }
);

fetch(url)에 원하는 JSON url을 넣으면 JSON을 불러온다.
받아온 object는 다시 일자별로 정리한 object로 정리했다.

{ date: "2021-11-09",
  income: "out",
  classify: "mart",
  history: "홈플러스",
  price: 30000 },
{ date: "2021-11-10",
  income: "out",
  classify: "eatout",
  history: "김밥지옥",
  price: 5600 }

이번 프로젝트에서 사용한 JSON 예시이다.

 

Import error

이번 프로젝트에서는 chart.js를 이용해서 그래프를 그렸다.
npm install 로 chart.js를 깔았는데, import가 되지 않는 오류가 발생했다.
사실 이전부터 import 오류는 계속 나왔고, 그럴때마다 귀찮아서 오류 해결을 안하고 CDN으로 대체해서 진행했다.
하지만 언제까지고 CDN만 쓸수도 없고 결국 js파일 간에도 export, import를 사용해야 하기 때문에 이를 해결하려고 했다.
일단 에러 메세지를 구글링하여 나와 비슷한 에러를 받은 사람들을 많이 찾았으나
1. 실리콘 맥에는 적용이 되지않거나
2. 해결방법이 나와있지 않은
경우가 전부였다.
대부분의 에러는 보통 지웠다 깔아보면 해결이 되니까 작은 단위부터 지웠다 깔았다를 반복하며 에러 메세지가 사라졌나 확인했다.

chart.js 지웠다 깔기 > npm 지웠다 깔기 > node.js 지웠다 깔기 > VSCode 지웠다 깔기

하지만 그래도 문제가 해결되지 않아서 포맷을 진행했다.
문제는 실리콘 맥이 OS 몬테레이부터 포맷 방법이 바뀌었다는 건데, 그걸 모르고 이전의 포맷방식으로 진행했다가 맥북이 그냥 뻗어버렸다.
무슨 수를 써도 문제가 해결되지 않았다.
구글링을 해본 결과 apple configuration 을 이용하여 공장초기화를 하면 해결할 수 있다는데 문제는 apple configuration 을 사용하려면 여분의 맥북이 있어야 한다는 것이다.
나는 여분의 맥북이 없어서 지인 지원을 받아서 공장초기화를 진행했다.
공장초기화도 굉장히 복잡하게 되어있다...
지인의 시간을 2시간이나 사용해서 공장초기화를 진행했고 결국 Import error는 제거되었다.

 

CHART.js

JSON을 일자별, 카테고리 별로 구분하여 이를 그래프로 만들어줬다.

  jsonMe.then(function (myJson) {
    myJson.bankList.forEach((x) => {
      if (x.date.slice(5, 7) === month && x.classify !== "") {
        if (history[x.date.slice(8, 10)]) {
          history[x.date.slice(8, 10)] += x.price;
        } else {
          history[x.date.slice(8, 10)] = 1;
        }
        chart[x.classify] += x.price;
      }
    });
  }
)

일자와 달만 계산하기 위해서 slice를 사용해서 처리하였다.

깃 주소
https://github.com/GyoHeonLee/mobile-bank

GitHub - GyoHeonLee/mobile-bank

실제 주소
https://gyoheonlee.github.io/mobile-bank/pages/reports.html

Document

반응형 웹이 아니기 때문에 보려면 검사모드에서 iPhoneX로 설정해서 봐야한다.

이번 프로젝트에서 얻은 교훈으로 다음 프로젝트는 좀 더 잘해봐야겠다.