react

urTweet
[modules] React + Data fetch handling
고민하게 된 시점 나의 최대 관심사는 뷰(View)를 작업하기 위함이다. 컴포넌트의 역할은 단순히 데이터가 오면 뷰를 보여주기만 하면 된다. 하지만, 여기서 다이나믹 뷰를 위해 비즈니스 로직을 컴포넌트 공간에서 작성하게 되면, 의존성 결합이 상당하다. 오직 뷰만 작업했던 공간이, fetch("url")로 데이터 오고 가는 형태까지 작성하게 되었다. function App() { const [data, setData] = useState({ hits: [] }); const [query, setQuery] = useState('redux'); const [url, setUrl] = useState( 'https://hn.algolia.com/api/v1/search?query=redux', ); const..
→2021.11.22
urTweet
[setting] React 컴포넌트 분리와 폴더 구조화
Preview React를 배우면서 좋았던 점은 라이브러리라는 점이다. 단점은 라이브러리라는 점이다. 프로젝트마다 특색이 다르기 때문에, 아키텍처 구성이 달라질 수 있어 프론트 작업 시 자유도가 높아질수록 해당 프로젝트의 맞게 아키텍처를 구성할 수 있었다. 하지만, 자유도가 높아짐에 따라 폴더구조와 컴포넌트 사고방식을 생각하는 시간 비용이 상당히 높았다. 처음으로 리엑트 프로젝트 도입한 시점에서는 페이지도 단순하고 리액트를 사용에만 집중을 가졌다. 하지만, 점차적으로 페이지가 늘어나고, 계속해서 컴포넌트 분리를 하고 해당 컴포넌트를 어디 폴더에 넣을지 고민이 커졌다. 이슈 처리에만 집중을 하고 싶은데 계속해서 부가적인 요인으로 나를 너무 괴롭혔다. 그래서 나만의 컴포넌트 분리 방식과 폴더 아키텍처 방식을..
→2021.11.13
urTweet
[helper] Redux + Redux-saga
Preview redux는 단순히 전역 상태 관리를 위한 도구였다. 하지만 우리는 data fetch handling을 통해서 정보 저장을 많이 하기 때문에 redux-saga(middleware)와 redux 결합을 많이 이용하고 있다. (redux-toolkit에서는 crateAsyncthunk가 있다) 여기서 api 추가할 때마다, action과 fetch 상태를 만들어줘야 하는 중복 패턴이 발생하게 되어 이것을 쉽게 해결하고자 helper 함수를 제작하였다. helper/type.d.ts 전체 코드 helper에서 공통으로 사용하는 type 관리 코드 설명 import { ActionCreatorWithPreparedPayload } from '@reduxjs/toolkit'; import { F..
→2021.11.12
urTweet
[setting] Next + Redux
Preview reducer, saga, store, type 설정 store/rootReducer.ts 전체 코드 reducer 여러 reducer 들을 combineReducers로 하나로 묶음 const reducer = combineReducers({ [FETCH_STATUS]: fetchStatusReducer, [USER]: userReducer, [POST]: postReducer, [HASHTAG]: hashtagReducer, }); RootState[type] redux에서 state 타입을 항상 써야 하기 때문에 import 하지 않고 global 영역으로 declare 선언 declare global { type RootState = ReturnType; } rootReducer n..
→2021.11.11
urTweet
[setting] Next + Typescript Environment Setup
Preview Next + Typesciprt + Eslint + Prettier code convention git 전략 Next 참고 TypeScript 참고 Eslint, Prettier config eslint prettier Naming event handler naming => handle[action][target] interface naming => 대문자로 시작하는 명사 props naming api에서 받은 복수 데이터: [api 받은 데이터]ListData api에서 받은 단수 데이터: [api 받은 데이터]Data 일반 복수 데이터: [해당 데이터]List 일반 데이터: [해당 데이터] boolean 데이터: is[Action] Configuration Management branc..
→2021.11.11

• 이전
• 1
• 다음