본문 바로가기

분류 전체보기

 (81)
[Javascript] RxJS - Observable https://rxjs.dev/guide/observable 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Observable Observable은 여러 값의 지연푸시 모음입니다. 그들은 다음 표에서 누락된 자리를 채웁니다. SINGLE MULTIPLE Pull Function Iterator Push Promise Observable 예제. 아래 예제는 구독(subscribe)됐을 때, 동기적으로 값 1,2,3을 즉시 넣고, 1초 뒤에 4를 넣고 끝내는 Observable입니다. import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(1); subscriber.nex..
[Javascript] RxJS - Overview 번역 Observable 객체를 다루는데 필수(?)적인 RxJS!! rxjs 공식사이트 번역을 해봤습니다. ( https://rxjs.dev/guide/overview ) 기분탓인지 모르겠지만 다른 개발문서들보다 어렵게(?) 쓰여있는거 같아서 의역도 좀 포함되어있습니다. 그렇지만.. 영어 실력이 부족해 오역이 있을 수 있습니다. (발견시, 알려주시면 감사하겠습니다.) 소개 RxJS는 Observable 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기위한 라이브러리입니다. Observable, 위성 타입(Observer, Scheduler, Subjects), 그리고 Array#extras (map, filter, reduce, every 등)의 연산자, 이 셋 중 하나의 핵심 유형을 제공하여 비동..
script 속성 async / defer javascript를 불러올때, DOM이 구성되는 것을 기다리기 위해 태그 제일 아래에서 script를 가져오기도 합니다. 하지만 async, defer 속성을 줘서 간편하게 이를 해결할 수 있습니다. 만약 DOM과 크게 상관이 없다거나 다른 script와의 연관성이 없다면, 그리고 js파일이 작아서 DOM이 화면에 보이는 시간이 얼마 안걸린다면 굳이 저 두 속성을 넣을 필요는 없어보입니다. 이게 무슨말인지는 아래 수행 순서를 먼저 보고 오도록 하겠습니다. 방향 -----> [head안 속성X] [body맨 아래 속성X] [async] [defer] 정리하자면, 1. 속성 없을때 script를 만나면 불러오고 실행까지 시킨 후에 나머지 작업을 합니다. 위에 보이는 것처럼 head 안에 있다면 HTML 파..
Safari에서 유튜브 재생 문제 (저작권 ...) ios 개발에서 웹뷰로 유튜브를 재생할 때, 그리고 로컬에서 safari에서 테스트 할때 '동영상을 재생할수 없음' 이런 비슷한 멘트가 뜨면서 안될 때가 있습니다.. 어떤 영상은 잘 되는데 어떤 영상은 안됩니다. 바로..! 저작권 때문인데요.. 아무데서나 저작권있는 영상을 재생하려 할까봐(??) 이해는 잘 안되지만 그런 문제라고 합니다. (그치만 안드로이드에서는 너무나 잘되는...) 뭐 쨋든! 이를 해결할 수 있는 방법이 있습니다. 여러 방법이 있을 수 있고, 이게 정답이라고는 할 수 없지만 한가지 해결책은 될 수 있을 것 같습니다. 일단 문제의 원인은 localhost에 있습니다. localhost에서는 재생이 안되지만, 도메인에서 접근하면 재생이 됩니다. 그래서 제가 사용한 방법은 한 다리를 거쳐 유..
[CSS] position (static, absolute, relative, sticky, fixed) static absolute relative fixed 이렇게 네가지의 position이 존재합니다. 저도 어설프게는 알고 있었지만 정확히 어떻게 활용해야 하는지 매번 헷갈려서 정리해봤습니다. [static] 태그들의 default 값입니다. 빈공간에 차례대로 들어가게 됩니다. 위->아래 / 왼->오 기본적으로 div 태그는 display: block이라 위->아래 입니다. 그래서 inline-block으로 일렬로~ See the Pen position-static by steadev (@steadev) on CodePen. [absolute] static이 아닌 부모를 기준으로 위치 조절이 가능합니다. 전부다 static이라면 body가 기준이 됩니다. 예제에서, 두번째 박스만 absolute로 했고,..
[Git] Pull Request 새로운 브랜치에서 작업을 한 후, 상위 브랜치에 merge를 요청하는 과정을 의미합니다. 보통 협업 업무에서나, 오픈 소스 컨트리뷰션을 할때 활용합니다. 누구나 브랜치에 접근해서 Merge 해버리면 예기치 못한 오류가 발생할 수도 있고 관리가 어렵습니다. 제가 첫 회사에서 근무할 때는 수정사항이 있으면 아무나 master 브랜치에 접근해서 본인들의 코드를 합쳐버렸습니다. 그래서 분명 잘 돌아가던게 이상한 오류가 생기기도 하고 복구를 하려 해도 꼬여버리는 경우가 종종 있었습니다.. 쨋든..! pull request 과정을 보도록 하겠습니다. 1. 새로운 branch 생성 // develop branch 생성 git checkout -b develop 2. commit & push // staging git..
[Javascript] requestAnimationFrame requestAnimationFrame은(이하 raf) 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이전에는 setInterval을 사용했지만, 프레임 유실이 있을 수 있고 모바일에서 배터리 절약이 안되는 문제가 있다고 합니다. raf는 초당 60번을 수행하지만, 컴퓨터 상황 등에 따라 유동적이라고 합니다. 그만큼 최적화해서 애니메이션을 부드럽게 해줄 수 있는 기술이라 애니메이션에서 매우 자주쓰이고 canvas에 많이 활용된다고 합니다. [사용방법] 우선, 아래 코드처럼 재귀형식으로 활용하면 됩니다. pageYOffset은 스크롤된 값을 의미하는데, 스크롤 값만큼 left를 움직여주는 코드입니다. 하지만 아래 gi..
[Angular] Lazy-loading SPA의 대표적인 단점이 초기 구동시간이 오래걸린다는 점입니다. 이를 보완하기 위한 방법이 Lazy Loading입니다. 기능모듈들을 초기에 로드하지 않고 요청이 있을 때 로드하는 방법입니다. 아래는 앵귤러 공식 사이트에서의 예제를 작성한 코드입니다. https://github.com/steadev/angular-lazyloading-testing-app Lazy loading을 하는 방법은 라우팅 객체의 loadChildren 안에서 모듈을 import 합니다. app routing module에서 아래와 같이 customers, orders의 라우팅 설정을 해놓고 customer 버튼을 눌렀을 시, localhost:4200/customers로 라우팅이 되면서 customer 모듈을 import 하는..

티스토리툴바