느려도 한걸음씩

페이지 기능 개발에 앞서 정적인 부분부터 디자인하고 기능개발에 들어가기로 했다   모바일 , 데스크탑 화면에 맞춰 반응형 디자인 작업을 했는데 평소에는 오래걸리던 작업이 tailwind로 작업하니 상당히 수월하게 느껴졌다 https://github.com/hoj0806/todo-list/compare/style/destop GitHub - hoj0806/todo-listContribute to hoj0806/todo-list development by creating an account on GitHub.github.com

tailwind extend 를 통해 본인이 원하는 색상과 크기를 변수로 저장할수 있다  tailwind.config.js파일에서 extend 객체를 이용하면된다  extend를 통해 기본 설정을 확장할수 있다. 기존 설정을 덮어쓰지 않고, 추가적인 값이나 옵션을 병합할때 유용하다https://tailwindcss.com/docs/theme Theme Configuration - Tailwind CSSCustomizing the default theme for your project.tailwindcss.comhttps://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js(defualt theme을 확인해 원하는 설정을 바꿔주자) ta..

Figma를 이용해 디자인 시스템을 구축했다 웹사이트에 쓰일 컬러, 글씨체, 아이콘을 정의하고 Figma 기능을 이용해 색상과 글씨체는 변수로 만들고 아이콘들은 컴포넌트로 묶었다   Figma 링크https://www.figma.com/design/5NIXp62oEI3nHsMEpVpQJs/todo-list-project(react)?node-id=11-782&m=dev&t=BiznEL7rppYjktRa-1 FigmaCreated with Figmawww.figma.com

1.프로젝트 생성터미널에 npm create vite-latest를 입력해 vite 프로젝트를 생성한다 이 프로젝트에서는 javascript를 사용했다 vite를 이용해 프로젝트를 만들시에 터미널에 npm install을 입력한다   2. 파일 구조 정하기components 폴더 - 각 컴포트들의 폴더를 따로 만들어 이 폴더 안에서 관리ui 폴더 - 여러 컴포넌트에서 재사용될수 있는 요소들은 이 폴더에서 관리util 폴더 - helper 함수 관리  3.git우선 github에 들어가서 새로운 레포지토리를 만든다   그 후 해당명령어롤 틍해 원격저장소와 로컬저장소를 연결시켜준다   깃 커밋에 대한 컨벤션은 아래 문서를 참고했다https://udacity.github.io/git-styleguide/ Ud..

여태까지 배운 내용을 바탕으로 간단한 프로젝트를 만들기로했다 4단계에 걸쳐서 어떤 서비스를 만들지 계획을 세웠다 앱 요구 사항과 기능정하기페이지 나누기(단일 페이지 앱이 될것이므로 이부분은 고려 X)앱의 기능을 여러 카테고리로 나누기(state 관리 , 앱내에서 사용될 데이터의 흐름 생각하기)앱을 개발하면서 사용할 라이브러리 정하기(기술 스택) 1.앱 요구 사항과 기능 정하기 간단하게 할 일을 관리할수 있는 앱 제작로그인 기능은 구현 X사용자가 리스트에 있는 할 일을 관리할수 있음(생성,읽기,삭제, 수정)각각의 일정에 카테고리 설정이 가능각각의 일정에 메모기능을 제공해 짧은글을 남길수 있음완료된 일정 체크 기능일정 검색기능다크모드 기능  2.기능 카테고리로 나누기  구현 해야할 기능을 카테고리로 나누면 ..