프론트엔드 (5) 썸네일형 리스트형 Vue3 프린트 기능을 이용해보자! 안녕하십니까! 야생에서 등장한 하프 입니다 😊 이번에는 Vue3 로 프린트 기능을 사용하는 법을 알아보도록 하겠습니다 ~ 해당 기능은 vue3 를 기준으로 작성되었습니다 📝 목차 초기 디자인 1. 폴더 구조 폴더 구조는 간단하게 설정했습니다. 2. html, css 구성 초기 디자인 구성을 위해 디자인을 해주도록 합시다! 아래의 코드는 예시 코드이며, 원하시는걸로 제작 후 사용하셔도 됩니다 ! // src/components/printFunc.vue ${content} ` ); printWindow.document.close(); // 프린트 창이 닫힐 때 printWindow.onafterprint = () => { printWindow.close(); }; printWindow.print(); } [.. 티스토리 물결(Wave)를 만들어보자! 안녕하십니까. 야생에서 출몰한 하프입니다. 🫠 블로그에 다음과 같이 아름다운 웨이브를 만들어보도록 합시다 별자리랑 웨이브가 있으니 정말 아름답네요 😊 📝 목차 웨이브 1. 사용 기술 이번에도 사용한건 Javascript Canvas 입니다. 찾아보니, hero Waves 라는것도 있고 svg 웨이브 마스크를 사용한 방법도 있더라구요. hero Waves : https://codepen.io/KrzysiekF/pen/oNNLwZq svg Wave : https://wsss.tistory.com/1520 기존에 있는건 식상하니! 만들어 보도록 합시다! 2. 기술 구상 우선 어떻게 만들지 정해야 겠지요! 저는 "인터렉티브 디벨로퍼 김종민"님의 영상을 참고 했습니다. 일단 동그라미를 여러개 그리고 생각해봅시다... 티스토리 별자리를 만들어보자! 야생에서 등장한 하프 입니다. 😊 이번에는 티스토리에서 사용한 별자리를 만들어보도록 하겠습니다. 전 블로그에 글 맨 상단에 적용을 해봤습니다. 나중에 카드 형식으로 설정해서 보여질 수 있도록 인터랙션을 바꿀!! 예정이지만 궁금하신 분들을 위해 글을 작성해보겠습니다. 📝 목차 별자리 1. 사용 기술 제가 채택한 기술은 Javascript Canvas 입니다. 물론 이전에도 계속.. 사용을 해왔고 만드는게 재미있어서 시작하게 됐었는데, 여기서 빛을 보게 되네요 !.. Javascript Canvas는 말 그대로 웹 상에서의 캔버스 입니다. 내가 원하는 만큼 그리고 지울 수 있지요! 그래서 그리고 지우며 애니메이션 처럼 보이는 Frame 단위를 사용합니다. 해상도에 따라 다르겠지만 60 프레임을 목표를 합니다.. 티스토리 목차를 만들어보자! 야생에서 온 하프 입니다 😊 제가 사용하고 있는 목차를 같이 만들어 봅시다. 제목1, 제목3 으로만 반응하도록 했습니다. 이유는.. 제목1과 제목2는 크게 차이가 나지 않아서 구분이 잘 안되더라구요.. 필요하실 때 커스텀 하시면 될 듯 합니다. 📝 목차 목차 구성 조사 1. jquery.toc.js 제가 목차를 만들기 위해서 찾아보았을 때는, jquery.toc.js가 많이 보였습니다. 그래서 이것이 무엇인지는 알고 사용은 해야겠다 싶었습니다. jquery.toc.js는 HTML 문서에 있는 h1, h2 등의 태그들을 목차로 만들어주는 jquery의 플로그인 입니다. jquery.toc.js는 여기에서 다운받으실 수 있습니다. 일단 어떻게 만들면 좋을지 잘 모르겠어서 해당 블로그를 참고 했습니다. 서식 .. 리액트 전역 상태관리를 사용해보자 (Redux, Recoil) 안녕하십니까 야생에서 등장한 하프 입니다 😊 리액트에서 전역적으로 상태관리가 주어진다고 한다면, 아무래도 필요한것이.. 전역 상태관리 일거시옵니다~ 간단하고 핵심만 짚어서 해드릴테니 잘 따라오시면 되겠습니다 👌 📝 목차 Redux, Recoil 이란? 전역 상태관리를 해주는 라이브러리로 많이들 알고 계실 겁니다 ~ 주로 Redux는 대부분 알고 계신거 같더라구요. 이것을 왜? 사용하는가 한다면 바로 props 때문입니다. props는 부모에서 자식에게 넘겨줄 수 있지만, 자식에서 부모로 props를 넘겨줄 수는 없습니다. 그래서 자식에게 useState 변수를 넘겨준다고 한다면, props는 너무나도 복잡해지게 됩니다. 즉, 유지보수가 힘들어지게 되겠지요. 그래서 우리는 이것을 `어딘가`에 변수를 저장해.. 이전 1 다음
