devOhzl

JSDoc란?JSDoc은 JavaScript 코드에 주석을 추가하여 함수, 클래스, 객체 등에 대한 문서를 자동으로 생성할 수 있도록 돕는 툴입니다. 이를 통해 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다. JSDoc은 개발자들이 코드의 의도를 명확히 전달하고, 다른 팀원들이 쉽게 이해할 수 있도록 지원합니다. 👉 JSDoc은 단순한 주석 시스템을 넘어 코드의 품질과 유지보수성을 향상시키는 강력한 도구입니다. 👉  팀 개발 환경에서 JSDoc을 활용하면 코드의 가독성을 높이고, 협업 효율을 극대화할 수 있습니다. JSDoc의 주요 특징자동 문서 생성JSDoc 주석을 작성한 코드를 기반으로 HTML 형식의 문서를 생성할 수 있습니다.이 문서는 함수나 객체의 동작 방식을 직관적으로 보여줍..

문자를 검색(Search)하거나 대체(Replace)하거나 추출(Extract)하는 용도로 쓸 수 있는 패턴 정규표현식 생성1️⃣ 생성자new RegExp('표현', '옵션')new RegExp('[a-z]', 'gi')2️⃣ 리터럴 표현/옵션/[a-z]/gi슬래쉬 사이에 '표현'이 들어가며 뒤에는 정규식 옵션이 붙는다생성자를 통해 RegExp 객체를 생성할 수도 있지만, 보통은 리터럴 문법을 자주 사용한다.정규표현식 플래그g global , 전 구역을 복수로 검사 iignore , 대소문자 구분 Xmmultiline , 다중행 검사const str = ` 010-1234-5678 themail@gmail.com https://www.test.com/?apikey=23423423 The quick..

Location - 현재 브라우저에 표시된 HTML 문서의 URL 또는 관련 정보 (URL의 프로토콜, 호스트, 포토번호 등의 정보)를 반환하거나 제어한다.- window 객체의 일부이고 window.location 속성을 통해 접근할 수 있다.(window는 생략 가능)  📌 속성 .href 전체 URL 주소 .protocol프로토콜 정보 (http/https) .hostname 도메인 이름 .pathname 도메인 이후 하위 경로 .host  포트 번호를 포함하는 도메인 이름 .port 포트 번호 - http이면 80포트 생략 가능. 프로토콜이 https이면 443포트는 생략 가능  .hash  해시 정보 ( 페이지의 ID )  📌 함수 .assign(주소)  해당 주소로 페이..

동기(Synchronous) & 비동기(Asynchronous)📌 동기(Synchronous) : 각 함수와 코드들이 위에서 아래로 차례로 동작자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다린다.즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연되게 된다. 📌 비동기(Synchrono..

DataTable의 한 행에서 값들을 입력하여 추가하거나 수정하여 저장하는 기능을 개발했다. 저장을 하기 전에 필수로 입력해야하는 값이 있다면 입력 여부를 확인해야한다. 필수로 검사 할 객체의 키를 배열로 받아, 해당 키들이 모두 값이 있는지 확인할 수 있는 공통 함수를 작성했다.처음에 작성했던 로직export const isValidNull = (keys, list) => { if (!keys) return false; return list.some((item) => { let isNull = false; keys.some((key) => { if (item[key] !== null && typeof item[key] === "object") { ..

객체📌 Object.assign()하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환한다.const target = { a: 1, b:2 }const source1 = { b: 3, c: 4 }const source2 = { c: 5, d:6 }const result = Object.assign(target, source1, source2)console.log(target) // { a: 1, b: 3, c: 5, d: 6 }console.log(result) // { a: 1, b: 3, c: 5, d: 6 } Target 객체를 수정하지 않고 새로운 객체로 변환하려면, Target 객체에 빈 객체 { } 를 넣어주면된다.target,source1,..

📌 .length 배열의 길이(숫자)를 반환한다. const arr = ['A', 'B', 'C'] console.log(arr.length)// 3 📌 .at 대상 배열을 인덱싱한다. 음수 값을 사용하면 뒤에서부터 인덱싱한다. 쉽게 마지막 값을 가져올 수 있다. const arr = ['A','B','C'] console.log(arr[0]) // A console.log(arr.at(0)) // A console.log(arr[arr.length - 1]) // C console.log(arr.at(-1)) // C 📌 .concat 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환한다. 전개 연산자를 사용해도 가능하다. const arr1 = ['A','B','C'] const arr2 = ['..

숫자 📌 .toFixed() 숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자로 반환한다. 숫자로 활용하기 위해서는 숫자로 변환해야한다. (ex. parseFloat) const num = 3.1415926535 console.log( num.toFixed(2) )// '3.14' console.log( parseFloat(num.toFixed(2)) )// 3.14 📌 .toLocaleString() 숫자를 현지 언어 형식의 문자로 반환한다. 👉 숫자에 쉼표 붙이는 작업할 때 많이 사용 const num = 1000000 console.log( num.toLocaleString() )// '1,000,000' console.log( `${num.toLocaleString()}원` )// '1,..

📌 .includes() 대상 문자에 주어진 문자가 포함되어 있는지(불린) 확인한다. 대소문자를 구분한다. const str = "Hello world!" console.log(str.includes('Hello'))// true 두번째 매개변수에 숫자로 몇 번째 인덱스 번호부터 문자가 들어있는지 확인한다. const str = "Hello world!" console.log(str.includes('Hello',1))// false 📌 .indexOf() 대상 문자에 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환한다. 일치하는 문자가 없으면 '-1'을 반환한다. const str = "Hello world!" console.log( str.indexOf('world'))// 6 console.l..

자바스크립트는 정확하게 클래스 기반 언어는 아니고 프로토타입 기반 언어이다. 하지만 개념과는 상관없이 클래스 방식을 사용할 수 있다. 프로토타입 ( prototype ) new 키워드를 통해서 만드는 생성자 함수에서 반환된 결과, 즉 인스턴스에서 쓸 수 있는 별도의 속성이나 혹은 메소드를 등록하는 객체 const fruits = new Array('Apple', 'Banana', 'Cherry') Array.prototype.test = function() { console.log(this) } fruits.test() 1️⃣ 중괄호 기호를 사용한 리터럴 방식으로 객체 데이터 생성 const test = { firstName: 'Aeri', lastName: 'Kim', getFullName() { re..