프로그래밍
-
[Article] React 렌더링 동작에 대한 (거의) 완벽한 가이드(1편)프로그래밍/React 2023. 11. 21. 21:05
개요 랜더링이란? React의 랜더링방식 랜더링 성능 개선 Context와 랜더링 동작 Redux와 랜더링 동작 React의 향후 개선사항 기타 랜더링이란? 현재 porps 및 상태를 기반으로 React가 컴포넌트에게 UI영역이 어떻게 보이길 원하는 지 설명을 요청하는 프로세스 랜더링 프로세스) 프로세스동안 React는 컴포넌트 트리의 루트에서 시작해서 업데이트가 필요한 모든 컴포넌트를 찾기 위해 아래로 순회한다. 컴포넌트 랜더 출력은 일반적으로 JSX구문으로 작성되며 Javascript가 컴파일되고 React.createElemet()를 통해 createElement라는 DOM객체와 유사한 객체로 반환된다. 이후 재조정을 통해서 업데이트 내용을 수집하여 DOM요소에 딱 한번 적용시켜 업데이트 내용을 반..
-
[TailwindCSS] TailwindCSS사용 5가지의 모범사례프로그래밍/CSS 2023. 11. 21. 19:34
개요 프로젝트에 디자인 시스템이 있어야 한다. 컴포넌트 기반 접근 방식을 사용하고 있어야 한다. 유틸리티 클래스 수를 줄여라 디자인토큰을 그룹화하고 의미적으로 이름 짓기 클래스 순서를 유지해라 사용하지 않는 클래스는 빌드에서 제외해봐라 스타일 덮어쓰기 및 확장 시 불일치 방지 1. 2. 재사용가능하게 컴포넌트 만들어서 거기다가 CSS설정해서 반복하는 걸 최대한 줄여라 3. 유틸리티 클래스 수를 줄여라 ex) pt-4 pb-4 => py-4 4. 명확한 변수명과 코드 명확성을 위한 규칙은 클린 코딩습관에 좋다 ex) bright-red와 같은 이름보다 error와 같이 간결하게 일관성을 높여라 5. 클래스 순서를 정렬해서 보기 편하게 만들어라 Doc (tailwindCSS 공식 prettier) 6. ta..
-
[SWR] Data의 reavalidate, mutate 활용프로그래밍/React 2023. 11. 3. 11:39
swr의 기본적인 사용방법에 대해서는 다른 글을 참고하는게 낫다 이것은 오로지 swr을 통해서 가져온 data를 어떻게 revalidate하는게 좋고 mutate를 어떨 때 사용하는게 좋고 optimistic UI를 어떻게 사용해야하는지에 대해서 내가 볼려고 적어 놓은 것임 개요 SWR의 이점 revalidate란? mutate란? optimisticUI란? key의 활용 (조건부 데이터 가져오기, token전달) SWR 장점 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 React-query와 마찬가지로 데이터를 불러올 때 사용되는데 SWRconfig를 통해 전역설정만 하고 fetcher만 설정해 놓는다면 간단하게 사용할 수 있는 구조이다. (전역설정 안해도 됨 그러면 따로 fetcher를 매번 작성..
-
[전역상태관리] Recoil프로그래밍/React 2023. 11. 2. 21:03
recoil을 사용하기에 앞서 상태관리라이브러리로써 가장 많이 사용되는 Redux와 비교를 안해볼 수 없다. 상태관리 비교 개요 RecoilRoot Atom Selector Recoil-persist RecoilRoot export const App = () => { return ( ) } Atom import {atom} from 'recoil'; export const todoState = atom({ key: "todoState", default: [] }) 장점 Redux에 비해 적은 boilder plate 사용하기 편한 구조 Recoil에서 가장 좋은 점은 학습하기 쉬운 구조로 되어있다는 것이다. React를 사용하면 기본적으로 사용하게 되는 useState와의 구조가 매우 흡사하기 떄문이다...