김평범's OrdinaryCode

javascript를 작성하다 보면 JSON과 javascript에서 Object가 매우 흡사한 형태를 가지고 있다는 사실을 알 수 있다. 형태가 비슷하기 때문에 똑같아고 생각하는 분들도 있을 테지만 엄연하게 두개는 다르다. 그럼 오늘은 JSON과 javascript의 Object의 차이를 알아보겠다. 📄JSON이란? JSON은 Javascript Object Notation의 약자로 서버와 데이터를 교환할 때 사용하는 Data 형태이다. JSON은 단순히 데이터를 표시하는 포맷일 뿐이고 프로그래밍 문법은 아니다. JSON은 서버와 클라이언트 데이터를 주고받을 때 현재 많이 사용되는 데이터 표시방식이며, 자바스크립트의 Object와 굉장히 비슷하게 작성이 되지만 이는 단순한 텍스트일 뿐이다. JSON형태..

IOS 크롬 에러 발생 (PC는 정상 작동할 때) 전에 블로그 포스팅 중 천의 자리 콤마를 찍는 자바스크립트 정규식을 공유했었다. https://ordinary-code.tistory.com/128 [nuxt/vue filter] 숫자 3자리(천자리) 마다 콤마 찍으면서 소수점 처리하기 자바스크립트에서 천 자리마다 콤마를 찍어줘야 하는 경우가 많다. 숫자에다가 천 자리마다 콤마를 찍기 위해서는 정규식을 이용해야 한다. Vue에서는 Filter를 이용해서 숫자 3 자리 마자 콤마를 ordinary-code.tistory.com 최근에 서비스 배포 후 모바일에서 페이지가 정상적으로 작동하지 않는다는 내용이 접수되어 처음에 vue router 문제인지, 아니면 redirect문제인지 여러 방면으로 삽질을 했었..

ES6에서 등장한 자바스크립트 비구조화 할당이 추가되었다. 오늘은 배열과 객체에서 중복을 없애주고 좀 더 간편하게 값을 이용할 수 있는 비구조화할당에 대해서 알아보겠다. 🔗비구조화 할당이란? 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 명칭 합니다. 기본 문법 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다. 배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다. 아래처럼 선언하면 결과는 동일하게 나오게 된다. let [x,y] = [1,2]; console.log(x); console.log(y); let {x,y} = {x: 1, y:2}; console.log(x); ..

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면 전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다. 크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만, 인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다. 이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다. 🌵버튼으로 크롬 전체 화면 만들어주기 샘플 코드 전체 화면 켜기 전체 화면 끄기 vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤 버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다. 해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다. 만약 전체 화면 상태이면 ..

개발하다 보면 별생각 없이 개발을 하지만 가끔 npm이 꼬이거나 할 때 cmd 창으로 npm, node 버전을 확인할 때가 있다. node 버전 확인하는 방법 해당 명령어는 node 설치 후 사용할 수 있는 명령어로 node -v시 node를 못 찾는다는 식으로 에러 메시지가 나오면 먼저 노드를 설치해야 된다. node -v npm 버전 확인하기 npm 버전도 동일한 방법으로 확인할 수 있다. node를 설치하면 npm은 같이 설치가 돼서, 별도로 추가 설치할 필요가 없다. npm -v 설치된 npm 리스트 확인하기 프로젝트 내 설치된 npm 리스트를 확인하는 것도 가능하다. 해당 명령어로는 프로젝트에 설치된 모든 npm 리스트와 버전을 확인할 수 있다. npm ls 특정 npm 버전 확인하기 npm l..

홈페이지의 특정 페이지를 카카오톡으로 공유할 일이 있을 경우 URL을 직접 복사해서 쓰는 것 외에 공유 기능을 개발이 가능하다. 해당 기능은 카카오 Developers를 가입하고, 내 사이트 URL을 등록한 뒤 사용이 가능하다. 카카오 디벨로퍼 사이트 : developers.kakao.com/ 🎱카카오톡 내 애플리케이션 등록하고 앱 키 발급받기 카카오 Developer에서 내 애플리케이션을 누른 뒤 내 애플리케이션을 만들어준다. 애플리케이션을 추가해줘야 내 사이트를 인증받을 수 있는 앱 키를 발급받을 수 있다. 기존 카카오 디벨로퍼 다른서비로 앱 키가 있다고 하면 기존 애플리케이션 앱 키를 이용해도 상관없다. 🔗VUE 카카오톡 URL 공유 버튼 만들기 코드 Vue에서 카카오톡 URL공유 버튼을 연결한 코..

이벤트 페이지 혹은 사용자가 공유를 하기 위해서는 해당 주소를 복사해야 되는 경우가 있다. 주소창은 전체 선택해서 복사를 하는 것도 가능하나, 모바일 화면상에서는 직접 주소창을 복사하는 것도 귀찮기도 해서 요즘은 링크 복사 가능한 버튼을 만들어서 제공한다. 🧐JAVASCRIPT 링크 복사 예시 코드 HTML 복사하기 Javascript copyUrl () { //url 넣을 input 생성 const urlInput = document.getElementById("urlInput"); //현재 URL 가져오기 urlInput.value = window.document.location.href; //clipboard 복사 urlInput.select(); document.execCommand("copy")..

동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다. 이러한 개념에서 Javascript 이벤트 객체에 대해서 관심을 가질 필요가 있다. 🎉 JavaScirpt 이벤트란? DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다. DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다. 포커스 이벤트(focus, blur) 폼 이벤트(reset, submit) 뷰 이벤트(scroll, resize) 키보드 이벤트(keydown, keyup) 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave) 드래그 앤 드롭 이벤트 (dragstart, drag, ..

😮 들어가기 전 개발 N연차 동안 메인 언어를 자바스크립트를 사용하고 있다. 개발자 주니어 시절에는 내가 쓰는 코드가 올바른지 맞는지 모르고 일단 되게 하는데에 급급했다. 3년 차를 넘어가면서 주니어 시절 짠 내 코드를 유지보수 하기 시작하면서 중복제거의 중요성을 뼈저리게 느끼기 시작했다. (사용자들은 이렇게 만들어달라고 했다가 사용 후 이게 생각보다 불편해니 바꿔달라는 경우가 매우 많았다.) 내가 작성한 돌아가기만 하는 코드는 사용자의 요구사항으로 작은 게 하나 바뀌어도 모든 페이지에 들어가서 검색 찾기로 해당 코드가 들어간 부분을 찾아서 수정하는 불편함을 감수해야 했다. 그래서 이후 공통 함수를 만들거나, 자주 쓰는 UI는 컴포넌트로 만들어 관리하기 시작했다. 이것만으로도 나는 이제 좀 내가 발전했다..

JavaScript의 Array 메서드 중 강력한 기능 Map, filter 활용하기 최근 프로젝트 개발 중 DBQuery를 통해 받은 결과를 재가공하는 일이 많아졌다. 해당 값에서 중복을 제거한다던지, 특정 조건을 만족하는 값으로 새로운 배열을 만들어야 할 경우가 생겼는데, 이 경우 많은 선배 개발자들은 Array 메서드인 map과 filter를 활용하는 것을 알 수 있었다. 오늘은 이러한 Array에서 Map과 Filter가 무엇인지, 어떤 식으로 이용해야 될지 공부를 해보기로 했다. 💎Array.prototype.map() ES5에서는 Array method 중 Map이 추가되었다. map()을 활용할 경우, 특정 배열을 for문을 도는 것처럼 각각의 요소에 대해 함수를 호출하여, 해당 함수를 실행..