본문 바로가기

장원익 기술블로그

📺 Front End71

[정직하게 배워보는 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.

[Redux] 리덕스를 배우기 전에 리덕스의 필요성에 대해서 알아보자. 여기 리덕스를 왜 써야하는지 아주 유명한 그림이 있다. 리덕스는 Application의 상태를 Global하게 관리해준다는 State Management Lib이다. 나도 그렇지만 보통 사람들이 리덕스를 처음으로 마주하게될 때는 어떤 한 라이브러리나 프레임워크에서 문제점을 발견하고 그 문제를 해결하기 위한 방법을 모색하다 만나게 된다. 그 문제라고 하면 바로 Local State Local State local state는 이름에서도 알 수 있듯 Global State와 반대되는 말이다. 위의 그림에서 Without Redux에 화살표로 움직이는게 state이고, 이 state들이 앞뒤로 한 칸씩만 움직일 수 있다는 것을 알 수 있다. 이게 바로 Local State이다. 정확히는 이게 Local Sta.. 2020. 12. 1.

[React-Spring 애니메이션] 리액트 스프링으로 3D 카드 만들기 오늘 해볼 것은 위와 같이 움직이는 카드 뷰를 만들어볼 것이다. Index.js import React from 'react' import ReactDOM from 'react-dom' import { useSpring, animated } from 'react-spring' import './styles.css' const calc = (x, y) => [-(y - window.innerHeight / 2) / 20, (x - window.innerWidth / 2) / 20, 1.1] const trans = (x, y, s) => `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})` function Card() { const [pro.. 2020. 11. 4.

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

티스토리툴바