💻 개발자/✈️ React (5) 썸네일형 리스트형 [React] Basics in Redux without React (한글 번역) Redux를 배우기 위해 참고하기 좋은 레퍼런스가 있어 한글 번역 작업을 했다. Redux에 대한 기초가 궁금하신 분들에게 조금이라도 도움이 되었으면 좋겠다. 원문은 아래에 링크로 첨부한다. https://www.robinwieruch.de/react-redux-tutorial#what-is-redux React Redux Tutorial for Beginners [2019] - RWieruch A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application.. [React] Redux 상태관리 기초 Redux 란? Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. => Redux는 자바스크립트 애플리케이션에서 예측 가능한 상태 관리를 해주는 container 이다. state 란? React에서 State는 Class component 안에서 관리 Component 간의 정보 공유 형제 컴포넌트들 간에 데이터를 주고받을 때, 부모 컴포넌트를 통해서 주고 받을 수 있다. (자식 간에 .. [React] 프론트엔드 개발에서의 상태 관리 기초 상태란? UI에 동적으로 표현될 데이터 Side Effect란? 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 대표적인 예: 네트워크 요청 (백엔드 API 요청) 상태 두 가지 구분 로컬 상태 전역 상태 특정 컴포넌트 안에서만 관리되는 상태 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 대부분의 경우 form(input box, select box, radio button 등)을 이용한 상태는 로컬 상태 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 서로 다른 출처(source)가 있어도 상관없지만 서로 다른 컴포넌트가 동일한 상태를 다룰 때에는, 서로 다른 출처로 부터 가져오는 것은 피해야 한다. 전역 상태에서의 데이터 무결성 데이터 무결성이란? 데이터의 정확성을 보.. [React] CSS in JS 방법론 (feat. Styled-Component) 1. CSS 방법론들의 특징 및 장단점 특징 장점 단점 CSS 기본적인 스타일링 방법 - 일관된 패턴을 갖기 어려움, !important의 남용 SASS (preprocessor) 프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기 변수/함수/상속 개념을 활용하여 재사용 가능 CSS의 구조화 전처리 과정이 필요, 디버깅의 어려움이 있음 컴파일한 CSS 파일이 거대해짐 BEM CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론 네이밍으로 문제 해결, 전처리 과정 불필요 선택자의 이름이 장황하고, 클래스 목록이 너무 많아짐 Styled-Component (CSS-in-JS) 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리 CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 .. [React] 컴포넌트 단위로 개발하기 (feat. CDD & Storybook) 1. Component-Driven Development(CDD) 기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었다. 페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다. 그런데 기획자가 버튼에 대한 기획을 이전에 요청했던 버튼과 똑같이 사용하도록 요청했다. 이럴 때 디자이너와 개발자는 이 부분을 모두 새로 만들어야 하는 걸까? 여러 프로젝트 혹은 여러 팀간에 간은 UI 컴포넌트를 공유한다면 이런 고민을 하지 않아도 된다. 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결하 수 있다. 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven.. 이전 1 다음
