배열 구조분해 할당 가독성을 증가 시키기 위해 사용 일반코딩 let array = [1,2] 그러면 인덱스 넘버로 array[0] = 1 array[1] = 2 로 썼을 것이다 구조분해 할당 let array = [1,2] let [firstNum , secondNum] = array; firstNum = 1 secondNum = 2 가 된다.
JavaScript
formData 파일 업로드 할 때 일부 사용한다 특징 : 페이지 이동시 데이터를 전송할 수 있습니다. 예시 1) (1) HTML form 태그에서 데이터 가져오기 let sign = document.querySelector("태그") let form = new FormData(sign) (2) form 태그 데이터 가져오기 formData.get("name태그값")
호이스팅이란? 함수의 위치를 강제로 위로 이동시키는 것 대상 1) 함수 선언식 함수 2) 변수 함수 호이스팅 함수 선언식 = function sample() {실행문} = 호이스팅이 일어난다!! 다른 함수표현식 , 화살표함수는 호이스팅이 없다. 변수 호이스팅 var
프론트엔드(react) 통신(axios) 백엔드(springboot) 통신 데이터 전송 시 한글이 인식이 안될 경우가 있다 인코딩 / 디코딩 인코딩 데이터 전송시 인식 안되는 문자들을 일시적으로 브라우저에서 인식 할 수 있는 문자로 바꿈 사용법 encodeURIComponent("문자열") 디코딩 인코딩한것을 다시 한글등으로 바꿈 사용법 decodeURIComponent(인코딩 변수);
모듈(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 설치 버전 확인 노드 설치 완료!!
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값이 숫자이다
