프론트엔드 개발자 엄성준 블로그

React 프로젝트의 성능 최적화를 위해 React Core 라이브러리를 react-vendor라는 별도 번들로 분리했습니다. React Core 라이브러리를 왜 분리했을까?React Core 계열 라이브러리를 별도의 react-vendor 청크로 분리했습니다.// vite.config.tsbuild: { rollupOptions: { output: { // react 코어 계열만 별도 vendor 청크로 분리 manualChunks(id) { if (/node_modules\/(react|react-dom|scheduler|react-router|react-router-dom)\//.test(id)) { return 'react-vendor'; ..

문제를 발견한 계기오토위니 통합검색 페이지는 검색 결과가 표시된 뒤 다음 페이지가 존재하면 하단에 More search results 버튼(이하 More 버튼으로 표시)이 노출되고, 이 버튼을 누르면 다음 페이지의 검색 결과를 이어 붙이는 무한스크롤형 리스트입니다. 그런데 페이지를 확인하던 중 이상 현상을 발견했습니다. 검색 리스트는 아직 비어 있는데, More 버튼만 먼저 떠 있는 것이었습니다. 원인을 디버깅해 보니 이 페이지는 메인 검색 API 외에 보조 API(리스트 중간에 끼워 넣는 추천 매물)를 함께 호출하고 있었고, More 버튼의 노출 조건은 메인 쿼리의 isLoading만 보고 있었습니다. 보조 API 응답이 늦어지면 리스트 병합은 미뤄지는데 버튼 조건은 이미 참이 되어, 버튼이 리스트보다..

🌍 React i18n 다국어 처리 최적화, 실제 적용기Autowini 서비스를 개발하면서 다국어(i18n) 지원을 위해 react-i18next를 도입해 사용하고 있었습니다.처음에는 번역 JSON 파일을 import해서 사용하는 방식으로 구축했지만, 프로젝트가 커질수록 청크 파일 크기 증가와 초기 로딩 성능 저하 문제를 겪게 됐습니다. 그래서 언어 처리 방식을 아예 바꾸고 i18n 번들 최적화를 적용했습니다. 그 과정을 공유해 보려고 합니다.📌 기존 방식: import로 언어 번들 포함처음에는 아래와 같이 다국어 JSON을 import해서 resources에 직접 넣는 방식이었습니다.import ko from './locales/ko/translation.json';import en from '...

오늘 React Context를 톺아보려는 이유는 많은 기업에서 React를 사용하면서 Props 전달이 필요한 상황에서 Context를 적극 활용하고 있다는 생각이 들어서입니다.이 글에서는 공식 문서(React v18.3.1)를 참고해 Context의 개념과 사용법을 정리해 보려고 합니다.https://ko.react.dev/learn/passing-data-deeply-with-context Context를 사용해 데이터를 깊게 전달하기 – ReactThe library for web and native user interfacesko.react.dev React Context는 왜 등장했을까요? React를 사용해 본 사람이라면 부모 컴포넌트에서 자식 컴포넌트로 Props를 전달하는 과정을 경험해 ..

WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.현재 블로그의 콘텐츠는 WiniLogis 관리자 사이트를 통해 관리되지만, 단순 텍스트만 입력할 수 있다는 문제가 있어 다른 플랫폼에서 운영하는 블로그에 비해 가독성이 떨어지는 문제가 있었습니다. WiniLogis 관리자의 블로그 글 작성 시 가독성 문제를 해결하기 위해, 텍스트 에디터를 도입하여 글을 편집할 수 있도록 개선한 방법에 대해 작성하려고 합니다.먼저 React 프로젝트와 잘 어울리는 텍스트 에디터를 찾기 위해 여러 정보를 조사했습니다. 아래 글을 통해 다양한 텍스트 에디터의 종류를 확인하고, 각 에디터의 장단점을 비교하여 최종적으로 적용할 에디터를 결정했습니다.https://code-b.dev/bl..

웹 브라우저 접속 시 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분을 통해 분기처리를 해야 하는 로직을 작성해야 했습니다. const navInfo = performance.getEntriesByType( "navigation" )[0] as PerformanceNavigationTiming; console.log(navInfo); console.log(navInfo.type);먼저 navInfo의 console.log입니다.navInfo 데이터에서 제가 사용한 값은 type 속성입니다.type은 아래와 같은 규칙을 따릅니다.링크이동: navigate뒤로 가기: back_forward새로고침: reload이 정보를 활용해서 분기처리할 생각입니다.

먼저 기획서에서 모바일 화면일 때 3줄 이상의 문장일 경우 Read more 버튼이 보이게 해 달라는 요청이었습니다.저는 이 요구사항을 충족시키기 위해 모바일일 경우 특정 길이 이상일 때 Read more 버튼이 보이게 직접 구현했었습니다.하지만 이때 문제점은 영어와 한글이 섞여있거나 A, b와 같이 문자열의 너비 차이 등등 여러 가지 문제 점이 등장했습니다. 이 문제를 해결하기 위해 구글 검색을 정말 많이 했었는데 딱히 마음에 드는 해결방법을 찾지 못하던 중이었습니다. 하지만 계속된 노력 끝에 WiniLogis에서 사용 중인 기술스택에 적합한 라이브러리를 찾게 되었습니다.https://www.npmjs.com/package/react-show-more-text react-show-more-textThe..

오늘 회사에서 차량의 도막을 입력받는 input의 validation을 검증하던 도중 조건이 아래와 같았습니다. - 자릿수(length)는 5이하 - e(지수), 문자,. 금지 위의 조건들을 충족하기 위해서 input type number를 vailidation 하는 건 까다롭다고 생각이 들어서 input type을 text로 지정한 뒤 문자열의 최대 길이는 maxLength 효과를 이용했고 다른 조건들은 정규식을 이용했습니다. 회사에서는 jsp + vue.js를 이용해서 구현했지만 회사 코드를 공개할 수 없어서 집에서 리액트를 이용해서 혼자 복습해 보았습니다. import React, { useState } from "react"; const YourComponent = () => { const [in..

ScrollToTop.tsx 생성 import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const ScrollToTop = () => { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }; export default ScrollToTop; 이후 main.tsx 즉 최상위 component에서 페이지 component들을 감싸게 삽입하면 완료 import ScrollToTop from './shared/ScrollToTop'; ReactDOM.createRoot(docum..

우리 팀의 프로젝트는 Front는 React -- ts를 통해서 구성하고 Back은 Spring boot를 통해서 구상하기로 하였다. Back-end 분들은 작업 Tool로 Intellij를 이용하시고 Front는 VScode를 이용하기로 하였다. 먼저 Project를 구축하기 위해 https://start.spring.io/ 접속하였다. 예전에 김영한 선생님 강의를 볼 때 제외하고 처음이었다. Group명을 제외하고 나머지는 이렇게 작성한 듯싶다. 그 후 GENERATE를 통해서 파일을 내려받았다. 그 후 아래의 링크의 내용을 적어주신 분의 글을 참고하여서 개발환경을 구축하였는데 https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99..