🖱️ 프론트엔드 (8) 썸네일형 리스트형 WebPack5 #3 - 파일 로딩 안녕하십니까.노래듣다가 과몰입한 하프 입니다. 🎶 이번에는 번들링을 할 때 파일로딩을 어떻게 하면 좋을지를 알아보도록 하겠습니다. 📝 목차 Module Loading기본 설정폴더 구조를 다음과 같이 설정합니다. 📁 webpack-demo |- 📜 package.json |- 📜 package-lock.json |- 📁 dist |- 📜 index.html |- 📁 src |- 📜 index.js (수정) |- 📜 style.css (추가) |- 📜 image.jpg (추가) |- 📜 Pretendard.ttf (추가) |- 📜 webpack.config.js 기본 설정을 위해, 이미지와 폰트를 먼저 다운 받고, 다음 경로로.. WebPack5 #2 - 번들링 셋팅 안녕하세요.도서관 갔다가 휴관으로 집으로 다시 돌아온 하프입니다. 🥹 이번에는 번들링을 하기 위한 초기 셋팅을 해보려고 합니다. 프로젝트 셋팅라이브러리 설치cmd 터미널에서 진행해주시면 됩니다.mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-devnpm install --save lodash VSCode 플로그인 설정번들링 된것을 실행하기 위해서는 VSCode에서 Live Server라는 플로그인이 필요합니다. 설치하게 되면 오른쪽 하단에 Go Live 라고 하나가 생깁니다. 이 버튼을 누르게 되면, 현재 경로에 서버가 켜진다고 보시면 됩니다. 폴더 구조 생성다음과 같이 프로젝트를 셋팅해줍니다. .. WebPack5 #1 - 핵심 내용 안녕하세요.비트코인 하다가 나락간 하프입니다. 😂 이번에 알아볼것은 웹팩 입니다.제가 참조했던 자료는 webpack 사이트 입니다.한국어로 번역이 되어있고 가이드도 친절하니 한번 해보시면 좋을 듯 합니다. 📝 목차 웹팩이란?웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 입니다. webpack 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정 파일을 필요로 하지 않습니다. 하지만 사용자 요구에 따라 기대 이상으로 유연하게 설정이 가능 합니다. 웹팩의 장점1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.2. 모듈 단위로 개발이 가능하며.. 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 다음
