실전 압축 코딩

position은 부모로 부터 상속 받지 않는다.  static: 기본값, 전적으로 페이지의 흐름을 따른다. top,bottom,left,right,z-index의 속성의 영향을 받지 않는다. relative: 원래 위치를 기준으로 top~right의 속성값이 적용 된다. 요소의 위치는 이동하지만, 요소가 차지하는 공백의 위치는 유지됩니다.absolute: static이 아닌 첫 부모를 기준으로 top~right의 속성값이 적용 된다. 페이지의 흐름을 벗어난다. 즉 부모가 absolute나 relative이면 그 속성을 기준으로 position 속성값이 적용 된다. fixed: 어떤 부모요소가 아니라 view port를 기준으로 한다. 즉, 스크롤을 해도 위치가 변하지 않는다. (popup 창등)stic..

순서가 중요하지 않음 순서가 중요함 inline style -> html tag에 css 코드를 넣어주는 방식 internal style sheet -> head tag 안에 style tag를 둔다. css가 해당 html 문서에만 적용됨. linking stylee sheet css 선택자 -> 뒤에 것이 우선순위를 갖는다. "구체적인 선택자가 우선순위를 갖는다. (더 많은 정보를 포함한)" . 클래스 # id p.blue -> p tag이면서 blue class를 가지고 있다. .blue.dark -> blue와 dark class를 둘다 가지고 있다. #id -> id 선택자. span , .dark, #red -> group 선택자 자손 결합자 .outter > li -> 1촌 결합 동생 결합자..

개발 도중 자꾸 저 메시지가 출력되었다. 쉽게 해결 할수 있을거 같아서 계속 미뤄두다 이제야 해결하였다. 코드 한줄로 해결하였다. npm run lint -- --fix 출처 https://code-hoon.tistory.com/185https://code-hoon.tistory.com/185 [ VSCode, Lint ] 에러 해결 potentially fixable with the `--fix` option Vue-cli 프로젝트를 만들 때 ESLint 옵션을 standard로 설정하고 생성하였다. 그런데 순조롭게 코드를 작성하고 있던 와중, 딱히 코드 자체에 문제가 없어보이는데 저런 에러가 출력되면서 --fix만 사용 code-hoon.tistory.com

vscode에서 reformat을 하는 방법을 찾아보았다. https://stackoverflow.com/questions/29973357/how-do-you-format-code-in-visual-studio-code-vscode How do you format code in Visual Studio Code (VSCode)? What is the equivalent of Ctrl + K + F and Ctrl + K + D on Windows in Visual Studio for formatting, or "beautifying" code in the Visual Studio Code editor? stackoverflow.com 윈도우: Shift + Alt + F mac: Shift + Optio..

https://stackoverflow.com/questions/63507831/argument-of-type-partial-is-not-assignable-to-parameter-of-type Argument of type partial is not assignable to parameter of type I am trying to update partial property of one of interface in TypeScript as below interface details{ name: string, phonenumber: number, IsActive: boolean } let pDt: Partial = { stackoverflow.com typescript 사용중 해당 type의 value를..

vue3 와 typescript로 개발중 'Object is possibly undefined' 에러가 발생했다. 딱 보아하니 'props로 땡겨온 변수가 undefined 일 수 있잖아' 라는 에러 같았다. 하지만 나는 해당 변수의 default 까지 선언을 해준 상황이라 절대 undefied 혹은 null 값이 될 수 없는 상황이였다.. 이를 해결하기 위해 해당 변수가 undefined 될 수 없다고 강제 하기로 했고, 느낌표(!) non-null 단어 연산자를 사용했다.사용법은 간단히 변수 옆에 !를 붙여주면 된다. 이는 확정 할당 단언(Definite Assignment Assertions) 이라고 한다. 변수에 값이 무조건 할당되어있다고 컴파일러에게 전달하여 값이 없어도 변수 또는 객체를 사용할..

간단 해결: computed 역시 value로 값을 호출해야 한다....

https://next.vuetifyjs.com/en/api/v-text-field/ v-text-field API — Vuetify API for the v-text-field component. next.vuetifyjs.com vuetify의 v-form validate를 이용하여 유효성 검증을 구현하였다. v-text-filed의 rule과 v-form의 ref를 잡아주면 된다. template Login 로그인 v-form의 ref를 loginForm으로 잡아주었다. v-text-filed 에서 검증할 rule을 설정하면 된다. setup setup () { const username = ref('') const password = ref('') const loginForm = ref(null)..

vue에서 eslint 관련 이슈가 생겼다. 해결 방법 package.json 에서 extends: [ "plugin:vue/vue3-essential", "@vue/standard", ], 를 extends: ["eslint:recommended", "plugin:vue/recommended", ] 로 바꿔주면 된다.

vuetify에서 icon 사용시 어떤 아이콘이 사용가능한지 확인하기 힘들다. 그럴때 참고 사이트! https://fonts.google.com/icons?selected=Material+Icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com https://pictogrammers.github.io/@mdi/font/2.0.46/ Material Design Icons Material Design Icons Mate..