프로젝트 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..
검색엔진최적화(SEO)
2023. 10. 22. 20:41
Front-End
검색엔진최적화(SEO) 사람들은 검색결과에서 다음 페이지로 넘어가는 일이 거의 없습니다. 그 중 상위 몇 개의 검색결과만을 보고 하나를 선택하여 클릭합니다. 따라서 아무리 좋은 내용물을 가지고 있더라도 검색엔진에서 상위에 노출되지 않는다면 사람들이 내용물을 찾아보지 않습니다. 검색엔진최적화는 검색엔진에서 상위에 노출되기 위한 방법입니다. 검색엔진은 크롤러라는 프로그램을 통해 웹 페이지를 수집합니다. 수집된 웹 페이지는 검색엔진의 알고리즘을 통해 순위가 매겨집니다. 검색엔진최적화는 검색엔진의 알고리즘을 이해하여 웹 페이지를 구성하는 방법을 의미합니다. 검색엔진의 알고리즘 검색엔진에게 높은 순위를 받기 위해서는 검색엔진의 알고리즘을 이해해야 합니다. 그러기 위해선 유명 포털 구글, 네이버, 다음 등의 검색엔..
메모리 사용량을 줄이는 JS 코드 패턴
2023. 10. 13. 01:11
Front-End/JavaScript
JavaScript에서 메모리 사용량을 효율적으로 관리하면 애플리케이션의 성능을 향상시키고 더 나은 사용자 경험을 제공할 수 있습니다. 이 포스트에서는 몇 가지 JavaScript 코드 패턴을 다루고 있으며, 이를 통해 메모리 사용량을 줄일 수 있는 방법을 설명합니다. Context의 정보가 많은 Closure 클로저는 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다. 클로저는 실행할 환경의 변수 스코프를 캡처하여 전달하여 실행할 때 외부 변수를 참조할 수 있게 합니다. 클로저를 통해 함수를 생성할 경우 함수 내부에서 사용되어야 하는 변수들이 메모리에 계속 남아있게 되어 메모리에서 손해를 볼 수 있습니다. 대량의 목록을 처리하는데 클로저를 사용할 경우, 많은 메모리를 사용하게 됩..
[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 등의 라이브러리를 통해 비동기 통신을 처리할 수 있습니다...
lit-element 간단 정리
2023. 1. 10. 23:59
Front-End
원래 회사에서 React Framework + TypeScript 기반의 프로젝트가 진행중이였었는데 회사에서 React를 도입한게 처음이라서 F/E에 추가인원투입을 위해선 React에 대한 전반적인 교육이 필요하였는데 React 교육이 하루 이틀로 끝날 것도 아니고.. 전반적으로 유지보수에서 어려움이 있어서 결국 React 프로젝트를 엎고 대신 그보다 좀 더 깊이가 얕은 lit-element 라이브러리를 사용하는 것으로 변경되었습니다. 그래서 이번에 lit element 를 사용하면서 중요한 부분들에 대해 정리하여 기록해두고자 합니다. Lit-Element 와 React Lit-Element 를 사용한 이유는 컴포넌트화를 통한 재활용 및 관리를 편하게 하기 위함이였습니다. React처럼 Custom El..
[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..