폴리프레임

Vite 프로젝트는 awesome -vite 에서 시작 할 것을 권장합니다. vanila JavaScript 부터 다양한 형태의 조합으로된 Template 을 모아 놓은 곳으로, clone 또는 zip 파일을 받아서 시작 할 수 있습니다. https://github.com/vitejs/awesome-vite/ GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js⚡️ A curated list of awesome things related to Vite.js - vitejs/awesome-vitegithub.com 물론 다운로드 후에  node modules 를 설치 해야 합니다.터미널에서 "npm insta..

JavaScript 2024. 5. 15. 12:54

addEventListener()는 DOM 요소에 이벤트 리스너를 추가하는 가장 표준적이고 강력한 방법입니다. 먼저 이 것을 자세히 보고, 다른 프레임웍에서는 어떻게 사용하는지 보겠습니다. 주로 아래와 같은 형태로 DOM 요소에 붙여 사용합니다.    addEventListener(type, listener);    addEventListener(type, listener, options);    addEventListener(type, listener, useCapture); type 여기서 type 이라고 하는 것은 이벤트 대상에 따라 많은 종류가 있습니다. 필요 할때 MDN 싸이트를 통해서 길을 찾기를 권하며, 여기서는 mouse 등과 관련된 예시를 몇가지 하겠습니다. "click" : 클릭했을 때..

JavaScript 2024. 5. 15. 11:28

객체 접근 자바스크립트 객체에서 특정 속성에 접근하는 방법은 점 표기법(.)이나 대괄호 표기법([])을 사용합니다.const person1 = {};person1['firstname'] = 'Mario';person1['lastname'] = 'Rossi';console.log(person1.firstname);// "Mario"const person2 = { firstname: 'John', lastname: 'Doe',};console.log(person2['lastname']);// "Doe"(출처 MDN)// 객체로 정의된 iconMapconst iconMap = { home: '🏠', search: '🔍', user: '👤'};const type = 'home';const Ico..

JavaScript 2024. 5. 13. 04:21

//const shimmer = ' before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent '; ....... before:absolute: 이 클래스는 ::before 의사 요소를 절대 위치로 설정합니다. 즉, 부모 요소에 대해 상대적으로 위치가..

JavaScript 2024. 5. 12. 10:32

1. replace() 메서드replace() 메서드는 문자열에서 첫 번째로 발견된 부분만을 대체합니다. 이 메서드는 두 개의 인자를 받습니다: 첫 번째는 찾을 패턴(문자열 또는 정규 표현식), 두 번째는 그 패턴을 대체할 문자열입니다.let text = "Hello World, welcome to my World.";let newText = text.replace("World", "Planet Earth");console.log(newText); // "Hello Planet Earth, welcome to my World." 정규표현식으로, i는 대소문자 구분 안함let text = "Hello world, welcome to the World.";let newText = text.replace(/..

JavaScript 2024. 5. 11. 10:14

자동 세미콜론 삽입(Automatic Semicolon Insertion)자바스크립트는 코드의 끝에 세미콜론을 자동으로 삽입합니다. 그러나 이 기능은 항상 완벽하게 동작하지 않으며, 특정 상황에서는 개발자의 의도와 다르게 작동할 수 있습니다. 예를 들어, 두 스크립트 파일이나 스크립트 블록이 연결될 때, 첫 번째 스크립트의 끝에 세미콜론이 누락되어 있다면, 두 번째 스크립트의 시작 부분 코드와 결합될 때 예기치 않은 문제가 발생할 수 있습니다. 예를 들면// 첫 번째 스크립트 파일 또는 블록var a = 3// 두 번째 스크립트 파일 또는 블록(function() { var b = 5;})();위 예시에서 첫 번째 스크립트의 var a = 3 뒤에 세미콜론이 없다면, 자바스크립트 엔진은 이 두 코드..

JavaScript 2024. 5. 11. 08:47

JavaScript 2024. 5. 11. 08:30

Next.js + TypeScript + Sanity + Shadcn/UI 로 완성 후, GitHub을 통해 Vercel 에 Depoly 한 후 최종 directory 구조 이며, 주의 사항을  적어 봅니다.Vercel Add New...> Project 를 선택하면 바로 GitHub에 올라가 있는 리스트를 볼 수있고, "Import" 버튼만 클릭하면 바로 가져와서 deploy 를 한다.Sanity 를 사용하는 경우는 sanity 폴더가 Vercel로 들어오지 않게, root 에 ".vercelignore" 파일을 만들고 "sanity"을 list 하여 github 까지는 올라가도, vercel로 가지 않게 해야 함. 삭제해야 하는 경우가 생기면, github 시스템과 비슷하게 seeting에서 지울 수..

JavaScript 2024. 5. 10. 22:23