[TOY] 가계부 만들기 1주차 : 프로젝트 시작과 셋팅

나는 전체적인 수입과 지출의 패턴이 파악되어야 마음이 편한 스타일이다.
그동안 딱 내맘에 드는 가계부 서비스가 없어서 그냥 구글시트에 기록해왔는데
그동안 배운게 있으니 만들어보면 되잖아?? 생각하니 매우 신났다 😊😊

하지만 어디서부터 어떻게 시작해야할지 전혀 감이 없어 당장 시작할 수는 없었고
비슷한 프로젝트들 먼저 열심히 구글링하며 감을 잡아갔다.

찾아봐도 뭔가 어렵게 느껴지고 막연해서 여러 자료만 찾아보다가,
일단 접근이 쉬운 기획과 디자인부터 해보기로 했다.
막상 화면을 그리다보니 마구 빠져들어서 빨리 만들어 사용하고 싶어졌다.

일단은 백엔드 구성을 할 수 없기때문에 로컬에 데이터를 저장하는 수준으로만 제작이 가능하겠지만
지금은 바닐라 자바스크립트로 프론트 작업을 하는 것에 집중해보기로 하자.
추후 리액트와 타입스크립트를 사용해 리팩토링 하면서 백단도 내가 할수 있는게 없는지 찾아봐야겠다.
언젠가 꼭 제대로 어플로 출시해서 야무지게 써먹어야지

2022.10.31 - 최대한 심플하게 앱 기획 및 디자인

필요했던 기능들을 대략적으로 정리하고, 디자인으로 만들면서 구체화 시켰다.
만들다보니 각종 추가 기능과 예외 케이스들이 마구마구 떠올랐으나
일단 가장 기본이 되는 기능만 그려놓고 어떤 구조로 만들면 될지에 집중하고
차차 업그레이드 해보기로 했다.

디자인 초안

2022.11.01 - 프로젝트 및 sass 셋팅 (근데 이제 삽질을 곁들인)

UI 개발 강의를 다시 훑으며 프로젝트 셋팅을 시작했다.
node 프로젝트를 새로 생성하고, sass 설치 및 linter, prettier 설정까지 마무리했다.

막간복습👀 node-sass 셋팅하기

1. github에서 repository 생성하고 로컬에 clone
2. node 설치 되어있는지 확인 node -v npm -v
   예전에 설치했던거라 새 LTS ver 파일을 받아 재설치했다.
3. node 프로젝트 시작을 위해 node init -y 하면 pakage.json이 생성된다.
4. sass 활용을 위해 node-sass 를 설치한다. npm i node-sass
5. npm을 사용하기 위해 pakage.json에 script 명령어를 추가한다. 공식문서 참조
   node-sass src/style.scss dest/style.css
6. 추가한 위 코드는 node-sass [options] <input> [output] 의 구조이므로
   input과 output의 경로를 내 프로젝트에 맞게 수정한다.
7. 그래서 스크립트 명으로 설정한 npm run sass를 입력하면 input의 코드가
   output파일로 컴파일 되는 것. 설정한 옵션에따라 컴파일 시 다양한 기능을 추가할 수 있다.

"scripts": {
  "sass": "node-sass -wr styles/main.scss ./style.css"
}

설치할땐 sass, 확장자는 scss??

처음 배울때 sass와 scss의 차이점에 대해 찾아봤었는데 제대로 이해하지 못했었는데,
이제 조금 알겠다. scss는 sass의 버전 중 하나다. (sass version 3 = scss)

sass가 전처리기로서 css를 훨씬 편리하게 사용하도록 만들었지만 문법이 css와 달라 불편함이 있었다.
(차라리 파이선과 비슷한 문법이라고 한다)

그래서 불편함을 개선하다보니 scss가 등장한 것이다.
기존 css와 문법구조가 거의 비슷하면서도 변수, mixin(함수같은 것), 조건문과 반복문,
import(모듈화), nesting 문법등의 기능을 사용할 수 있다.
scss가 공식적으로도 인정받고 사용자도 훨씬 많다고 한다.

그리고나서 sass를 더욱 효과적으로 활용하기 위해
Live sass Compier, Prettier, scss-lint 등의 익스텐션을 설치하는데,
처음 강의 들을떄 꽤 고생했던 scss-lint를 쓰기 위해 삽질을 꽤 했다.

1. ruby 설치를 위한 homebrew 설치로 씨름을 했다.
   부딪힐때마다 포기하고 걍 넘어가다가 이번엔 왠지 할 수 있을 것 같아서 시도끝에 설치 완료!
   m1이 한방에 뭐가 안되는 경우가 꽤 많다. 도움받은 글

2. ruby 설치 후 gem install scss-lint 도 해야하는데
   permission 에러로 또 삽질함 도움받은 글 2

3. 근데 다 설치하고 lint 실행 콘솔 메세지도 정상으로 떳지만 코드에 바로 노란줄 워닝 메세지가 표시되지 않아서 실패..

4. 그리고 프로젝트를 닫았다 여니까 home brew까지 다시 없다고 나온다.. 띵..
   반나절 넘게 씨름하다가 일단 다시 놔주기로 함 😭 언젠가 이거 별거 아니었는데 고생했네 할 날이 오겠지.

5. 결국 sass-lint로 우회했다. 더이상 지원되지 않는 버전이라고 하는데 대안이 없어서 걍 설치..
   lint 때매 하루 반나절 순삭 ^^

드디어 프로젝트 셋팅 내용을 커밋했다.

2022.11.02 - 컴포넌트 구성에 대한 고민

가장 최근에 공부한게 리액트라 바닐라 자바스크립트로는 컴포넌트를 어떻게 나눠 구성해볼 수 있을지 궁금했다.

Vanilla Javascript로 웹 컴포넌트 만들기

클래스를 활용해서 컴포넌트의 상태를 관리하고 props를 전달하는구나..
또 이걸 해보고 싶어서 글을 몇번이고 반복해서 보다가 진도를 못나가는 나자신을 발견하고
일단 지금은 할 수 있는 정도로 빠르게 빌드하고, 좋은 구조들을 찾아보며 리팩토링하자 생각했다.

2022.11.03 - 에셋 준비

아이콘 폰트

아이콘들은 UI개발 강의에서 배운것 처럼 아이콘 폰트로 만들어서 적용했다.

icon font 설정하기

1. 사이트에 아이콘 svg파일을 임포트 하고 선택한다음 하단 ‘Generate Font’ 버튼으로 폰트 생성.
   설정 아이콘에서 폰트명을 입력하고, css selector는 ‘Use i’로 설정한다.
2. 다운받은 파일의 fonts 폴더 내 파일들을 내 프로젝트 디렉토리에 추가한다.
3. 다운받은 파일 중 style.css 내용을 내 프로젝트 css에 추가한다.
   나는 sass를 활용중이므로 _icon-font.scss 파일을 별도로 만들어 import 했다.
4. 그러면 앞으로 icon-star와 같은 클래스를 가진 i태그로 아이콘 활용 가능!

<!-- icon-font 사용 예시 -->
<i class="icon-star"></i>
<i class="icon-edit"></i>
<i class="icon-calendar"></i>
<i class="icon-chevron-down"></i>
<i class="icon-plus-circle"></i>

파비콘 설정

파비콘은 소비패턴 확인용 가계부라는 컨셉에 맞게 차트 아이콘으로 심플하게 설정했다.

css 초기화

css 초기화를 위해서는 여러 방법이 있다.

• reset.css 모든 요소의 스타일을 완전히 초기화 시킬 수 있으나, 잘 쓰지 않는 불필요한 선언들이 많음.
• nomalize.css 브라우저마다 다른 스타일 디테일을 일관되어 보리도록 맞춰준다.

각각의 장단점이 있는데 강의에서 들은대로 nomalize를 기반에 자주쓰는 태그 초기화 코드를 추가했다.

before

after

나머지 에셋 셋팅

컬러와 폰트를 변수, 믹스인을 활용해 셋팅했다.

변수와 믹스인을 사용한 font-style 셋팅

2022.11.04 - 믹스인 설정 및 그리드 시스템

들을 때마다 느낌이 다른 강의

들었던 강의를 다시 훑으면서 복습하고 내 프로젝트에 맞게 만들고있는데
다시 듣는 강의가 진짜 재밌는거 같다.
처음 강의 들을때도 100프로를 이해하려 노력은 했지만.. 지나고보니 얼마나 얕게 이해했던건지 깨닫게 된다.

복습하다가 추가로 알게된 점

scss 파일 작성 시 앞에 언더바를 붙이는 이유는 해당 파일이 컴파일 되지 않도록 하기 위함이다.
main.scss 파일에서 import 해와서 한번에 컴파일 하면 되기 때문에
소스가 되는 scss 파일들은 컴파일 될 필요가 없다.

믹스인 설정

어쨌든, 오늘은 기본 UI 모듈을 만들기 전에
자주 사용하는 position, flexbox, 모바일용 미디어쿼리 속성들을 scss파일로 만들었다.
앞으로 프로젝트를 진행하면서 디테일을 더 추가해나가야겠다.

scss 파일 구조

그리드 시스템

각 해상도에서 어떻게 동작할 것인지 계획했다.
PC 화면에서 보여줄 만큼 컨텐츠가 많지 않으므로 모바일 사이즈를 기준으로 한다.
따라서 그리드 시스템을 적용할 것은 딱히 없었고, 모든 코드는 모바일 해상도를 기준으로 하되
breakpoint 를 넘어가는 사이즈에서는 컨텐츠가 화면 중앙에 오도록 하는 미디어쿼리를 추가했다.

large-screen 미디어쿼리를 믹스인으로 만들어 사용

2022.11.05 - 레이아웃 스타일링

일단 기본 레이아웃의 구조를 잡기 위해 인트로페이지를 스타일링 했다.
그리고 모바일과 큰 해상도에서 의도하는대로 보여지는지 확인했다.

border-bottom만 다른 스타일 적용하기

하단 보더가 굵은 스타일의 디자인을 계획했었다.
디자인할때 큰 고려 없이 border를 outside로 잡고 했더니 위 이미지와 같은 디자인이 나왔는데

코드에서는 border가 inside로 잡히면서 하단 양쪽 곡선이 디자인처럼 나오지 않았다.

boder-radius 값을 변경하는 것과 뒤에 까만레이어를 겹쳐놓는 방법 등 고민하다가
결국 box-shadow로 잡았다.
이렇게하면 하단의 padding값을 신경써줘야 하지만
애초에 디자인도 그렇게 설계되었으므로 문제 없을 것 같다.

디자인 업무를 할 때 자주 디자인의 디테일을 잡기 위해 개발자와 같이 애썼던 경험들이 떠오르면서
반대 입장이 되어보니 신기하고 재밌고 그렇다.

일단 첫 페이지 기본 UI 그려놓고 원하는대로 동작하는지 확인 완료!

이거 해놓고 너무 뿌듯하고 행복한 나 ㅎㅎ 깨알같이 설정버튼 키프레임도 추가했다

2022.11.06 - 기능 정의 및 구현 시작

우선 기획했던 내용에서 좀 더 상세하게 기능을 정의했다.
각 버튼이나 인풋의 명칭을 정하고, 동작시 어떤 데이터가 어떻게 저장되고 어떻게 보여질 것인지 확인했다.
적다보니 추가하고 싶은 기능들이 산더미다. (제발 차근차근..)

각 부분 명칭 정하기, 필요한 속성을 적어보며 유저플로우 정리

간단하게 정리를 해놓고 드뎌 JS파일을 만들기 시작했다.
HTML에는 뼈대가 되는 틀을 잡아놓고 JS에서 상태에 따라 데이터를 넣고 빼는 코드를 구현해 나갈 계획이다.
스스로 만드는 첫번째(?) 프로젝트이다보니 시멘틱한 마크업을 위한 태그 사용과 클래스 네이밍에도 더 많은 고민이 필요하다.

고민만 많았던 토이 프로젝트를 드디어 시작한 한 주
다음주는 주간 계획을 잡고 하루하루 진도를 나가봐야겠다.