본문 바로가기

Web/JavaScript

 (15)
TypeScript, 특수 타입 유니온 타입 (Union Type)let fruits1: (string | number)[] = ['apple', 'banana', 'mango', 1, 2, 3, 4];let fruits2: Array = ['apple', 'banana', 'mango', 1, 2, 3, 4];console.log(fruits1);console.log(fruits2); Array를 선언할 때 다음과 같이 OR('|') 연산자를 사용하여 다중 타입을 사용할 수 있습니다. Unknown Typelet testUnknown: unknown[] = ['apple', 'banana', 'mango',1 ,2 ,3 ,4, true];console.log(testUnknown);다음과 같이 일반 자바스크립트처럼 타입을 지정하지 않..
Trouble Shooting, ActiveX z-index Legacy 코드들 가운데 ActiveX를 사용하는 것이 있어 ActiveX가 모달 창보다 화면 상 위에 있어 모달 창이 사라져 보이는 이슈가 발생했습니다. ActiveX 구조가 어떻게 되어 있는 지 모르는 상황에서 z-index로 어떻게 해보려고 했지만 아무리 z-index 값을 바꿔도 해결되지 않아 DOM 조작을 임의로 하드 코딩하기로 결정했습니다. 결국 display를 이용해 모달이 팝업되어 있는 상황에서는 잠시 display를 none으로 바꾸고 모달창이 꺼지면 다시 display를 바꾸는 간단한 작업이었지만,, 처음엔 z-index가 왜 안될까 몇시간 고민했던 것 같습니다. ActiveX를 웹에서 표현할 때는 object 태그로 사용됩니다.https://developer.mozilla.org/k..
JavaScript, Event Bubbling 문제 해결 문제의 발단 프로젝트를 진행하면서 react-modal 라이브러리를 사용하고 있었습니다. react-modal Accessible modal dialog component for React.JS. Latest version: 3.16.1, last published: 2 years ago. Start using react-modal in your project by running `npm i react-modal`. There are 2821 other projects in the npm registry using react-modal. www.npmjs.com 분명히 ESC Key를 통해서는 Modal창이 닫히는데 Modal창의 외부를 클릭했을 때는 Modal창이 닫히지 않는 문제가 발생했습니다. 실제..
React.js, Skeleton Component 구현 서론 React.js를 쓰다보면 비동기 네트워크 요청을 통해 데이터를 받아와 리렌더하는 과정에서 빈 화면이 나와 사용자에게 불편함을 줄 수 있습니다. 렌더링 되는 과정 가운데 뼈대가 되는 UI를 보여주면 어떠한 컨텐츠를 불러오는 중이구나 암시할 수 있어 사용자가 웹사이트를 이탈하는 것을 미연에 방지할 수 있습니다. 이러한 방법은 Youtube, Facebook 등 다양한 굴지의 기업에서 사용됨을 확인할 수 있습니다. Skeleton을 사용하면 무조건 사용자에게 좋은 경험을 줄 수 있을까 생각해봅시다. 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그 카카오페이에서 프론트엔드 개발을 하며 스켈레톤 UI와 사용자 경험 향상에 대해 고민한 내용을 공유합니다. tech...
JavaScript, 프로토타입 메서드 여태까지 우리는 __proto__를 통해 숨김 프로퍼티 [[Prototype]] 객체를 변경해주었는데요 이것의 단점을 알아보고 스마트하게 상속하는 방법을 알아봅시다. Object.create(proto, [descriptor]) [[Prototype]]이 proto를 참조하는 빈 객체를 만듭니다. Object.getPrototypeOf(obj) obj의 [[Prototype]]을 반환합니다. Object.setPrototypeOf(obj, proto) obj의 [[Prototype]]을 proto로 설정합니다. let animal = { eats: true }; // 프로토타입이 animal인 새로운 객체를 생성합니다. let rabbit = Object.create(animal); alert(rabbi..
JavaScript, HTML Element와 상속체인 우리가 흔히 사용하는 HTML Tag들의 상속은 어떻게 되어있는지 알아봅시다. var divElement = document.createElement('div'); console.log('divElement:', divElement); console.log('divElement.__proto__:', divElement.__proto__); console.log('divElement.__proto__.__proto__:', divElement.__proto__.__proto__); console.log('divElement.__proto__.__proto__.__proto__:', divElement.__proto__.__proto__.__proto__); console.log('divElement.__..
JavaScript, 함수 생성자 & Prototype prototype와 숨김 프로퍼티 [[ProtoType]]를 모른다면 해당 포스트를 참고해주세요! JavaScript, Prototype 상속과 .__proto__ 개발을 하면 기존 기능을 확장해야하는 경우가 생깁니다. 기존 객체와 유사하지만 다른 기능을 추가한 또 다른 객체를 만들어 사용하는 경우 우리는 prototype 상속을 사용할 수 있습니다. (개발자 songye.tistory.com 객체를 리터럴을 통해 할당하여 다음과 같이 사용하였는데요 "use strict"; let animal = { walk() { console.log("I'm 걷고 있어요"); } } let rabbit = { age : 2, jump() { console.log("깡총"); } } rabbit.__proto__ = ..
JavaScript, Prototype & this Prototype에 대한 정의와 상속에 대해 알고 싶다면 해당 북마크를 참고하세요 JavaScript, Prototype 상속과 .__proto__ 개발을 하면 기존 기능을 확장해야하는 경우가 생깁니다. 기존 객체와 유사하지만 다른 기능을 추가한 또 다른 객체를 만들어 사용하는 경우 우리는 prototype 상속을 사용할 수 있습니다. (개발자 songye.tistory.com 오늘은 Prototype 상속을 받았을 때 동일한 프로퍼티 혹은 메소드를 set & get 했을 경우를 살펴보겠습니다. 저번 시간에 이어 animal을 상속한 rabbit이라는 객체를 만들어봅시다. rabbit 객체로 walk() 메소드를 호출했을 때 프로토타입 상속을 한 animal 객체의 walk()를 참조하여 출력하는 것을 ..

티스토리툴바