김평범's OrdinaryCode

객체가 빈 객체 상태를 체크할 경우가 있다. let emptyObject = {}; 위에처럼 빈 객체를 만들었다면, 이제 해당 객체가 빈객체인지 확인해보는 방법이다. Object.keys(newObject).length === 0 ⭐Object.keys란? Object.keys() 메소드는 해당 객체가의 속성을 배열 형태로 반환해줍니다. 결국 반환된 배열의 length가 0일 경우 해당 객체가 비었다고 판단할 수 있다. Object.keys() 샘플코드 위 코드를 실행했을 때 결과 화면이다.

javascript 데이터 형태 중에서 객체 배열 형태를 많이 이용하다 보니 해당 Array에서 특정 값을 갖고 있는 객체를 찾아야 되는 업무가 많았다. 오늘은 javascript의 필터 기능을 이용해서 특정 key에 특정 value를 가진 객체를 찾아내 보도록 하겠다. 🤔Array.filter란? Array filter를 이용하면 해당 조건에 만족하는 요소를 모두 찾아서 반환시켜준다. 예시 코드 위의 코드를 보자. 1~5까지 숫자를 가진 배열에서 3보다 큰 수를 찾으라고 하면 4,5라는 새로운 배열을 만들어서 return 해준다. filter기능을 이용하면 이처럼 배열에서 내가 원하는 조건을 가진 요소를 가지고 새로운 배열을 만들 수 있다. 🍒객체 배열 내에서 특정 value 값을 가지는 객체 반환하기..

input에서 사용자는 수정을 못하게 하려면 readonly라는 옵션을 이용하면 된다. 최근 프로젝트에서 input check box도 readonly를 시키려고 아래 코드를 넣었으나, 동작하지 않았다. 📌input type checkbox readonly 오류 코드 readonly="true"로 변경을 해봤지만 그 부분도 적용이 안되고, disable="true"는 작동이 되고 뭐일까 하고 찾아봤다. 🍒input type checkbox readonly 성공 코드 확인해보니, checkbox의 readonly는 먹지 않아서 위처럼 onClick 이벤트에서 return false를 걸어주면 된다고 한다. 실제로 적용해보니 잘 작동한다.

javascript 내에서 배열을 조작해야 되는 것 중 내가 원하는 값을 지우고 싶을 때가 있다. 이때 이용하는 것이 바로 splice() ✂ Array.splice() 배열 뒤 splice를 이용하면 기존 요소를 삭제하거나 교체하는 것이 가능하다. array.splice(시작 index, 제거 index, 추가 요소) 시작 index 배열 변경을 시작할 index 번호를 입력한다. 제거 index 0을 입력하면 어떤 요소도 제거되지 않으며, 특정수를 입력하면 start 이후부터 해당 수만큼 요소가 제거된다. 추가 요소 배열에 새로 추가될 요소가 들어간다. 만약 입력이 없다면 제거만 되고 새로운 요소는 추가되지 않는다. 샘플 코드 let obj = [ {id:1, name:'apple'}, {id:2, ..

자바스크립트에서 default 객체를 선언하는 방법은 아래와 같다. const obj = {}; 이후 로직에서 obj 객체에 key,value가 세팅이 되었는지 아닌지 체크하는 방법이 필요해서 찾아보게되었다. 🧡Object.keys 이용하기 Object.keys()를 이용하면 주어진 객체의 key 이름을 배열로 반환한다. Object.keys(obj) //빈객체일 경우 [], key가 있는경우 [id,name] 해당 기능을 이용해서 if문처리가 가능하다. 예시코드 let obj = {} obj ={ id:1, name:one } if(Object.keys(obj).length !== 0) { alert("빈객체아님!") } 위 예시로 빈객체인지 아닌지 확인이 가능하다! ✅사용시 주의사항 만약 obj객체에..

프로젝트를 진행하다 보면 이미지를 업로드해서 프로필 사진을 적용한다던지 하는 기능을 만들 경우가 있다. 오늘은 input 으로 받은 이미지를 밸리데이션으로 체크하는 샘플 코드를 작성해보았다. ⚠️이미지 업로드 시 주의 사항 동일한 파일이 업로드 되었을 때 어떤 식으로 처리할 것인지 파일 용량이 큰 파일 업로드를 허용할지 아닐지 이미지 업로드 시 확장자는 어디까지 받을 것인지 이러한 부분을 고려를 해서 개발을 해야 한다. ✨이미지 파일 업로드받기 이미지 파일을 업로드받으려면 input type을 file로 변경하면 윈도 파일 브라우저가 뜨는 input 박스가 생성된다. input accept 처리하기 만약 파일 처리에서 accept 속성을 넣으면 여기서 적용시킨 형태의 파일만 파일 브라우저에서 뜨게 된다...

🙋‍♀️JavaScript alert 이용하기 자바스크립트에서 알람을 발생하는 것 중에 가장 많이 사용하는 것이 바로 alert이다. alert으로 알람을 발생시키면 해당 웹에 들어가면 바로 알람을 확인할 수 있다. 하지만 alert의 문제의 경우는 해당 탭에 포커싱이 되어있을 때는 잘 볼 수 있지만 해당 탭에 포커싱이 안되어있을 경우 해당 알람창이 뜨는지를 알 수가 없다. 🤔HTML5 Web Notification API HTML에서는 웹페이지에서 알람을 표시하면 페이지 외부에서 표시가 되는 Notification API를 제공한다. 해당 웹페이지가 백그라운드로 돌고 있어도 내가 쓰는기기에서 알람을 볼 수 있는 기능이다. 📝Web Notification 사용 조건 해당 기능을 이용하려면 하지만 조건이 ..

Vue $router.push 오류가 나서 수정 방법을 찾다가 못 찾아서 일단은 Javascript로 Redirect 하는 소스로 변경해놨는데 오늘은 Javascript redirect와 Vue 에서 redirect를 하는 방법 정리하기로! 🧐Vue.js에서 page redirect 하는 방법 this.$router.push('/') Vue.js 에서 page를 이동하는 방법은 this.$router.push('경로')를 이용한다. 문제는 해당코드가 모바일에서 해당 코드가 작동하지 않는 이슈가 발생했다. 이것저것 코드를 바꾸다가 못 찾아서 :( 일단 Javascript 코드로 변경하기로 했다. 🐳Javascript에서 Page redirect 하는 방법 window.location.href = `${wi..

✔️자바스크립트의 세미콜론(;) 자바스크립트에서는 세미콜론을 찍어주는 이유는 내가 쓰는 구문이 종료가 되었다 라는 의미이다. 프로그래밍 문법에 맞게 작성한 코드를 적고 해당 코드가 완료되면 그 뒤에 종료가 되었다는 의미로 세미콜론을 찍어준다. let a = 1; console.log(a); 하지만, 개발을 하다 보면 세미콜론을 정확히 찍을 때도 있지만, 개발을 하다보면 세미콜론을 까먹고 안 찍는 경우도 있다. 하지만 보통 세미콜론을 안찍어도 오류가 난적이 없다! 그런데도 꼭 세미콜론을 찍어야하는건가? 하지만 오류가 안나는 이유는 바로 ASI 때문이다! 🎇ASI(Automatic Semicolon Inserion, 자동 세미콜론 삽입) ASI는 자바스크립트 엔진에서 자동으로 ASI를 찍어주는 기능이 있기 ..

🤔Math 객체란? Math객체는 자바스크립트에 내장되어 있는 객체이다. 주로 숫자를 다루는 수학에 관련된 함수들이 들어가 있다. 그중 오늘은 내가 자주 사용하는 Math.random()에 대해 공부하겠다. 📈Math Random 함수를 사용할 때 대시보드나 그래프를 그려줄 때 가끔 데모 사이트를 만들 때 랜덤 값들이 필요한 경우가 있다. 이럴 때 나는 주로 Math.random()을 이용해서 특정 범위의 랜덤 값을 만들어서 연동한다. 📕Math Random 이용하기 실행화면 실행을 해보면 알겠지만 0 이상 1 미만이 난수를 발생해준다. 1️⃣최소 최대값 사이의 난수 생성하기 0,1 사이 난수가 아니라 가끔은 내가 원하는 정수의 난수가 필요할 때도 있다. 이때는 min과 max 값을 설정해서 아래와 같이..