서른, 프로그래머 입문하다
- React - Suspnese 최종 수정일 : 2024-08-01Suspense비동기 로직을 더 선언적이고 관리하기 쉽게 만들어, 개발자 경험을 크게 향상시킨다. 이는 복잡한 UI와 데이터 흐름을 가진 현대적인 웹 애플리케이션 개발에 매우 유용한 도구이다. 기본 설명1. 기존 비동기 처리의 문제점React 18 이전 버전에서는 주로 코드 스플리팅에만 사용 가능했다(16.6ver에서 등장).React에서 비동기 데이터 로딩은 컴포넌트 내부에서 처리됐다. 이로 인해 많은 조건부 렌더링 로직과 로딩 상태 관리를 필요로 했다. 이는 복잡한 애플리케이션에서는 유지보수를 어렵게 만들었다. 2. Suspense의 해결책Suspense는 비동기 작업을 컴포넌트 외부로 추상화시켜 로딩 상태를 선언적으로 정의할 수 있게 해준다. 또한, 조건부 렌더링을.. 2024.08.01
- Flux 패턴 플렉스(Flex)로 디자인하고 플럭스(Flux)로 설계하라.기존 애플리케이션에서는 MVC 패턴을 사용하고 있었다. MVC는 Model, View, Controller의 약자이다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여진다. 여기서 중요한 점은 사용자가 View를 통해 데이터를 입력하면 Model을 업데이트를 할 수 있었다는 데 있다. 즉, 데이터가 양방향으로 흐르는 경우가 있었다. 문제는 여기에서 시작되는데, 애플리케이션의 규모가 커질수록 상호작용이 일어나는 경우가 늘어났다. 그로 인해, 데이터의 흐름이 복잡해지기 시작했다. 이로 인해, 애플리케이션의 동작을 예측하기가 어려.. 2024.07.27
- React Query - 기능구현 최종 수정일 : 2024-07-25기능구현Dependant Query만약 어떤 두 쿼리가 의존관계가 있어 특정 순서대로 실행이 되어야 하는 경우에는 useQuery()의 enabled 옵션을 사용할 수 있다. enabled 옵션을 사용하면 enabled 값이 true가 되어야만 해당 쿼리가 실행된다. 이렇게 어떤 특정 값이나 조건이 충족된 이후에 실행되는 쿼리를 Dependant Query라고 한다.Paginated Query리액트 쿼리에서는 좀 더 부드러운 UI 전환을 위해 placeholderData 라는 것을 설정해줄 수 있다. useQuery()에서 placeholderData 옵션에 keepPreviousData 혹은 (prevData) => prevData를 넣어주면 페이지가 새로 바뀌더라도 .. 2024.07.25
- 스토리북(Storybook) 최종 수정일 : 2024-07-24스토리북(Storybook)프론트엔드 개발자로서 컴포넌트를 개발하다보면 여러 문제가 발생한다. 1) 중복 컨포넌트 개발여러 명의 개발자가 한 서비스를 개발하다보면 각 개발자가 어떤 컴포넌트를 만들고 있는지 실시간으로 알기 쉽지 않다. 그로 인해, 비슷한 컴포넌트가 이미 존재함에도 중복되는 컴포넌트를 만들 가능성이 생긴다. 2) 디자이너와 기획자와 소통할 때디자이너 및 기획자가 요구한 디자인에 정확한 사이즈, 간격, 색상이 정해지지 않은 경우가 있는데, 이런 경우 개발자가 주관적인 느김으로 컴포넌트를 일단 만들고 피드백을 받게 된다. 하지만 컴포넌트 하나를 만드는 과정에서 여러 번의 피드백이 오갈 수 있는데, 이 과정은 시간이 걸릴 수밖에 없다. 개발자는 UI 부분 이외에.. 2024.07.24
- Next.JS 폴더구조 (Page Router & App Router) 최종 수정일 : 2024-07-22Next.JS 폴더구조 (Page Router & App Router)1. Page Routermy-next-app/├── public/│ ├── favicon.ico│ └── images/├── src/│ ├── components/│ │ └── MyComponent.js│ ├── pages/│ │ ├── api/│ │ │ └── hello.js│ │ ├── _app.js│ │ ├── _document.js│ │ ├── index.js│ │ └── about.js│ ├── styles/│ │ ├── globals.css│ │ └── Home.module.css│ └── utils/.. 2024.07.22
- React Query의 옵션과 리턴 값 최종 수정일 : 2024-07-22React Query의 옵션과 리턴 값useQuery -TanStack Query 공식 문서 useQuery | TanStack Query React DocsDoes this replace [Redux, MobX, etc]? reacttanstack.com 로딩과 에러 처리 구현하기리액트 쿼리에서는 에러가 발생하면 기본적으로 3번의 재시도를 한다. 그러나, 테스트를 위해서는 retry 횟수를 0으로 조정하면 에러 화면을 더 발리 볼 수 있어 편하게 테스트할 수 있다.function HomePage() { const { data: postsData, isPending, isError, } = useQuery({ queryKey: ['posts'],.. 2024.07.22
- React Query의 캐시 최종 수정일 : 2024-07-22React Query의 캐시유저가 자주 보는 데이터를 어딘가에 저장해 두었다가 백엔드에 요청할 필요 없이 바로 보여주기 위해 캐시(cache)라는 것을 사용한다. 캐시(Cache)데이터를 미리 복사해 놓는 임시 장소를 말한다. 보통 저장 공간의 크기는 작지만, 데이터를 가져오는 속도는 아주 빠르다는 특징이 있다. 따라서 자주 사용하는 데이터를 캐시에 저장해 두면, 해당 데이터를 훨씬 빠르게 가져와 사용할 수 있다. 웹 브라우저는 기본적으로 캐시를 사용해 속도를 높이고 네트워크 비용을 아낀다. 이처럼 캐시를 사용하는 것을 '캐싱'이라고 한다.React Query의 캐시리액트 쿼리 역시 이러한 캐싱을 지원한다. 그렇다면, 언제 데이터를 백엔드에서 다시 받아오는 refetch.. 2024.07.22
- React Query 최종 수정일 : 2024-07-21React Query1. 상태 관리를 하는 데이터는 두 가지로 나뉜다.A. 클라이언트 상태 데이터웹사이트의 어떤 메뉴가 열렸는지 닫혔는지, 혹은 사용자가 어떤 버튼을 눌렀는지 아닌지와 같은 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와는 상관없이 웹 브라우저 안에서만 사용하는 데이터 B. 서버 상태 데이터가능한 한 최신 상태로 유지되어야 한다.데이터를 받아온느 중에는 어떤 화면을 보여줄 것인지, 로딩과 에러 상황은 어떻게 알 수 있는지, 서버로부터 받아 온 데이터들은 어떻게 관리할지, 데이터를 주기적으로 받아오려면 어떤 식으로 구현해야 할지 등등 여러 가지를 고려해야 한다. 흔히 알려진 상태 관리 라이브러리들은 클라이언트 상태 데이터들을 잘 관리하기 위해.. 2024.07.22
- Next.js 배포 정리 최종 수정일 : 2024.07.22Next.js 배포 정리배포 준비배포하기 전에 next build 명령을 실행해야 한다. 이를 통해 최적화된 프로덕션 빌드를 생성한다.Next.js 애플리케이션은 여러 방법으로 배포할 수 있다.Node.js를 지원하는 호스팅 서비스를 사용Vercel서버리스 배포 플랫폼 - ex) Netlify서버리스 플랫폼은 Next.js 애플리케이션에 특히 적합하다. Next.js의 하이브리드 렌더링 기능을 최대한 활용하여 CDN에서 정적 생성된 페이지를 제공하면서 서버리스 함수를 통해 서버사이드 렌더링 및 API 라우트를 처리할 수 있다. 플랫폼특징설명Vercel서버리스 플랫폼Next.js를 만든 회사Next.js에 대한 일급 지원을 제공한다.Netlify서버리스 플랫폼Next.j.. 2024.07.19
- 합성 컴포넌트(Compound Component) 패턴 최종 수정 : 2024-06-22합성 컴포넌트(Compound Component) 패턴그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이다.하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다. Context API를 사용해서 처음 작성해야 하는 코드가 꽤 많지만, 컴포넌트를 사용하는 곳에서는 하위에 어떤 컴포넌트가 있 는지 볼 수 있고, 위치도 자유롭게 수정 가능하다. # 장점1) 관심사 분리 : 부모 컴포넌트에 모든 UI 상태 로직이 있고 이를 내부적으로 모든 자식 컴포넌트에게 전달한다면 책임이 명확하게 구분된다.2) 복잡성 감소 : 속성을 특정 컴포넌트로 전달하는 props Drillingm과 달리 속성을 바로 자식 컴포넌트에 전달한다. 내부적으로.. 2024.06.23