728x90 반응형 💚04_HTML5 & Javascript & CSS18 #vite #webpack #console.log #플러그인 #설정 #npm #번들링 웹 경량화를 사용하기 위한 vite나 webpack을 사용할때 불필요한 정보를 미출력하기 위해서 Bundling을 할때 console.log를 삭제하는 plugin을 소개할려고 합니다. 🦖Vite plugin(vite-plugin-remove-console)* 각 패키지 관리도구별 설치 방법 # npm npm install vite-plugin-remove-console -D# yarn yarn add vite-plugin-remove-console -D# pnpm pnpm add vite-plugin-remove-console -D👉 Npm - Node Package Manaber : Node.js의 기본 패키지 관리도구로 가장 널리 사용됨👉 yarn - FaceBook에서 개발한 패키지 관리도.. 💚04_HTML5 & Javascript & CSS/05_Front Tip(vite, 번들링, spa ) 2024. 12. 3. #Front #비동기호출 #XMLHttpRequest #fetch #axios #jQuery.ajax #호출방법 #cors설정 #자격증명 Front 페이지에서 비동기 호출하는 방법에 대해서 알아보겠습니다. XMLHttpRequest, fetch, axios, jQuery.ajax 이렇게 총 4가지에 대해서 먼저 알아보겠습니다. XMLHttpRequest와 fetch는 브라우저 내장 객체이며 axios는 라이브러리 jqeury.ajax는 jquery의 비동기 함수입니다. 🦖일단 비동기 호출의 주용 특징으로는 👉. 비동기적 : 요청을 보낸 후, 응답을 기다리는 동안 다른 작업을 계속할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있다. 👉. 서버와의 통신 : 서버에서 데이터를 받아와서 페이지에 동적으로 렌더링하거나, 폼 데이터를 서버에 보내는.. 💚04_HTML5 & Javascript & CSS 2024. 11. 19. #a태그문제 #페이지위로이동 #링크클릭방지방법 #웹개발팁 #자바스크립트링크동작 #페이지이동방지 페이지 이동을 방지하는 방법: # 대신 사용해야 할 3가지 방법웹 개발을 하다 보면 종종 ****와 같은 링크를 사용하게 됩니다.하지만 이러한 링크를 클릭하면 브라우저가 페이지의 맨 위로 스크롤되는 현상이 발생하곤 합니다.이는 브라우저가 **#**을 처리할 때 페이지 내에서 해당 위치로 이동하거나 맨 위로 스크롤하기 때문입니다.그렇다면, 페이지 이동 없이 링크의 클릭 이벤트를 처리하고 싶은 경우에는 어떻게 해야 할까요?아래에서 **#**을 사용하지 않으면서 페이지 이동을 방지하는 방법을 소개하겠습니다. 1. javascript:void(0) 사용하기를 사용하는 방법은 페이지 이동을 방지하는 가장 일반적인 방법 중 하나입니다. 이 코드는 자바스크립트의 void 연산자와 0을 결합하여 아무런 동작도 하지 않.. 💚04_HTML5 & Javascript & CSS 2024. 11. 15. #javascript #script태그 #페이지로딩속도 #async/defer 어트리뷰트 #sciprt태그위치는? 태그는 지금까지 head태그안에 들어가야지 하고 알고 지낸 부분이 많이 있습니다. 💚04_HTML5 & Javascript & CSS/01_Javascript 2024. 7. 16. #크롬 #개발자도구 #기능알아가기 #네트워크속도체크 🌱웹개발을 하면서 능숙히 반복숙달을 해서 알아둬야할 개발자 도구에 대해서 알아보도록 하겠습니다. 모바일 서비스를 구축할때 알아둬야할것은 웹페이지처럼 랜선 기반의 환경이 아닌 모바일 네트워크 환경에서 사용되는 모바일 페이지의 속도에 다른 사용자 UIUX에 대한 쾌적환 환경을 위해 부단히 많은 노력이 필요하다. 이에 개발자도구에서는 인터넷 속도를 편집하거나 기본 제공되는 3G환경을 통해 느린 통신망일때 호출되는 여러 페이지에 대한 리펙도링을 도와 줄수 있다. ⭐사용안함 👉제한 없음⭐사진설정 👉빠른3G(1.6mb/s, 750kb/s, 562.5ms) 👉느린3G(500kb/s, 500kb/s, 2000ms) 👉오프라인(0, 0, 0)⭐맞춤 👉추가.... 🌱다운로드, 업로드, 패킷 로스등 여러가지 .. 💚04_HTML5 & Javascript & CSS/04_Chrome(개발자도구) 2024. 7. 16. #화면확대축소 #디바이스 #모바일 #meta태그 #viewport #설정정보 모바일 디바이스에서 meta태그를 통한 화면 확대 설정을 제어하는 방법을 알아보겠습니다. dimensions(면적)을 responsive로 지정하게 될경우 화면 크기를 늘렸다 줄였다 할때 확대가 되는데 이는 vieport를 통해서 설정할수 있습니다. ⭐[initial-scale=1.0] - 조작하지 않은 초기 화면 크기로 값이 1이면 css와 디바이스 간 1:1 관계로 출력⭐ [minimum-scale=1.0] : 화면을 핀치로 축소시 줌아웃 배율 하한선 ( 기본값은 0.25 )⭐ [ maximum-scale=1.0 ] - 스프레드로 확대시 늘어날수 있는 줌 배율 상한선 ( 기본값 1.6 )링크의 미리보기 제목, 설명, ⭐ [ user-scalable ] - 사용자의 핑거 터치를 통한 스마트폰 화면 축.. 💚04_HTML5 & Javascript & CSS 2024. 6. 19. #removeEventListener #스크롤이벤트체크 #이벤트체크메소드 #약관동의 #스크롤 서비스를 개발하다보면 약관동의 같은 페이지를 개발할때가 있다. 약관은 내용이 많기 때문에 스크롤이 생기게 되는데 이럴때 removeEventListener 이벤트를 통해서 스크롤을 체크해볼수 있다. 🌱 scrollTop : 스크롤바 내린 높이🌱 scrollHeight : div 태그 실제 높이🌱 clientHeight : 눈으로 확인되는 div 박스 높이 🌱 실제 높이 : 스크롤 내린높이(scrollTop) + 눈으로 확인되는 div 박스 높이(clientHeight)🌱 $div.scrollHeight = $div.scrollTop + $div.clientHeight 통상적으로 -5를 지정해서 스크롤 끝에서 5px정도 왔을때 체크를 하는것이 오차를 감안할수 있다.🌱스크롤 감지 이벤트 $(".. 💚04_HTML5 & Javascript & CSS/01_Javascript 2024. 5. 23. #javascript #datalist #select2 #Select2 플러그인(Jquery) #Chosen 플러그인(Jquery) 👊select box를 사용하다보면 너무 많은 데이터로 인해 검색기능이 있으면 좋을때가 있다. 이때 사용하기 좋은 html5 태그를 소개할려고 합니다.Choose a flavor: 🌱DataList(html5 기본 태그)👊datalist태그는 html5에서 기본으로 제공하는 태그로 option태그에 값을 추가하면 input 태그를 검색을 통한 데이터 조회가 가능합니다. dataList area Data ListArea : but!!! 이태그를 통해 사용 하다가 500건 이상 데이터를 적재했을때 이슈사항이 발생했습니다. 바로 500개 이상이 표출이 안되는 내역이 발생했습니다.( 개발자 도구를 통해 보면 노드가 숨겨져 있음 -> 노드 전체 보기를 하면 1000개 까지 모.. 💚04_HTML5 & Javascript & CSS 2024. 5. 23. #var #let #const #변수 #차이점 #ES6 #스코프 #호이스팅 ⚡var var로 선언한 변수는 동일한 이름으로 여러번 중복 선언이 가능하며 마지막에 할당된 값이 변수에 저장된다. 변수를 유연하게 사용할 수 있다는 장점이 될수 있지만 기존 선언된 내역을 망각하여 재 선언을 하여 값이 다르게 출력될수 있는 케이스가 발생할수 있다. var lanType = 'javascript'; console.log(lanType);// javascript var lanType = 'java'; console.log(lanType);// java ------------------------------------------------------------------------------------ var str = "mrbang"; function newFunction() { var t.. 💚04_HTML5 & Javascript & CSS/01_Javascript 2024. 2. 22. #javascript #함수 #filter #find #구분 📚.filter filter함수는 각 배열의 원소에 대한 전달받은 함수 결과가 true인 원소로 배열을 만든다. const words = ['a', 'b', 'c', 'd', 'e', 'f']; const result = words.filter( word => word.indexOf('a') > -1); console.log(result); 📚.find find함수는 배열 원소에 대해 주어진 함수연산중 true반환하면 find함수도 같이 종료 된다. 만족하는 원소가 없다면 undefined가 발생한다. const testNumArr = [1,2,3,4,5]; const findArr = testNumArr.find( Element => Element > 3); console.log(findArr); 💚04_HTML5 & Javascript & CSS/01_Javascript 2023. 11. 16. #window. #window.location #reload #페이지이동 우리가 사용하는 window객체에 대해서 알아보자 📚window는 모든 객체의 전역 객체로 생략이 가능하다. 🧨Reload(새로고침) window.location.reload(); location.reload(); location.href = location.href; history.go(0); 🧨Assign & href(페이지 이동) ⭐ 이전방문기록이 남아 뒤로가기 가능 window.location.assign ("/경로"); location.assign("/경로"); window.location.href = "/경로"; location.href = "/경로"; 🧨Replace(페이지 변경) ⭐ 이전방문기록이 남지 않아 뒤로가기 불가능 window.location.replace ("/경로"); loca.. 💚04_HTML5 & Javascript & CSS/01_Javascript 2023. 11. 7. #SSR #ServerSideRendering #CSR #ClientSideRendering #SSG #Static Site Generation 📚SSR(ServerSideRendering) 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 🧨User가 Website요청 🧨Server는 'Ready to Render'로 즉시 렌터링 가능한 html파일을 만듬 (리소스체크, 컴파일 후 완성된 HTML컨텐츠로 만듬) 🧨클라언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가 -> Javascript가 읽히기 전 🧨 클라이언트가 자바스크립드 다운 🧨다운 받고 있는 사이 유저는 컨텐츠 볼수 있지만 사이트 조작 불가 🧨브라우저가 Javascript 프레임워크를 실행한다. 🧨JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행 및 웹페이지 상호 작용 .. 💚04_HTML5 & Javascript & CSS 2023. 10. 30. 이전 1 2 다음 728x90 반응형
