Javascript Tips (36) 썸네일형 리스트형 NFD, NFC(같은 이미지 URL임에도 가져올 수 없는 경우) https://naver.com/이미지1.png https://naver.com/이미지1.png 위 두개의 경로는 같아 보이지만사실 URL 입력란에는 다르게 나올 수 있다. MAC에서 한글 파일을 저장할 때와WINDOW에서 한글 파일을 저장할 때 다른 방식으로 저장된다. url에서는 인코딩 되어 호출하게 되는데인코딩한 모습은 아래와 같다. NFC%EC%9D%B4%EB%AF%B8%EC%A7%801.pngNFD%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B51.png 이를 해결하기 위해서프론트에서 NFC 방식으로 통일하여 노출하면 된다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Gl.. next.js에서 env 파일 다르게 바라보게 하고 작업하기 풀스택 개발자: env파일의 백엔드 주소는 Local프론트 개발자: env파일의 백엔드 주소는 개발서버 .env.local (프론트개발자용).env.developemnt (풀스택 개발자용) 하기 위해서 다음과 같이 진행 1. dot.env 라이브러리 설치npm install --save-dev dotenv-cli 2. package.json 에 명령어 다르게 설정 "scripts": { "dev": "next dev", "dev:api": "dotenv -e .env.development -- next dev", "build": "next build", "start": "next start", "lint": "eslint" }, 3. 명령 풀스택 개발자npm run de.. Next.js) Prefetch에 대한 이해 1) 컨텐츠 로드에 대한 이해. = 번들링된 파일을 브라우저를 통해 가져온다. 가져오기 위해 네트워크 시간 비용이 발생한다. 이를 해결하기 위해 prefetch가 존재한다. 2) Link태그와 router를 이용한 네비게이팅을 Prefetch 하는 방법 [Prefetch를 통해 번들링을 미리 불러오는 모습] search, book, index에 대한 번들링 파일들을 랜딩페이지에 가기만해도 불러온다. Link태그의 prefetch의 default 값은 true 라서다 불러온다. [router.push를 prefech로 해보기] const onClickButton = () => { router.push("/test"); } useEffect(() => { router.prefetch.. 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 이벤트를 주어 해결함. 이전 1 2 3 4 5 다음
