Javascript Tips (33) 썸네일형 리스트형 Vscode - Eslint, Prettier 설정 1. Prettier & Eslint Extension 설치 2. Settings.json 설정 (Open User Setting) 내용에 주석을 확인하고 Eslint, Prettier 활성화 하면됨{ "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "workbench.iconTheme": "vscode-icons", "diffEditor.ignoreTrimWhitespace": false, "editor.renderWhitespace": "boundary", "editor.tabSize": 2, "emmet.triggerExpansionOnTab": true, "workbench.settings.applyToAll.. vscode - Babel parsing error: No Babel config file detected 1. Ctrl + P > Settings(JSON) 들어가기 2. 아래 추가해주기 "eslint.workingDirectories": [ { "mode": "auto" } ] 완성된 모습 브라우저) CPU, GPU, 렌더링, 메모리 성능 모니터링을 위한 유용한 도구들 1. FPS/Composite 상태보기F12 -> Ctrl + Shift + P > FPS 검색 2. Layers 구조 전체를 확인할 수 있다. Z영역도 확인 가능함 3. Rendering렌더링 되는 포인트들을 하이라이트 하여 쉽게 볼 수 있다. 아래 세개가 효과적으로 사용할만하다.Layers borders : 레이어 경계선Frame Rendering Stats : 프레임 속도Paint flashing : repaint되는 영역이 하이라이트됨 4. 브라우저 Task Manager브라우저의 더보기 > more tools > task Manager 6. 브라우저가 사용하는 GPU 스펙 chrome://gpu/ 7. Performance Monitor Memory, Docu.. 모바일 ios 이슈) 키보드가 버튼, Input 가리는 현상 현상: ios에서 키보드는 input기준 아래에서 올라옴. textarea, input이 화면 상단에 위치하는 경우 키보드가 화면 요소를 가리는 이슈가 생길 수 있음 ios에서는 다르게 컨트롤 해야될 대상- vh(vh가 먹지않음)- window.innerHeight(키보드 올라옴에도 innerHeight가 그대로임) 대신 visualViewport.height로 사용 visualViewport가 변할 때마다 document에 css 변수를 선언해 height를 동적으로 부여합니다.document.documentElement.style.setProperty('--vh', `${ window.visualViewport.height * 0.01 }px`); .target { height: calc(--v.. Android Chrome) 스크롤 가속 -> top 버튼 동작 이슈(Scrolling with Momentum) 상황: Aos 모바일웹에서 스크롤 내리는 중에 Top 버튼 클릭시 버튼 이벤트 발생이 안되고 스크롤만 멈추는 현상(사실 스크롤 중에 터치로 멈추는 게 더 자연스럽다. 하지만 특정 영역은 원하는 이벤트를 발생시켜야함) 파악한 원인으로는 다음과 같다.원인1) 브라우저 내에서 상호작용을 막기 떄문에 스크롤 중에는 멈추는 것으로 처리함.원인2) top 버튼이 부모보다 위에 있지 않을 경우 작동 안됨본인의 경우에는 top 버튼이 제일 위에 position:fixed 되어 제일 높은 z-index 값을 주어 상단에 올라와있었다. top버튼에 touchend 이벤트를 주어 해결함. 캐릭터메신저구현기 부드러운 무빙 - requestAnimationFrame 캐릭터 이동시 방향키로 이동을 하는데 누르고 있을 경우에도 무빙을 원했다. keyDown, keyUp을 이용해움직임 유지를 결정하고 painting이 다시 일어날 때마다 특정함수(캐릭터의움직임)을 계속해주는 requestAnimationFramesetInerval 같은 녀석을 사용해본다. 1. 구현...생략class Person { ...생략 move(key) { this.key = key; if (!this.key) cancelAnimationFrame(move); switch (key) { case 'ArrowUp' : this.setTop(-10); this.target.style.top = this.getTop(); break; .. Javascript로 캐릭터 메신저 구현기(모아보기) html, js, css로 제작중인 캐릭터가 있는 메신저 구현을 하며 알게 된 내용들을 정리 캐릭터 선택 후 방을 이동하며 메신저가 가능한 프로그램이다. 회사 동기들과 우리만의 메신저로 사용하기 위해 만들기 시작함 https://tomhoon.tistory.com/789 캐릭터메신저구현기 - getBoundingClientRect, offsetTop(Left), clientWidth(Height)캐릭터 이동을 할 때 필요했던 값은캐릭터의 위치를 계산해1. 첫위치 값2. 제한된 구역을 더이상 이동 못하게 할 기준값두 가지가 필요했다. 1. clientWidth clientWidth와 clientHeight 값은 배경이 되tomhoon.tistory.com 캐릭터메신저구현기 - getBoundingClientRect, offsetTop(Left), clientWidth(Height) 캐릭터 이동을 할 때 필요했던 값은캐릭터의 위치를 계산해1. 첫위치 값2. 제한된 구역을 더이상 이동 못하게 할 기준값두 가지가 필요했다. 1. clientWidth clientWidth와 clientHeight 값은 배경이 되는 크기가 어느 정도인지 확인이 가능하다. 배경이 되는 값을 먼저 계산한 뒤캐릭터 크기를 빼면 캐릭터가 갈 수 있는 거리를 알 수 있다. 예를 들면 다음과 같다. 캐릭터는 80 x 80높이는 300이다 캐릭터가 최대로 갈 수 있는 높이 거리는300 - 80 = 220이다. position: absolute로 하는 경우부모는 relative로 잡았을 때top:0, left:0의 좌표는 좌상단이다. 따라서 위로 갈 수 있는 최대값은 top: 0 아래로 갈 수 있는 최대 값은t.. 이전 1 2 3 4 5 다음
