본문 바로가기

장원익 기술블로그

📺 Front End71

[정직하게 배워보는 Next.js] SSG로 검색 엔진 최적화 노리기 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 0. 목차 1. create-next-app으로 next 개발 환경 세팅하기 2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자. 4. Next.js에서 head 태그를 조작하는 멋진 방법 번외 & 실습) 이미지와 동영상을 저장하고 사용해보자. 5. 웹의 발전 과정으로 보는 SSG와 SSR 6. next의 두 번째 핵심 P.. 2020. 12. 31.

[정직하게 배워보는 Next js] Next.js의 두 번째 핵심 Pre-Rendering 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 0. 목차 1. create-next-app으로 next 개발 환경 세팅하기 2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자. 4. Next.js에서 head 태그를 조작하는 멋진 방법 번외 & 실습) 이미지와 동영상을 저장하고 사용해보자. 5. 웹의 발전 과정으로 보는 SSG와 SSR 6. next의 두 번째 핵심 P.. 2020. 12. 31.

[정직하게 배워보는 Next.js] (번외) 웹의 발전 과정으로 보는 CSR 그리고 SSG와 SSR 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 0. 목차 1. create-next-app으로 next 개발 환경 세팅하기 2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자. 4. Next.js에서 head 태그를 조작하는 멋진 방법 번외 & 실습) 이미지와 동영상을 저장하고 사용해보자. 5. 웹의 발전 과정으로 보는 SSG와 SSR 6. next의 두 번째 핵심 P.. 2020. 12. 30.

[Next.js] Next.js에서 이미지와 동영상을 저장하고 사용해보자. 이번 시간에는 Next JS가 어떻게 static Assets들을 관리하는지 알아볼 것이다. Static Assets 이라고 한다면 일반적으로 Jpeg, png, svg와 같은 이미지나 mp4, mov와 같은 Video 데이터이다. assets next는 이미지같은 static assets들을 public 디렉토리에서 관리한다. 만약 이런 asset들을 사용하길 원한다면 pages 디렉토리에서 public 아래에 있는 asset들을 가져와서 사용하면 된다. 이미지 불러오는 예제 해보자 우리는 다음과 같이 이미지와 영상을 불러보는 간단한 예제를 만들어볼 것이다. npm 모듈 설치 우선 styled-components를 npm 모듈에 추가시켜보자. // npm 사용자일 경우 > $ npm install st.. 2020. 12. 30.

[Next js] Next의 Dynamic Routing과 Link 컴포넌트를 이용해서 아주 간단한 게시판 만들기. 이번 시간에는 Next JS 의 Dynamic Routing 을 이용해서 게시판을 만들어 볼 것이다. 이번 글에서는 이론적인 이야기 보다 좀 더 실용적인 이야기를 하려고 한다. 만약 다이나믹 라우팅에 대해서 알지 못하거나 한글로 정리된 글을 보고싶다면 이곳에서 확인할 수 있으며 Link 컴포넌트에 대해서는 이곳에 정리를 해놨으니 한 번 가볍게 읽고 시작하는 것을 추천한다. 이번 시간에는 Dynamic Routing과 Link를 이용해서 간단한 게시판을 만들어볼 것이다. 가장 중요한 목적은 바로 Dynamic Routing과 Link 컴포넌트를 이옹하는 것 이다. 그렇기 때문에 로그인이나 Express, Node, DB와 같이 고급 기술 그리고 쉬운 디자인적 요소도 하나도 사용하지 않고 라우팅을 중점적으로.. 2020. 12. 29.

[정직하게 배워보는 Next.js] Next.js에서 head 태그를 조작하는 멋진 방법 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 10부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 0. 목차 1. create-next-app으로 next 개발 환경 세팅하기 2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자. 4. Next.js에서 head 태그를 조작하는 멋진 방법 번외 & 실습) 이미지와 동영상을 저장하고 사용해보자. 5. 웹의 발전 과정으로 보는 SSG와 SSR 6. next의 두 번째 핵심 .. 2020. 12. 29.

이전 1 2 3 4 5 6 ··· 12 다음

티스토리툴바