본문 바로가기

장원익 기술블로그

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

[styled-components] ThemeProvider에서 MediaQuery를 적용하는 2가지 방법 이 글은 Styled-components의 ThemeProvider에 대한 기본적인 선행 지식이 필요합니다. 혹시 ThemeProvider에 대한 정보를 확인해보고 싶다면 ThemeProvider로 공통 스타일 속성 관리하기를 방문해서 가볍게 읽고 와보세요. 그럼 더 도움이 될거에요 :) 어떤 종류의 언어나 도구가 되었던 웹 프론트의 스타일링을 하는 과정에는 많은 노력과 힘이 들어간다. 그 중에서도 모바일과 웹의 스타일을 따로 나누는 미디어 쿼리 부분에서 굉장히 반복되는 작업을 많이 하게 되는데, 이 작업을 우리는 해결하는 방법을 알고 있다. 바로 ThemeProvider. 오늘은 이 ThemeProvider를 통해서 미디어 쿼리를 좀 더 쉽게 사용하는 방법에 대해서 알아볼 것이다. 그 전에 미디어 쿼리.. 2021. 1. 2.

[styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라는 것이었다. 약 15개의 컴포넌트와 12개의 섹션과 3개의 페이지로 이루어진 리액트 앱을 만들면서 각각의 컴포넌트에 맞는 style.js 파일을 작성했다. 하지만 그 당시에는 CSS를 공통으로 관리할 생각보다는 빠르게 프로젝트를 끝내고싶은 마음이었어서 공통 스타일에 관한 생각의 여유가 없었다. 그래도 마음 한켠에 불안이 있었는데, 그 불안이 가져올 문제점은 다음과 같다. 매 컴포넌트가 증가함에 따라 스타일 코드의 일관성이 떨어진다. => 유지보수 비용의 증가 스타일 속성값들이 중구난방이라 어떤 속성을 갖고있는지 코드로 확인이 어렵다 => 협업에서의 문제 스타일마다 다른 속성.. 2021. 1. 2.

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

티스토리툴바