나만의 개발 일기

[Vanilla-extract] Zero-runtime CSS

CSS-in-JS CSS-in-JS는 많은 인기를 얻었습니다. 현재 시점까지도.. 그 이유는 당연 React 때문일 겁니다.그래서 우리는 Emotion, styled-componets 를 사용해본 경험이 있을 겁니다. 그럼 우린 왜 사용하고 있었을까요?CSS모듈도 지역 스코프 스타일을 제공하지만, CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정합니다.이로써, 클래스 이름이 충돌나는 일은 없을 것이고, 어떤 CSS가 적용되었는지 우리는 한 눈아 알기 쉬울겁니다.또한, CSS에서 JS 문법을 사용할 수 있어서 props, state 등을 사용하여 중복된 코드를 줄일 수 있고, 컴포넌트 파일에 관련 코드들을 함께 작성이 가능하게 됩니다. 모든 기술에는 장점만 존재하지 않습니다. 단점은 무엇일까요? ..

[번역] 리렌더링을 수정하기 전에 느린 렌더링을 수정하세요.

성능은 심각한 문제이며, 우리는 가능한 빠르게 앱을 만들어야한다.이를 수행하는 방법은 최적화의 효과성뿐만 아니라, 코드의 복잡성(미래에 얼마나 빨리 개선 및 변경 할 수 있는지) 도 큰 영향을 미칩니다.React 최적화에 대해 사람들이 많이 언급하는 것 중 하나는 리렌더링 최적화입니다.function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount((c) => c + 1) return {count}}우리가 위 버튼을 클릭할 때 마다 우리는 리런데링이 일어난다고 생각합니다. 리렌더링은 무엇일까요?  리렌더링이란 무엇인가요?  React가 처음 출시되었을 때, 많은 사람들이 Virtual DOM 덕..

중복 호출 방지( 따닥 이슈)

흔하디 흔한 클릭버튼우리가 사용하는 대부분의 서비스는 클릭이다.클릭하여 돈을 송금하거나, 클릭하여 필요한 것들을 결제하거나.. 대부분 그렇다..하지만, 잘 생각해보면 개발자들은 이에 주의해야 할 점이 많다.function Button() { const handleClick = () => { } return 버튼}기본적인 버튼에 클릭이벤트를 다는 방법이다.흔히 말하는 '광클' 시 해당 함수가 무한정 실행된다.만약 처리를 안했다면, 돈을 송금할 때 여러번 중복 송금이 되거나, 물건 결제가 여러번 될 수도 있다. Debounce 는 안전할까? 이를 막는 방법은 Debounce 로 많은 글 및 chatgpt 가 알려주고 있다.import React, { useEffect, useRef } from "r..

[Recoil] 지원 중단

React 단짝React 에 있어서 상태 관리 라이브러리 종류도 다양하게 있고, 항상 옆을 지켜왔습니다.우리가 주로 사용하는 Redux, Mobx, Recoil 3대장 중에 Recoil은 2년전부터 업데이트가 잠정 중단됬다.  Recoil 문제점Recoil 은 현재 수 많은 닫히지 않은 이슈와, 문제들이 나열되어 있지만, 해결 되고 있지 않다.큰 이슈를 살펴봤을 때, 가장 핵심적인 문제는 다음과 같다. 메모리 누수 이슈- 자바스크립트는 참 편하다. 가비지컬렉션을 타 개발자보다 신경 쓰지 않아도 되서.. 가비지 컬렉션은 아래 글을 참고! [Garbage Collection]1. 가비지 컬렉션이란? - 할당된 메모리를 관리하는 기능 - 사용되지 않는 메모리를 식별하고 해제하여 프로그램의 메모리 누수를 방지하..

useEffect / useLayoutEffect

useEffect VS useLayoutEffect 둘의 가장 큰 차이점은 useEffect 는 비동기적으로, useLayoutEffect 는 동기적으로 동작한다는 것이다. useEffect 는 렌더링이 끝난 후 수행, useLayoutEffect 는 렌더링 전에 수행한다. useLayoutEffect 는 렌더링 파이프라인에 영향을 줄 수 있다는 점을 고려해야 한다. 하지만, 위와 같은 현상만을 목적으로 이 글을 포스팅 하지는 않았다. useEffect 는 업데이트 차단을 방지하기 위해 페인트 이후에 동작해야 하지만, 실제로는 페인트 후에 useEffect 가 실행된다는 보장이 없다는 것이다. useLayoutEffect 에서 상태를 업데이트하면 동일한 렌더링의 모든 useEffect 가 페인트 전에 실..

[Sentry] 프론트엔드 에러 추적하기

앞서... 우리 개발자들은 개발도 중요하지만, 버그 처리 또한 중요하다. 버그는 서비스 매출 하락, 신뢰를 잃는 등 크리티컬 한 문제와 엮여 있다. 버그의 원인을 파악하기 전까지는, BE / FE 중 어디에서 발생한 이슈인지 파악이 어렵다. 아무리 QA를 마치고 배포되었다고 해도 예상치 못한 원인의 버그를 마주 할 수 있다. 또한 간헐적으로 발생하는 버그로 사용자들이 버그제보를 해주지 않았고, 개발진들이 프론트 로깅을 하지 않았다면, 버그 유무의 정보를 영영 얻을 수 없게 될 것이다. 프론트엔드 오류 프론트엔드에서는 데이터오류, 화면오류, 네트워크 이슈, 크로스 브라우징, OS 업데이트 등의 오류가 있을 수 있다. 데이터, 화면 같은 경우에는 대부분 QA나 스테이징 환경에서도 충분히 재현된다. 하지만 크..

[Redux] State 초기화

리덕스 상태값 초기화 할 일이 작업하다보면 생각보다 많아 작성 interface TestType { testParam: string } const initialState: TestType = { testParam: '', } export const testSlice = createSlice({ name: 'testSlice', initialState, reducers: { // 초기화 reset: () => initialState, }, })

[React] 성능 최적화 전략

메모이제이션 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 발생 할 때 재사용하여, 불필요한 리렌더링을 방지하고, 렌더링 성능을 향상시킨다. useCallback() useCallback 을 통해 함수를 만든다면, 해당 함수를 저장해두는 역할을 한다. 아래 예제의 App() 이 재실행되면 해당 함수가 재생성 되지 않는다. 첫번째 인자로 function , 두번째 인자로 useEffect 와 같이 dependency 배열을 넣는다. 빈배열 일 경우, 어떠한 경우에도 해당 함수가 변경되지 않음을 뜻한다. function App() { const [callbackTest, setCallbackTest] = useState(false) // useCallback() const on..

리액트 vs 바닐라JS

1. 프레임워크가 할 수 있는 일은 모두 바닐라 JS 로 가능하다.그럼에도 불구하고 왜 프레임워크를 사람들이 사용할까..? 2. 데이터 변화의 적용이 편리하다.const element = document.querySelectorAll('.element');let innerText = '이걸로 다 바꿔줘'element.innerText = innerTextinnerText = '또 다 바꿔줘'만약 바닐라 JS 에서 데이터가 변해서 DOM 을 업데이트하려고한다면, 두 가지의 절차가 필요하다 - 바꾸려는 데이터가 쓰일 DOM 엘리먼트를 가져온다. - 변경 내용을 적용위의 코드에서 두가지 절차를 진행 한 후 '이걸로 다 바꿔줘' 는 DOM 을 업데이트 시켰지만, '또 다 바꿔줘' 라는 데이터는 변경 된 것만으로..

[React] 렌더링

1. 렌더링? 리액트 컴포넌트가 가지고 있는 props , state 등의 상태를 어떻게 UI 를 구성할 지, 컴포넌트에게 작업을 요청하는 행위 리액트가 렌더링 되는 부분은 public/index.html 파일과 src/index.tsx 파일을 살펴보면 알 수 있는데, 다음과 같다. const container = document.getElementById('root')! const root = createRoot(container) root.render() createRoot 를 통해 DOM 엘리먼트를 전달 후에, App 이라는 이름을 가진 리액트 엘리먼트를 root.render() 하는 방식이다. 2. 리렌더링은 언제 일어나는가? 리렌더링이란, 앞서 발생한 렌더링이 다시 렌더링이 되는 현상을 뜻하는데..

[React] 이미지 업로드시, 썸네일 확인하기

이미지 파일 업로드 시, 해당 파일의 썸네일을 보고 싶을 때가 있다. FileReader 기능을 사용해서 구현해보도록 하겠다. const handleFileUpload = (event: React.ChangeEvent) => { const [thumbnail, setThumbnail] = useState(''); const file = event.target.files?.[0]; if (file) { const reader = new FileReader() reader.onload = function (event: ProgressEvent) { const img = new Image() img.onload = function () { const canvas = document.createElement('..

[Next.js] Next 에서 Styled-componets 사용시 번쩍임 현상

Next.js 에서 styled-componets 를 그냥 사용하게 되면 className did not match 경고가 뜨고, css 가 적용이 되지 않은 상태로 번쩍임 현상이 일어난다. 이는 Next.js 에서는 최초 페이지는 SSR 되는데, 이 때 styled-components 의 CSS 가 Head 에 주입되게 해줘야한다. 1. nextConfig 에 styledcomponents 설정 할 것 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, compiler: { styledComponents: true } } module.exports = nextConfig 2. _document Head ..

[React] Virtual DOM

React 는 Virtual DOM 을 사용한다. 이 Virtual DOM 은 실제 DOM을 조작하는 방식이 아닌, 두개의 DOM 을 비교해 달라진 부분을 리렌더링 시켜주는 방식으로 작동한다. 물론 Virtual DOM 을 사용하지 않고 직접 DOM 을 바꾸는 방법이, 규모가 작고 정적인 이전의 웹 어플리케이션 이라면, 일반 DOM 을 직접 변경하는 것이 성능이 더 좋다. 그럼에도 불구하고 React 가 Virtual DOM 을 사용하는 이유는 무엇일까? Virtual DOM 을 사용하는 이유 React 는 대규모 SPA 와 다이나믹 UI 웹 페이지를 만들기 위해 만들어졌다. 그러므로 직접 DOM 을 수정하는 것은 트렌드가 맞지 않다. DOM 조작이 빈번하게 발생하게 되고, 그 변화를 적용하기 위해 브라..

BFF ( Backend for Frontend ) with GraphQL

요즘 사용하는 App 에서는 클라이언트 - 서버 통신에 REST API 를 사용합니다. 하지만 API 가 데이터를 오버패치/언더패치 하는 등 속도 저하를 야기할 수 있습니다. 이를 방지하고자 BFF ( Backend for Frontend ) 패턴에 대해 알아보겠습니다. 다이어그램을 보면, 1. 클라이언트는 BFF 요청을 보냅니다. 2. BFF 는 내부 서비스들과 필요한 데이터를 수집합니다. 3. 데이터를 클라이언트에게 반환합니다. 대충 이런 데이터 흐름관계가 생김을 우선 이해하자. 이런 데이터흐름에 BFF를 통해 데이터 가공 등을 통해 클라이언트에게 유의미한 데이터만 전송해주는 등 데이터 간소화로 속도향상을 얻을 수 있다. 그렇다면 BFF는 무조건 사용하는 것이 유리할까? 그렇지 않다. BFF 를 사용..

[React] 브라우저 / 모바일 체크 후 라우터 분기처리 하기

브라우저 환경과 모바일 환경에서의 페이지 분기를 처리를 해보자. npm i react-device-detect 해당 라이브러리를 설치하면 대표적으로 사용할 수 있는 4가지를 사용해보자. import { BrowserView, MobileView, isBrowser, isMobile } from 'react-device-detect' 먼저 isBrowser , isMobile 은 boolean 형태로 return 되며 조건부 렌더링에 따라 화면 렌더링이 가능하다. function App() { return ( {isMobile ? ( ) : ( )} ); } 필자는 해당방법보다는 BrowserView, MobileView 로 분기처리 하는 것을 좀 더 선호한다. import { BrowserView, Mo..

[React] Route / PrivateRoute(ProtectedRoute)

React 에서 Router 를 우선 사용해보자. Router 를 사용하기 위해 npm 모듈을 설치한다. npm i react-router-dom /router/Router.tsx 파일을 작성한다. import MainLayout from 'components/common-components/Layouts/MainLayout' import { NotFoundView } from 'components/common-components/NotFoundView' import Loggin from 'components/component/sign/Loggin import { BrowserRouter, Routes, Route } from 'react-router-dom' export default function ..