본문 바로가기

분류 전체보기

 (81)
[Javascript] ios 한글 조합 문제 ios 13이상에서는 받침이 완료되지 않은 문자에 대해서 buffer에 저장되버립니다. 받침까지 완료가 되어야만 제대로 출력이 되고, 아닌경우는 받침이 필요없지 않는한 이상한 현상을 겪게 됩니다. ex) '아아' 라는 문자 전송 후, input = ''으로 입력값을 초기화 해줘도 다음에 'ㅇ'을 입력하면 '앙'이 출력됩니다. 이런 그지같은 현상 때문에 여러 방법을 시도해봤는데요..! 한가지 방법은 input의 focus를 없앴다가 다시 focus 시켜주는 방법입니다. 입력이 완료되면 blur 후 다시 focus 해주는 방식인데, 해결이야 되지만 키보드가 내려갔다 다시 올라오는 불편한 상황이 연출됩니다..ㅜㅠ 그러다 아래 참고로 적어둔 포스트에서 답을 얻었습니다. (감사합니다..!) 간단히 해결책만 말하자..
Clipboard copy on Safari using Javascript 웹개발을 할때, 링크를 복사한다든지 그 외의 다른 텍스트를 클립보드에 복사시키려면 크롬의 경우는 매우 간단합니다. 하지만... 그놈의 애플..이 항상 문제죠;; 후 아래 코드는 safari건 chrome이건 다 동작합니다. 임의의 textarea를 생성하고 값을 세팅하고 textarea영역을 선택(복사할 글자 선택). 보통 여기까지하면 textarea의 모든 범위의 값이 선택됩니다. 이후 범위 설정하면 설정한 범위까지의 text가 선택됩니다. 마무리로 execCommand('copy') 해준다면 완료!...... iosCopyToClipboard(textToCopy): boolean { const tmpTextarea = document.createElement('textarea'); tmpTextare..
[Angular] Pipe view에 맞게 데이터를 변경할 때, 단순한? 방법은 component ts에서 view용 변수를 하나 선언하고 원하는대로 데이터를 변형해서 초기화하는 방법일 것입니다. 하지만 앵귤러에서의 Pipe를 이용하면 굳이 컴포넌트를 거치지 않고 바로 뷰에서 원하는대로 데이터를 변형시킬 수 있습니다. 아래 예시를 보면, 위에는 component에서 template용 변수를 생성한 경우고 아래는 pipe를 이용한 코드입니다. 엄청 간단해지는!! import { Component } from '@angular/core'; @Component({ selector: 'app-uppercase', template: `angular's uppercase is {{ angularUpper }}` }) export class ..
[Angular] User Input - 사용자 입력 앵귤러의 사용자 입력에서 불필요한 코드를 제거하고 디펜던시를 제거할 수 있는 부분을 살펴보는 글입니다. 아래 코드들과 정보는 앵귤러 공식 문서를 참조했습니다. angular에서 사용자 입력(input, click 등)을 받을 때 아래 코드처럼 $event를 통째로 넘기고 그 이벤트에 맞게 타입을 정의해서 사용할 수 있습니다. 아래는 keyup이라는 이벤트가 발생했기에 onKey() 함수에서의 파라미터 타입을 KeyboardEvent로 명시하여 사용합니다. @Component({ selector: 'app-keyup', template: ` {{values}} ` }) export class KeyUpComponent_v1 { values = ''; onKey(event: KeyboardEvent) { /..
[Angular] Unsubscribe http request Observable을 unsubscribe 하는 것은 메모리 관리에 있어서 매우 중요한 이슈입니다. 그래서 저는 보통 rxjs 함수들로 자동으로 구독 해제하거나 (ex. take, takeUntil ... ) async pipe를 사용해서 필요한 경우가 아니라면 따로 unsubscribe를 해주지 않습니다. 하지만 이외에도 굳이 unsubscribe 해주지 않아도 되는 것이 있었는데..! 단발성 데이터에 대해서는 필요가 없는 것입니다. http request의 경우에도 서버에서 한번 받아오면 끝나는 작업이기에 바로 complete가 호출되버립니다. 코드로 한번 비교해보도록 하겠습니다. const test = this.testService.getData().subscribe( data => console...
[Javascript] RxJS - Subscription https://rxjs.dev/guide/subscription 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Subscription 구독이란? 구독은 일회용 자원, 일반적으로 Observable의 실행을 나타내는 객체입니다. 구독은 unsubscribe라는 중요한 메소드를 가지고 있습니다. 이는 인자를 갖지 않고, 구독이 잡고있던 자원을 처리합니다. RxJS 이전버전에서는, 구독이 "일회용"으로 불렸습니다. import { interval } from 'rxjs'; const observable = interval(1000); const subscription = observable.subscribe(x => console.log(x)); // Later: // This cancels th..
[Javascript] RxJS - Operators https://rxjs.dev/guide/operators 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. RxJS는 Observable이 기본이지만, 대부분 연산자에 유용합니다. 연산자는 복잡한 비동기코드를 선언적 방식으로 구성하는데 필수적인 부분입니다. 연산자란? 연산자는 함수입니다. 2종류의 연산자가 있습니다 : 파이프형 연산자들은 observableInstance.pipe(operator()) 구문을 사용해 Observable로 파이프 될 수 있습니다. 이는 filter(...)와 mergeMap(...)을 포함합니다. 호출되면 Observable 객체를 변경하지는 않습니다. 대신, 새로운 Observable을 반환합니다. 구독 로직은 첫번째 Observable에 기반합니다. 파이프형 ..
[Javascript] RxJS - Observer https://rxjs.dev/guide/observer 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Observer 관찰자(Observer)란 무엇인가? 관찰자는 Observable에서 전달된 값들의 소비자입니다. 관찰자들은 간단히 Observer에서 전달하는 각각의 알림 유형들(next, error, complete)의 콜백들의 모음입니다. 아래는 전형적인 Observer 객체입니다 : const observer = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), complete: () => console.log('O..

티스토리툴바