UI/UX 차이
·
개발💻/기타
1. UI (User Interface, 사용자 인터페이스) UI는 사용자가 직접 보고, 만지고, 상호작용하는 시각적 요소와 관련됩니다.주요 목표는 사용자와 제품 간의 상호작용을 직관적이고 효율적으로 만드는 것입니다. UI의 주요 요소  1. 시각적 디자인 • 버튼, 아이콘, 메뉴, 색상, 글꼴 등 화면에 보이는 모든 요소. • 일관성 있는 디자인을 통해 사용자가 쉽게 이해할 수 있도록 함. 2. 배치(Layout) • 콘텐츠와 기능이 화면에 어떻게 배치되는지 설계. • 가독성과 사용성을 높이는 역할. 3. 반응성(Responsiveness) • 다양한 기기(모바일, 태블릿, 데스크톱)에서 디자인이 적절히 표시되도록 보장. UI의 예시 • 하단 메뉴바(Tab Bar): 주요 기능에 빠르게 접근 가능. •..
Mac Mariadb GUI 추천 Tableplus 사용법
·
개발💻/기타
오늘은 mac에서 사용할수 있는 db GUI중 Tableplus 사용법에 대해 알아보겠다 다른 GUI들도 많지만 어쩌다보니 이걸 계속 사용하고 있는데 눈으로 보기도 쉽고 수정하기도 쉬워서 꾸준히 사용중이다 https://tableplus.com/ TablePlus | Modern, Native Tool for Database Management.Modern, native client with intuitive GUI tools to create, access, query & edit multiple relational databases: MySQL, PostgreSQL, SQLite, Microsoft SQL Server, Amazon Redshift, MariaDB, CockroachDB, Vertic..
vue3 datepicker (vue에서 날짜 선택,시간 선택)
·
개발💻/기타
오늘은 vue3 datepicker 사용법에 대해 소개해보겠다 웹 개발을 하다보면 날짜나 시간을 선택하거나 입력해야할 상황이 꽤나 종종 있다 나는 vuetify에서 여러 컴포넌트들을 가져와서 작업을 하는데 vuetify에 date pciker가 있긴 하다 근데 날짜 뿐만아니라 시간까지 선택하는 거는 아직 없는거 같다 좀 찾아보니 옛날에는 있었는데 사라진거 같기도 하고 그리고 vuetify 로드맵을 보면 아마 올해 7월에 릴리즈가 될 예정인거 같다 아무튼 오늘은 날짜 뿐만아니라 시간까지 선택할 수 있는 vue datepicker에 대해 소개해보겠다 https://vue3datepicker.com/ Vue Datepicker Vue datepicker The most complete datepicker so..
vue 프로젝트 vuetify로 반응형 웹 쉽게 만들기📱
·
개발💻/기타
오늘은 vuetify를 활용해서 반응형 웹을 쉽게 만드는 법을 알아보겠다!! 보통 반응형 웹을 만들기위해서 css 에서 미디어 쿼리를 사용해서 만드는 걸로 알고있다 물론 미디어 쿼리를 사용하면 내가 설정한 화면 크기 안에서 특정 스타일이 적용되게 할수있고 뭐 간단한 텍스트 같은것들은 % 나 vw vh등을 통해서도 구현이 가능할거다 하지만 매번 미디어 쿼리를 작성하기 귀찮기 때문에 나는 오늘 뷰티파이를 사용해서 반응형 스타일을 작성하는 법을 알려주겠다 일단 터미널에서 npm create vuetify 명령어를 입력해서 뷰티파이 프로젝트를 생성한다 이런식으로 프로젝트가 만들어 질텐데 styles파일에 scss 파일을 하나 추가해주고 helloWorld.vue 파일에 기존에 있던 내용들을 삭제해주고 안녕 반응..
vue3 다국어처리 i18n 사용법 알아보기
·
개발💻/기타
오늘은 다국어 처리를 위한 i18n 이라는 라이브러리에 대해 알아보겠다 https://vue-i18n.intlify.dev/ Vue I18n | Vue I18n Vue I18n Internationalization plugin for Vue.js Easy, powerful, and component-oriented for Vue.js vue-i18n.intlify.dev 나는 vuetify, ts가 적용된 vue3 환경에서 했으니 참고하시길 일단 당연히 프로젝트 생성하고 npm install vue-i18n@9 설치를 해준다 그다음에 메시지를 넣을 json 파일들을 만들어야하는데 나는 src 하위에 lang 이라는 폴더를 만들고 en.json , ko.json, Index.ts 파일을 만들어줬따 // k..