본문 바로가기

📺 Front End/-- react & redux & nextjs33

[React-redux] 늘 그렇듯 Todo List 를 만들어보며 배우는 리액트 리덕스 오늘은 React 에서 Redux 를 사용하는 방법에 대해서 알아보도록 하겠다. 그러기 위해서는 우선 2가지 기술이 선행되어야 한다. React와 React-Hooks Redux 의 기본 Concept 위 내용들을 모른다면 조금 힘들어질 수 있으니 위 링크에서 확인하는 것도 좋은 방법인 것 같다. 목차 redux와 react-redux의 차이 redux 의 기본 개념 구성 요소 Provider useDispatch() useSelector() react-redux 로 todo list 만들기 프로젝트 만들기 의존성 추가 styled-components react-redux UI 작업하기 홈 화면 만들기 리덕스 작업하기 action type 만들기 action creator 만들기 reducer 만들기 s.. 2021. 6. 10.

[Next.js] Next.js 프로젝트에서 Storybook으로 TDD 하기 (Feat. Atomic Design Pattern) Storybook이란? Storybook은 UI 구성 요소(컴포넌트)를 개발하기위한 오픈 소스 도구이다. React나 Vue를 비롯한 컴포넌트 기반 UI 라이브러리들이 많아진 현대의 웹 Front개발 생태계에서는 컴포넌트 하나 하나의 역할이 매우 중요해졌다. 여기서 컴포넌트는 외부에 영향을 받지 않게 Isolated 되어야 한다. 그러기 위해서 Atomic Design Pattern이라는 것이 등장하였고 그에 따라서 UI 자체의 렌더링에도 테스트를 신경쓸 수 있게 되었다. Storybook은 사실 테스트에만 국한된 라이브러리는 아니고 개발과 이해관계자들 사이에서의 소통과 Docs 및 Props Test를 진행해주는 컴포넌트 기반 오픈 소스 라이브러리이다. 우리는 이 Storybook을 통해서 TDD를 진.. 2021. 1. 18.

[Next.js] _document.js로 레이아웃 템플릿을 사용해서 html 과 body 태그 커스터마이징 하기. Document 컴포넌트 Next.js에는 태그와 태그를 조작하기 위해서 컴포넌트를 제공한다. Build 시점에 _document.js파일을 pages 디렉토리 안에서 탐색하고 를 extends 한 컴포넌트를 이용해서 커스텀 설정을 받아들히는데, 이는 필수 파일은 아니며, 만약 우리가 커스텀하지 않으면 기본 Next의 모듈에 존재하는 _document.js 파일을 실행시킨다. 프로젝트가 커질 수록 HTML 태그를 조작해야할 일들이 많아지므로 우리는 _document.js의 컴포넌트를 다룰 수 있는 능력이 있어야 한다. 기본 구조 pages 디렉토리 아래에 _document.js파일을 생성한다. import Document, { Html, Head, Main, NextScript } from 'next/d.. 2021. 1. 3.

[Next.js] renderPage 함수로 styled-components 오류 방지하기. React 에서 스타일링을 위한 라이브러리에서는 개인적으로 단연 styled-components가 압도적으로 좋다고 생각한다. 하지만 Next에서는 styled-components가 제대로 동작하지 않을 수 있다. 오늘 그 오류들을 분석해보고 어떻게 하면 해결할 수 있는지 알아보자. 그냥 styled-components를 사용한다면 어떤 문제가 생가나요? Next.js 앱에서 styled-components를 사용하면 스타일이 적용되지 않고 일정 시간 이후에 스타일이 적용된다. 마치 CSS 파일이 로드되지 않다가 갑자기 로드되는 것 처럼 보이는데, 이는 UX에서 나쁜 평가로 각인될 수 있고 사용자에게 아주 불쾌한 경험을 선사할 수 있다. 왜 그런 문제가 생기나요? Next는 우선 모든 페이지가 Pre-R.. 2021. 1. 3.

이전 1 2 3 4 ··· 9 다음

티스토리툴바