본문 바로가기

장원익 기술블로그

📺 Front End/- React, Next.js42

정직하게 배워보는 Next.js 시리즈를 시작합니다. 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 안녕하세요! 주니어 개발자 장원익입니다. 정직하게 배워보는 Next.js 시리즈를 시작합니다. 본 내용은 공식 문서의 교육 방향을 최대한 지키려 노력했으며 Next를 배우고싶어하는 모든 초보자들에게 도움이 되는 글이라고 생각합니다. 대상 독자 Next.js를 배워보고 싶은 사람. SEO 를 하기 위해 다양한 정보를 찾고있는 사람. SSR과 SSG를 리액트 프로젝트에서 사용해보고 싶은 사람. 필요 역량 React 개발 경험 styled-components 개발 경험 (Optional) 필요 역량은 리액트 개발 경험.. 2020. 12. 31.

정직하게 배워보는 Next.js 시리즈를 마치며... 해당 블로그 시리즈는 정직하게 배워보는 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] 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.

이전 1 2 3 4 5 ··· 7 다음

티스토리툴바