본문 바로가기

JavaScript

(9)
[JavaScript] 세 가지 변수 Java Script 세 가지 변수 선언법의 차이점에 대해서 총정리 위와 같이 for문에 var 쓰는건 옛날 방식 :( -부제 : 나의 자바스크립트를 한번 var. 네버 let 유 포겟. 라잌 const var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위이다. var 변수는 범위 내에서 업데이트 및 재선언할 수 있다. let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다. const 변수는 업데이트와 재선언 둘 다 불가능하다. 세 가지 모두 최상위로 호이스팅된다. 하지만 var 변수만 undefined(정의되지 않음)으로 초기화되고 let과 const 변수는 초기화되지 않는다. var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야..
[Bootstrap] 반응형 사이트 구축 프레임워크 반응형 모바일 사이트 구축 프레임워크 Bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/BootStrap5 반응형 부트스트랩에서는 12개의 컬럼 구조를 사용할 수 있으며  6개의 화면크기와 관련된 옵션을 제공. 사용 가능한 중단점 Bootstrap에는 반응형 제작을 위해 grid tiers 라고 하는  6개의 Breakpoints가 있음 Breakpoint / Class infix / DimensionsX-SmallNoneSmallsm≥576pxMediummd≥768pxLargelg≥992pxExtra largexl≥1200pxExtra extra largexxl≥1400px
[APEXCHARTS] 차트 그리기 좋은 오픈 소스 라이브러리 APEXCHARTS.JS Modern & Interactive Open-source Charts https://apexcharts.com/차트 그리기 좋은 오픈 소스 라이브러리
[JavaScript] webpack, babel, polyfill, eslint, prettier 웹팩(webpack) : 모듈 번들러. ESM을 지원하지 않는 오래된 브라우저에서도 코드 동작 가능. 바벨(babel) : 입력과 출력이 모두 자바스크립트인 컴파일러. 폴리필(polyfill) : 바벨은 컴파일 타임에 실행. 폴리필은 런타임에 실행됨. eslint : 정적 코드 분석기. 팀의 코딩 컨벤션을 검사하는 용도로 사용. prettier : 코드 포메터. 최소한의 설정만 지원하고 prettier가 자동으로 정해진 코딩 스타일로 변환.
[JavaScript] ESM. 순환참조 // ESM JavaScript 모듈 시스템. 하나의 파일이 하나의 모듈. 모듈 시스템이 있으면 변수와 함수를 다른 모듈에서 사용 가능. ESM은 commonJS와 달리 기본적으로 정적인 모듈 시스템. 컴파일 타입에 어떤 것을 가져오고 내보내는지 결정되야 함. // 모듈 실행 순서와 순환 참조 모듈은 처음에 한 번만 실행. 그 이후 import하는 것은 처음에 실행될 때 내보낸 것을 그대로 가져와서 사용. + ESM에서는 순환 참조를 허용. 순환 참조 활용시 변수 사용 순서 고려하지 않으면 error. 하나의 파일에서 모든 모듈의 import를 담당하도록 설정.
[Ajax] JQuery 비동기 방식 연동, JQuery Plugin JQuery 비동기 방식 연동 Ajax : Asychronouse Javascript and Xml 비동기 방식으로 데이터를 전송하고 요청하는 방식 예를 들면 로그인을 할 때 비밀번호와 아이디를 입력하고 페이지로 이동해 이것이 서버에서 일치하는지 아닌지 확인. 그런데 Ajax를 이용하면 로그인할 때 서버를 거치지 않고도 데이터를 주고 받을 수 있다! $.ajax( ) 형식 JQuery Plugin // 제이쿼리 플러그인 플러그인이란 기능을 구현해 놓은 프로그래밍을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리. 쉽게 말해 다른 개발자들이 제이쿼리로 만들어 놓은 함수라고 볼 수 있음. 웹 문서에 연동시키면 바로 사용 가능. 먼저 제이쿼리 라이브러리 연동을 하고! 그 다음에 플러그인을 연동해야 한다! ex..
[javaScript] slideUp(), text(), on(), "click", function() 오늘 지금 이 시간은 일요일 점심시간입니다. 배고프네요. 정리해볼 내용은 자바스크립트의 기초이자 핵심인 효과 및 애니메이션 메서드입니다. 효과 메서드 : 요소를 역동적으로 숨겼다 보이도록 해주는 메서드가 있고, 선택한 요소에 동작을 적용시킬 수 있습니다. 사용법 $(요소 선택). 효과 메서드(효과 소요 시간, 가속도, 콜백 함수) 애니메이션 사용법 $(요소 선택).animate({애니메이션에 적용할 속성과 값}, 가속도, 콜백 함수); 이런 모양으로 넣으시면 됩니다. 실제 코드를 보시죠! 이 바디를 제가 한 번 다뤄보겠습니다. 클릭되었을 때, css의 디스플레이 속성을 none으로 줍니다. $().on("click", function(){ }); 이게 틀이겠죠? 여기는 클릭되었을 때, 슬라이드 업을 1초..
[javaScript] 이벤트, 핸들러, 효과 및 애니메이션 메소드 이벤트 : 사이트에서 방문자가 취하는 모든 동작. 마우스를 움직인다거나 키보드를 누른다던가 하는 모든 행동을 이벤트라고 칭합니다. 핸들러 : 이벤트가 발생했을 때 호출되는 함수입니다. 클릭을 했을 때 핸들러에 걸리게 만들거나, 키보드에서 엔터를 치면 뭔가 동작되게 만드는 게 이에 해당되겠죠 :) ? 스크립트 코드는 이런 식입니다 $("#btn").click(function(){ //스크립트 코드 }); 실제 코드입니다. 이렇게 코드를 쳐보세요. 재밌습니다. 위 코드의 이벤트는 mouseover와 focus에 대한 것입니다. 이 코드는 마우스오버와 포커스 두 개의 이벤트를 한 번에 해결할 수 있는 코드입니다. 이 코드는 한번 해석해보세요! 뭘까요? 효과 및 애니메이션 메소드에 대한 개념적인 설명 한 번 하..