Web.d 썸네일형 리스트형 [React] For react States that represent only Valid State (w. Reducer) 내리 추가하는 상태에 따라 지수적으로 복잡도가 증가하고 코드의 유지보수가 힘들어지는 경우를 한 번씩은 경험해보았을 것이다. 그런 경험을 반복하지 않기 위해, 정말 간단하지만 중요한 이야기를 해보고자 한다. 혹은 Reducer에 익숙하지 않은 분들도 보면 도움이 될 것이다. 💠 Type 관점에서의 "유효한 상태 표현" 타입을 설계할 때는 어떤 값들을 포함하고, 어떤 값들을 제외할지 신중하게 생각해야 한다. “유효한 상태”만을 표현하지 않고 “무효한 상태”를 함께 표현하는 타입은, 혼란을 초래하고 타입 체크 오류를 유발하게 된다. 알맞는 글을 불러와 나타내는 웹 페이지를 구현한다고 가정하고, 대표적인 다음 예시를 살펴보자. 페이지는 내용을 로드하고, 그 이후에 화면에 표시한다. 상태는 다음과 같이 설계한다... 더보기 [리팩토링][북스테어즈] 9개월 묵은 코드 뜯어내기 (2) Recoil https://snupi.tistory.com/213 [리팩토링][북스테어즈] 9개월 묵은 코드 뜯어내기 (1) 데이터 구조 변경 서론 나의 첫 협업 프로젝트인 북스테어즈는 지난 9개월 가까이 개발 진척이 잘 안되었다. 4 Depth 까지의 꼬리 질문/답변 기능이 주범이다. 절대적인 리소스 투입도 적었고, 클라이언트 팀에서의 snupi.tistory.com (위 링크의 글을 보시면, 흐름 이해가 쉽습니다) 하나의 atom 상태를 가지고 컴포넌트마다의 커스텀 훅을 불러오려니, 중복적인 서버 통신이 일어난다. Recoil 로써 캐싱을 할 방법은 없을지 알아보자. Recoil Selector + Loadable 1. 효율적인 서버 통신 각 reviewId 에 맞는 책 정보 데이터를 비동기로 불러와 관리하고, .. 더보기 [리팩토링][북스테어즈] 9개월 묵은 코드 뜯어내기 (1) 데이터 구조 변경 서론 나의 첫 협업 프로젝트인 북스테어즈는 지난 9개월 가까이 개발 진척이 잘 안되었다. 4 Depth 까지의 꼬리 질문/답변 기능이 주범이다. 절대적인 리소스 투입도 적었고, 클라이언트 팀에서의 버그를 잡지 못해 지난 달에는 API 구조 변경까지 논의되었다. 애정하는 프로젝트로 사용자들을 만나고 싶다는 동일한 목표로 우리 팀은 지속해서 코드를 살펴보았고, 최근 들어 버그를 Fix 할 수 있었다. 이 Fix 작업으로 인해 코드를 리팩토링하며 서비스를 다시 만들어나가는 계기를 마련했다. 그 과정을 다시 복기하고 정리하고자 한다. 작업에 불을 붙인 에러 해결 신뢰 가능한 단일 출처를 지키지 못한 제어 컴포넌트와 비제어 컴포넌트의 결합 위 영상과 같은 꼬리 질문/답변을 React에서 권장하는 제어 컴포넌트만을.. 더보기 [CSS] 웹 앱의 사용성 높이기 서두 PWA 패키징을 적용한 서비스를 개발하며, 모바일 환경에서의 사용성에 대한 고민을 하게 되었다 https://www.piickle.link/ 내게 필요한 대화주제 추천, Piickle 대화주제 추천, Piickle www.piickle.link 🔗 Teo 님에게 멘토링 받은 사항들을 바탕으로, 생각보다 세심하게 보완할 수 있는 부분들이 많아 정리하고자 한다 모바일 환경이 주를 이루는 이 때에 웹 개발자로서 보다 더 네이티브 앱과 같은 사용감을 주기 위해 노력해보자 구현 사항 0. 모바일 테스트 우리 팀은 QA 테스트를 Android Chrome / iOS Safari / Kakao 인앱 브라우저 3가지로 두고 진행하였다 이외의 타겟 단말은 두지 않았고, 점유율이 높은 단말 위주로 개발을 진행하였다 .. 더보기 [Storybook][React] Storybook 기초 적용해보기 간단 설명 초기 세팅 Story 작성하기 Addons 마무리 1. 간단 설명 Storybook은 개발 모드에서 실행된다 비즈니스 로직과 Context로부터 UI 컴포넌트를 독립적으로 분리하여 만들 수 있도록 도와준다 React 이외의 React Native, Vue, Angular 그리고 Svelte에 대한 문서도 있다고 하니 참고하자 하위 컴포넌트 → 페이지 로 개발하는 컴포넌트 기반 개발(Component-Driven Development) (CDD) 방법론에 따라 UI를 만드는 것이 기본이다 2. 초기 세팅 // Add Storybook 및 Jest 테스트 환경 npx -p @storybook/cli sb init // story북 실행했을 때 컴포넌트 테이블 만들기 위해 설치 yarn add --.. 더보기 이전 1 2 3 4 5 ··· 10 다음
