![]()
모듈(module) 각각의 파일로 분리해서 코딩하는것 이러한 것을 모듈화(modularization)라고 한다. 그중 js 모듈이란? 자바스크립트끼리 파일을 분리해서 사용하는 것 1개의 js가 1000라인 이상이면 가독성이 현저히 떨어지기 때문 import 와 export import(가져오기) 다른 js 파일에서 변수/함수를 가져오기 기능 한개 사용법 import 변수명( 또는 함수명); 여러개 사용법 import {변수명,함수명 ....} from "파일 경로"; export(보내기) 다른 js파일에서 사용할 수 있도록 일부 기능 보내기 한마디로 export된 변수/함수만 import할수 있음 한개 내보내기 사용법 export default 변수명 (또는 함수명); 여러개 내보내기 사용법 export..
옵셔널 눌리쉬(optional nullish) 객체나 함수에 대해 접근할 때 사용한다. why? 자바스크립트 / 자바언어의 문제점 소스에서 값이 null이 나오면 프로그램이 비정상 종료가 된다 => 서비스가 갑자기 다운 (예 : 카카오톡이 서비스 다운) 따라서 null(강제종료)이 아닌 undefined값(계속 실행은 됨) 으로 변경해주어야 함 코딩 null에러를 회피해서 코딩을 전통적으로 했음 예) let num = null; if(num == null) { "이 기능은 실행하지 않습니다" } 사용법 변수명?.속성명 undefined 예제 1) let user = null; // user객체 출력 : `user는 ${user?.address}` // 객체 address 속성이 있는지 없는지 체크 nul..
함수 선언식 function sum (a,b) { return a + b } 함수 표현식 let sum = function(a,b) { return a + b } 화살표 함수 변경 let sum = (a,b) => ( a + b ) === 전부 같은 문장 2줄이상 함수 함수 선언식 function mySum(a,b) { let result = a + b; return result } 함수 표현식 let mySum(a,b) { let result = a + b; return result } 화살표 함수 let mySum = (a,b) => { let result = a + b; return result; }
![]()
Class 현재 React에서는 사용을 권장하지 않음 따라서 중요하지는.. 않음.. class 클래스이름 {} 자바와 비슷(?)함 Class 의 정의 Class 의 사용 let 변수명 = new 생성자함수(값);
![]()
객체 객체의 정의 객체명 = {속성(Attribute)} 객체의 속성 추가 객체명.속성명 = "값"; 객체의 수정(update) 객체명.속성명 = "값" 객체의 속성 삭제(delete) delete 객체명.속성명 객체의 undefined undefined = 정의되어 있지 않음 객체 배열 배열 안에 객체가 들어가 있는 형태 예시)
![]()
노드란? js(JavaScript)를 웹브라우저 없이 실행하게 만들어주는 프로그램 백엔드 , 프론트엔드 모두 개발할수 있게 되었다. 장점 : 비동기 기반(성능이 빠름) 노드 설치 터미널에서 node -v를 쳐서 node 설치 버전 확인 노드 설치 완료!!
요소 탐색 메서드 .children() 자식 자식을 찾는 선택 메서드 .parent() 부모 부모를 찾는 선택 메서드 .siblings() 형제 , 자매 형제 또는 자매 선택 메서드 .find() 찾기 .next() 다음 다음 선택 메서드 .prev() 이전 이전 선택 메서드
jQuery jQuery는 함수를 이용해서 DOM(document)를 조작하며 라이브러리(함수들의 모임)이다. cdn이 필요 배경 옛날 웹브라우저(익스플러워 , 크롬 , 사파리 등)간의 js(javascript)문법이 잘 동작을 하지 않았다. 따라서 여러 함수를 모아 만든 jQuery를 많이 사용했다. 현재는 바닐라 js가 진보를 많이 해서 좋다. 장점 바닐라 js보다 코딩이 짧고 사용이 쉽다 단점 용량이 크고 , js에 비해 성능이 떨어진다. $(function() {jQuery실행문}) => html 태그보다 뒤늦게 실행을 시켜주는 구문 기본 구문 $(function() { jquery 실행문 $("css선택자").함수("속성명","값") } 같은 선택자 여러 함수 $(function() { jque..
window window 함수 중 window.open("url","새창의 이름","창의 크기") url : url 주소 새창의 이름 : 아무거나 가능 창의 크기 : width=값 height=값; window.close() window.open의 창을 닫는다. Location location.href = "url주소" location.replace("url주소") href 와 replace 차이점 location.href는 이력(history)를 남기면서 이동 / 따라서 뒤로가기 가능 location.replace는 이력(history)를 남기지 않으면서 이동 / 따라서 뒤로가기 불가능
![]()
screen(화면) 크게 screen , browser , webPage로 나뉜다. screen screen.width 와 screen.height 화면(컴퓨터)의 가로와 세로길이를 알려주는 함수 bowser window.innerWidth 와 window.innerHeight 브라우저의 가로와 세로 길이를 알려주는 함수 webPage document.documentElement.scrollWidth 와 document.documentElement.scrollHeight 웹 페이지의 가로와 세로길이를 알려주는 함수 셋 다 return값이 숫자이다
addListener() 함수 현재 방식 사용법 변수명 = document.querySelector("선택자") 변수명.addListener("event",function(){실행문;}); 옛날방식 이벤트들 onchange : HTML요소가 변경되었 을때 onclick : HTML 요소가 클릭되었을때 onmouseover : HTML요소의 위에 사용자가 커서를 올릴때 onmouseout : HTML요소의 위에 사용자가 커서를 치울때 onkeydown : 사용자가 키보드를 눌렀을때 onload : 브라우저가 로딩을 끝마쳤을때 등 event의 중요 속성 중 하나 = target event.target = 호출한 태그가 선택됨
querySelector() DOM(html태그)에 접근하는 함수 하나의 태그에 접근하는 함수 querySelectorAll() DOM(html태그)에 접근하는 함수 여러개의 태그에 접근하는 함수 예시 1) 변수에 저장 => let elements = document.querySelectorAll("ul li")
