프레임워크160 [Next.js] Link 웹사이트에서 서로 다른 페이지를 연결할 때는 태그를 사용합니다. Next.js에서는 Link와 a 태그를 함께 사용합니다. 1) index.js에 JSX 구문에 아래 코드를 삽입합니다. import Link from "next/link"; export default function Home() { return ( Learn Next.js! ); } 2) a 태그를 사용하고자 하는 페이지 상단에 아래와 같이 next/link의 Link 요소를 import 해옵니다. (index.js) import Link from 'next/link' 3) 1번에서 작성한 코드 중 a 태그를 Link 요소로 감싸고, href를 a 태그에서 Link 요소를 속성으로 옮깁니다. import Link from "next/lin.. 2022. 2. 17. [Next.js] (4) 외부 이미지 파일 사용하기 외부 이미지 파일 사용하기 1) getStaticProps(SSG)를 사용하여 photos api 서버에 요청을 보내고, 데이터를 받아온다. export const getStaticProps = async () => { const res = await fetch( `https://jsonplaceholder.typicode.com/photos?_start=0&_end=10` ); const photos = await res.json(); // res를 json으로 변환하여 photos에 담는다. return { props: { photos: photos, }, }; }; 2) next에서 기본으로 제공해주는 image 컴포넌트를 import 받는다. import Image from "next/image".. 2022. 2. 16. [Next.js] (3) SSR, SSG SSR(Server Side Rendering)과 SSG(Static Site Generation) 두 가지 방법을 사용하여 fetch를 진행 할 수 있기 때문에 Next.js에서 매우 중요한 부분이라고 할 수 있습니다. SSR(Server Side Rendering) import Header from "../components/Header"; export default function Home({ posts }) { console.table(posts); return ( Welcome to My Blog {posts.map((post) => { return {post.title}; })} ); } export const getServerSideProps = async () => { const res =.. 2022. 2. 16. [Next.js] (2) 컴포넌트 생성하여 import 받기 공통적으로 사용하는 코드를 하나의 컴포넌트로 묶기 위 코드에서 index.js에 Nav와 Header 부분은 index.js도 사용하고 있고, photo.js에서도 사용하고 있다. 이 경우 두가지 방법이 있을 것이다. 1) Nav와 Header 부분을 index.js도 작성하고, photos.js에도 작성한다. → 이 경우 작은 프로젝트에서는 큰 문제는 없겠지만 프로젝트가 커질 수록 불필요한 코드로 인해 코드 가독성과 용량이 커진다는 문제점이 있다. 2) 공통적인 부분을 하나의 컴포넌트로 묶어서 재사용 하기 → 이 경우 1번에서의 문제점을 해결 할 수 있다. (예시) 1) Components 폴더를 생성한다. 2) 우선 Components 폴더에 Layout.js와 Nav.js를 생성한다. Layout... 2022. 2. 16. [Next.js] (1) 기본 설정, 기능들 설치하기 공식문서를 보면 Setup(자동 설정)과 Manual Setup(수동 설정)이 있는 데 이번에는 Setup으로 프로젝트를 생성 했다. $ npx create-next-app@latest next-practice Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 설치 후 파일 구조 둘러보기 설치 후에 package.json을 확인 해보면 dependencies에 깔끔하게 설치 되어 있는 걸 볼 수 있고 WebPack 같이 중요한, 필수적인 라이브러리들은 next에서 알아서 관리 해주기 때문에 별도의 설정이 필요하지.. 2022. 2. 16. [Next.js] 개념 정리 (2) next.js 기본 개념 알아보기 next.js 기본 개념 알아보기, react, seo, ssr kyounghwan01.github.io Next.js는 프론트엔드 기술로 Zeit에서 만든 React 프레임워크입니다. React 프레임워크인 만큼 사용하는 언어는 typeScript와 javaScript입니다. React는 UI를 만들기 위한 라이브러리입니다. 라이브러리이기 때문에 핵심적인 기능만 제공하고, 그 외의 기능은 별도의 3rd party 라이브러리로 제공합니다. (제대로 된 프로젝트를 만들기 위해서는 React만으로는 부족하기 때문에 다른 라이브러리를 조합 해야 합니다.) Next.js는 React로 프론트엔드 개발 시 필요한 여러가지 유용한 기능을 기본으로 제공 해줍니다. 1. SSR이라고 .. 2022. 2. 16. [생활코딩] Fontello 웹사이트나 애플리케이션에 어떤 아이콘을 삽입 할 때 이미지를 사용 할 수도 있지만 특정한 문자가 특정한 이미지로 표현되게 하는 방식이 있습니다. 그런 방식을 사용하면 이미지를 삽입하지 않아도 문자를 삽입 하면 그 문자에 해당하는 폰트가 자동으로 웹페이지에 추가되어 화면이 확대 되어도 이미지가 깨지지 않는 소위 백터 방식의 이미지를 우리의 웹사이트에 쉽고 안전하게 추가 할 수 있는 방법을 제공하는 사이트가 fontello.com 입니다. Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"b66fa17cf9bf4d8ea9b04e61c0c13eb9","page_data.. 2022. 2. 7. [생활코딩] 코드 경량화(minify) CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화 해주는 도구가 minify 도구입니다. mini는 "작게", fy는 "그렇게 만들다" 즉, css 코드를 작게 만들어서(압축해서) 서버와 클라이언트 사이에 주고 받는 데이터의 크기를 줄이는 것이 minify의 목적입니다. 첫번째 방법 clean-css online adamburgess.github.io 두번째 방법 page 2 성공적으로 minify 된다. 한 줄이 길게 표시 되는 문제가 생길 경우 아래 사이트를 참고하여 해결하면 된다. 비주얼 스튜디오 코드 VSC, 코드 경량화 minify 이 포스팅은 PC로 작성되었습니다. 모바일로.. 2022. 2. 7. [생활코딩] link & import 똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요? 아마 천개의 웹페이지를 모두 수정해야 할 것입니다. 이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다. 여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아 보겠습니다. 프로그램으로 코드를 만들 때 좋은 코드를 만들 수 있는 실천적이고, 어렵지 않은, 하지만 강력한 효과가 있는 방법은 바로 중복을 제거하는 것입니다. 개발자 도구 → 검사 → Network에 들어가 보면 현재 이 웹페이지를 화면에 표현하기 위해서 웹 서버로부터 다운로드 받은 파일들을 전부 다 보여주는 기능이 있습니다. reload 해보면.. 2022. 2. 6. 이전 1 ··· 6 7 8 9 10 11 12 ··· 18 다음 728x90
