728x90 반응형 전체 글240 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. Docker 배포 방법 본인이 편하기 위해 적어두는 도커 배포 방법나는 이렇게 하면 되지만 작업 환경에 따라 안되는 사람이 있을 수 있음Docker 배포 방법🐬 로컬(saramnim)의 수정한 저장소(myFront 기준)ex) 경로: saramnim@DESKTOP-0000000:/home/myProject/myFront1. 우분투에서 작업 진행2. 자신의 작업 공간에서 진행 상황 pull 땡기기 ( wsl에서 코드 받기 )git pull or git clone 3. package.json에서 버전 올려주기 ( docker에서 사용할 버전과 일치 )vi package.json 4. 로컬 도커 빌드※ 태그 확인 방법: docker hub에서 해당 프로젝트 선택해 태그 확인docker build -t [계정명]/[프로젝트명]:[.. 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. 서울 - 아침점심저녁 봉천점 🧡 메뉴 🧡 가격 🧡 리뷰맛 🏆🏆🏆🏆자극적이지 않은 맛있는 집 순두부찌개 맛먹어도 배 안아픔가격 💲💲💲💲💲기본적으로 싼 가격 + 제공 쿠폰 + 배민 클럽 할인으로 다른 집보다 저렴한 가격으로 맛있는 한 끼 식사를 할 수 있음(24/06/14 기준)🧡 사진 2024. 6. 14. 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. 노션 API 필터링 방법 정리 기본적인 사용 방법은 아래에 나와있다.https://developers.notion.com/reference/post-database-query Query a databaseGets a list of Pages and/or Databases contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the request. The response may contain fewer than page_size of results. If the response includes a next_cudevelopers.notion.com다만 위의 방법만으로는 헷갈리는 사람들이 많.. 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. 이전 1 2 3 4 ··· 27 다음 728x90 반응형 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
