본문 바로가기

장원익 기술블로그

📺 Front End/- React, Next.js42

[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.

[정직하게 배워보는 Next js] 페이지를 연결하기 위한 Link-Component그리고 Pre-Fetch 해당 블로그 시리즈는 정직하게 배워보는 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. 29.

[정직하게 배워보는 Next js] create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 해당 블로그 시리즈는 정직하게 배워보는 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.

[정직하게 배워보는 Next js] create-next-app으로 Next 개발 환경 세팅하고 next js에 대해서 알아보자. 해당 블로그 시리즈는 정직하게 배워보는 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. 28.

[Redux] 리덕스를 구성하는 5개의 핵심 Action, Reducer, Store, Dispatch, Subscribe 오늘은 리덕스의 핵심 멤버인 5형제를 알아보자. Action Reducer Store Dispatch Subscribe 얘들을 알아볼 것인데 일단 오늘 가장 중요한 것은 흐름을 알아야한다. 다른 예제들과 다르게 이번 글에 나오는 소스코드는 본인이 직접 타이핑 하는 것을 권장하지 않는다. 그냥 흐름만 이해하는데 온 힘을 쏟을것을 추천한다. Redux 우리는 지난 시간 왜 리덕스를 알아야하는지와 리덕스는 어떤 특징을 갖고 있는지 알아보았다. 오늘 시간에는 리덕스를 구성해는 핵심 5형제에 대해서 알아볼 것이다. Action Reducer Store Dispatch Subscribe 얘들이 다음과 같은 구조를 띄게 된다. 이 그림을 잘 보고 하나 하나 따라가보자. 우선 시작하기 전에 리덕스를 패키지로 설치를 해.. 2020. 12. 1.

이전 1 2 3 4 5 6 7 다음

티스토리툴바