김평범's OrdinaryCode

개발을 하다 보면, 특정 조건에 따라서 Css를 변경해야 되는 상황이 있다. 이럴 경우 주로 Class를 변경시켜서 적용이 가능하다. Vue에서 클래스를 조건에따라서 설정할 수 있다. 👩‍💻Vue 조건부 Class 예시 만약 버튼을 클릭하면, 화면이 다크 모드와 라이트 모드로 변경되는 기능을 구현한다고 생각해보자. 라이트 버전일 경우 배경화면이 하얀색으로 보여야하고, 다크 모드일 경우 배경화면을 검은색으로 보여야 한다. 이럴 경우 조건별 Class를 주면 해당 기능 구현이 가능하자. 아래 코드를 보자 {{thema}} div class중 body를 가지고 있는 div를 thema-button을 클릭했을 때 다크 모드로 바꿔준다고 해보자. 1️⃣vue Class if 조건에 따라 바꿔주기 vue에서 조건에..

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면 전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다. 크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만, 인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다. 이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다. 🌵버튼으로 크롬 전체 화면 만들어주기 샘플 코드 전체 화면 켜기 전체 화면 끄기 vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤 버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다. 해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다. 만약 전체 화면 상태이면 ..

🐣 들어가기 전 어느 날 Nuxt로 만든 프로젝트에서 run server를 돌릴 때마다 이상한 경고문이 발생하기 시작했다. Classic mode for store/ is deprecated and will be removed in Nuxt 3. 무슨 에러이길래 이렇게 무섭게 여러 번 찍히는 것인가 에러가 찍히긴 하지만 프로젝트 상 기능에서는 특별히 큰 문제가 없어서 일단은 무시하고 있었으나, 지속적으로 콘솔 로그에 뜨다 보니 슬슬 신경이 쓰여 이번 기회에 알아보기로 했다. 💡 Store에서의 Classic Mode과 Module Mode Nuxt에서 store 기능을 활용하기 위해서는 /store 디렉터리 아래에 파일을 생성해야 한다. 해당 디렉터리 이름을 절대적이며 변경을 해서는 안되기 때문에 vue..