shaking blog

[CSS] z-index 에 대해서

z-index 의 특징 z-index 값이 클 수록 위로 올라온다. ex) A 의 z-index 는 0, B 의 z-index는 1 일 경우 z-index 값이 같을 경우 나중에 배치된 레이어가 위로 올라온다. ex) A 와 B 의 z-index 모두 0 인데, html B 가 더 나중에 배치된 경우 태그 깊이가 같은 것 끼리만 비교가 된다. ex) A 는 z-index가 2, B 는 z-index 1, C 는 z-index 3 일 때 A > C > B 순으로 나타난다. A B C → A 와 B 중 A z-index 값이 더 크므로 A가 B 보다 위로 위치한다. → B 와 C 중 C z-index 값이 더 크므로 C 가 B 보다 위로 위치한다. 즉, 부모 영향을 받으니 아무리 z-index 값이 크더라도..

카테고리 없음 2024. 1. 24. 11:33

지원 브라우저 확인 하는 사이트

https://caniuse.com/

카테고리 없음 2024. 1. 17. 16:50

맥북에서 Apple 기기 테스트 하는 방법

spotlight 검색 열기 (command + space bar) simulator 검색 docker 위의 simulator 아이콘 에서 마우스 오른쪽 → device 선택

카테고리 없음 2024. 1. 17. 16:49

Storybook Button Example (feat. vue)

Start package.json 에 다음과 같이 명령어를 넣는다. "scripts": { "dev": "vite", ... "preview": "vite preview", "storybook": "storybook dev -p 6006" }, 다음 명령어를 통해 Storybook 을 실행할 수 있다. npm run dev:storybook http://localhost:3003 로 Storybook 이 자동 실행 된다. Button Example 1. Button Story 를 추가해봤다. 2. 전체적인 코드를 먼저 대략적으로 말하자면, Button Component 에서 label, primary 여부, size, backgroundColor 를 props 으로 받고 click 이벤트를 세팅했다. 스..

Helloworld!/Vue 2024. 1. 17. 16:46

Storybook 시작하기 (feat. vue)

Install 1. Storybook CLI 사용해 설치한다. npx sb init 루트 안에 .storybook 과 storybook-static 추가된다. package.json 에 명령어 추가된다. ... "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" ... 2. .gitignore 에 다음과 같이 추가한다. .storybook storybook-static 3. Stroybook 을 다음 명령어로 실행한다. npm run storybook http://localhost:6006 로 Storybook 자동 실행 된다. Setting .storybook/main.js 에서 스토리 위치 외 Storybook 에 ..

Helloworld!/Vue 2024. 1. 17. 16:28

[Vue] Vue2 에 Composition API 적용하기

Composition API 설치 install npm install @nuxtjs/composition-api --save plugin 추가 https://bitbucket.org/backpackr/web.idus.com/src/f71db99f7dbd/plugins/composition-api.plugin.ts nuxt.config.ts > buildModules 추가 buildModules: [ ... '@nuxtjs/composition-api/module' ], Composition API 사용 하기 Composition API import import {reactive, ref} from "@nuxtjs/composition-api"; setup()에 전달된 인자에 대한 타입을 추론하려면, de..

Helloworld!/Vue 2024. 1. 17. 14:04

[GIT] 방금한 commit 취소 (하고 다시 stage 로 복구)

이전에 작성했던 git 에서 commit 취소 하는 방법은 : https://88240.tistory.com/523 reset 명령어를 통해 commit 한 내용을 모두 지우는 것인데, commit 을 하지 않아야할 상황에 잘못 commit 해서 commit 실행취소처럼 다시 stage 에 복구시키는 명령어에 대해 메모한다. 명령어는 다음과 같다. git reset HEAD^

Helloworld!/GIT 2024. 1. 17. 12:11

[GIT] git 에서 pull 받으려 할 때 다음과 같이 error 날 경우

hint: You have divergent branches and need to specify how to reconcile them. hint: You can do so by running one of the following commands sometime before hint: git config pull.rebase false # merge hint: git config pull.rebase true # rebase hint: hint: You can replace "git config" with "git config --global" to set a default hint: preference for all repositories. You can also pass --rebase, --no-r..

Helloworld!/GIT 2024. 1. 17. 12:05

intellij 에서 treeview 안보일 때

https://apeltop.blogspot.com/2018/06/intellij.html

카테고리 없음 2023. 5. 16. 17:31

[Vue] Composition API

Vue3 에서 달라진 점 https://v3.ko.vuejs.org/guide/migration/introduction.html#주목할-만한-새로운-기능들 시작하기 | Vue.js 시작하기 INFO Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요. 이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를 v3.ko.vuejs.org https://composition-api.nuxtjs.org/ Nuxt Composition API Vue 3 Composition API in Nuxt composition-api.nuxtjs.org Composition API 탄생 배경 1. Options..

Helloworld!/Vue 2022. 3. 21. 14:57