[Web] 크롬 브라우저에서 Lighthouse로 웹 성능 측정하기
2024. 8. 22. 15:20
Frontend/Web
Lighthouse크롬 브라우저에 내장되어있는 Lighthouse를 활용해 간단하게 웹 사이트의 성능을 측정할 수 있다. 성능을 측정하고 싶은 웹 사이트에서 개발자 도구 열기 Lighthouse를 클릭 후 페이지 로드 분석하기 결과 확인 웹 성능과 접근성 지표 등을 확인하는데 있어 유용하다.
[Next.js][ISSUE] Textarea & input 에서 한글 입력시 마지막 글자 중복 입력됨 (+Enter key)
2024. 7. 18. 13:28
Frontend/Next.js
Reasonsocket을 이용해 실시간 채팅 기능 구현하던중에 아래와 같이 메시지 전송을 했는데 마지막 글자가 한번씩 더 보내지는 현상 발생 const onChangeContent: ChangeEventHandler = (e) => { setContent(e.target.value); }; const onEnter: KeyboardEventHandler = (e) => { console.log(e.key === "Enter", e); if (e.key === "Enter") { if (e.shiftKey) { return; } e.preventDefault(); if (!content?.trim()) { return; ..
[Next.js] App Router 경로 구성하기 (next13/Parallel Routes/Intercepting Routes)
2024. 6. 26. 15:15
Frontend/Next.js
https://nextjs.org/docs/app/building-your-application/routing Building Your Application: Routing | Next.jsLearn the fundamentals of routing for front-end applications.nextjs.org이 전 포스팅중에서 next.js의 app router에 대해 짧게 정리했던 게 있는데 이번 포스팅에서는 조금 더 상세히 개념 정리를 해보려고 한다. App Router란?next 13 버전부터 react server components 기반의 라우터가 도입되었다. (이전까지는 pages router를 사용함)기존의 pages router의 문제들을 개선하기 위해 만들어졌다. 가장 크게 달..
[ISSUE][Next.js] 배포 후 이미지 오류 (엑박)
2024. 6. 24. 17:04
Frontend/Next.js
Reason 분명 dev 환경에서는 이미지 엑박없이 잘 되었는데 배포 후에 보니 몇 이미지들이 엑박으로 뜬다..🤦♀️ Try검색해서 이것저것 찾아봤는데 뭔가 나한테 해당되는 내용은 아닌 것 같았음. 이미지가 안나오는 파일들이 어떤건지 확인해보니 한글이 들어간 파일들만 다 엑박이 나는 것을 발견함.다운받은 것 그대로 사용했더니 파일명들이 이렇게 되어있는데, git에서 대소문자 구분을 제대로 못하는 것도 그렇고 이런 형태의 파일명은 수정이 필요하다고 판단! Solution한글로 된 파일명들 뿐만 아니라 이미지랑 음악파일들 전부 스네이크 케이스로 변경해줬다. 수정된 것 다시 배포하니 잘 나온다!웬만하면 모든 파일명 같은 것은 스네이크 케이스 기법이 좋은 것 같다. 이래저래 귀찮아지고 수정이 힘들..
[ISSUE][Nexts.js] 반응형 페이지 작업중 특정사이즈 이하로 반응형이 작동하지 않을 때
2024. 6. 21. 17:18
Frontend/Next.js
Reason한창 웹 페이지 작업중에 모바일 버전으로 창을 줄여서보니까 어느새 해당 페이지에서 모바일 버전으로 보면 가로로 스크롤이 생기고 반응형으로 딱 맞게 줄어들지 않음.. 가로 700px쯤 부터 화면이 더 안줄어들고 가로스크롤이 발생한다. Try 어디서 문제인지 찾으려고 코드를 들여다 봤으나 찾기가 너무 어려운 것 . . 그래서 이렇게 섹션별로 주석처리하여 찾아넀다.아래 컴포넌트를 주석 처리했을 때 내가 원하는 반응형 페이지로 구성된다. 이 정도 가로길이일때 헤더부터 모든게 같이 이쁘게 정렬 되어야한다. 캐러셀 안 아이템으로 작성했던 'SongCard' 컴포넌트가 문제인듯하다.여기서도 주석 처리해가면서 원인 찾아내기..!이것 저것 건드려본 결과위에 주석처리한 곳에서 문제가 생김을 감지했..
[ISSUE][Next.js] image 태그에 priority 적용하라는 warning message
2024. 6. 20. 11:44
Frontend/Next.js
warn-once.js:16 Image with src "/main-logo.svg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority https://nextjs.org/docs/pages/api-reference/components/image#priority | Next.js" data-og-description="Optimize Images in your Next.js Application using the built..
[ISSUE][Next.js] Tailwind 사용시 설정값 ui에 반영 안되는 이유
2024. 6. 18. 15:47
Frontend/Next.js
Reason모든 환경세팅 끝내놓고 jsx 파일 생성해서 UI 그리는데 이상하게 다른 파일들은 반영이 됐는데새로 만든 것만 아무런 반영도 반응도 없는 것. 대충 사이드바 만들려고 틀 잡아놓은건데 아무리 봐도 난 틀린게 없음..import React from "react";const Sidebar = ({ children }) => { return ( Logo Navigator {children} );};export default Sidebar; Trychat GPT의 도움을 받아서 확인해보니 Tailwind CSS 설정부터 확인해보란다. Solution자세히보니 확장자명 추가로 기입할 때 띄어쓰기를 넣은 것. .아래와 같이 공백없이..
[React.js] react key props (map으로 순회시 key 값)
2024. 6. 17. 17:37
Frontend/React.js
{dummyPlaylistArray.map((playlist) => { return ( ); })} Key 속성 제공 이유react 에서 map을 순회하여 컴포넌트를 랜더링 할 때 key값을 넘겨야 하는 이유 성능최적화key는 React가 엘리먼트를 식별하는 데 사용됩니다. key를 제공하면 React가 각 항목을 고유하게 식별하고 변경된 요소만 다시 렌더링할 수 있습니다. 이렇게 하면 React가 전체 목록을 다시 렌더링하는 대신 변경된 요소만 업데이트하므로 성능이 향상됩니다. 상태 유지key를 제공하지 않으면 React는 컴포넌트를 재사용하거나 갱신하지 않고 새로운 요소로 인식합니다. 따라서 컴포..