rockettttman

✅ 방법 1: navigator.userAgent 사용function getOS() { const userAgent = window.navigator.userAgent; if (userAgent.includes("Windows NT")) { return "Windows"; } else if (userAgent.includes("Mac OS X")) { return "Mac"; } else if (userAgent.includes("Linux")) { return "Linux"; } else { return "Unknown"; }}console.log(getOS());✅ 방법 2: navigator.platform 사용 (더 간단)function getOS() { cons..

✅ 1. 최신 방식 (권장) — navigator.clipboard.writeText()function copyToClipboard(text) { navigator.clipboard.writeText(text) .then(() => { console.log('클립보드에 복사되었습니다!'); }) .catch(err => { console.error('복사 실패:', err); });} ✅ 2. 레거시 방식 — document.execCommand('copy') (구형 브라우저 호환)function legacyCopyToClipboard(text) { const textarea = document.createElement('textarea'); textarea...

자바스크립트에서 객체를 상속하기 위하여 프로토타입이라는 방식을 사용하고 모든 객체는 자신의 부모(역할) 객체와 연결되어 있는데 이 부모 객체를 프로토타입(객체) 라고 한다. var foo = { name: 'foo', age: 30 } console.log(foo.toString()); //[object Object] foo 객체의 프로토타입에 toString() 메서드가 정의되어 있음. 크롬 브라우저에서는 __proto__프로퍼티 형태로 구현되어 있다. 프로토타입 수정하기 아래와 같이 프로토타입에 메소드를 추가하면 해당 생성자로 생성된 모든 객체에서 사용 가능하다. function Person(first, last, age, gender, interests) { this.first = first; th..

구조화 구조화란 인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는 것을 말한다. 비구조화 구조화된 데이터는 데이터의 일부만 사용해야 할 때가 있는데 아래와 같이 구조화된 데이터를 분해하는 것을 비구조화라고 한다. 잔여 연산자/ 전개 연산자 ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 ...연산자를 제공하는데 사용하는 위치에 따라 잔여 연산자 혹은 전개 연사자라고 부른다.

Mock mock(object)이란 실제의 데이터를 흉내낸 모조품 이라고 생각하면 된다. 우리는 이 Mock을 가지고 프로젝트 개발과 테스트를 더욱 더 원활하게 진행할 수 있다. Mock을 사용하는 이유 먼저 가장 이상적인 프로젝트 과정으론 기획 -> 백엔드 개발 -> 프론트 개발 이 순차적으로 완벽하게 수행되는게 가장 이상적이고 이대로 진행만 된다면 mocking을 할 필요도 없을 것이다. 하지만 프로젝트 투입 시 백엔드, 프론트 개발자들이 동시에 투입되고 프론트 개발자들은 레이아웃을 다 그리고 api연동을 하면서 몇몇 api들은 개발되기를 기다리는 적이 있을 것이다. 또한 이미 개발 완료되어 연동한 api 조차도 빈번히 수정이 일어나게 되는데 mock이 없다면 프론트엔드 개발자들은 언제 api가 완료..

보통 프로젝트를 하면 null,undefined, "", 0 등을 체크할 때 새로운 공통 유틸 함수를 만들어서 체크하는데 아래 문법을 잘 알고 있으면 object의 value값을 빈값 체크 시에도 runtime error 없이 체크할 수 있다. 1. && and함수 console.log(undefined && 'ㅁㅁㅁ') => undefined console.log(null && 'ㅁㅁㅁ') => null console.log(0 && 'ㅁㅁㅁ') => 0 console.log("" && 'ㅁㅁㅁ') => "" console.log(false && 'ㅁㅁㅁ') => false console.log(true && 'ㅁㅁㅁ') console.log('aaa' && 'ㅁㅁㅁ') => 'ㅁㅁㅁ' 2. || or..

아래 코드와 같이 한 리스트 안의 데이터를 map으로 loop 돌면서 각 item의 데이터를 가지고 박스번호를 가지고오는 api를 호출하였다. 잘 될것이라고 예상하였으나 async/await을 사용하였음에도 불구하고 기다리지않고 바로 다음 loop를 수행하는 바람에 _inRow라는 데이터에 boxNo가 undefined로 찍히는 현상이 발생하였다. breakpoint를 찍어보면서 디버깅 해보니 await문을 기다리지 않고 map을 빠져나가는 바람에 boxNo에 그렇게 찍힌것으로 확인되어 구글링을 해보았다. body.map(async (item) => { ------생략------- } else if (msg == '박스 분할') { //2개담기 const res = await OrderReleaseSer..

함수 선언식 - Function Declarations function test() { return 'function declarations' } test(); 함수 표현식 - Function Expressions var test = function () { return 'function expressions'; } test(); 두 방식의 차이점 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. console.log(test()) //@@@@ 정상 출력 console.log(test2()) // undefined 뜨고 TypeError 발생(TypeError: test2 is not a function) function test() { console.log('@@@..

보호되어 있는 글입니다.

개발 소스 중 qeurySelector와 qeurySelectAll이라는 함수가 있길래 궁금해서 검색해보니 getElementById, getElementsByClassName 과 같이 DOM 을 다루는 함수라는 공통점이 있었다. 하지만 꽤 여러가지의 차이점이 있었는데 아래와 같은 차이점이 있었다. getElementById querySelector id를 가져옴 class / id 모두 적용 가능하며 class를 사용하여 다수의 element를 가져올 시 가장 상단의 element 하나만 return함 속도가 빠름 속도가 느림 공통적으로 HTML element를 return함 getElementsByClassName querySelectorAll HTMLCollection을 리턴 NodeList를 리턴..