npm(4)
-
GSAP란 무엇인가? -녹색 양말 만화 이음마당
GSAP란 무엇인가..? Green Sock Animation Platform 한글로 번역하면녹. 색. 양. 말. 만. 화. 이. 음. 마. 당!이라고 한다. (죄송합니다 바로 본론으로 들어가겠습니다.) 1.GSAP GSAP(GreenSock Animation Platform)는GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.웹 애니메이션을 만들 때 굉장히 유용한 자바스크립트 라이브러리.DOM 요소에 복잡한 애니메이션 효과를 쉽게 추가할 수 있게 해 준다.특히 성능이 뛰어나고, 다양한 브라우저에서 일관된 동작을 보장하기 때문에웹 개발자들 사이에서 인기가 많다. 2. 왜 GSAP을 선택했을까?성능GSAP은 뛰어난 성능을 자랑한다. CSS 애니메이션이나 다른 자바스..
2024.10.02 -
라이브러리 적용 방법: CDN, npm 설치, 다운로드 설치의 차이점
요즘 웹을 제작하면서 안 써본 기능들을 쓰려하니본의 아니게 많은 라이브러리를 접하고 설치 및 적용하게 됐다. 근데!!!!!!!!!!그럴 때마다!!!!!!!!! 설치 및 적용방법을 다운로드 후 적용하라고 강요받았다....나는 NPM설치가 제일 익숙하고!CDN은 한두 번 써보긴 했고..다운로드방법은 간간이 보였다 (처음 알게 됐고, 업데이트가 최근에 없는 오래된 라이브러리일수록 다운로드가 많았다 어쨌든 이제는 또 정리해야만 할 때가 온 것이다..! (본론 시작) 바쁘신 분들은 마지막 요약만 보셔도 됩니다! 1. CDN (Content Delivery Network) CDN이란? CDN은 라이브러리를 외부 서버에서 직접 불러오는 방식이다.라이브러리의 파일을 웹 서버에 저장하지 않고,해당..
2024.09.28 -
CSS로 모든 콘텐츠 75% 축소하기-transform: scale()과 zoom의 활용
제목을 어떻게 지어야 하나 많은 고민을 했다....근데 단순히 저런 의미가 맞는 거 같다!전체적인 웹을 디자인해놓고 보니 문득 콘텐츠가 너무 크다는 생각이 들었다(폰트, 이미지포함).그래서 단순히 마우스 휠로 축소를 해보니 괜찮은 느낌이었다.문제는 만들어놓은 양이 꽤 돼서 하나하나 고치기도 힘든 느낌이었고,단순히 전체 레이아웃을 축소하고 싶었다.... 하지만 축소시도를 해보니 viewport만 축소돼서콘텐츠는 그대로고 보이는 화면만 줄어들거나,축소되어도 css폼이나 레이아웃은 그대로 따라가지 않아서 골치가 아팠다. 이런 식으로....(gif파일의 출처는 아래 적어놨습니다) 내가 원하던 모습은 이거였다.. 그러던 와중에 나를 구원해 줄transform:scale() 기능을 알게 되었다!!!!!!..
2024.09.26 -
React] CRA에서 Vite로 마이그레이션 진행하기
1. 왜 Vite로 마이그레이션 할까? 2024.09.20 - [Devlog] - CRA(Create React App) vs Vite CRA(Create React App) vs ViteCRA(Create React App) vs Vite: 무엇이 더 나을까? React 프로젝트를 시작할 때 대부분은 **CRA(Create React App)**을 사용해 봤을 것이다.나 역시도 CRA3번 Vite2번 정도 사용해 봤다. 하지만 이 역시 프로젝whatever-ut.tistory.com 저번글에서 충분히 언급했기 때문에 바로 진행해 보겠다. 2. 마이그레이션 전 확인사항 Node.js 버전 확인Vite는 최신 Node.js 버전이 필요하다. 현재 프로젝트에서 사용 중인 Node.js 버전이 Vi..
2024.09.24