nextjs3 [Next js] img가 아닌 Image를 사용해보자 img 태그는 정말 많이 사용하는 태그일 것이다 하지만 layout shift (이미지가 로딩되기 전과 후의 크기 차이가 있을 때 밀리는 현상)이나 lazy loading, 사이즈 최적화를 위해서는 Image 컴포넌트를 사용하도록 하자 import Image from 'next/image' import food0 from '/public/food0.png' export default function List() { let products = ["Tomatoes", "Pasta", "Coconut"]; return ( 상품목록 {products.map((item, i) => { return ( {item} 이것은 물건입니다. 그것에 대한 설명을 이렇게 마구 써놨습니다 ); })} ); } 여기서 주의사항은.. 2023. 11. 13. [Next js] a태그를 사용하지 말고 Link를 사용하자 현재 듣고 있는 애플코딩의 강좌에서 a태그를 사용하는 것보다 Link를 사용하는 것이 더 부드럽게 페이지 전환이 된다고 한다 [React] Link와 태그의 href의 차이 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용해야 한다. 이유 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다. 리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사 gomgomkim.tistory.com 위의 블로그에 따르면 a 태그를 사용하여 페이지를 불러오면 이전의 페이지를 날리고 새로 불러와야 해서 리액트와 Next js의 경우 속도 저하가 발생할 수 있다 그래서 이전의 페이지를 날리지 않는 Link를 사용해야하는 것이다 (웬만하면 Link를 사용하는게 좋을.. 2023. 11. 13. [Next js] vscode에서 태그 자동완성 안될 때 React나 Next js를 사용할 때 태그가 자동완성 되지 않는 경우가 있다 이럴 때 간단하게 세팅만 조금 만져주면 해결된다. Shift + Command + p 를 눌러 setting.json을 연 다음 가장 아래에 아래의 코드를 추가해주자 "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles": { "javascript": "jsx" }, 이걸 하고 안하고의 차이가 크니 꼭 하자 2023. 11. 13. 이전 1 다음
