Programing Language/Javascript9 [Javascript] console.log() JSON pretty print const obj = { "name" : "홍길동", "age": 30, "hobby": "등산" }; console.log(JSON.stringify(obj, null, 2)); 결과 { "name": "홍길동", "age": 30, "hobby": "등산" } 2023. 6. 12. [Javascript] getElementById vs querySelector 비교 결론부터 말씀드리면 getElementById가 조금 더 빠르기 때문에 id가 있는 Element를 찾는 경우에는 getElementById를 사용하고 보다 정교하게 Element를 찾는 작업이 들어가면 querySelector를 사용하는게 좋습니다. 1. getElementById 주어진 ID 문자열과 일치하는 속성을 가진 Element를 찾아 반환합니다. 결과가 없다면 null document.getElementById(id); 2. querySelector 제공한 선택자 또는 선택자 그룹과 일치하는 문서 내 첫번째 Element를 반환합니다. 결과가 없다면 null 백슬래시("\")를 사용해 특수문자를 이스케이프 해야합니다. document.querySelector(selectors); 예제 See.. 2023. 4. 7. [Javascript] 현재 화면 높이 구하기 get document body height 1. 높이 요소 중 최대값 구하기 const body = document.body; const html = document.documentElement; const height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); console.log(height); 참조 [stakoverflow]: https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript How to get height of entire .. 2023. 4. 3. [Javascript] 문자열 자르기 (slice, substr, substring) 1. slice 첫번째 인자 시작인덱스 ( 숫자, 필수 ) 문자열의 시작인덱스부터 문자열의 마지막 문자까지 자른 결과값을 반환한다. ( 0: 첫문자부터, -1: 뒷문자부터 ) let str = '안녕하세요.' console.log(str.slice(2)) // 결과: "하세요." console.log(str.slice(-1)) // 결과: "." 두번째 인자 종료인덱스 ( 숫자, 옵션 ) 문자열의 시작인덱스부터 시작해서 종료인덱스까지 자른 결과값을 반환한다. ( 0: 첫문자부터, -1: 뒷문자부터 ) const str = '안녕하세요 개발자입니다.'; console.log(str.slice(6, 19)); // 결과: "개발자입니다." console.log(str.slice(-7, -5)); // 결과:.. 2023. 3. 22. [Javascript] fetch 파일 업로드 예제 HTML 업로드 Javascript fetch로 FormData를 활용해서 파일업로드를 진행할 시 header를 비우고 보내야 됩니다. header를 비우는 이유 참조 [MDN]: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Disposition Content-Disposition - HTTP | MDN multipart/form-data 본문에서의 Content-Disposition 일반 헤더는 multipart의 하위파트에서 활용될 수 있는데, 이 때 이 헤더는 multipart 본문 내의 필드에 대한 정보를 제공합니다. multipart의 하위파트는 Content developer.mozilla.org 2023. 2. 21. [Javascript] A form label must be associated with a control. 원인 label과 관련 control이 구성되도록 하는 룰. 해결 방법 label 태그 안에 control 주체를 넣는 것. label에 for(htmlFor) 입력 control 주체에 id를 입력. 관련 설정 파일 수정. eslintrc.json { // ... "rules" : { // ... "jsx-a11y/label-has-associated-control": [ 2, { "labelAttributes" : ["htmlFor"] } ] } } 참조 [stack overflow]: https://stackoverflow.com/questions/54446655/eslint-rule-for-label EsLint rule for label i have a problem My esLint rules.. 2022. 11. 1. [Javascript] 소수점 계산시 오류 예시 자바스크립트로 소수점 계산시 결과가 예상과 다르게 나올 때가 있다. 이것은 자바스크립트 부동 소수점 곱셈 정밀도의 오류 때문입니다. let a = 0.1; let b = 0.2; console.log(a+b); // 0.30000000000000004 let c = 0.2; console.log(c*12); // 2.4000000000000004 해결방안 console.log((a + b).toFixed(2)) // 0.30 console.log(Math.round((a + b) * 1000) / 1000); - [stack overflow]: https://stackoverflow.com/questions/10473994/javascript-adding-decimal-numbers-issue Ja.. 2022. 10. 31. [Javascript] Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. Javascript에서 fetch를 사용중 나온 에러 정리 fetch 개념 fetch는 Javascript에서 사용하는 API를 호출할 때 사용한다. 첫번째 인자는 RequestInfo 또는 URL을 입력, 두번째 인자로는 RequestInit(headers,method, body 등)을 넣게 되어있다. TypeError가 나오는 경우 RequestInit에 method를 GET으로 한 경우. 이때 method를 POST 또는 PUT 등 Request Body를 사용하는 내용으로 수정하면 된다. method를 GET으로 호출하는데 RequestInit에 body를 넣은 경우. 필자에 경우 API 호출 하는 유틸을 설계중 GET으로 호출할 때로 RequestInit에 body를 넣어 나오는 에러였다. 참조.. 2022. 10. 18. [Javascript] 알면 좋은 용어 정리 표현 한글 영문 ... 전개 구문 Spread syntax let arr = [1,2,3] console.log([...arr, 4]) // 결과: 1,2,3,4 표현 한글 영문 {} 객체 초기자 Object initializer var user = {} 표현 한글 영문 () ? true : false 삼항 연산자 Conditional (ternary) operator 참조 - 전개 구문 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax Spread syntax (...) - JavaScript | MDN Spread syntax (...) allows an iterable such as a.. 2022. 7. 5. 이전 1 다음
