반응형 개발/Front-End19 [Javascript] Object 객체 활용하기 자바스크립트는 프론트단에서 기능을 구현할 때 사용하는 언어이며, 사용하기 쉬운 이미지가 강하다. 처음에 자바스크립트의 객체화, 모듈화, 상속, 표준 내장 객체, 클로저 등을 제대로 배우지 않는다면 페이지마다 동일한 함수가 난무할 수 있고 리팩토링을 할 때도 엄청난 스트레스로 다가온다. javscript에서는 Window 객체 말고도 표준 내장 객체가 존재하며 아래 링크를 참고하면 된다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 표준 내장 객체 중 Object 객체는 모든 객체들의 부모 객체이다. 크롬 개발자도구(F12)에서 객체를 선언 후 _proto_(프로토타입 링크)를 타고 올라가면 Object 객체가 .. 2021. 6. 5. [javascript] Object name 변경하기 자바스크립트에서 Object의 value를 유지한 채로 name값을 변경해야 하는 경우가 있다. 구글링을 해서 확인해보니 아래의 링크에 답이 있었다. https://stackoverflow.com/questions/4647817/javascript-object-rename-key const OBJECT = { "NAME" : "DEVSONG" }; console.log(OBJECT); const NEW_NAME = "NICKNAME"; const OLD_NAME = "NAME"; Object.defineProperty( OBJECT, NEW_NAME, Object.getOwnPropertyDescriptor(OBJECT, OLD_NAME) ); delete OBJECT[OLD_NAME]; //NEW_NA.. 2021. 6. 4. [Javascript] Array.prototype 함수 활용하기 Array.prototype 메소드들은 Array를 핸들링할 때 매우 유용하다. 1. Array.prototype.filter(CALLBACK(ELEMENT, INDEX)); ELEMENT : Array 객체의 요소 INDEX : Array 객체의 인덱스 CALLBACK 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환한다. const ARR = [1,2,'',3,4]; //필터 전 console.log(ARR); const NUMBER_ARR = ARR.filter(function(E, I){ return typeof E === "number"; }); //필터 후 console.log(NUMBER_ARR); https://developer.mozilla.org/ko/docs/Web/JavaScr.. 2021. 6. 3. [Javascript] Blob객체로 CSV 파일 다운로드 클라이언트에서 다운로드 기능을 구현할 때 서버단에서 HttpServletResponse 객체의 header, contentType 등을 셋팅하여 response객체의 OutputStream으로 내용을 전송했다. 이런 경우는 서버 컴퓨터의 저장된 파일을 다운로드할 때 많이 사용하는 방식이다. 다운로드할 수 있는 경우는 파일, 프론트 데이터라고 생각하며 프론트에 표시된 텍스트나 자바스크립트 객체의 데이터를 파일 형식으로 다운로드할 때는 서버를 이용하지 않고 JS + HTML로만 구현이 가능하다. const NAME = "TEST.csv"; const CONTENT = ['이름','직업'].join(',') + "\n" + ['DEVSONG', 'DEVELOPER'].join(','); (function(){.. 2021. 6. 2. 이전 1 2 3 4 5 다음 반응형
