본문 바로가기

005 프로그래밍22

[Vuetify] Vue의 디자인(UIUX) 속도를 몇 배 이상 빠르게 해주는 도구 개요 Vuetify는 Vue의 프레임워크이다. Bootstrap처럼 미리 UIUX 디자인을 설계해 두고, 사용자가 이에 접근할 수 있게 도와준다. 즉, Vuetify는 Vue의 디자인을 빠르게 만들 수 있게 도와준다. 특징 Vuetify는 모바일을 우선적으로 지향하는 디자인이다. (물론 모바일, 태블릿, PC 어느 곳에서도 훌륭한 디자인을 보이기 위해 고안되었다) Vuetify는 SASS/SCSS를 사용한다. 참고할 만한 링크 Vuetify 공식 홈페이지 https://vuetifyjs.com/ 2022. 12. 21.
[Vue 에러] Component 에러 - "data" option should be a function that resturns a per-instance value in component definitions. 문제원인 Component의 data를 object로 생성해서 발생한 에러이다. 문제해결 Component의 data를 함수형으로 작성해준다. 예시 // 오류 구문 // 아래와 같이 수정해야 한다. 2022. 12. 19.
[Javascript] module import, export HTML 내에 를 이용해 직접 파일을 삽입했다면, type='module'을 작성해주어야 정상적으로 사용할 수 있다. 2022. 12. 16.
[Vue-Error] vue cli 4 vulnerabilities (2 moderate, 2 high) 해결 방법, Vue 설치 에러 Vue CLI 설치 방법 1. NodeJs를 설치한다 2. Terminal에 다음의 코드를 입력한다 npm install -g @vue/cli 에러 해결 npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated res.. 2022. 12. 15.
[jQuery] CSS 효과 주는 방법 기본 사용 방법 $("요소선택").css("속성", 값") // id가 example인 요소의 스타일 변경 $("#example").css('color','red'); 여러 개의 CSS 적용하기 1. 체이닝 기법 체인처럼 주고자 하는 효과들을 연속적으로 써내려가면 된다. // id가 example인 요소의 스타일 변경 $("#example").css('color','red').css('font-size','24px'); 2. 객체(Object) 사용 객체 (object)을 이용해 복수의 값을 저장할 수도 있다. // id가 example인 요소의 스타일 변경 $("#example").css( {'color' : 'red' , 'font-size' : '24px'); 값 변수화 시키기 css 스타일을 변수.. 2022. 12. 14.
[HTML] 데이터 속성을 이용한 데이터 저장 데이터 속성 (Data Attribute) 웹 퍼블리싱, 프론트엔드에서 데이터들은 대부분 자바스크립트 변수에 저장을 한다. 하지만, HTML5에서부터는 HTML과 관련된 데이터를 HTML 파일에서도 저장할 수 있는 공식적인 방법이 생겼다. 이것이 바로 데이터 속성 (data attribute)이다. 사용방법 // HTML 태그 내에 data-key = 'value'의 형태로 입력하면 된다. // 예시 그리고 자바스크립트에서 이를 불러올 때는, selector.dataset.key 를 통해 값을 불러올 수 있다. // id가 list이고, currency 데이터를 담고 있는 li 선언 Korea 2022. 12. 13.
[PWA] manifest 예시 / 템플릿(JSON) JSON 양식으로 작성된 코드입니다. { "name" : "웹 이름", "short_name" : "웹 이름_축약 버전", "description" : "웹에 대한 설명", "scope" : ".", "start_url" : "./", "display" : "fullscreen", "orientation" : "portrait", "theme-color" : "#ffffff", "background-color" : "#ffffff", "icons" : [ { "src": "아이콘 주소", "sizes": "48x48", "type": "image/png" }] } 적용 방법 자신의 HTML 파일에 아래의 코드 삽입 적용 확인 HTML 파일 실행 - [개발자 도구] - [응용 프로그램(Application.. 2022. 12. 12.
[Git] 사용자 정보 확인 (user.name, user.email) $ git config --list git config --list 명령어를 통해 사전에 입력한 user.name과 user.email을 확인할 수 있습니다. 2022. 12. 11.

티스토리툴바