프로젝트 ESLint 설정 in VSCode
2023. 10. 27. 15:07
Front-End/React
React 프로젝트를 개발할 때 각종 편리했던 기능들에 대해 정리해보려 합니다. 그 중 코드를 깔끔하게 정리해주는 EsLint와 Prettier에 대해 작성해보겠습니다. 정의 ESLint Javascript, JSX의 코드를 분석하여 문법 오류나 안티 패턴을 찾아주거나 일괄된 코드 스타일로 작성하도록 코드 포맷을 만들 수 있는 라이브러리 입니다. 그 중 외부에 오픈되어 있는 코딩 규칙도 사용이 가능한데 유명한 Airbnb, Google 등의 Style을 제공합니다. 아래부턴 VScode를 기반으로 설명합니다. Prettier Prettier는 코드를 읽고 다시 작성하여 코드 스타일을 일관성 있게 맞춰주는 도구입니다. ESLint와 함께 사용할 경우 코드 스타일 관련된 ESLint 규칙을 비활성화하고 P..
[React] 중앙상태관리 Context, Redux, Recoil
2023. 7. 28. 19:04
Front-End/React
시작하며 React는 컴포넌트 기반의 라이브러리여서, 작은 컴포넌트들이 모여서 복잡한 구조를 구성하게 됩니다. 앱의 규모가 커질수록 상태관리가 점점 복잡해지고 컴포넌트들 간의 데이터 흐름을 효율적으로 관리하기가 어려워집니다. 이러한 상태 관리의 어려움을 해결하기 위해 상태관리 라이브러리를 사용할 수 있습니다. 상태관리 라이브러리는 앱의 전역 상태를 효과적으로 관리하는 기능을 제공합니다. 이를 이용해서 컴포넌트들 간에 데이터를 손쉽게 공유하고, 상태를 일관성있게 업데이트할 수 있습니다. 덕분에 애플리케이션의 복잡성을 줄이고, 코드 유지보수성을 높이는데 큰 역할을 합니다. 상태관리 라이브러리를 사용하면 앱의 전역 상태를 효과적으로 관리할 수 있습니다. 예를 들어서 부모 컴포넌트의 상태를 하위 컴포넌트로 계속..
[React] Concurrent UI 패턴으로 개발하기
2023. 7. 2. 23:49
Front-End/React
시작하며 프론트엔드 개발자는 웹 애플리케이션을 개발할 때 항상 사용자 경험에 대해 고민하게 됩니다. 사용자들은 웹 앱에서 빠른 응답성, 부드러운 애니메이션, 실시간 업데이트 같은 매혹적인 기능을 기대하고 있습니다. 이러한 기대에 부응하기 위해 프론트엔드 개발자는 사용자가 서비스를 정상적으로 사용할 수 있도록 컴포넌트를 설계하고 최적화하는 등의 고민을 하고 있습니다. 이러한 고민을 해결하기 위해 React Concurrent UI 패턴은 많은 개발자들에게 새로운 개발 방법을 제시하고 있습니다. Concurrent UI 패턴은 React 애플리케이션의 동작 방식을 개선하여 사용자 경험을 향상시키는 방법을 제공합니다. React Concurrent UI를 사용하면 복잡한 UI 상황에서도 부드러운 애니메이션과 ..
JavaScript 비동기 통신 / React-Query vs SWR
2023. 4. 30. 19:23
Front-End/React
비동기 통신은 현대의 웹 페이지에서 사용자에게 더 나은 사용성을 제공하기 위해 필수적으로 구현해야 하는 통신 방법 입니다. 동기 통신은 요청과 응답이 순서대로 진행되어서 서버에서 응답이 오기 전까지 브라우저에선 아무 기능도 수행하지 못해서 네트워크가 느린 사용자일 수록 부정적인 경험을 제공하게 됩니다. 하지만 비동기 통신은 화면이 렌더링되는 동안에도 데이터를 받아올 수 있고, 데이터 요청을 보낸 이후에도 자유롭게 동작 수행이 가능합니다. 요청을 보낸 이후 다른 작업을 수행하다가, 응답이 온 이후 결과를 보여주는 방식을 통해 사용자의 부정적 경험을 최소화 시킬 수도 있습니다. JavaScript 에서는 XMLHttpRequest, Fetch API 등의 라이브러리를 통해 비동기 통신을 처리할 수 있습니다...
[React.ts] 객체 리터럴을 이용한 조건문 줄이기
2022. 11. 4. 20:47
Front-End/React
Front End 를 개발할 때 같은 공간의 컴포넌트 안에서 특정 값에 따라 화면이 바뀌는 분기 처리가 필요했었는데 기존엔 if 문이나 switch, input === "A" && 등으로 처리해줬었다. 해당 방법은 분기가 하나 추가되거나 삭제될 때 마다 해당 분기가 들어간 코드들을 다 찾아가서 수정해줘야 하는 유지보수가 굉장히 안좋은 코드였다. 수정 전 { status === "create" && } { status === "update" && } { statue === "delete" && } 그런데 위 처럼 노가다성 짙은 코드를 쓸 필요 없이 객체 리터럴을 활용해서 내부 프로퍼티를 호출할 때 [Key String] 을 사용하면 아래처럼 코드를 수정할 수 있다. 수정 후 const editCompone..
[React.ts] 상위 컴포넌트로 값 전송
2022. 8. 22. 13:54
Front-End/React
React 프로젝트를 개발할 때 업데이트 되는 컴포넌트를 줄이기 위해 기능별로 최대한 나누어서 구현하게 되는데 이 때 하위 컴포넌트로 값을 넘겨줘야할 때가 많이 생깁니다. 상위 컴포넌트에서 하위 컴포넌트로 값을 넘겨줄 땐 Props를 사용하면 되지만 하위 컴포넌트에서 Props로 받은 값을 함수를 통해 값을 가공하려고 변경해봐도 화면이 리렌더링 되지 않습니다. 이 때 상위 컴포넌트로 변경할 값을 다시 던져주고 상위 컴포넌트에서 함수를 통해 값 변경 후 다시 하위 컴포넌트로 던져줘야 하는데 이 때 값을 전송하는 방법에 대해 작성해보겠습니다. 구현할 함수를 상위 컴포넌트에서 작성해준 뒤 하위 컴포넌트에 Props로 던져주면 됩니다. 부모 컴포넌트 import { useState } from "react"; ..
[React] Immer 를 이용한 불변성 관리
2022. 8. 2. 21:03
Front-End/React
React의 불변성 관리 React는 함수형 프로그래밍을 지향하는데 함수형 프로그래밍의 특징중 하나가 순수 함수를 사용하는 것 입니다. 여기서 순수 함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수 입니다. 동시에 순수 함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻합니다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊이 연관되어 있습니다. React 에서 불변성을 지키지 않을 경우 화면이 리렌더링 되지 않습니다. 잘못된 예시 import { useState } from "react"; export const ReactComponent = () => { const [object, setObject] = useState( { count: 0..
[React] 주로 사용되는 필수 Reack Hook
2022. 8. 2. 20:57
Front-End/React
React 리엑트 컴포넌트는 특정 상태가 변화할 때 화면을 다시 그리는 특성을 지닌다. 이를 렌더리이라고 한다. 컴포넌트의 Props나 State 가 변경되면 반응하며 렌더링을 발생시켜 요소를 전부 새로 그리는 작업을 수행한다. 모든 요소에 대해서 리렌더링이 발생하면 성능이나 동작상 오류가 생기므로 여러 Hook을 이용하여 이를 제어하여야 한다. useState UI와 반응하여 업데이트 되는 상태를 정의한다. 변화가 일어나면 현재의 모든 하위 요소에 대해 렌더링을 발생시킨다. useMemo 컴포넌트가 리렌더링 될 때 컴포넌트 리렌더링이 필요 없는 부분을 메모이제이션하여 처리하기 위해 사용한다. static한 성질(한번 출력 후 변하지 않는 요소 )을 지니는 컴포넌트의 출력에 쓰이며, 특정 의존성이..
[React] CRA보단 Vite / Vite + React.ts 프로젝트 생성
2022. 8. 2. 20:55
Front-End/React
Vite VS CRA ( Create React App ) 우선 주인공 설명에 앞서서 CRA 부터 알아보겠습니다. CRA CRA는 리액트 팀에서 추천하는 공식 보일러 플레이트로 가장 대중적으로 사용되고 있습니다. 기본적으로 Webpack을 사용합니다. Webpack은 자바스크립트로 개발된 번들 툴로 여러개의 파일( 소스, css, 사진 등 )을 하나로 합쳐서 하나의 번들로 만들어서 전송하는 방식입니다. JS의 파일을 저장하지 못하고 매번 로딩을 해야한다는 단점은 극복되었지만 가장 큰 문제는 속도였습니다. 수정할 때 마다 모든 파일을 하나로 합치는 빌드 과정을 거쳐야 해서 속도가 상당히 느립니다. 그래서 개발자들은 Low-Level-Language를 활용하여 자바스크립트 툴을 만들어냈는데 그렇게 생겨난게 ..