능히 해낼 수 있다

더보기 ✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 지난 이커머스 프로젝트에서 react-query 와 redux-tookit을 사용했었다. 둘 다 상태관리가 가능하지만 react-query는 데이터를 캐싱하는 역할로 사용을 했었고 redux-tookit은 전역(글로벌) 상태관리하는 역할로 사용했었다. 프로젝트를 진행할 때 두 라이브러리의 역할을 왜 분리해서 진행을 했었는지를 기록해두기 위해 react-query 와 redux-tookit의 역할, 특징 그리고 장점이 어떨 때 극대화 되는지를 적어두려 한다. react-query react-query 는 주로 데이터 요청, 캐싱, 비동기 처리, 서버 상태 관리와 같은 작업에 특화되어 있으며, 개발자가..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 리액트 서스펜스(React Suspense)는 리액트 애플리케이션의 비동기 데이터 처리를 간편하게 만들어주는 핵심 기능이다. 이를 사용하여 비동기 작업이나 코드 스플리팅을 할 수 있다. 또한 컴포넌트는 자식 컴포넌트가 준비될 때까지 로딩 중인 UI를 렌더링하도록 처리하고 데이터 fetching 등을 처리할 수 있다. 1. lazy lazy 함수를 사용하여 동적으로 코드를 분할하고, 필요한 컴포넌트를 비동기적으로 로딩할 수 있다. 이를 통해 초기 번들 크기를 줄이고, 애플리케이션의 로딩 속도를 향상시킬 수 있다. import React, { Suspense } from 'react'; // 비동기적으로 로딩..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 가령 데이터가 여러개 있는 경우엔 react에선 어떤 메소드를 사용해야할까? 그리고 이 데이터를 나열해야하는 상황에선 어떻게 해야할까? 물론 하나씩 뽑아서 쓰는 방법도 있겠지만 굉장히 비효율적이다. 때문에 JS에선 for문을 사용해 데이터 나열 시 사용하기도한다. 하지만 react에서는 map이란 메소드를 사용하는데, 이를 어떻게 사용하는지 예시와 함께 기록해 두려한다. 예시. 게시판 만들어보기 우선 코드파일은 전체를 보여줄 App.jsx, 글을 써서 저장하는 것이 아닌 임의로 게시글 데이터를 저장할 articleData.js 이러한 데이터 내용을 보여줄 Board.jsx로 나눠 작성하도록 한다. 우선 a..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). useEffect는React Hooks중에 하나로, 랜더링이 필요한 곳에 사용하는 내장메소드이다. 예를들어 컴포넌트를 만들었을 때, 컴포넌트가 시작될 때, 컴포넌트가 업데이트 될 때, 이 전체 주기를 생명주기라고 하며 이 과정에서 useEffect를 사용하면 된다. useEffect예시를 보기 전에 생명주기부터 살펴보자 0.Life Cycle(생명주기) 앞서 이야기 한 것 처럼 생명주기는 크게 세단계로 나눌 수 있다. mount(컴포넌트가 표시될 때) → update(컴포넌트의 "내부요소"가 업데이트 할 때) → unmount(컴포넌트가 사라질 때) 이 세단계 중 시점을 골라, 해당시점에 특정한 함수가 실..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. MVC 패턴 MVC 패턴은 Flux가 등장하기 전 대부분의 앱이 사용하던 소프트웨어 디자인 패턴이다. 주로 웹 및 응용 프로그램에서 사용되며, 코드의 재사용성을 높이고 유지보수를 용이하게 하기 위해 설계되었다. Model: 데이터 보관. 비즈니스 로직을 관리한다. View: 데이터를 화면에 보여주는 역할. UI를 나타낸다. Controller: 사용자의 입력을 받아 데이터에 대한 수정, 조회등의 역할. 모델과 뷰의 결합도를 낮춰 유연한 구조를 유지할 수 있도록 도와준다. MVC패턴의 가장 큰 장점은 역할을 분리함으로써 코드의 모듈성과 재사용성을 높여준다는 점이다. 이로 인해 개발자들은 각각의 역할에 ..