Jessie

I am growing 🌱



이번주 주간 목표

이번 주는 바닐라 자바스크립트로 기본 기능을 구현하는게 목표

  • 예산 데이터가 없다면 에산을 설정하는 화면 보여주기
  • 예산을 설정했다면 소비내역 집계 화면을 보여주기
  • 소비 항목 등록하면 로컬에 저장시키고, 저장된 내용을 보여주기

지난주에 피그마에 정리해놨던 기능까지 구현하면 될 것 같은데
생각으론 쓱 다 할 수 있을 것 같지만 분명 각종 문제들이 나를 기다리겠지😎



2022.11.08 - 글로벌 스타일링, 기능 구현 시작

globals.scss

공통적으로 쓰일 수 있는 부분은 클래스로 스타일을 일괄 적용하기 위해 modules.scss 파일을 생성했다.

한번에 적용할 수 있는 클래스 명을 만들고, 구조를 정리하는데 시간이 꽤 걸렸다.
데이터를 입력받는 select, input, textarea 등을 modules.scss 파일에서 한번에 관리하고 싶어서 고민했다.
컴포넌트를 디자인할때 요소의 재활용성에 대해 고민했던 것이 이럴때 도움이 되지 않나 싶다.

그리고 bootstrap의 visually-hidden 속성을 가지고와서 globals.scss 파일에 추가했다.
강의 들었을땐 반응형 화면을 만드느라 sm-only, sm-hidden 등의 클래스도 필요했는데
지금은 일단 UI를 감추는 클래스만 필요하겠다.

디자인 디테일 잡기

스타일 초기화를 했으나, select의 화살표나 placeholder의 스타일등..
추가로 정리가 필요한 디자인 디테일들이 꽤 있었다.

예산설정 화면의 시작날짜 선택 옵션

로컬에 예산 데이터가 없을때 예산을 셋팅하는 화면을 구현하기 시작했다.

근데 시작일을 설정하는 부분에서부터 난관봉착!
시작일은 단순하게 1 ~ 31의 숫자를 옵션으로 추가해주면 되는데,
설정일을 기준으로 한달을 어떻게 계산할 것인가.. 2월도 있고 윤달도 있고..
new Date()를 사용해 현재 년도와 월을 불러오고, 시작일을 day로 잡아 한 달을 계산해야할 것 같다.



2022.11.09 - intro 페이지 구현

+ 버튼 이벤트 달기

+ 버튼 클릭 시 UI가 바뀌는 이벤트를 추가했다.
전환된 화면에서 같은 타이틀이 나오기 때문에, 마크업에서 중복되는 h3태그를 빼고 싶었고
살리고 싶은 트랜지션 디테일도 있는데..
일단 통으로 처리해서 빨리 대략적 기능을 구현해보기 위해 패스
챙기고 싶은 디테일은 별도로 다 적어놓았다.

select 스타일 커스텀

select에 기본 스타일을 제거하는 코드를 리셋파일에 추가하고 background 속성으로 화살표를 추가했다.
그리고 placeholder 역할의 첫번째 option과,
나머지 option의 텍스트 컬러를 다르게 하고 싶어서 한참 씨름했으나 일단 실패.

점점 미궁속으로 빠질때는 일단 잠깐 물러나고 다른 작업을 하다가 돌아오면 툭 해결되는 경우가 많더라.

1
2
3
4
5
6
7
8
9
10
11
12

/* select 화살표 숨기기 */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* IE 10, 11의 네이티브 화살표 숨기기 */
  &::-ms-expand {
    display: none;
  }
}

select에 option 동적으로 추가하기

시작일을 설정하는 부분에서 1 ~ 30까지 for문으로 생성해 option을 추가하도록 했다. 일단 추가는 했고.. 현재 월 정보를 불러와 설정한 날짜로부터 한달을 잡아주는 기능도 필요하겠다.

1
2
3
4
5
6
7
8
9

// add start-day options
const introSelect = document.querySelector(".intro-setting .select");

for (let i = 1; i <= 30; i++) {
  const option = document.createElement("option");
  option.value = `${i}`;
  option.text = `${i}일`;
  introSelect.appendChild(option);
}

input 값에 콤마 추가하기

input을 그냥 number 타입으로 해놨다가, 금액으로서 표시가 확실하도록 콤마를 추가하는 코드를 넣었다.
input의 값을 string으로 바꿔서 콤마를 추가하는 것이기 때문에, 마크업시 input의 type은 text로 해줘야 한다.

1
2
3
4
5
6
7
8
9
10
11

// change to currency in bedget input
const budgetInput = document.querySelector(".intro-setting .input");

function toCurrency(e) {
  let value = e.target.value; // 값을 잡아옴
  value = Number(value.replaceAll(",", "")); // 이미 콤마가 붙어있다면 일단 떼고 숫자로 바꿈
  let formatValue = value.toLocaleString("ko-KR"); // 숫자에 천단위 콤마를 붙임
  budgetInput.value = formatValue; // input의 value로 넣어줌
}

budgetInput.addEventListener("keyup", toCurrency); // input 값이 바뀔때마다 이벤트 함수 실행

하고보면 별 것 아닌 것들 같은데,
구현이 될때까지는 정말 많은걸 찾아보고 돌아가면서 더디 가게된다.
디테일한 스타일 하나, 작은 기능 하나에 많은 노력이 필요한 만큼 괴롭기도하고 재밌기도하다.



2022.11.10 - intro 페이지 디테일 스타일링

select의 placeholder 스타일

select에 첫번째 옵션을 placeholder로 활용하고 싶었다.
placeholder는 옅은컬러로 하고, 옵션 선택 시 텍스트 컬러가 블랙이 되게 하려고 했으나
select:first-child select:invaild class 적용하기 등 다양한 방법으로 시도해봐도 모두 실패..
select 자체에 컬러를 적용하는 것은 가능하나, option을 별개로 적용하는 것은 불가능했다.

그러다 option 에는 별개로 스타일 적용이 불가능 하다는 글을 발견하기 시작했다.
윈도우 크롬 셀렉트박스 스타일(CSS) 옵션까지 상속

윈도우에서는 option에 스타일 적용이 가능하나 맥은 모든 브라우저에서 작동하지 않는다고 한다.

이건 스타일과 관련한 내용이니까 꼭 css만으로 해결해고 싶어서 다양한 시도들을 한 것인데..
결국 select에 change 이벤트를 걸어서 select자체의 컬러를 변경시키는 js 코드로 해결했다.

img01 이틀동안 많은 삽질끝에 드뎌…

budget input에 ‘원’ 텍스트 추가

금액을 작성하는 input에는 오른쪽에 ‘원’ 단위를 추가하기 위해 input을 스타일링할 수 있는 div를 만들어 감쌌다.
클래스 구조가 좀 어색하게 느껴지는데.. 계속 추가하고 수정하는 중이므로 일단 이대로 진행하기로 한다.

img02

h3 중복 삭제, 화면 전환 시 트랜지션 추가

처음에 이벤트 다는게 안됐던 이유,
querySelectorAll을 사용해 dom 요소를 잡아왔을때 이벤트를 달려면 반복문을 써줘야한다는 걸 알게됐다.
querySelectorAll은 잡아온 요소를 배열의 형태로 저장한다.
그래서 나는 같은 클래스를 가진 button과 p를 한번에 잡아온다음, map을 이용해 이벤트를 달아 hidden 시켰다.

1
2
3
4

function showIntroSetting() {
  introGuide.forEach((i) => i.classList.toggle("visually-hidden"));
  introSettding.classList.toggle("visually-hidden");
}

그리고 transition을 추가해 약간 모션효과를 넣어봤는데 차차 좀 더 유려하게 바꿔봐야겠다.

img03



2022.11.11 - intro 페이지 디테일 기능 구현

spend 페이지를 구현하기에 앞서, intro 페이지를 좀 더 마무리 해보자.

toCurruncy 함수 전역에 적용될 수 있도록 클래스 구조 수정

다른 섹션에서 금액을 입력하는 인풋이 들어갈때도 클래스명을 통일해 넣을 수 있게 하고,
globals.js 파일을 추가해 적용시켰다.

img04

시작하기 버튼 기능 구현

시작일을 선택했고 & 예산금액 input이 비어있지 않으면 시작버튼을 활성화하도록 했다.
다만 설정한 예산이 1,000원 이하일때는 버튼을 활성화 하지 않고, 안내 메세지가 뜨도록 만들었다.

img05

일단 원하는 기능은 구현했으나,
다양한 예외상황에 대응하기 위해 조건문을 추가하다보니 코드가 꽤 지저분해진 것 같다.



2022.11.12 - intro 페이지 구현 마무리

시작일과 예산금액의 값을 로컬에 저장

start버튼을 누르면 select와 input의 value를 콘솔에 찍도록 해 먼저 확인해보고.
로컬에 저장하는 코드를 추가했다.
그리고 함수 안에서 저장한 값을 불러와 화면 표시에 활용할 수 있도록 변수로 저장했다.

img06

저장된 값을 spend 페이지에 반영

저장한 값을 일단 단편적으로 spend 화면에 반영시켰다.
근데 여기서부터 머리아픈 부분이.. 현재 날짜 정보를 이용해 반영해줘야하는 부분이다.
일단은 디자인대로 화면을 전환시키는 부분 까지 완료했다!

img07 이 작은 화면 안에도 추가 수정해야할 코드들이 산더미..

예산 입력 input에 숫자만 입력되도록 수정

예산을 입력하는 input에 콤마 표시를 추가하는 메소드를 사용하느라 type을 text로 변경했는데,
그러다보니 텍스트가 입력되면 NaN가 뜨는 것을 발견했다.
그래서 아래 코드를 추가해 value값이 NaN이면 값을 리셋하도록 toCurrency 함수를 수정했다.

1
2
3

if (isNaN(parseInt(value))) {
  value = "";
}

Leave a comment

You may also enjoy