리액트를 배포하려면 npm run build 를 해야하고, 그 결과로 나온 build 된 js 파일이 생성되게 된다.근데... 이 번들이라고 하는 js 파일의 크기가 크면,SEO 의 단점이라고 할 수 있는 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리가 중요해지게 됨. 종종 이 번들 사이즈를 검토해주어야 하는데, 이게 얼마나 큰지 또 어디를 확인해야하는지를 어떻게 알 수 있을까? ...흔히 알려져 있는 빌드 파일 분석 툴인 webpack-bundle-analyzer 가 있다. 직관적인 시각 요소를 제공해주지만.. 이거는 또 eject 를 해야하는 위험이 있고,한 번 eject 를 해버리면 되돌리기가 어려워진다. 여기서 잠깐. Ejecteject 의 장점- CRA(Create-React-App) 에서 ..

// 객체 생성let dynamicVars = {};// 동적으로 변수명 생성for (let i = 0; i  이렇게 무지성 변수도 선언할 수 있고,${i} 대신 기존에 선언해두었던 변수들을 사용할 수도 있다. 나의 경우에는 배열 안의 값에 해당하는 데이터의 검증한 결과를 저장해둬야 해서 동적 변수를 구현하게 되었음. 예를 들면 그리드안에 배열[] 안에 있는 값과 이름이 같은 컬럼에 데이터를 확인하는 일이다.그때는 아래와 같이 변형해서 사용할수도 있다. const checkColumns = ['Nation', 'Dept', 'Name', 'Age'] _.forEach(dataList, (row, index) => { let dynamicVars = {}; // 동적으로 변수명 생성 for (let i ..

Public 디렉토리 와 src 디렉토리의 차이점 Public 디렉토리- 정적 파일을 넣는 디렉토리 (index.html을 비롯한 html 파일, img 파일 등..)   * 파일이 후처리(post-process) 되거나 경량화(minify) 되지 않는다.   * 파일 경로를 잘못 입력하거나, 파일이 존재하지 않을 경우에 컴파일 단계에서 오류가 발생하지 않고, 사용자가 접근할 때 404 오류를 응답하게 된다.   * 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함     => 환경 변수를 사용하면 어느정도 해결이 가능하긴 하다.. src 디렉토리- 개발하면서 작업하는 파일의 대부분을 넣는 디렉토리 (index.js, 그 외 리액트 컴포넌트 같은 js 파일, css 파일 등....

공식 페이지 One, a React FrameworkOne is a React framework focused on simplicity that lets you target both web and native at once with a single Vite plugin.onestack.dev 내가 본 유투브 영상https://www.youtube.com/watch?v=ZJH4bKkwo90 VITE 빌드 툴이 기반인 리액트 프레임워크..(리액트 프레임워크라는 단어가 어색하기는 하지만..) 정말 말 그대로 이 프레임워크 하나면 풀스택 개발이 가능하다고 한다.의심하면서 유투브 동영상을 보니 쿼리짜는 부분까지 프레임워크 안에 기재되어 있음;; 백엔드 연결 부분을 라이브러리 처럼 제공하고 있을 뿐만 아니라쿼리 부..

c# 개발을 해본 사람들은 방대해지는 코드를 깔끔하게 정리해서 보기 위해 Region 이라는 기능을 쓴다.리액트에서도 코드가 길어지니 문단별 접기 말고 내가 지정한 Region 만큼만 접고 펴고를 하고 싶은데..React 에서는 어떤 식으로 진행해야 할까? 개발 환경(intelliJ, vsCode) 에 따른 사용 방법에 대해 알아보도록 하겠다. 우선..#region 이란?내가 코드를 접고 펴고 싶은 부분의 영역을 지정해주는 것!#region 을 사용하게 되면 #endregion 으로 지시문을 종료 해야하며, visual studio 에서 #region에서 바로 다음으로 나오는 #endregion까지의 코드를 확대, 축소하며 작업을 진행할 수 있게 해준다. 1. intelliJ에서 사용하는 방법  //re..

React 19 Beta – ReactThe library for web and native user interfacesreact.dev 일부 해석 발췌 React 19의 새로운 기능Action리액트 앱의 일반적인 사용 사례는 데이터 변화를 수행한 다음 응답으로 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 이름을 변경하기 위해 양식을 제출하면 API 요청을 한 다음 응답을 처리합니다. 과거에는 보류 상태, 오류, 낙관적 업데이트 및 순차적 요청을 수동으로 처리해야 했습니다. 예를 들어 usestate에서 보류 및 오류 상태를 처리할 수 있습니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); con..

예를 들어보자. 어떤 값을 입력할 때 해당 단어가 포함된 단어를 제공하는 기능을 구현하는 상황. = 검색엔진 검색어 추천 결과 같은 기능. 이럴 때 글자가 변할 때마다, 어떤 function 이나 API를 호출하여야 하는데.. 너무 잦은 함수 호출이 일어난다. 물론 프론트엔드와 백엔드에서 성능 최적화가 되어 있으면 문제가 덜 일어날 수도 있으나.. 그래도 만일의 문제를 제거해주는 것이 중요할 것이다. 이때 보통 디바운스 Debounce 와 쓰로틀링 Throttling 의 개념을 적용하게 되는데 이 두가지의 공통점과 차이점에 대해 적어보고자 한다. 공통점 디바운스와 쓰로틀링의 공통점은.. 1. 함수가 너무 많이 호출되지 않도록 제어하는 테크닉의 종류이며, 2. 성능 최적화와 리소스 관리에 많이 사용되는 개..

개발하다보면 분기 처리를 하는게 필수적이어진다. 이때 switch를 사용하는 게 나은지 else if 의 사용이 나은지 고민이 될 때가 있다. 보통 코드 정리는 switch가 한 눈에 보기 쉬운 편이고, 개인적으로 사용하기에는 if~else 문이 처리하기가 쉬운 것 같다. 그래도 코드 가시성 및 개발자 편의성을 고려하지 않을 수는 없지만... 제일 중요한 건 프로그램 성능이라... 두 가지의 로직적인 차이를 정리해보고자 한다. switch문 변수를 미리 입력 받아 두고, 미리 정해놓은 값들과 일치 여부를 판단하여 control flow를 처리 if~else문 boolean으로 결과 값이 나오는 조건문의 결과에 따라 true, false 두가지 control flow를 가진다. 그러므로 . . . if~e..

리액트에서 number 형태의 숫자를 회계 단위 형태로 나타내고 싶었다. ex) 1000 일 경우 1,000 로 나타내고 555666777 일 경우 555,666,777 나타냄. case 를 두가지로 구별하여 개발해보았다. input 값이 "1000" 일수도 있고 1000 일수도 있으니.. CASE1. 숫자 타입의 데이터를 가공하는 경우 Number.prototype.format = function () { if (this == 0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = this + ""; while (reg.test(n)) n = n.replace(reg, "$1" + "," + "$2"); return n; }; // test var num = 12..

React 프로젝트를 개발하다보면, 배포 환경?에 따라 다르게 환경 변수를 셋팅해야하는 case가 발생한다. 예를 들면, 보통 API 주소를 환경 변수로 많이 셋팅해두고는 하는데.. 운영 API 주소와 개발 API 주소를 배포 환경에 따라 다르게 셋팅해두고 싶은 case가 딱 이에 해당한다. React :: 환경변수(.env) 셋팅하기 토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. bornatnoon.tistory.com 우선 기초 셋팅 방법을 첨부해본다. (.env 파일을 하나만 쓰는 케이스) 케이스에 따른 .env 설정 방법 ※ 참고. 리액트 프로젝트 생..

토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. 그럼에도.. CRA 공식 문서에서는 다음과 같은 주의 사항을 전달한다. WARNING : Do not store any secrets (such as private API keys) in your React App 비공개 API 키 같은 값을 저장하는 것을 지양하는 이유는 환경 변수가 '빌드'에 내장되어 누구든지 이를 확인할 수 있기 때문. 1. .env 파일 생성 최상단 루트에 .env 파일을 생성해주도록 하자. .env 파일은 꼭 프로젝트 파일 최상단에 있어야 함. 2. .gitignore 설정 .env .e..

응용 프로그램에서 하던 "메뉴관리"의 개념을 웹에도 도입하는 것이 목적이었음. 사용자(관리자)는 프로그램 내에서 메뉴와 관련된 데이터를 DB에 insert 할 수 있고, 이렇게 만들어진 Data 로 라우팅에도 적용되고, 메뉴바에도 적용되는.. 그런 형태가 최종이었음. React 생명주기 특성 상 어렵다는 답변을 받기만 하던 찰나.. 정 안되면 이 라우팅 시스템을 정리하거나 쉽게 만들어보자는 마음으로 시작하게 되었다. 첫 아이디어 는 react-router-dom v5 문법으로 구현한 아래의 모습 2023.11.03 - [FRONTEND/React] - React :: (Next.js 사용 없이) 해당 폴더의 파일을 동적 라우팅. 아무래도 가장 최신 버전을 써야한다는 생각도 있었고, 외주업체에서 만들어준 ..