티스토리

나만의 개발 일기
검색하기

블로그 홈

나만의 개발 일기

just-take-the-first-step.tistory.com/m

★개발일기★ 님의 블로그입니다.

구독자
1
방명록 방문하기
공지 - 저작권 관련 모두보기

주요 글 목록

  • [Vanilla-extract] Zero-runtime CSS CSS-in-JS CSS-in-JS는 많은 인기를 얻었습니다. 현재 시점까지도.. 그 이유는 당연 React 때문일 겁니다.그래서 우리는 Emotion, styled-componets 를 사용해본 경험이 있을 겁니다. 그럼 우린 왜 사용하고 있었을까요?CSS모듈도 지역 스코프 스타일을 제공하지만, CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정합니다.이로써, 클래스 이름이 충돌나는 일은 없을 것이고, 어떤 CSS가 적용되었는지 우리는 한 눈아 알기 쉬울겁니다.또한, CSS에서 JS 문법을 사용할 수 있어서 props, state 등을 사용하여 중복된 코드를 줄일 수 있고, 컴포넌트 파일에 관련 코드들을 함께 작성이 가능하게 됩니다. 모든 기술에는 장점만 존재하지 않습니다. 단점은 무엇일까요? .. 공감수 0 댓글수 0 2025. 2. 20.
  • [번역] 리렌더링을 수정하기 전에 느린 렌더링을 수정하세요. 성능은 심각한 문제이며, 우리는 가능한 빠르게 앱을 만들어야한다.이를 수행하는 방법은 최적화의 효과성뿐만 아니라, 코드의 복잡성(미래에 얼마나 빨리 개선 및 변경 할 수 있는지) 도 큰 영향을 미칩니다.React 최적화에 대해 사람들이 많이 언급하는 것 중 하나는 리렌더링 최적화입니다.function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount((c) => c + 1) return {count}}우리가 위 버튼을 클릭할 때 마다 우리는 리런데링이 일어난다고 생각합니다. 리렌더링은 무엇일까요?  리렌더링이란 무엇인가요?  React가 처음 출시되었을 때, 많은 사람들이 Virtual DOM 덕.. 공감수 1 댓글수 1 2025. 2. 5.
  • 중복 호출 방지( 따닥 이슈) 흔하디 흔한 클릭버튼우리가 사용하는 대부분의 서비스는 클릭이다.클릭하여 돈을 송금하거나, 클릭하여 필요한 것들을 결제하거나.. 대부분 그렇다..하지만, 잘 생각해보면 개발자들은 이에 주의해야 할 점이 많다.function Button() { const handleClick = () => { } return 버튼}기본적인 버튼에 클릭이벤트를 다는 방법이다.흔히 말하는 '광클' 시 해당 함수가 무한정 실행된다.만약 처리를 안했다면, 돈을 송금할 때 여러번 중복 송금이 되거나, 물건 결제가 여러번 될 수도 있다. Debounce 는 안전할까? 이를 막는 방법은 Debounce 로 많은 글 및 chatgpt 가 알려주고 있다.import React, { useEffect, useRef } from "r.. 공감수 2 댓글수 1 2024. 11. 22.
  • [Recoil] 지원 중단 React 단짝React 에 있어서 상태 관리 라이브러리 종류도 다양하게 있고, 항상 옆을 지켜왔습니다.우리가 주로 사용하는 Redux, Mobx, Recoil 3대장 중에 Recoil은 2년전부터 업데이트가 잠정 중단됬다.  Recoil 문제점Recoil 은 현재 수 많은 닫히지 않은 이슈와, 문제들이 나열되어 있지만, 해결 되고 있지 않다.큰 이슈를 살펴봤을 때, 가장 핵심적인 문제는 다음과 같다. 메모리 누수 이슈- 자바스크립트는 참 편하다. 가비지컬렉션을 타 개발자보다 신경 쓰지 않아도 되서.. 가비지 컬렉션은 아래 글을 참고! [Garbage Collection]1. 가비지 컬렉션이란? - 할당된 메모리를 관리하는 기능 - 사용되지 않는 메모리를 식별하고 해제하여 프로그램의 메모리 누수를 방지하.. 공감수 1 댓글수 1 2024. 10. 23.
  • useEffect / useLayoutEffect useEffect VS useLayoutEffect 둘의 가장 큰 차이점은 useEffect 는 비동기적으로, useLayoutEffect 는 동기적으로 동작한다는 것이다. useEffect 는 렌더링이 끝난 후 수행, useLayoutEffect 는 렌더링 전에 수행한다. useLayoutEffect 는 렌더링 파이프라인에 영향을 줄 수 있다는 점을 고려해야 한다. 하지만, 위와 같은 현상만을 목적으로 이 글을 포스팅 하지는 않았다. useEffect 는 업데이트 차단을 방지하기 위해 페인트 이후에 동작해야 하지만, 실제로는 페인트 후에 useEffect 가 실행된다는 보장이 없다는 것이다. useLayoutEffect 에서 상태를 업데이트하면 동일한 렌더링의 모든 useEffect 가 페인트 전에 실.. 공감수 0 댓글수 0 2023. 12. 23.
  • [Sentry] 프론트엔드 에러 추적하기 앞서... 우리 개발자들은 개발도 중요하지만, 버그 처리 또한 중요하다. 버그는 서비스 매출 하락, 신뢰를 잃는 등 크리티컬 한 문제와 엮여 있다. 버그의 원인을 파악하기 전까지는, BE / FE 중 어디에서 발생한 이슈인지 파악이 어렵다. 아무리 QA를 마치고 배포되었다고 해도 예상치 못한 원인의 버그를 마주 할 수 있다. 또한 간헐적으로 발생하는 버그로 사용자들이 버그제보를 해주지 않았고, 개발진들이 프론트 로깅을 하지 않았다면, 버그 유무의 정보를 영영 얻을 수 없게 될 것이다. 프론트엔드 오류 프론트엔드에서는 데이터오류, 화면오류, 네트워크 이슈, 크로스 브라우징, OS 업데이트 등의 오류가 있을 수 있다. 데이터, 화면 같은 경우에는 대부분 QA나 스테이징 환경에서도 충분히 재현된다. 하지만 크.. 공감수 0 댓글수 0 2023. 8. 24.
  • [Redux] State 초기화 리덕스 상태값 초기화 할 일이 작업하다보면 생각보다 많아 작성 interface TestType { testParam: string } const initialState: TestType = { testParam: '', } export const testSlice = createSlice({ name: 'testSlice', initialState, reducers: { // 초기화 reset: () => initialState, }, }) 공감수 0 댓글수 0 2023. 8. 16.
  • [React] 성능 최적화 전략 메모이제이션 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 발생 할 때 재사용하여, 불필요한 리렌더링을 방지하고, 렌더링 성능을 향상시킨다. useCallback() useCallback 을 통해 함수를 만든다면, 해당 함수를 저장해두는 역할을 한다. 아래 예제의 App() 이 재실행되면 해당 함수가 재생성 되지 않는다. 첫번째 인자로 function , 두번째 인자로 useEffect 와 같이 dependency 배열을 넣는다. 빈배열 일 경우, 어떠한 경우에도 해당 함수가 변경되지 않음을 뜻한다. function App() { const [callbackTest, setCallbackTest] = useState(false) // useCallback() const on.. 공감수 0 댓글수 0 2023. 8. 8.
  • 리액트 vs 바닐라JS 1. 프레임워크가 할 수 있는 일은 모두 바닐라 JS 로 가능하다.그럼에도 불구하고 왜 프레임워크를 사람들이 사용할까..? 2. 데이터 변화의 적용이 편리하다.const element = document.querySelectorAll('.element');let innerText = '이걸로 다 바꿔줘'element.innerText = innerTextinnerText = '또 다 바꿔줘'만약 바닐라 JS 에서 데이터가 변해서 DOM 을 업데이트하려고한다면, 두 가지의 절차가 필요하다 - 바꾸려는 데이터가 쓰일 DOM 엘리먼트를 가져온다. - 변경 내용을 적용위의 코드에서 두가지 절차를 진행 한 후 '이걸로 다 바꿔줘' 는 DOM 을 업데이트 시켰지만, '또 다 바꿔줘' 라는 데이터는 변경 된 것만으로.. 공감수 1 댓글수 0 2023. 6. 19.
  • [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. 리렌더링은 언제 일어나는가? 리렌더링이란, 앞서 발생한 렌더링이 다시 렌더링이 되는 현상을 뜻하는데.. 공감수 0 댓글수 0 2023. 6. 8.
  • [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('.. 공감수 0 댓글수 0 2023. 5. 3.
  • [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 .. 공감수 0 댓글수 0 2023. 4. 28.
  • [React] Virtual DOM React 는 Virtual DOM 을 사용한다. 이 Virtual DOM 은 실제 DOM을 조작하는 방식이 아닌, 두개의 DOM 을 비교해 달라진 부분을 리렌더링 시켜주는 방식으로 작동한다. 물론 Virtual DOM 을 사용하지 않고 직접 DOM 을 바꾸는 방법이, 규모가 작고 정적인 이전의 웹 어플리케이션 이라면, 일반 DOM 을 직접 변경하는 것이 성능이 더 좋다. 그럼에도 불구하고 React 가 Virtual DOM 을 사용하는 이유는 무엇일까? Virtual DOM 을 사용하는 이유 React 는 대규모 SPA 와 다이나믹 UI 웹 페이지를 만들기 위해 만들어졌다. 그러므로 직접 DOM 을 수정하는 것은 트렌드가 맞지 않다. DOM 조작이 빈번하게 발생하게 되고, 그 변화를 적용하기 위해 브라.. 공감수 0 댓글수 0 2023. 3. 17.
  • BFF ( Backend for Frontend ) with GraphQL 요즘 사용하는 App 에서는 클라이언트 - 서버 통신에 REST API 를 사용합니다. 하지만 API 가 데이터를 오버패치/언더패치 하는 등 속도 저하를 야기할 수 있습니다. 이를 방지하고자 BFF ( Backend for Frontend ) 패턴에 대해 알아보겠습니다. 다이어그램을 보면, 1. 클라이언트는 BFF 요청을 보냅니다. 2. BFF 는 내부 서비스들과 필요한 데이터를 수집합니다. 3. 데이터를 클라이언트에게 반환합니다. 대충 이런 데이터 흐름관계가 생김을 우선 이해하자. 이런 데이터흐름에 BFF를 통해 데이터 가공 등을 통해 클라이언트에게 유의미한 데이터만 전송해주는 등 데이터 간소화로 속도향상을 얻을 수 있다. 그렇다면 BFF는 무조건 사용하는 것이 유리할까? 그렇지 않다. BFF 를 사용.. 공감수 0 댓글수 0 2023. 2. 13.
  • [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.. 공감수 0 댓글수 0 2023. 2. 9.
  • [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 .. 공감수 0 댓글수 0 2022. 12. 26.
  • React ScrollMagic Example ScrollMagic 설치 npm install scrollmagic src/components/ScrollMagic.tsx import Magic from 'scrollmagic' import styled from 'styled-components' import { useEffect } from 'react' import classes from './ScrollMagic.module.css' const ScrollMagic = () => { const controller = new Magic.Controller() useEffect(() => { new Magic.Scene({ triggerElement: `.${classes.redBox}`, }) .setClassToggle(`.${classes.r.. 공감수 0 댓글수 0 2022. 12. 7.
  • Typescript useRef 여러개 사용하기 반복문에 마다 ref 를 주고 싶을 때 어떻게 작업을 해야 할까? ( 오류코드 ) import { useRef } from 'react' import classes from './TopNavigator.module.css' const TopNavigator = () => { const menuRef = useRef(null) return ( {[0, 0, 0].map((_, index) => ( (menuRef.current[index] = e)} > 대메뉴{index + 1} 중메뉴1 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴2 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴3 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴4 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴5 소메뉴.. 공감수 0 댓글수 0 2022. 12. 6.
  • Next Eslint / Prettier ( with Typescript ) 설정하기 1. Next 프로젝트 생성 npx create-next-app@latest * 기본적인 프로젝트 명 , lint 사용 여부 등을 고른 후에 프로젝트를 만들어주자. 2. Eslint 와 Prettier 를 함께 사용하기 위해 다음을 설치합니다. npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier 3. 프로젝트 생성될 때 생긴 .eslintrc.json / js 를 작성합니다. module.exports = { env: { // 전역 변수 사용을 정의합니다. 추가하지 않으면 ESLint 규칙에 걸리게 됩니다. browser: true, es6: true, node: true, }, extends: [ 'eslint:re.. 공감수 0 댓글수 0 2022. 12. 5.
  • React 상태 관리 라이브러리 프론트엔드 관점에서 상태 관리는 매우 중요하고 필수적이다. 리액트는 기본적으로 state, props 로 상태를 관리한다. 리액트의 데이터 흐름은 기본적으로 부모 -> 자식 이라는 흐름을 가지는데, 자식에서 부모의 상태를 바꾸려면 props 를 넘겨줘야한다. 이를 반복하다보면 props depth가 증가해 불필요한 리렌더링이 일어나 비효율적이다. 즉 상태관리 라이브러리를 사용하자! Redux * Redux는 store 에 모든 상태를 저장한다. store는 오직 하나만 가질 수 있으며, 외부요소이고 리액트 내부에 접근할 수 없다. 이로써 생기는 강점은 하나의 객체 트리를 가지므로 디버깅이 용이하다. * store 내부 상태는 action 을 통해서만 변경이 가능하다. 모든 상태(state) 들이 하나의 .. 공감수 0 댓글수 0 2022. 12. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.