Web (24) 썸네일형 리스트형 Lambda@Edge를 통한 Dynamic OG Tags, SEO End user에게 데이터가 가는 중간 과정 각각에 lambda@edge를 통해서 관여할 수 있습니다. Viewer Request - End User로부터 CloudFront로 요청이 도착한 직후 Origin Request - CloudFront에서 Origin Server로 요청을 보내기 직전 Origin Response - Origin Server에서 보낸 응답이 도착한 직후 Viewer Response - CloudFront에서 End User로 Response 보내기 직전 주의사항 버지니아 북부(us-east-1) 리전에서만 배포 가능 로그는 CloudWatch에 쌓임. But, us-east-1에 쌓이는 것이 아니고 접속한 각 region에서 쌓입니다. (ex. 서울 region에서 접속했을 .. React와 Angular의 DOM DOM이란? Document Object Model HTML, XML 문서의 프로그래밍 interface(API) document BOM중의 하나 document.querySelector('.woot'); DOM 구성 - Render Tree 그렇다면, SPA에서 상태가 변할 때 DOM은 어떤 방식으로 변경될까? [ virtual DOM vs incremental DOM ] virtual DOM React, Vue에서는 DOM의 html 요소가 바뀔 때, 새로운 virtual DOM을 만들어 놓고 기존의 virtual DOM과 비교해서 (diffing) 필요한 부분만 바꿔준다. 컴포넌트의 렌더링 결과를 값으로 받을 수 있고, 이를 테스트나 디버깅 등에 사용할 수 있다. virtual DOM을 사용하기에,.. [Javascript] 동작 원리 [Javascript는 어떤 원리로 돌아가는 걸까?] 싱글 스레드? 콜스택? 말은 많이 들어 봤지만, 막상 설명하자니 입이 안떨어졌습니다.. 자바스크립트는 웹 브라우저에 내장된 엔진으로 돌아가게 되는데, 엔진은 이와 같이 구성되어있습니다. Memory Heap - 변수, 함수 등의 메모리 할당이 일어나는 곳 Call Stack - 호출 스택이 쌓이는 곳 그리고 대표적인 자바스크립트 엔진은 구글 크롬에서 사용중인 V8! (8기통 엔진을 의미하는 명칭) [그렇다면 v8엔진에서는 무슨 일을 하는 걸까?] 자바스크립트 소스코드를 가져와 Parser에게 넘긴다. Parser는 파싱을 통해 AST(Abstract Syntax Tree)로 변환시킨다. AST를 인터프리터를 통해 byte code로 변환(Ignitio.. Javascript module 타입의 cors 문제 이렇게 module타입으로 js import를 하게되면, cors에러가 뜨게 됩니다. file:///~~ 요런 url이 cors에 의해 block 되었다는 것인데요..ㅠ npm으로 매우 간단하게 해결할 수 있습니다. http-server를 활용하는 것입니다. npm install http-server -g index.html이 있는 경로에서 npx http-server 실행 http://127.0.0.1:8080 에 접속! (포트 바꾸고 싶다면 npx http-server -p 포트번호) 끝! 조금 더 편하게 하고자 한다면 package.json에 script를 등록하면 됩니다. "scripts": { ..., "start": "npx http-server -p 8000" }, Rxjs duplicated assign issue Observable을 구독하는 Subscription 변수에 한번 더 assign 한다면 어떤 일이 발생할까요? 아래 코드를 보고 상황을 살펴보겠습니다. class RxjsAssignment { constructor() { this.subscribeWindowScroll(); this.subscribeWindowScroll(); this.unsubscribeWindowScroll(); } private windowScrollSubscription: Subscription; subscribeWindowScroll(): void { this.windowScrollSubscription = fromEvent(window, 'scroll').subscribe((event) => { this.onS.. [Javascript] ios Momentum Scrolling Issue(탄력스크롤) ios는 탄력스크롤이라는게 있죠? 스크롤에 관성도 있고 끝에 도달하면 바운스도 됩니다. 아래 css를 통해 이를 적용하는데요.. -webkit-overflow-scrolling: touch; 하지만 문제가 있습니다. 스크롤 중일 때에는 scrollTop이 업데이트 되지 않는다는 것입니다..! 제가 진행중인 프로젝트에서 element들이 추가됨에 따라 스크롤 높이를 계산해서 스크롤 위치를 재설정해줘야 하는 경우가 있었는데, scrollElement.scrollTop = 0; 이렇게만 쓴다면, 스크롤 관성은 그대로 유지되고 element는 추가되서 뚝뚝 끊기는 현상이 발생할 수 있습니다. (주로 역방향 스크롤시...) 위에 언급한 프로젝트에서 역방향 스크롤시, dom이 추가되고 추가된만큼 계산해서 스크롤 위.. [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.. 이전 1 2 3 다음
