728x90 반응형 Front/Vue10 7-segment 타이머 만들기 아무도 안만들었길래 내가 만드는 7세그먼트 타이머1. 7-segment 모양 만들기먼저 template 코드는 아래와 같다.세그먼트는 7개로 이루어져 있음을 명심하자. polygon 생성 참고 사이트: https://bennettfeely.com/clippy/ css를 생각해보자.아래는 7세그먼트 타이머를 띄워주는 화면의 css이다..seven-segment-display { position: relative; width: 40px; height: 80px;} 다음으로, 세그먼트 요소이다. 기본적으로 어두운 초록색을 띄워준다..segment { position: absolute; background-color: #004400; /* Dark green background */ .. 2024. 11. 18. 비/눈 오는 효과 이전에 작성하고 정리하지 않은 코드라 오류는 없어도 중복이 있을 수 있음. 아래처럼 비 또는 눈이 내리는 효과를 만들어 보자. 먼저 비 오는 효과다.keyframes를 생성해주는 함수를 만든다. function addKeyframes() { const styleSheet = document.styleSheets[0] || document.createElement('style') if (!document.styleSheets.length) document.head.appendChild(styleSheet) styleSheet.insertRule(` @keyframes fall { 0% { transform: translate(-10px, -20px); } .. 2024. 9. 19. 마우스 따라오는 원 먼저 template를 작성해준다.style은 변수로 지정해준다. 다음으로 css를 작성해준다.원하는 색에 원하는 크기로 작성해도 무방하다..circle { position: fixed; width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; pointer-events: none; /* 동그라미가 클릭을 막지 않도록 설정 */} 마지막으로 script를 작성해준다.먼저, 동그라미의 위치를 저장할 반응형 변수를 생성해준다.const circleStyle = ref({ top: '0px', left: '0px', transform: 'translate(-50%, -50%)',}) 다.. 2024. 7. 28. VUE3.0 흘러가는 텍스트 💛 내가 재활용하기 위해 작성글 쓴지 참 오래됐다! 흘러가는 텍스트를 만들기 위한 코드다.// template {{ title }} // style 만약 span의 길이가 해당 div의 길이를 넘어갈 때에만 흘러가게 하고싶다면?// tsconst container = document.getElementById('scrolling-text-container')const text = document.getElementById('scrolling-text')if (container && text) checkOverflow(container, text)function checkOverflow(container: HTMLElement, text: HTMLElement) { if.. 2024. 6. 14. devExtreme 사용 중 만난 에러 보통 Selection 기능을 사용하기 위해 DxGrid에 ref를 지정해놓고 computed로 해당 ref.value.selectedRowData로 계산을 해 props로 모달에게 넘겨줄 것이다. 아래는 항상 정상 작동되다가 갑자기 되지 않는 이슈가 발생했을 때에 유용한 방법이다. function onSelectionChanged(e) { selectedRowsData = e.selectedRowsData } 만약 사용하는 ref의 ref.value. selectedRowData가 있는데 콘솔을 아무리 찍어봐도 변하는 값이 없다면 이렇게 해보자. const가 아닌 let을 사용한다는 점이 맘을 불편하게 하지만 어떻게든 해결해냈다. 2024. 1. 16. Vue3.0 + Nuxt 프로젝트 진행 후 정리 프로젝트를 진행하며 기존에 배웠던 React.js나 React.ts가 아닌 Vue.ts를 썼다. 사실 처음부터 Vue3.0과 Nuxt를 쓰느라 Vue2와 Vue3.0의 차이, Vue와 Nuxt의 차이에 대해선 잘 모르겠다. React를 사용할 때는 항상 axios를 service 폴더에서만 사용하여 백엔드와 연결했었는데, Vue를 쓰면서는 store에서 fetch를 사용하며 정보 교환을 했다. 덕분에 Pinia란 것을 처음 사용해보게 되었는데, 아직도 해당 코드를 전부 파악했다기보다는 내가 사용했던 코드는 파악한지라 계속해서 공부가 필요할 것 같다. 취준생인 우리들이 쓰는 차트메이커 라이브러리는 보통 chart.js나 d3.js 정도이다. 그러나 이번 프로젝트에서는 devExtreme이라는 새로운 라이브.. 2023. 11. 22. Nuxt 모달 만들기 및 적용하기 모달 만들기 components/modal/Alert.vue {{ message }} 확인 message를 props로 받아 페이지나 상태마다 모달의 내용이 달라지게 해준다. message를 더블 중괄호에 담고, props에 message가 String임을 담아준다. typescript로 작용하는 것을 볼 수 있다. 모달 적용하기 pages/user/login.vue 로그인 ... 모달은 주요 컴포넌트의 제일 아래, 최상위 컴포넌트의 닫는 태그의 바로 위에 작성해주면 된다. v-if로 태그를 조건에 따라 작동하게 한다. react의 state와 비슷한듯? showAlert가 참이면 message에 "로그인 성공!"이라는 AlertMessage를 담는다. showAlert가 거짓이면 message에 "로그.. 2023. 10. 4. Nuxt 라우팅 및 <NuxtPage /> Nuxt는 자동 라우팅 아래처럼 pages 아래에 index.js 또는 user 아래에 login 등으로 파일이나 폴더를 생성해주면 index / login /user/login register /user/register 위처럼 자동으로 라우팅 된다. 해당 태그가 있어야 Nuxt가 내가 생성한 Page들을 불러온다. app.vue에서를 넣어주는 것을 잊지말자! 2023. 10. 4. Nuxt Header & Footer 먼저, 헤더와 푸터 파일을 각각 만들어준다. 모든 페이지에서 쓰이므로 components/common에 생성한다. components/common/Header.vue Home Login Register Nuxt(Vue3.0)은 태그 안에 최상위 태그가 무조건 한 개 존재해야 한다. Nuxt에서 React의 Link와 같은 기능을 사용하고 싶을 때에는 NuxtLink를 사용한다. Home 사용 방법은 Link와 똑같다. components/common/footer.vue 연습용으로 만들고 있읍니다. 연습용으로 만들고 있읍니다. 연습용으로 만들고 있읍니다. 헤더 푸터 적용하기 app.vue에 헤더와 푸터를 박아준다! 2023. 10. 4. 이전 1 2 다음 728x90 반응형 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
